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

@@ -13,28 +13,13 @@ const itemTypes = { TRASH: "TRASH", HARDWARE: "HARDWARE" };
 
 export class CleanupHS extends TimedGame {
     constructor(width, height, ticker) {
-        super(10000);
+        super(10000, ticker);
 
         this._elementCount = this._difficulty * 6;
         this._elementsPlaced = 0;
         this._items = [];
         this._scree_w = width;
         this._scree_h = height;
-        this._ticker = ticker;
-        this._timerUpdate = () => {
-            this._timerDisplay();
-        };
-
-        this._timerText = new Text({
-            text: "Hello Pixi!",
-            style: {
-                fontFamily: "Arial",
-                fontSize: 24,
-                fill: 0xff1010,
-                align: "center",
-            },
-        });
-        this._timerText.x = 200;
 
         this.timeout = this._elementCount * 1000; // 1s per element
 
@@ -58,14 +43,12 @@ export class CleanupHS extends TimedGame {
         trashcan.layout = { objectFit: "contain" };
         shelf.layout = { objectFit: "contain" };
 
-        this.gameContainer.addChild(this.trashLandingZone);
+        this._addGameObjectChild(this.trashLandingZone);
-        this.gameContainer.addChild(this.shelfLandingZone);
+        this._addGameObjectChild(this.shelfLandingZone);
-        this.gameContainer.addChild(this._timerText);
     }
 
     start() {
         super.start();
-        this._ticker.add(this._timerUpdate);
     }
 
     reset() {
@@ -93,13 +76,12 @@ export class CleanupHS extends TimedGame {
             makeDragable(item.sprite, (node) => {
                 this._onItemDrop(item);
             });
-            this.gameContainer.addChild(item.sprite);
+            this._addGameObjectChild(item.sprite);
         }
     }
 
     end() {
         super.end();
-        this._ticker.remove(this._timerUpdate);
     }
 
     _onItemDrop(item) {
@@ -150,10 +132,6 @@ export class CleanupHS extends TimedGame {
         this.removeTime(5000);
     }
 
-    _timerDisplay() {
-        this._timerText.text = "" + this.getRemainingTime();
-    }
-
     _timerConsoleDisplay() {
         console.log("time left", this.getRemainingTime());
     }

src/games/fridge.js

@@ -23,8 +23,8 @@ class DropZone {
 }
 
 export class Fridge extends TimedGame {
-    constructor() {
+    constructor(ticker) {
-        super(10000);
+        super(10000, ticker);
 
         this._bottleCount = 6;
         this._bottlePlaced = 0;
@@ -47,8 +47,8 @@ export class Fridge extends TimedGame {
         crate.layout = backgroundLayout;
         bottleContainer.addChild(crate);
 
-        this.gameContainer.addChild(fridgeContainer);
+        this._addGameObjectChild(fridgeContainer);
-        this.gameContainer.addChild(bottleContainer);
+        this._addGameObjectChild(bottleContainer);
 
         this.bottles = [];
         this._dropZones = [];
@@ -82,7 +82,7 @@ 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.gameContainer.addChild(sprite);
+            this._addGameObjectChild(sprite);
 
             sprite.x = 0;
             sprite.y = 0;
@@ -95,7 +95,7 @@ export class Fridge extends TimedGame {
                     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

@@ -2,8 +2,8 @@ import { Application, Assets, Container, Sprite } from "pixi.js";
 import { TimedGame } from "./timedGame";
 
 export class Opinator extends TimedGame {
-    constructor() {
+    constructor(ticker) {
-        super(10000);
+        super(10000, ticker);
         this._inMove = false; // indicates if player has grabed the wire (is mouse down)
         this._currentScore = 0;
         this._pixelGoalScore = undefined;
@@ -58,7 +58,7 @@ export class Opinator extends TimedGame {
         });
         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() {
+    constructor(ticker) {
-        super(10000);
+        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,17 +1,24 @@
 import { Game } from "./game";
+import { TimerDisplay } from "../ui";
 
 export class TimedGame extends Game {
-    constructor(time) {
+    constructor(time, ticker) {
         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);
     }
 
     start() {
         super.start();
+        this.timerDisplay.start();
         this._timeoutStartTime = Date.now();
         this._timeoutId = setInterval(() => {
             this._onTimeout();
@@ -43,6 +50,7 @@ export class TimedGame extends Game {
 
     end(status) {
         super.end(status);
+        this.timerDisplay.stop();
         clearTimeout(this._timeoutId);
         this._timeoutId = undefined;
     }

src/main.js

@@ -100,12 +100,10 @@ function switchToGame(gameContainer, newGame) {
     const fridge = new Fridge(app.ticker);
     const smartMonday = new SmartMonday(app.ticker);
     const cleanupHS = new CleanupHS(root.width, root.height, app.ticker);
-    //gameContainter.addChild(fridge.gameContainer);
+    let currentGame = opinator;
-    //gameContainter.addChild(opinator.gameContainer);
+    gameContainter.addChild(currentGame.gameContainer);
-    //gameContainter.addChild(smartMonday.gameContainer);
-    gameContainter.addChild(cleanupHS.gameContainer);
 
     root.addChild(gameContainter);
 
-    cleanupHS.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