Giter Club home page Giter Club logo

vscode-pets's Introduction

VS Code Pets

icon

Puts a small, bored cat, an enthusiastic dog, a feisty snake, a rubber duck, or Clippy πŸ“Ž in your code editor to boost productivity.

Visual Studio Marketplace Version

screenshot

Installation

Install this extension from the VS Code marketplace.

OR

With VS Code open, search for vscode-pets in the extension panel (Ctrl+Shift+X on Windows/Linux or Cmd(⌘)+Shift+X on MacOS) and click install.

OR

With VS Code open, launch VS Code Quick Open (Ctrl+P on Windows/Linux or Cmd(⌘)+P on MacOS), paste the following command, and press enter.

ext install tonybaloney.vscode-pets

Using VS Code Pets

Congrats on installing joy! Enjoy interacting with these cute pixelated pets. Read below to get a full understanding of this extension. Not convinced? Watch our extension spotlight on Visual Studio Code.

Available commands are prefaced with Pet Coding in the Command Palette:

  • Start pet coding session
  • Spawn extra pet
  • Throw ball
  • Roll-call
  • Remove pet
  • Remove all pets

Configure vscode-pets in the VS Code settings

Open the setting panel with Ctrl+, on Windows/Linux or Cmd(⌘)+, on MacOS. In the search bar, enter β€œvscode-pets” to see all available options.

Set a default color, size, pet type, position, and theme when you open a Pet Panel.

  • Pet Color: black, brown, green, yellow, gray, red, white
  • Pet Size: nano, medium, large
  • Pet Type: cat, crab, clippy, cockatiel, dog, rocky, rubber duck, snake, totoro, zappy
  • Position: panel, explorer
  • Theme: none, forest, castle, beach

screenshot2

Restrictions

  • Snake can only be green
  • Rubber duck & Zappy can only be yellow
  • Ferris the crab can only be red
  • Rocky can only be gray

Start pet coding session to show your pet

Open the command palette with Ctrl+Shift+P on Windows/Linux or Cmd(⌘)+Shift+P on MacOS.

Run the "Start pet coding session" command (vscode-pets.start)

Playing

Pets will interact with your mouse pointer within the open Pet Panel. Additionally, pets will display text bubbles as you move your mouse over the pet.

screenshot3

Adding extra pets

Run the "Spawn additional pet" command (vscode-pets.spawn-pet) and select the pet type and color.

Extra pets will not persist between closing and restarting VS Code.

pet-select

Throwing a ball

Play catch with your pet! Run the "Throw ball" command (vscode-pets.throw-ball).

  • Rocky will not run & catch a ball. Have you ever seen a rock run after a ball? Neither have we.

screenshot4

Roll-call with your pets

Get a description of your current pets within VS Code. Run the "Roll-call" command (vscode-pets.roll-call) from the command palette.

pet-roll-call

Removing a single pet or multiple pets

You can remove all pets (except the 1 configured) by running the "Remove all pets" command (vscode-pets.delete-pets) from the command palette.

You can remove specific pets by running the "Remove pet" command (vscode-pets.delete-pet) from the command palette.

pet-remove

Themes

Configure vscode-pets.theme to "forest" and let your pets play in a spooky forest.

forest

Set vscode-pets.theme to "castle" for them to roam the ramparts!

castle

Set vscode-pets.theme to "beach" for your friends to play by the ocean.

beach

Contributing

Ideas and discussion

Have an awesome idea for a new feature? Please open an issue describing your idea! You can also help by reviewing some of the existing ideas and leaving your opinion.

Reporting bugs

Something is not working as it should? Please open an issue giving as much information as you can. Writing an effective bug report is a valuable skill as a Software Engineer, refer to the given example below for advice.

Title - Clearly summarize what the bug is with specific details.
Summary - If the title is too long, include a summary with additional details.
Visual/Screenshot - A picture is always worth the time. Include one if possible.
Expected/Actual Results - Explain what you expected to happen and what actually happened.
Steps to Reproduce - The steps to follow should be comprehensive, easy to understand, and short. We want to experience the bug first-hand.
Environment - Share the current version information by copying from Help and clicking About.

Version: 1.72.0  
Commit: 64bbfbf67ada9953918d72e1df2f4d8e537d340e  
Date: 2022-10-04T23:20:47.539Z
Electron: 19.0.17
Chromium: 102.0.5005.167
Node.js: 16.14.2
V8: 10.2.154.15-electron.0
OS: Linux x64 5.19.12-200.fc36.x86_64
Sandboxed: No

Write code

Want to contribute to vscode-pets? Feel free to fork the repository and submit a pull request.

Drawing and Animations

If you want to contribute improvements to the animations, additional pet colors or even new pets, clone the repository and work in the media/ folder.

Most drawings are done in aseprite because you can edit GIFs directly. However, you are free to use any tool to make the animations. Animations should be 8 frames per second. The style of the extension is to have pixelated creatures (although not limited to an 8-bit color canvas).

Don't worry if you don't have enough coding experience to add the changes to the extension to support the new animations, we can help you with that.

The minimum set of behaviors is:

  • standing
  • walking
  • running/chasing
  • holding green ball

Testing the changes

  • Run npm install.
  • Run npm run compile.
  • Go to the debug panel on the sidebar and launch the development version with the extension loaded (first option in the debug profiles).
  • Refer to VS Code Extension Documentation for additional resources.

Credits

The cat and dog media assets for this extension were licensed from itch.io.

Marc Duiker created the Clippy, Rocky, Zappy, rubber duck, snake, cockatiel, and Ferris the crab media assets.

Karen Rustad TΓΆlva designed the original concept of Ferris the crab.

Thank you

Thanks to all the contributors to this project:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.