change file organization, add a generic class Game as parent class for all mini games

src/common/dragAndDrop.js

@@ -1,5 +1,3 @@
-let appt = { app: undefined };
-
 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;
@@ -13,12 +11,6 @@ function onDragMove(node, event, shift = { x: 0, y: 0 }) {
         const right =
             parent.layout?.computedLayout.width -
             node.layout?.computedLayout.width;
-        console.log(
-            node.x,
-            right,
-            parent.width,
-            node.layout?.computedLayout.width,
-        );
         if (newPos.x > right) {
             newPos.x = right;
         }
@@ -60,11 +52,10 @@ function onDragStart(node, onDrop, event) {
 }
 
 function makeDragable(node, onDrop = () => {}) {
-    console.log("make drag");
     node.eventMode = "static";
     node.on("pointerdown", (event) => {
         onDragStart(node, onDrop, event);
     });
 }
 
-export { makeDragable, appt };
+export { makeDragable };

src/common/index.js

@@ -0,0 +1,2 @@
+export { backgroundLayout } from "./layouts";
+export { makeDragable } from "./dragAndDrop";

src/common/layouts.js

@@ -0,0 +1,6 @@
+export const backgroundLayout = {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    position: "absolute",
+};

src/games/fridge.js

@@ -0,0 +1,44 @@
+import { Application, Assets, Container, Sprite } from "pixi.js";
+import { makeDragable, backgroundLayout } from "../common";
+import { Game } from "./game";
+
+export class Fridge extends Game {
+    constructor() {
+        super();
+        const fridgeContainer = new Container();
+        fridgeContainer.layout = { width: "50%" };
+        const fridge = Sprite.from("frigo");
+        fridge.layout = backgroundLayout;
+        fridgeContainer.addChild(fridge);
+
+        const bottleContainer = new Container();
+        bottleContainer.layout = {
+            width: "50%",
+            flexDirection: "row",
+            flexWrap: "wrap",
+        };
+        const crate = Sprite.from("mate_caisse");
+        crate.layout = backgroundLayout;
+        bottleContainer.addChild(crate);
+
+        this.gameContainer.addChild(fridgeContainer);
+        this.gameContainer.addChild(bottleContainer);
+
+        const bottleLayout = {
+            width: "12%",
+            height: "16%",
+            position: "absolute",
+        };
+        for (let i = 0; i < 12; i++) {
+            const newBottle = Sprite.from("clubmate");
+            newBottle.layout = bottleLayout;
+            makeDragable(newBottle);
+            this.gameContainer.addChild(newBottle);
+
+            newBottle.x = 0;
+            newBottle.y = 0;
+        }
+    }
+
+    reset() {}
+}

src/games/game.js

@@ -0,0 +1,12 @@
+import { Container } from "pixi.js";
+
+export class Game {
+    constructor() {
+        this._difficulty = 1;
+        this.gameContainer = new Container(); // main container, to add the game to a node, add this container as a child
+        this.gameContainer.layout = true;
+    }
+
+    /* should reset the game to its initial position*/
+    reset() {}
+}

src/games/index.js

@@ -0,0 +1,2 @@
+export { Fridge } from "./fridge.js";
+export { Opinator } from "./opinator.js";

src/games/opinator.js

@@ -0,0 +1,66 @@
+import { Application, Assets, Container, Sprite } from "pixi.js";
+import { backgroundLayout } from "../common";
+import { Game } from "./game";
+
+export class Opinator extends Game {
+    constructor() {
+        super();
+        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._lastMousePos = undefined; // use to compute the travelled distance
+        this.won = false;
+
+        const backgroundSprite = Sprite.from("opinator");
+
+        this._pixelGoalScore = backgroundSprite.width * this._goalScore; // beware of resize mid game
+
+        backgroundSprite.eventMode = "static";
+
+        backgroundSprite.on("pointerdown", (event) => {
+            console.log("Opinator grabbed");
+            this._inMove = true;
+            this._lastMousePos = event.client.clone();
+        });
+
+        backgroundSprite.on("pointerupoutside", () => {
+            console.log("Opinator released");
+            this._inMove = false;
+            this._lastMousePos = undefined;
+        });
+        backgroundSprite.on("pointerup", () => {
+            console.log("Opinator released");
+            this._inMove = false;
+            this._lastMousePos = undefined;
+        });
+
+        backgroundSprite.on("mousemove", (event) => {
+            if (this._inMove && !this.won) {
+                const newMousePos = event.client;
+                const progress = Math.sqrt(
+                    (newMousePos.x - this._lastMousePos.x) ** 2 +
+                        (newMousePos.y - this._lastMousePos.y) ** 2,
+                );
+                if (progress > 0) {
+                    this._lastMousePos = newMousePos.clone();
+                    this._currentScore += progress;
+                    console.log(
+                        "mouse move, current score",
+                        this._currentScore,
+                        "goal",
+                        this._pixelGoalScore,
+                    );
+                    if (this._pixelGoalScore < this._currentScore) {
+                        console.log("game won");
+                        this.won = true;
+                    }
+                } //else ignore, not enough move to get some distance
+            }
+        });
+        backgroundSprite.layout = backgroundLayout;
+        this.gameContainer.addChild(backgroundSprite);
+    }
+
+    reset() {}
+}

src/main.js

@@ -1,16 +1,11 @@
 import "@pixi/layout";
 import { Application, Assets, Container, Sprite } from "pixi.js";
 
-import { makeDragable, appt } from "./dragAndDrop.js";
+import { Fridge, Opinator } from "./games";
+import { backgroundLayout } from "./common";
+
 const app = new Application();
 let root = new Container();
-appt.app = app;
-const backgroundLayout = {
-    width: "100%",
-    height: "100%",
-    objectFit: "cover",
-    position: "absolute",
-};
 
 async function setup() {
     await app.init({ background: "#1099bb", resizeTo: window });
@@ -57,108 +52,6 @@ async function preload() {
     await Assets.load(assets);
 }
 
-class Opinator {
-    constructor(gameContainer) {
-        this.inMove = false; // indicates if player has grabed the wire (is mouse down)
-        this.currentScore = 0;
-        this.pixelGoalScore = undefined;
-        this.goalScore = 10; // 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.won = false;
-
-        const backgroundSprite = Sprite.from("opinator");
-
-        this.pixelGoalScore = backgroundSprite.width * this.goalScore; // beware of resize mid game
-
-        backgroundSprite.eventMode = "static";
-
-        backgroundSprite.on("pointerdown", (event) => {
-            console.log("Opinator grabbed");
-            this.inMove = true;
-            this.lastMousePos = event.client.clone();
-        });
-
-        backgroundSprite.on("pointerupoutside", () => {
-            console.log("Opinator released");
-            this.inMove = false;
-            this.lastMousePos = undefined;
-        });
-        backgroundSprite.on("pointerup", () => {
-            console.log("Opinator released");
-            this.inMove = false;
-            this.lastMousePos = undefined;
-        });
-
-        backgroundSprite.on("mousemove", (event) => {
-            if (this.inMove && !this.won) {
-                const newMousePos = event.client;
-                const progress = Math.sqrt(
-                    (newMousePos.x - this.lastMousePos.x) ** 2 +
-                        (newMousePos.y - this.lastMousePos.y) ** 2,
-                );
-                if (progress > 0) {
-                    this.lastMousePos = newMousePos.clone();
-                    this.currentScore += progress;
-                    console.log(
-                        "mouse move, current score",
-                        this.currentScore,
-                        "goal",
-                        this.pixelGoalScore,
-                    );
-                    if (this.pixelGoalScore < this.currentScore) {
-                        console.log("game won");
-                        this.won = true;
-                    }
-                } //else ignore, not enough move to get some distance
-            }
-        });
-        backgroundSprite.layout = {
-            width: "100%",
-            height: "100%",
-            objectFit: "contain",
-        };
-        gameContainer.addChild(backgroundSprite);
-    }
-}
-
-class Fridge {
-    constructor(gameContainer) {
-        const fridgeContainer = new Container();
-        fridgeContainer.layout = { width: "50%" };
-        const fridge = Sprite.from("frigo");
-        fridge.layout = backgroundLayout;
-        fridgeContainer.addChild(fridge);
-
-        const bottleContainer = new Container();
-        bottleContainer.layout = {
-            width: "50%",
-            flexDirection: "row",
-            flexWrap: "wrap",
-        };
-        const crate = Sprite.from("mate_caisse");
-        crate.layout = backgroundLayout;
-        bottleContainer.addChild(crate);
-
-        gameContainer.addChild(fridgeContainer);
-        gameContainer.addChild(bottleContainer);
-
-        const bottleLayout = {
-            width: "12%",
-            height: "16%",
-            position: "absolute",
-        };
-        for (let i = 0; i < 12; i++) {
-            const newBottle = Sprite.from("clubmate");
-            newBottle.layout = bottleLayout;
-            makeDragable(newBottle);
-            gameContainer.addChild(newBottle);
-
-            newBottle.x = 0;
-            newBottle.y = 0;
-        }
-    }
-}
-
 function switchToGame(gameContainer, newGame) {
     //empty previous container
     //create new game and add
@@ -182,7 +75,9 @@ function switchToGame(gameContainer, newGame) {
         maxHeight: "100%",
         margin: 0,
     };
-    //const opinator = new Opinator(gameContainter);
+    const opinator = new Opinator();
-    const fridge = new Fridge(gameContainter);
+    const fridge = new Fridge();
+    gameContainter.addChild(fridge.gameContainer);
+    //gameContainter.addChild(opinator.gameContainer);
     root.addChild(gameContainter);
 })();