add start and reset method to each game

src/games/cleanupHS.js

@@ -10,6 +10,9 @@ export class CleanupHS extends Game {
 
         this._elementCount = this._difficulty * 6;
         this._elementsPlaced = 0;
+        this._items = [];
+        this._scree_w = width;
+        this._scree_h = height;
 
         this.gameContainer.layout = {
             width: "100%",
@@ -31,6 +34,18 @@ export class CleanupHS extends Game {
         trashcan.layout = { objectFit: "contain" };
         shelf.layout = { objectFit: "contain" };
 
+        this.gameContainer.addChild(this.trashLandingZone);
+        this.gameContainer.addChild(this.shelfLandingZone);
+    }
+
+    start() {
+        super.start();
+    }
+
+    reset() {
+        super.reset();
+        this._elementsPlaced = 0;
+
         this._items = [];
 
         for (let i = 0; i < this._elementCount; i++) {
@@ -46,7 +61,7 @@ export class CleanupHS extends Game {
             this._items.push(item);
 
             // non dynamic sizes for now
-            const w = width * 0.04;
+            const w = this._scree_w * 0.04;
             item.sprite.width = w;
             item.sprite.height = w;
             makeDragable(item.sprite, (node) => {
@@ -54,13 +69,8 @@ export class CleanupHS extends Game {
             });
             this.gameContainer.addChild(item.sprite);
         }
-
-        this.gameContainer.addChild(this.trashLandingZone);
-        this.gameContainer.addChild(this.shelfLandingZone);
     }
 
-    reset() {}
-
     _onItemDrop(item) {
         console.log("dropped", item.type);
 

src/games/fridge.js

@@ -48,13 +48,13 @@ export class Fridge extends Game {
         this.gameContainer.addChild(fridgeContainer);
         this.gameContainer.addChild(bottleContainer);
 
-        const bottles = [];
+        this.bottles = [];
         this._dropZones = [];
 
         const widthPercent = 0.12;
         this.gameContainer.on("layout", (event) => {
             const layoutBox = event.computedLayout;
-            for (const bottle of bottles) {
+            for (const bottle of this.bottles) {
                 const width = layoutBox.width * widthPercent;
                 bottle.width = width;
                 bottle.height = width; // aspectRatio = 1
@@ -95,14 +95,27 @@ export class Fridge extends Game {
                 }
             });
             this.gameContainer.addChild(newBottle);
-            bottles.push(newBottle);
-
-            newBottle.x = 800;
-            newBottle.y = 0;
+            this.bottles.push(newBottle);
         }
     }
 
-    reset() {}
+    reset() {
+        super.reset();
+
+        this._bottlePlaced = 0;
+        for (const zone of this._dropZones) {
+            zone.full = false;
+        }
+
+        for (const bottle of this.bottles) {
+            bottle.x = 800;
+            bottle.y = 0;
+        }
+    }
+
+    start() {
+        super.start();
+    }
 
     _onBottleDrop(bottle) {
         console.log("dropped at", bottle.position);

src/games/game.js

@@ -9,11 +9,21 @@ export class Game {
     }
 
     /* should reset the game to its initial position*/
-    reset() {}
+    reset() {
+        this.won = false;
+    }
+
+    /* start the game */
+    start() {
+        this.reset();
+    }
+
+    end() {}
 
     _win() {
         this.win = true;
         console.log("game won");
+        this.end();
         // we probably want to call a callback here
     }
 }

src/games/opinator.js

@@ -1,5 +1,4 @@
 import { Application, Assets, Container, Sprite } from "pixi.js";
-import { backgroundLayout } from "../common";
 import { Game } from "./game";
 
 export class Opinator extends Game {
@@ -8,33 +7,31 @@ export class Opinator extends Game {
         this._inMove = false; // indicates if player has grabed the wire (is mouse down)
         this._currentScore = 0;
         this._pixelGoalScore = undefined;
-        this._goalScore = 10 * this._difficulty; // goal to match, measured in play area, 10 = moving the mouse on the equivalent of 10 play areas
+        this._goalScore = 8 * this._difficulty; // goal to match, measured in play area, 10 = moving the mouse on the equivalent of 10 play areas
         this._lastMousePos = undefined; // use to compute the travelled distance
 
-        const backgroundSprite = Sprite.from("opinator");
+        this._backgroundSprite = Sprite.from("opinator");
 
-        this._pixelGoalScore = backgroundSprite.width * this._goalScore; // beware of resize mid game
+        this._backgroundSprite.eventMode = "static";
 
-        backgroundSprite.eventMode = "static";
-
-        backgroundSprite.on("pointerdown", (event) => {
+        this._backgroundSprite.on("pointerdown", (event) => {
             console.log("Opinator grabbed");
             this._inMove = true;
             this._lastMousePos = event.client.clone();
         });
 
-        backgroundSprite.on("pointerupoutside", () => {
+        this._backgroundSprite.on("pointerupoutside", () => {
             console.log("Opinator released");
             this._inMove = false;
             this._lastMousePos = undefined;
         });
-        backgroundSprite.on("pointerup", () => {
+        this._backgroundSprite.on("pointerup", () => {
             console.log("Opinator released");
             this._inMove = false;
             this._lastMousePos = undefined;
         });
 
-        backgroundSprite.on("mousemove", (event) => {
+        this._backgroundSprite.on("mousemove", (event) => {
             if (this._inMove && !this.won) {
                 const newMousePos = event.client;
                 const progress = Math.sqrt(
@@ -56,10 +53,18 @@ export class Opinator extends Game {
                 } //else ignore, not enough move to get some distance
             }
         });
-        backgroundSprite.layout = { objectFit: "contain" };
+        this._backgroundSprite.layout = { objectFit: "contain" };
         this.gameContainer.layout = { width: "100%", height: "100%" };
-        this.gameContainer.addChild(backgroundSprite);
+        this.gameContainer.addChild(this._backgroundSprite);
     }
 
-    reset() {}
+    reset() {
+        super.reset();
+        this._currentScore = 0;
+        this._pixelGoalScore = this._backgroundSprite.width * this._goalScore; // beware of resize mid game
+    }
+
+    start() {
+        super.start();
+    }
 }

src/games/smartMonday.js

@@ -8,8 +8,17 @@ export class SmartMonday extends Game {
 
         this._goal = 100 * this._difficulty; // number of characters
         this._currentString = "";
+        this._keyEventHandle = undefined;
+    }
 
-        const handle = KeyBoardListener.onKeyDown((event) => {
+    reset() {
+        super.reset();
+        this._currentString = "";
+    }
+
+    start() {
+        super.start();
+        this._keyEventHandle = KeyBoardListener.onKeyDown((event) => {
             this._currentString += event.key;
             console.log("current text", this._currentString);
             if (this._currentString.length >= this._goal) {
@@ -18,5 +27,7 @@ export class SmartMonday extends Game {
         });
     }
 
-    reset() {}
+    end() {
+        KeyBoardListener.offKeyDown(this._keyEventHandle);
+    }
 }

src/main.js

@@ -100,10 +100,12 @@ function switchToGame(gameContainer, newGame) {
     const fridge = new Fridge();
     const smartMonday = new SmartMonday();
     const cleanupHS = new CleanupHS(root.width, root.height);
-    gameContainter.addChild(fridge.gameContainer);
-    //gameContainter.addChild(opinator.gameContainer);
+    //gameContainter.addChild(fridge.gameContainer);
+    gameContainter.addChild(opinator.gameContainer);
     //gameContainter.addChild(smartMonday.gameContainer);
     //gameContainter.addChild(cleanupHS.gameContainer);
 
     root.addChild(gameContainter);
+
+    opinator.start();
 })();