Merge pull request #663 from tonybaloney/winter

Add winter theme and differentiate between light and dark high-contrast themes correctly

README.md

@@ -18,7 +18,7 @@
 [![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/tonybaloney.vscode-pets?logo=visualstudio)](https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets&WT.mc_id=python-17801-anthonyshaw)
 [![Visual Studio Marketplace Downloads](https://img.shields.io/visual-studio-marketplace/d/tonybaloney.vscode-pets?logo=visualstudio)](https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets&WT.mc_id=python-17801-anthonyshaw)
 
-![screenshot](https://github.com/tonybaloney/vscode-pets/raw/main/docs/source/_static/screenshot.gif)
+![screenshot](https://github.com/tonybaloney/vscode-pets/raw/main/docs/source/_static/winter.gif)
 
 ## Installation
 
@@ -60,6 +60,8 @@ Visit the [Crowdin Project](https://crowdin.com/project/vscode-pets) in case you
 
 The cat animations were designed by [seethingswarm](https://seethingswarm.itch.io/catset). The dog media assets for this extension were designed by [NVPH Studio](https://nvph-studio.itch.io/dog-animation-4-different-dogs). 
 
+The winter theme is original artwork by [Kiana Mosser](https://www.instagram.com/kianamosser/) created for VS Code Pets.
+
 The forest theme was designed by [edermunizz](https://edermunizz.itch.io/free-pixel-art-forest). The castle assets were created using artwork by [GuttyKreum](https://guttykreum.itch.io/gothic-castle-game-assets).
 
 [Marc Duiker](https://twitter.com/marcduiker) created the Clippy, Rocky, Zappy, rubber duck, snake, cockatiel, Ferris the crab, and Mod the dotnet bot media assets.

docs/source/usage.rst

@@ -142,3 +142,9 @@ Set ``vscode-pets.theme`` to ``"castle"`` for them to roam the ramparts!
 Set ``vscode-pets.theme`` to ``"beach"`` for your friends to play by the ocean.
 
 .. image:: _static/beach-pose.png
+
+Set ``vscode-pets.theme`` to ``"winter"`` for your pets roam around the snowy mountains.
+
+.. image:: _static/winter.gif
+
+If you find the snowfall too distracting, you can disable special effects in settings.

media/pets.css

@@ -110,13 +110,26 @@ textarea::placeholder {
 	color: var(--vscode-input-placeholderForeground);
 }
 
-#petCanvas{
-	position:fixed; 
-	bottom:0;
-	left:0; 
+#petCanvasContainer {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+#petCanvasContainer canvas {
+	position: fixed;
+	bottom: 0;
+	left: 0;
 	z-index: 3;
 }
 
+#ballCanvas {
+	z-index: 3;
+}
+#effectCanvas {
+	z-index: 4;
+}
+
 img.pet {
 	-webkit-transform: scaleX(-1);
 	transform: scaleX(-1);

package.json

@@ -228,7 +228,8 @@
                             "none",
                             "forest",
                             "castle",
-                            "beach"
+                            "beach",
+                            "winter"
                         ],
                         "default": "none",
                         "description": "Background theme assets for your pets"
@@ -237,6 +238,11 @@
                         "type": "boolean",
                         "default": false,
                         "description": "Throw ball with mouse"
+                    },
+                    "vscode-pets.disableEffects": {
+                        "type": "boolean",
+                        "default": false,
+                        "description": "Disable special effects like snowfall"
                     }
                 }
             }

src/common/types.ts

@@ -79,6 +79,7 @@ export const enum ColorThemeKind {
     light = 1,
     dark = 2,
     highContrast = 3,
+    highContrastLight = 4,
 }
 
 export class WebviewMessage {
@@ -141,4 +142,10 @@ export const ALL_SCALES = [
     PetSize.medium,
     PetSize.large,
 ];
-export const ALL_THEMES = [Theme.none, Theme.forest, Theme.castle, Theme.beach];
+export const ALL_THEMES = [
+    Theme.none,
+    Theme.forest,
+    Theme.castle,
+    Theme.beach,
+    Theme.winter,
+];

src/extension/extension.ts

@@ -85,6 +85,19 @@ function getThrowWithMouseConfiguration(): boolean {
         .get<boolean>('throwBallWithMouse', true);
 }
 
+function getEffectsDisabledConfiguration(): boolean {
+    return vscode.workspace
+        .getConfiguration('vscode-pets')
+        .get<boolean>('disableEffects', false);
+}
+
+function updatePanelDisableEffects(): void {
+    const panel = getPetPanel();
+    if (panel !== undefined) {
+        panel.updateDisableEffects(getEffectsDisabledConfiguration());
+    }
+}
+
 function updatePanelThrowWithMouse(): void {
     const panel = getPetPanel();
     if (panel !== undefined) {
@@ -300,6 +313,7 @@ export function activate(context: vscode.ExtensionContext) {
                     getConfiguredTheme(),
                     getConfiguredThemeKind(),
                     getThrowWithMouseConfiguration(),
+                    getEffectsDisabledConfiguration(),
                 );
 
                 if (PetPanel.currentPanel) {
@@ -346,6 +360,7 @@ export function activate(context: vscode.ExtensionContext) {
         getConfiguredTheme(),
         getConfiguredThemeKind(),
         getThrowWithMouseConfiguration(),
+        getEffectsDisabledConfiguration(),
     );
     updateExtensionPositionContext().catch((e) => {
         console.error(e);
@@ -636,6 +651,10 @@ export function activate(context: vscode.ExtensionContext) {
                 if (e.affectsConfiguration('vscode-pets.throwBallWithMouse')) {
                     updatePanelThrowWithMouse();
                 }
+
+                if (e.affectsConfiguration('vscode-pets.disableEffects')) {
+                    updatePanelDisableEffects();
+                }
             },
         ),
     );
@@ -658,6 +677,7 @@ export function activate(context: vscode.ExtensionContext) {
                     getConfiguredTheme(),
                     getConfiguredThemeKind(),
                     getThrowWithMouseConfiguration(),
+                    getEffectsDisabledConfiguration(),
                 );
             },
         });
@@ -700,6 +720,7 @@ interface IPetPanel {
     updateTheme(newTheme: Theme, themeKind: vscode.ColorThemeKind): void;
     update(): void;
     setThrowWithMouse(newThrowWithMouse: boolean): void;
+    updateDisableEffects(disableEffects: boolean): void;
 }
 
 class PetWebviewContainer implements IPetPanel {
@@ -711,6 +732,7 @@ class PetWebviewContainer implements IPetPanel {
     protected _theme: Theme;
     protected _themeKind: vscode.ColorThemeKind;
     protected _throwBallWithMouse: boolean;
+    protected _disableEffects: boolean;
 
     constructor(
         extensionUri: vscode.Uri,
@@ -720,6 +742,7 @@ class PetWebviewContainer implements IPetPanel {
         theme: Theme,
         themeKind: ColorThemeKind,
         throwBallWithMouse: boolean,
+        disableEffects: boolean,
     ) {
         this._extensionUri = extensionUri;
         this._petColor = color;
@@ -728,6 +751,7 @@ class PetWebviewContainer implements IPetPanel {
         this._theme = theme;
         this._themeKind = themeKind;
         this._throwBallWithMouse = throwBallWithMouse;
+        this._disableEffects = disableEffects;
     }
 
     public petColor(): PetColor {
@@ -754,6 +778,10 @@ class PetWebviewContainer implements IPetPanel {
         return this._throwBallWithMouse;
     }
 
+    public disableEffects(): boolean {
+        return this._disableEffects;
+    }
+
     public updatePetColor(newColor: PetColor) {
         this._petColor = newColor;
     }
@@ -779,6 +807,14 @@ class PetWebviewContainer implements IPetPanel {
         });
     }
 
+    public updateDisableEffects(disableEffects: boolean): void {
+        this._disableEffects = disableEffects;
+        void this.getWebview().postMessage({
+            command: 'disable-effects',
+            disabled: disableEffects,
+        });
+    }
+
     public throwBall() {
         void this.getWebview().postMessage({
             command: 'throw-ball',
@@ -900,12 +936,14 @@ class PetWebviewContainer implements IPetPanel {
 				<title>VS Code Pets</title>
 			</head>
 			<body>
-				<canvas id="petCanvas"></canvas>
-                <canvas id="effectCanvas"></canvas>
+                <div id="petCanvasContainer">
+                    <canvas id="ballCanvas"></canvas>
+                    <canvas id="effectCanvas"></canvas>
+                </div>
 				<div id="petsContainer"></div>
 				<div id="foreground"></div>	
 				<script nonce="${nonce}" src="${scriptUri}"></script>
-				<script nonce="${nonce}">petApp.petPanelApp("${basePetUri}", "${this.theme()}", ${this.themeKind()}, "${this.petColor()}", "${this.petSize()}", "${this.petType()}", ${this.throwBallWithMouse()});</script>
+				<script nonce="${nonce}">petApp.petPanelApp("${basePetUri}", "${this.theme()}", ${this.themeKind()}, "${this.petColor()}", "${this.petSize()}", "${this.petType()}", ${this.throwBallWithMouse()}, ${this.disableEffects()});</script>
 			</body>
 			</html>`;
     }
@@ -943,6 +981,7 @@ class PetPanel extends PetWebviewContainer implements IPetPanel {
         theme: Theme,
         themeKind: ColorThemeKind,
         throwBallWithMouse: boolean,
+        disableEffects: boolean,
     ) {
         const column = vscode.window.activeTextEditor
             ? vscode.window.activeTextEditor.viewColumn
@@ -981,6 +1020,7 @@ class PetPanel extends PetWebviewContainer implements IPetPanel {
             theme,
             themeKind,
             throwBallWithMouse,
+            disableEffects,
         );
     }
 
@@ -1014,6 +1054,7 @@ class PetPanel extends PetWebviewContainer implements IPetPanel {
         theme: Theme,
         themeKind: ColorThemeKind,
         throwBallWithMouse: boolean,
+        disableEffects: boolean,
     ) {
         PetPanel.currentPanel = new PetPanel(
             panel,
@@ -1024,6 +1065,7 @@ class PetPanel extends PetWebviewContainer implements IPetPanel {
             theme,
             themeKind,
             throwBallWithMouse,
+            disableEffects,
         );
     }
 
@@ -1036,6 +1078,7 @@ class PetPanel extends PetWebviewContainer implements IPetPanel {
         theme: Theme,
         themeKind: ColorThemeKind,
         throwBallWithMouse: boolean,
+        disableEffects: boolean,
     ) {
         super(
             extensionUri,
@@ -1045,6 +1088,7 @@ class PetPanel extends PetWebviewContainer implements IPetPanel {
             theme,
             themeKind,
             throwBallWithMouse,
+            disableEffects,
         );
 
         this._panel = panel;
@@ -1153,6 +1197,7 @@ async function createPetPlayground(context: vscode.ExtensionContext) {
         getConfiguredTheme(),
         getConfiguredThemeKind(),
         getThrowWithMouseConfiguration(),
+        getEffectsDisabledConfiguration(),
     );
     if (PetPanel.currentPanel) {
         var collection = PetSpecification.collectionFromMemento(