add display of time in cleanupHS

src/games/cleanupHS.js

@@ -1,11 +1,18 @@
-import { Application, Assets, Container, Sprite, Rectangle } from "pixi.js";
+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 TimedGame {
-    constructor(width, height) {
+    constructor(width, height, ticker) {
         super(10000);
 
         this._elementCount = this._difficulty * 6;
@@ -13,6 +20,21 @@ export class CleanupHS extends TimedGame {
         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
 
@@ -38,10 +60,12 @@ export class CleanupHS extends TimedGame {
 
         this.gameContainer.addChild(this.trashLandingZone);
         this.gameContainer.addChild(this.shelfLandingZone);
+        this.gameContainer.addChild(this._timerText);
     }
 
     start() {
         super.start();
+        this._ticker.add(this._timerUpdate);
     }
 
     reset() {
@@ -73,6 +97,11 @@ export class CleanupHS extends TimedGame {
         }
     }
 
+    end() {
+        super.end();
+        this._ticker.remove(this._timerUpdate);
+    }
+
     _onItemDrop(item) {
         console.log("dropped", item.type);
 
@@ -118,6 +147,14 @@ export class CleanupHS extends TimedGame {
     _onError() {
         console.log("wrong placement");
         // apply penalty for putting item in the wrong place
-        //probably a time loss
+        this.removeTime(5000);
+    }
+
+    _timerDisplay() {
+        this._timerText.text = "" + this.getRemainingTime();
+    }
+
+    _timerConsoleDisplay() {
+        console.log("time left", this.getRemainingTime());
     }
 }

src/games/timedGame.js

@@ -4,25 +4,55 @@ export class TimedGame extends Game {
     constructor(time) {
         super();
         this._timeoutId = undefined;
-        this.timeout = time;
+        this.baseTimeout = time;
+        this.currentTimeout = time;
+
+        this._timeoutStartTime = undefined;
     }
 
     start() {
         super.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);
         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,10 +96,10 @@ 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);
+    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);
     //gameContainter.addChild(fridge.gameContainer);
     //gameContainter.addChild(opinator.gameContainer);
     //gameContainter.addChild(smartMonday.gameContainer);