src/common/dragAndDrop.js

@@ -1,6 +1,6 @@
 import { Container } from "pixi.js";
 
-let maxZIndex = 100; // heretic method to bring dragged sprite to the front,
+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

src/games/cleanupHS.js

@@ -1,19 +1,12 @@
-import {
-    Application,
-    Assets,
-    Container,
-    Sprite,
-    Rectangle,
-    Text,
-} from "pixi.js";
-import { TimedGame } from "./timedGame";
+import { Application, Assets, Container, Sprite, Rectangle } from "pixi.js";
+import { Game } from "./game";
 import { KeyBoardListener, makeDragable, getIntersection } from "../common";
 
 const itemTypes = { TRASH: "TRASH", HARDWARE: "HARDWARE" };
 
-export class CleanupHS extends TimedGame {
-    constructor(width, height, ticker) {
-        super(10000, ticker);
+export class CleanupHS extends Game {
+    constructor(width, height) {
+        super();
 
         this._elementCount = this._difficulty * 6;
         this._elementsPlaced = 0;
@@ -21,8 +14,6 @@ export class CleanupHS extends TimedGame {
         this._scree_w = width;
         this._scree_h = height;
 
-        this.timeout = this._elementCount * 1000; // 1s per element
-
         this.gameContainer.layout = {
             width: "100%",
             height: "100%",
@@ -43,8 +34,8 @@ export class CleanupHS extends TimedGame {
         trashcan.layout = { objectFit: "contain" };
         shelf.layout = { objectFit: "contain" };
 
-        this._addGameObjectChild(this.trashLandingZone);
-        this._addGameObjectChild(this.shelfLandingZone);
+        this.gameContainer.addChild(this.trashLandingZone);
+        this.gameContainer.addChild(this.shelfLandingZone);
     }
 
     start() {
@@ -76,14 +67,10 @@ export class CleanupHS extends TimedGame {
             makeDragable(item.sprite, (node) => {
                 this._onItemDrop(item);
             });
-            this._addGameObjectChild(item.sprite);
+            this.gameContainer.addChild(item.sprite);
         }
     }
 
-    end() {
-        super.end();
-    }
-
     _onItemDrop(item) {
         console.log("dropped", item.type);
 
@@ -122,17 +109,13 @@ export class CleanupHS extends TimedGame {
         }
 
         if (this._elementsPlaced >= this._elementCount) {
-            this.end(true);
+            this._win();
         }
     }
 
     _onError() {
         console.log("wrong placement");
         // apply penalty for putting item in the wrong place
-        this.removeTime(5000);
-    }
-
-    _timerConsoleDisplay() {
-        console.log("time left", this.getRemainingTime());
+        //probably a time loss
     }
 }

src/games/fridge.js

@@ -5,7 +5,7 @@ import {
     getIntersection,
     makeUnDragable,
 } from "../common";
-import { TimedGame } from "./timedGame";
+import { Game } from "./game";
 
 class DropZone {
     constructor(sprite) {
@@ -22,15 +22,13 @@ class DropZone {
     }
 }
 
-export class Fridge extends TimedGame {
-    constructor(ticker) {
-        super(10000, ticker);
+export class Fridge extends Game {
+    constructor() {
+        super();
 
         this._bottleCount = 6;
         this._bottlePlaced = 0;
 
-        this.timeout = this._bottleCount * 1500; // 1.5s per bottle
-
         const fridgeContainer = new Container();
         fridgeContainer.layout = { width: "50%" };
         const fridge = Sprite.from("frigo");
@@ -47,8 +45,8 @@ export class Fridge extends TimedGame {
         crate.layout = backgroundLayout;
         bottleContainer.addChild(crate);
 
-        this._addGameObjectChild(fridgeContainer);
-        this._addGameObjectChild(bottleContainer);
+        this.gameContainer.addChild(fridgeContainer);
+        this.gameContainer.addChild(bottleContainer);
 
         this.bottles = [];
         this._dropZones = [];
@@ -82,21 +80,21 @@ export class Fridge extends TimedGame {
         for (let i = 0; i < this._bottleCount; i++) {
             const sprite = Sprite.from("clubmate_grey");
             this._dropZones.push(new DropZone(sprite));
-            this._addGameObjectChild(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) {
-                    this.end(true);
+                    this._win();
                 }
             });
-            this._addGameObjectChild(newBottle);
-
+            this.gameContainer.addChild(newBottle);
             this.bottles.push(newBottle);
         }
     }

src/games/game.js

@@ -1,4 +1,4 @@
-import { Container, RenderLayer } from "pixi.js";
+import { Container } from "pixi.js";
 
 export class Game {
     constructor() {
@@ -6,14 +6,6 @@ export class Game {
         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;
-        /*
-        this._uiLayer = new Container();
-        this._gameObjectsLayer = new Container();*/
-        this._uiLayer = new RenderLayer();
-        this._gameObjectsLayer = new RenderLayer();
-        this._gameObjectsLayer.sortableChildren = true;
-        this.gameContainer.addChild(this._gameObjectsLayer);
-        this.gameContainer.addChild(this._uiLayer);
     }
 
     /* should reset the game to its initial position*/
@@ -32,14 +24,4 @@ export class Game {
         console.log(status ? "game won" : "game lost");
         // we probably want to call a callback here
     }
-
-    _addGameObjectChild(node) {
-        this.gameContainer.addChild(node);
-        this._gameObjectsLayer.attach(node);
-    }
-
-    _addUiChild(node) {
-        this.gameContainer.addChild(node);
-        this._uiLayer.attach(node);
-    }
 }

src/games/opinator.js

@@ -1,18 +1,15 @@
 import { Application, Assets, Container, Sprite } from "pixi.js";
-import { TimedGame } from "./timedGame";
+import { Game } from "./game";
 
-export class Opinator extends TimedGame {
-    constructor(ticker) {
-        super(10000, ticker);
+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._baseGoalScore = 8;
-        this._goalScore = this._baseGoalScore * 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
 
-        this.timeout = this._baseGoalScore * 1000; // 1s per sprite len
-
         this._backgroundSprite = Sprite.from("opinator");
 
         this._backgroundSprite.eventMode = "static";
@@ -51,14 +48,14 @@ export class Opinator extends TimedGame {
                         this._pixelGoalScore,
                     );
                     if (this._pixelGoalScore < this._currentScore) {
-                        this.end(true);
+                        this._win();
                     }
                 } //else ignore, not enough move to get some distance
             }
         });
         this._backgroundSprite.layout = { objectFit: "contain" };
         this.gameContainer.layout = { width: "100%", height: "100%" };
-        this._addGameObjectChild(this._backgroundSprite);
+        this.gameContainer.addChild(this._backgroundSprite);
     }
 
     reset() {

src/games/smartMonday.js

@@ -3,8 +3,8 @@ import { TimedGame } from "./timedGame";
 import { KeyBoardListener } from "../common";
 
 export class SmartMonday extends TimedGame {
-    constructor(ticker) {
-        super(10000, ticker);
+    constructor() {
+        super(10000); // 10 chars per second
 
         this._goal = 100 * this._difficulty; // number of characters
         this.timeout = 1000 * (this._goal / 10); // 10 chars per second

src/games/timedGame.js

@@ -1,66 +1,28 @@
 import { Game } from "./game";
-import { TimerDisplay } from "../ui";
 
 export class TimedGame extends Game {
-    constructor(time, ticker) {
+    constructor(time) {
         super();
         this._timeoutId = undefined;
-        this.baseTimeout = time;
-        this.currentTimeout = time;
-
-        this._timeoutStartTime = undefined;
-
-        this.timerDisplay = new TimerDisplay(() => {
-            return this.getRemainingTime();
-        }, ticker);
-        this._addUiChild(this.timerDisplay.node);
+        this.timeout = time;
     }
 
     start() {
         super.start();
-        this.timerDisplay.start();
-        this._timeoutStartTime = Date.now();
         this._timeoutId = setInterval(() => {
-            this._onTimeout();
-        }, this.baseTimeout);
-    }
-
-    /* remove t milliseconds to the current timeout (if any) */
-    removeTime(t) {
-        if (this._timeoutId != undefined) {
-            this.currentTimeout = this.getRemainingTime() - t;
-            clearTimeout(this._timeoutId);
-            if (t <= 0) {
-                this._onTimeout();
-            } else {
-                this._timeoutStartTime = Date.now();
-                this._timeoutId = setInterval(() => {
-                    this._onTimeout();
-                }, this.currentTimeout);
-            }
-        }
+            console.log("time end");
+            this.end(this._win);
+        }, this.timeout);
     }
 
     reset() {
         super.reset();
         clearTimeout(this._timeoutId);
         this._timeoutId = undefined;
-        this._timeoutStartTime = undefined;
     }
 
     end(status) {
         super.end(status);
-        this.timerDisplay.stop();
         clearTimeout(this._timeoutId);
-        this._timeoutId = undefined;
-    }
-
-    getRemainingTime() {
-        return this.currentTimeout - (Date.now() - this._timeoutStartTime);
-    }
-
-    _onTimeout() {
-        console.log("time end");
-        this.end(this._win);
     }
 }

src/main.js

@@ -96,14 +96,16 @@ function switchToGame(gameContainer, newGame) {
         maxHeight: "100%",
         margin: 0,
     };
-    const opinator = new Opinator(app.ticker);
-    const fridge = new Fridge(app.ticker);
-    const smartMonday = new SmartMonday(app.ticker);
-    const cleanupHS = new CleanupHS(root.width, root.height, app.ticker);
-    let currentGame = opinator;
-    gameContainter.addChild(currentGame.gameContainer);
+    const opinator = new Opinator();
+    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(smartMonday.gameContainer);
+    //gameContainter.addChild(cleanupHS.gameContainer);
 
     root.addChild(gameContainter);
 
-    currentGame.start();
+    smartMonday.start();
 })();

src/ui/index.js

@@ -1 +0,0 @@
-export { TimerDisplay } from "./timerDisplay";

src/ui/timerDisplay.js

@@ -1,30 +0,0 @@
-import { Text } from "pixi.js";
-
-export class TimerDisplay {
-    /*  variable callback should be a callback giving the value to display */
-    constructor(variableCallback, ticker) {
-        this.node = new Text({
-            text: "default text",
-            style: {
-                fontFamily: "Arial",
-                fontSize: 24,
-                fill: 0xff1010,
-                align: "center",
-            },
-        });
-
-        this.variableCallback = variableCallback;
-        this.callback = () => {
-            this.node.text = "" + this.variableCallback();
-        };
-        this.ticker = ticker;
-    }
-
-    start() {
-        this.ticker.add(this.callback);
-    }
-
-    stop() {
-        this.ticker.remove(this.callback);
-    }
-}

todo.md

@@ -1,7 +0,0 @@
-- game cycle -> launch a game handle end and launch next
-
-- diplay info
-    - game result
-    - game
-        - game name
-        - play instruction