tonybaloney · tonybaloney · Nov 20, 2022 · Nov 20, 2022 · Nov 20, 2022 · Nov 20, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 All notable changes to the "vscode-pets" extension will be documented in this file.
 
+## [1.18.0]
+
+* Fixed cats sizes when ball caught by @gulyapulya in https://github.com/tonybaloney/vscode-pets/pull/313
+* Added pet interaction, Dynamic throwing! by @Luke-G-Cordova in https://github.com/tonybaloney/vscode-pets/pull/307 and https://github.com/tonybaloney/vscode-pets/pull/314
+
+## [1.17.2]
+
+* Readme Update  by @AnderMendoza in https://github.com/tonybaloney/vscode-pets/pull/305
+* Fix Mod Catching Ball Bug by @Harry-Hopkinson in https://github.com/tonybaloney/vscode-pets/pull/310
+
 ## [1.17.1]
 
 * Change default position by @tonybaloney in https://github.com/tonybaloney/vscode-pets/pull/303

diff --git a/docs/source/_static/throw-ball-with-mouse.gif b/docs/source/_static/throw-ball-with-mouse.gif
diff --git a/docs/source/usage.rst b/docs/source/usage.rst
@@ -78,7 +78,10 @@ You can also use 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.
 
-.. image:: _static/screenshot-4.gif
+Want to challenge your pets to a harder game of fetch? Enable the "Throw ball with mouse" (`vscode-pets.throwBallWithMouse`) option in the settings. 
+Then use the mouse to click and throw the ball:
+
+.. image:: _static/throw-ball-with-mouse.gif
 
 Roll-call with your pets
 ------------------------

diff --git a/media/main-bundle.js b/media/main-bundle.js
@@ -523,7 +523,7 @@ function initCanvas() {
     ctx.canvas.height = window.innerHeight;
 }
 // It cannot access the main VS Code APIs directly.
-function petPanelApp(basePetUri, theme, themeKind, petColor, petSize, petType, stateApi) {
+function petPanelApp(basePetUri, theme, themeKind, petColor, petSize, petType, throwBallWithMouse, stateApi) {
     const ballRadius = calculateBallRadius(petSize);
     var floor = 0;
     if (!stateApi) {
@@ -573,6 +573,7 @@ function petPanelApp(basePetUri, theme, themeKind, petColor, petSize, petType, s
         let startMouseY;
         let endMouseX;
         let endMouseY;
+        console.log('Enabling dynamic throw');
         window.onmousedown = (e) => {
             if (ballState) {
                 ballState.paused = true;
@@ -619,6 +620,7 @@ function petPanelApp(basePetUri, theme, themeKind, petColor, petSize, petType, s
         };
     }
     function dynamicThrowOff() {
+        console.log('Disabling dynamic throw');
         window.onmousedown = null;
         if (ballState) {
             ballState.paused = true;
@@ -668,7 +670,7 @@ function petPanelApp(basePetUri, theme, themeKind, petColor, petSize, petType, s
         ctx.fillStyle = '#2ed851';
         ctx.fill();
     }
-    console.log('Starting pet session', petColor, basePetUri, petType);
+    console.log('Starting pet session', petColor, basePetUri, petType, throwBallWithMouse);
     // New session
     var state = stateApi?.getState();
     if (!state) {
@@ -682,19 +684,22 @@ function petPanelApp(basePetUri, theme, themeKind, petColor, petSize, petType, s
         recoverState(basePetUri, petSize, floor, stateApi);
     }
     initCanvas();
-    let dynamicThrowToggle = false;
+    if (throwBallWithMouse) {
+        dynamicThrowOn();
+    }
+    else {
+        dynamicThrowOff();
+    }
     // Handle messages sent from the extension to the webview
     window.addEventListener('message', (event) => {
         const message = event.data; // The json data that the extension sent
         switch (message.command) {
             case 'throw-with-mouse':
-                if (dynamicThrowToggle) {
-                    dynamicThrowOff();
-                    dynamicThrowToggle = false;
+                if (message.enabled) {
+                    dynamicThrowOn();
                 }
                 else {
-                    dynamicThrowOn();
-                    dynamicThrowToggle = true;
+                    dynamicThrowOff();
                 }
                 break;
             case 'throw-ball':

diff --git a/package.json b/package.json
@@ -196,6 +196,11 @@
                         ],
                         "default": "none",
                         "description": "Background theme assets for your pets"
+                    },
+                    "vscode-pets.throwBallWithMouse": {
+                        "type": "boolean",
+                        "default": false,
+                        "description": "Throw ball with mouse"
                     }
                 }
             }

diff --git a/src/extension/extension.ts b/src/extension/extension.ts
@@ -79,6 +79,19 @@ function getConfigurationPosition() {
         .get<ExtPosition>('position', DEFAULT_POSITION);
 }
 
+function getThrowWithMouseConfiguration(): boolean {
+    return vscode.workspace
+        .getConfiguration('vscode-pets')
+        .get<boolean>('throwBallWithMouse', true);
+}
+
+function updatePanelThrowWithMouse(): void {
+    const panel = getPetPanel();
+    if (panel !== undefined) {
+        panel.setThrowWithMouse(getThrowWithMouseConfiguration());
+    }
+}
+
 function updateExtensionPositionContext() {
     vscode.commands.executeCommand(
         'setContext',
@@ -283,6 +296,7 @@ export function activate(context: vscode.ExtensionContext) {
                     spec.size,
                     getConfiguredTheme(),
                     getConfiguredThemeKind(),
+                    getThrowWithMouseConfiguration(),
                 );
 
                 if (PetPanel.currentPanel) {
@@ -337,6 +351,7 @@ export function activate(context: vscode.ExtensionContext) {
         spec.size,
         getConfiguredTheme(),
         getConfiguredThemeKind(),
+        getThrowWithMouseConfiguration(),
     );
     updateExtensionPositionContext();
 
@@ -347,15 +362,6 @@ export function activate(context: vscode.ExtensionContext) {
         ),
     );
 
-    context.subscriptions.push(
-        vscode.commands.registerCommand('vscode-pets.throw-with-mouse', () => {
-            const panel = getPetPanel();
-            if (panel !== undefined) {
-                panel.toggleDynamicThrow();
-            }
-        }),
-    );
-
     context.subscriptions.push(
         vscode.commands.registerCommand('vscode-pets.throw-ball', () => {
             const panel = getPetPanel();
@@ -594,6 +600,10 @@ export function activate(context: vscode.ExtensionContext) {
                 if (e.affectsConfiguration('vscode-pets.position')) {
                     updateExtensionPositionContext();
                 }
+
+                if (e.affectsConfiguration('vscode-pets.throwBallWithMouse')) {
+                    updatePanelThrowWithMouse();
+                }
             },
         ),
     );
@@ -616,6 +626,7 @@ export function activate(context: vscode.ExtensionContext) {
                     spec.size,
                     getConfiguredTheme(),
                     getConfiguredThemeKind(),
+                    getThrowWithMouseConfiguration(),
                 );
             },
         });
@@ -689,19 +700,20 @@ function normalizeColor(petColor: PetColor, petType: PetType): PetColor {
 }
 
 interface IPetPanel {
-    toggleDynamicThrow(): void;
     throwBall(): void;
     resetPets(): void;
     spawnPet(spec: PetSpecification): void;
     deletePet(petName: string): void;
     listPets(): void;
     rollCall(): void;
     themeKind(): vscode.ColorThemeKind;
+    throwBallWithMouse(): boolean;
     updatePetColor(newColor: PetColor): void;
     updatePetType(newType: PetType): void;
     updatePetSize(newSize: PetSize): void;
     updateTheme(newTheme: Theme, themeKind: vscode.ColorThemeKind): void;
     update(): void;
+    setThrowWithMouse(newThrowWithMouse: boolean): void;
 }
 
 class PetWebviewContainer implements IPetPanel {
@@ -713,6 +725,7 @@ class PetWebviewContainer implements IPetPanel {
     protected _petSize: PetSize;
     protected _theme: Theme;
     protected _themeKind: vscode.ColorThemeKind;
+    protected _throwBallWithMouse: boolean;
 
     constructor(
         extensionUri: vscode.Uri,
@@ -722,6 +735,7 @@ class PetWebviewContainer implements IPetPanel {
         size: PetSize,
         theme: Theme,
         themeKind: ColorThemeKind,
+        throwBallWithMouse: boolean,
     ) {
         this._extensionUri = extensionUri;
         this._petMediaPath = path.join(extensionPath, 'media');
@@ -730,6 +744,7 @@ class PetWebviewContainer implements IPetPanel {
         this._petSize = size;
         this._theme = theme;
         this._themeKind = themeKind;
+        this._throwBallWithMouse = throwBallWithMouse;
     }
 
     public petColor(): PetColor {
@@ -752,6 +767,10 @@ class PetWebviewContainer implements IPetPanel {
         return this._themeKind;
     }
 
+    public throwBallWithMouse(): boolean {
+        return this._throwBallWithMouse;
+    }
+
     public updatePetColor(newColor: PetColor) {
         this._petColor = newColor;
     }
@@ -769,9 +788,11 @@ class PetWebviewContainer implements IPetPanel {
         this._themeKind = themeKind;
     }
 
-    public toggleDynamicThrow(): void {
+    public setThrowWithMouse(newThrowWithMouse: boolean): void {
+        this._throwBallWithMouse = newThrowWithMouse;
         this.getWebview().postMessage({
             command: 'throw-with-mouse',
+            enabled: newThrowWithMouse,
         });
     }
 
@@ -892,7 +913,7 @@ class PetWebviewContainer implements IPetPanel {
 				<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()}");</script>
+				<script nonce="${nonce}">petApp.petPanelApp("${basePetUri}", "${this.theme()}", ${this.themeKind()}, "${this.petColor()}", "${this.petSize()}", "${this.petType()}", ${this.throwBallWithMouse()});</script>
 			</body>
 			</html>`;
     }
@@ -930,6 +951,7 @@ class PetPanel extends PetWebviewContainer implements IPetPanel {
         petSize: PetSize,
         theme: Theme,
         themeKind: ColorThemeKind,
+        throwBallWithMouse: boolean,
     ) {
         const column = vscode.window.activeTextEditor
             ? vscode.window.activeTextEditor.viewColumn
@@ -968,6 +990,7 @@ class PetPanel extends PetWebviewContainer implements IPetPanel {
             petSize,
             theme,
             themeKind,
+            throwBallWithMouse,
         );
     }
 
@@ -996,6 +1019,7 @@ class PetPanel extends PetWebviewContainer implements IPetPanel {
         petSize: PetSize,
         theme: Theme,
         themeKind: ColorThemeKind,
+        throwBallWithMouse: boolean,
     ) {
         PetPanel.currentPanel = new PetPanel(
             panel,
@@ -1006,6 +1030,7 @@ class PetPanel extends PetWebviewContainer implements IPetPanel {
             petSize,
             theme,
             themeKind,
+            throwBallWithMouse,
         );
     }
 
@@ -1018,8 +1043,18 @@ class PetPanel extends PetWebviewContainer implements IPetPanel {
         size: PetSize,
         theme: Theme,
         themeKind: ColorThemeKind,
+        throwBallWithMouse: boolean,
     ) {
-        super(extensionUri, extensionPath, color, type, size, theme, themeKind);
+        super(
+            extensionUri,
+            extensionPath,
+            color,
+            type,
+            size,
+            theme,
+            themeKind,
+            throwBallWithMouse,
+        );
 
         this._panel = panel;
 
@@ -1125,6 +1160,7 @@ function createPetPlayground(context: vscode.ExtensionContext) {
         spec.size,
         getConfiguredTheme(),
         getConfiguredThemeKind(),
+        getThrowWithMouseConfiguration(),
     );
     if (PetPanel.currentPanel) {
         var collection = PetSpecification.collectionFromMemento(

diff --git a/src/panel/main.ts b/src/panel/main.ts
@@ -288,6 +288,7 @@ export function petPanelApp(
     petColor: PetColor,
     petSize: PetSize,
     petType: PetType,
+    throwBallWithMouse: boolean,
     stateApi?: VscodeStateApi,
 ) {
     const ballRadius: number = calculateBallRadius(petSize);
@@ -346,6 +347,7 @@ export function petPanelApp(
         let startMouseY: number;
         let endMouseX: number;
         let endMouseY: number;
+        console.log('Enabling dynamic throw');
         window.onmousedown = (e) => {
             if (ballState) {
                 ballState.paused = true;
@@ -401,6 +403,7 @@ export function petPanelApp(
         };
     }
     function dynamicThrowOff() {
+        console.log('Disabling dynamic throw');
         window.onmousedown = null;
         if (ballState) {
             ballState.paused = true;
@@ -455,7 +458,14 @@ export function petPanelApp(
         ctx.fill();
     }
 
-    console.log('Starting pet session', petColor, basePetUri, petType);
+    console.log(
+        'Starting pet session',
+        petColor,
+        basePetUri,
+        petType,
+        throwBallWithMouse,
+    );
+
     // New session
     var state = stateApi?.getState();
     if (!state) {
@@ -482,18 +492,21 @@ export function petPanelApp(
 
     initCanvas();
 
-    let dynamicThrowToggle = false;
+    if (throwBallWithMouse) {
+        dynamicThrowOn();
+    } else {
+        dynamicThrowOff();
+    }
+
     // Handle messages sent from the extension to the webview
     window.addEventListener('message', (event): void => {
         const message = event.data; // The json data that the extension sent
         switch (message.command) {
             case 'throw-with-mouse':
-                if (dynamicThrowToggle) {
-                    dynamicThrowOff();
-                    dynamicThrowToggle = false;
-                } else {
+                if (message.enabled) {
                     dynamicThrowOn();
-                    dynamicThrowToggle = true;
+                } else {
+                    dynamicThrowOff();
                 }
                 break;
             case 'throw-ball':