notes.md

@@ -1,29 +0,0 @@
-### mini game ideas
-
-#### fridge
-drag drop des clube mate dans le frigo
-- évolution de difficulté:
-    - moins de temps
-    - moins de place dans le frigo
-    - emplacements plus scatter
-    - truc à enlever du frigo pour faire de la place
-    - drop une club mate la casse et met un pénalité de temps
-
-#### opinator
-réparer opinator en secouant le fil
-- évolution de difficulté
-    - besoins de secouer plus
-
-#### ranger le hs
-drag drop entre trash et materiel
-- évolution de difficulté
-    - moins de temps
-    - plus de truc à trier
-
-#### smart monday
-mash le clavier pour écrire des message aux participants
-
-- évolution de la difficulté
-    - moins de temps
-    - ajout de plusieurs zone de text correspondant aux different participants
-    - ajout d'un boutton "rappel" pour chaque participant avec un cool down à clique jusque à ce que tous les participants soit ok

src/common/helpers.js

@@ -1,24 +0,0 @@
-import { Rectangle } from "pixi.js";
-
-export function getIntersection(a, b, out = new Rectangle()) {
-    const x1 = Math.max(a.x, b.x);
-    const y1 = Math.max(a.y, b.y);
-    const x2 = Math.min(a.x + a.width, b.x + b.width);
-    const y2 = Math.min(a.y + a.height, b.y + b.height);
-
-    if (x2 <= x1 || y2 <= y1) {
-        // no overlap → empty rect
-        out.x = 0;
-        out.y = 0;
-        out.width = 0;
-        out.height = 0;
-        return out;
-    }
-
-    out.x = x1;
-    out.y = y1;
-    out.width = x2 - x1;
-    out.height = y2 - y1;
-
-    return out;
-}

src/common/index.js

@@ -1,3 +0,0 @@
-export { backgroundLayout } from "./layouts";
-export { makeDragable, makeUnDragable } from "./dragAndDrop";
-export { getIntersection } from "./helpers";

src/common/layouts.js

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

src/dragAndDrop.js

@@ -1,3 +1,5 @@
+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;
@@ -11,6 +13,12 @@ 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;
         }
@@ -30,10 +38,11 @@ function onDragMove(node, event, shift = { x: 0, y: 0 }) {
 }
 
 function onDragEnd(node, onDrop) {
+    console.log("drop");
     node.off("pointerup");
     node.off("pointerupoutside");
     node.parent.off("mousemove");
-    onDrop(node);
+    onDrop();
 }
 
 function onDragStart(node, onDrop, event) {
@@ -51,14 +60,11 @@ function onDragStart(node, onDrop, event) {
 }
 
 function makeDragable(node, onDrop = () => {}) {
+    console.log("make drag");
     node.eventMode = "static";
     node.on("pointerdown", (event) => {
         onDragStart(node, onDrop, event);
     });
 }
 
-function makeUnDragable(node, onDrop = () => {}) {
+export { makeDragable, appt };
-    node.off("pointerdown");
-}
-
-export { makeDragable, makeUnDragable };

src/games/fridge.js

@@ -1,129 +0,0 @@
-import { Application, Assets, Container, Sprite, Rectangle } from "pixi.js";
-import {
-    makeDragable,
-    backgroundLayout,
-    getIntersection,
-    makeUnDragable,
-} from "../common";
-import { Game } from "./game";
-
-class DropZone {
-    constructor(sprite) {
-        this.sprite = sprite;
-        this.full = false;
-    }
-
-    drop(bottle) {
-        if (!this.full) {
-            this.full = true;
-            bottle.x = this.sprite.x;
-            bottle.y = this.sprite.y;
-        }
-    }
-}
-
-export class Fridge extends Game {
-    constructor() {
-        super();
-
-        this._bottleCount = 6;
-        this._bottlePlaced = 0;
-
-        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 bottles = [];
-        this._dropZones = [];
-
-        const widthPercent = 0.12;
-        this.gameContainer.on("layout", (event) => {
-            const layoutBox = event.computedLayout;
-            for (const bottle of bottles) {
-                const width = layoutBox.width * widthPercent;
-                bottle.width = width;
-                bottle.height = width; // aspectRatio = 1
-                if (bottle.x + bottle.width > layoutBox.width) {
-                    bottle.x = layoutBox.width - bottle.width;
-                }
-                if (bottle.y + bottle.height > layoutBox.height) {
-                    bottle.y = layoutBox.height - bottle.height;
-                }
-            }
-
-            let i = 0;
-            for (const zone of this._dropZones) {
-                const width = layoutBox.width * (widthPercent + 0.01);
-                zone.sprite.width = width;
-                zone.sprite.height = width; // aspectRatio = 1
-                zone.sprite.x = i * width;
-                zone.sprite.y = 0;
-                i++;
-            }
-        });
-
-        for (let i = 0; i < this._bottleCount; i++) {
-            const sprite = Sprite.from("clubmate_grey");
-            this._dropZones.push(new DropZone(sprite));
-            this.gameContainer.addChild(sprite);
-
-            sprite.x = 0;
-            sprite.y = 0;
-        }
-
-        for (let i = 0; i < this._bottleCount; i++) {
-            const newBottle = Sprite.from("clubmate");
-            makeDragable(newBottle, (node) => {
-                this._onBottleDrop(node);
-                if (this._bottlePlaced >= this._bottleCount) {
-                    console.log("fridge game won");
-                }
-            });
-            this.gameContainer.addChild(newBottle);
-            bottles.push(newBottle);
-
-            newBottle.x = 800;
-            newBottle.y = 0;
-        }
-    }
-
-    reset() {}
-
-    _onBottleDrop(bottle) {
-        console.log("dropped at", bottle.position);
-
-        const intersection = new Rectangle();
-        for (const dropZone of this._dropZones) {
-            getIntersection(
-                dropZone.sprite.getBounds(),
-                bottle.getBounds(),
-                intersection,
-            );
-            const intersectArea = intersection.width * intersection.height;
-            const bottleArea = bottle.width * bottle.height;
-            if (intersectArea > 0.5 * bottleArea) {
-                if (!dropZone.full) {
-                    dropZone.drop(bottle);
-                    this._bottlePlaced++;
-                    makeUnDragable(bottle); // maybe not needed
-                    return;
-                }
-            }
-        }
-    }
-}

src/games/game.js

@@ -1,13 +0,0 @@
-import { Container } from "pixi.js";
-
-export class Game {
-    constructor() {
-        this._difficulty = 1;
-        this.won = false;
-        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

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

src/games/opinator.js

@@ -1,65 +0,0 @@
-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
-
-        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,10 +1,16 @@
 import "@pixi/layout";
 import { Application, Assets, Container, Sprite } from "pixi.js";
-import { Fridge, Opinator } from "./games";
-import { backgroundLayout } from "./common";
 
+import { makeDragable, appt } from "./dragAndDrop.js";
 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 });
@@ -43,10 +49,6 @@ async function preload() {
             alias: "clubmate",
             src: "assets/img/clubmate.png",
         },
-        {
-            alias: "clubmate_grey",
-            src: "assets/img/clubmate_grey.png",
-        },
         {
             alias: "mate_caisse",
             src: "assets/img/caisse.jpg",
@@ -55,6 +57,108 @@ 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
@@ -78,9 +182,7 @@ function switchToGame(gameContainer, newGame) {
         maxHeight: "100%",
         margin: 0,
     };
-    const opinator = new Opinator();
+    //const opinator = new Opinator(gameContainter);
-    const fridge = new Fridge();
+    const fridge = new Fridge(gameContainter);
-    gameContainter.addChild(fridge.gameContainer);
-    //gameContainter.addChild(opinator.gameContainer);
     root.addChild(gameContainter);
 })();

src/package-lock.json

@@ -9,7 +9,6 @@
             "version": "0.0.0",
             "dependencies": {
                 "@pixi/layout": "^3.2.0",
-                "@pixi/math": "^7.4.3",
                 "pixi.js": "^8.0.0"
             },
             "devDependencies": {
@@ -102,12 +101,6 @@
                 "yoga-layout": "^3"
             }
         },
-        "node_modules/@pixi/math": {
-            "version": "7.4.3",
-            "resolved": "https://registry.npmjs.org/@pixi/math/-/math-7.4.3.tgz",
-            "integrity": "sha512-/uJOVhR2DOZ+zgdI6Bs/CwcXT4bNRKsS+TqX3ekRIxPCwaLra+Qdm7aDxT5cTToDzdxbKL5+rwiLu3Y1egILDw==",
-            "license": "MIT"
-        },
         "node_modules/@pixi/react": {
             "version": "8.0.5",
             "resolved": "https://registry.npmjs.org/@pixi/react/-/react-8.0.5.tgz",

src/package.json

@@ -3,7 +3,6 @@
     "version": "0.0.0",
     "private": true,
     "type": "module",
-    "sideEffects": true,
     "scripts": {
         "dev": "vite --host",
         "build": "vite build",