add a ui layer to games, add time display to all games

src/common/dragAndDrop.js

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

src/games/fridge.js

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

src/games/game.js

@@ -1,4 +1,4 @@
-import { Container } from "pixi.js";
+import { Container, RenderLayer } from "pixi.js";
 
 export class Game {
     constructor() {
@@ -6,6 +6,14 @@ 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*/
@@ -24,4 +32,14 @@ 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,15 +1,18 @@
 import { Application, Assets, Container, Sprite } from "pixi.js";
-import { Game } from "./game";
+import { TimedGame } from "./timedGame";
 
-export class Opinator extends Game {
-    constructor() {
-        super();
+export class Opinator extends TimedGame {
+    constructor(ticker) {
+        super(10000, ticker);
         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._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._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";
@@ -48,14 +51,14 @@ export class Opinator extends Game {
                         this._pixelGoalScore,
                     );
                     if (this._pixelGoalScore < this._currentScore) {
-                        this._win();
+                        this.end(true);
                     }
                 } //else ignore, not enough move to get some distance
             }
         });
         this._backgroundSprite.layout = { objectFit: "contain" };
         this.gameContainer.layout = { width: "100%", height: "100%" };
-        this.gameContainer.addChild(this._backgroundSprite);
+        this._addGameObjectChild(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() {
-        super(10000); // 10 chars per second
+    constructor(ticker) {
+        super(10000, ticker);
 
         this._goal = 100 * this._difficulty; // number of characters
         this.timeout = 1000 * (this._goal / 10); // 10 chars per second

src/games/timedGame.js

@@ -1,28 +1,66 @@
 import { Game } from "./game";
+import { TimerDisplay } from "../ui";
 
 export class TimedGame extends Game {
-    constructor(time) {
+    constructor(time, ticker) {
         super();
         this._timeoutId = undefined;
-        this.timeout = time;
+        this.baseTimeout = time;
+        this.currentTimeout = time;
+
+        this._timeoutStartTime = undefined;
+
+        this.timerDisplay = new TimerDisplay(() => {
+            return this.getRemainingTime();
+        }, ticker);
+        this._addUiChild(this.timerDisplay.node);
     }
 
     start() {
         super.start();
+        this.timerDisplay.start();
+        this._timeoutStartTime = Date.now();
         this._timeoutId = setInterval(() => {
-            console.log("time end");
-            this.end(this._win);
-        }, this.timeout);
+            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);
+            }
+        }
     }
 
     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,16 +96,14 @@ function switchToGame(gameContainer, newGame) {
         maxHeight: "100%",
         margin: 0,
     };
-    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);
+    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);
 
     root.addChild(gameContainter);
 
-    smartMonday.start();
+    currentGame.start();
 })();

src/ui/index.js

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

src/ui/timerDisplay.js

@@ -0,0 +1,30 @@
+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

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