src/common/dragAndDrop.js

@@ -1,10 +1,3 @@
-import { Container } from "pixi.js";
-
-let maxZIndex = 0; // heretic method to bring dragged sprite to the front,
-// will technically overflow if you play long enough,
-// it is also shitty because if you externally use zIndex on the sprites in the same container, it may not bring to front
-// clean solution would be to make a draggable container class
-
 function onDragMove(node, event, shift = { x: 0, y: 0 }) {
     // shift is a tuple representing the shift between the coords of the node and the pointer
     const dragPoint = event.global;
@@ -50,7 +43,6 @@ function onDragStart(node, onDrop, event) {
     node.on("pointerupoutside", () => onDragEnd(node, onDrop));
     node.parent.eventMode =
         node.parent.eventMode == "dynamic" ? "dynamic" : "static";
-    node.zIndex = ++maxZIndex;
     const dragShift = node.parent.toLocal(event.global.clone(), null);
     dragShift.x -= node.x;
     dragShift.y -= node.y;

src/games/cleanupHS.js

@@ -10,9 +10,6 @@ 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%",
@@ -34,18 +31,6 @@ 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++) {
@@ -61,7 +46,7 @@ export class CleanupHS extends Game {
             this._items.push(item);
 
             // non dynamic sizes for now
-            const w = this._scree_w * 0.04;
+            const w = width * 0.04;
             item.sprite.width = w;
             item.sprite.height = w;
             makeDragable(item.sprite, (node) => {
@@ -69,8 +54,13 @@ 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);
 
-        this.bottles = [];
+        const bottles = [];
         this._dropZones = [];
 
         const widthPercent = 0.12;
         this.gameContainer.on("layout", (event) => {
             const layoutBox = event.computedLayout;
-            for (const bottle of this.bottles) {
+            for (const bottle of bottles) {
                 const width = layoutBox.width * widthPercent;
                 bottle.width = width;
                 bottle.height = width; // aspectRatio = 1
@@ -95,27 +95,14 @@ export class Fridge extends Game {
                 }
             });
             this.gameContainer.addChild(newBottle);
-            this.bottles.push(newBottle);
+            bottles.push(newBottle);
+
+            newBottle.x = 800;
+            newBottle.y = 0;
         }
     }
 
-    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();
-    }
+    reset() {}
 
     _onBottleDrop(bottle) {
         console.log("dropped at", bottle.position);

src/games/game.js

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

src/games/index.js

@@ -2,4 +2,3 @@ export { Fridge } from "./fridge.js";
 export { Opinator } from "./opinator.js";
 export { SmartMonday } from "./smartMonday.js";
 export { CleanupHS } from "./cleanupHS.js";
-export { TimedGame } from "./timedGame.js";

src/games/opinator.js

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

src/games/smartMonday.js

@@ -1,36 +1,22 @@
 import { Application, Assets, Container, Sprite, Rectangle } from "pixi.js";
-import { TimedGame } from "./timedGame";
+import { Game } from "./game";
 import { KeyBoardListener } from "../common";
 
-export class SmartMonday extends TimedGame {
+export class SmartMonday extends Game {
     constructor() {
-        super(10000); // 10 chars per second
+        super();
 
         this._goal = 100 * this._difficulty; // number of characters
-        this.timeout = 1000 * (this._goal / 10); // 10 chars per second
-
         this._currentString = "";
-        this._keyEventHandle = undefined;
-    }
 
-    reset() {
-        super.reset();
-        this._currentString = "";
-    }
-
-    start() {
-        super.start();
-        this._keyEventHandle = KeyBoardListener.onKeyDown((event) => {
+        const handle = KeyBoardListener.onKeyDown((event) => {
             this._currentString += event.key;
             console.log("current text", this._currentString);
             if (this._currentString.length >= this._goal) {
-                this.end(true);
+                this._win();
             }
         });
     }
 
-    end(status) {
-        super.end(status);
-        KeyBoardListener.offKeyDown(this._keyEventHandle);
-    }
+    reset() {}
 }

src/games/timedGame.js

@@ -1,28 +0,0 @@
-import { Game } from "./game";
-
-export class TimedGame extends Game {
-    constructor(time) {
-        super();
-        this._timeoutId = undefined;
-        this.timeout = time;
-    }
-
-    start() {
-        super.start();
-        this._timeoutId = setInterval(() => {
-            console.log("time end");
-            this.end(this._win);
-        }, this.timeout);
-    }
-
-    reset() {
-        super.reset();
-        clearTimeout(this._timeoutId);
-        this._timeoutId = undefined;
-    }
-
-    end(status) {
-        super.end(status);
-        clearTimeout(this._timeoutId);
-    }
-}

src/main.js

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