feat: #fe game clock

frontend/src/js/fight_scene.ts

@@ -77,6 +77,7 @@ export default class FightScene extends Phaser.Scene {
     this.hud = new HUD(this);
     this.hud.setHealth(this.health);
     this.hud.setScore(this.score);
+    this.hud.setClock(0);
     this.events.on("pause", this.concealClues.bind(this));
     this.events.on("resume", this.uncoverClues.bind(this));
   }
@@ -210,6 +211,14 @@ export default class FightScene extends Phaser.Scene {
     this.checkAlive();
   }
 
+  update(time: number, delta: number): void {
+    // TODO: please do not parse a date every few milliseconds
+    if (this.beGame?.began_at)
+      this.hud.setClock(
+        new Date().getTime() - Date.parse(this.beGame.began_at),
+      );
+  }
+
   checkAlive() {
     if (this.health > 0) return;
     this.endGame();

frontend/src/js/hud.ts

 const ICONS = {
   SCORE: "️⭐️",
+  CLOCK: "⏲️",
   HEALTH: "❤️️",
 };
 
+const DEFAULT_TEXT_STYLE = {
+  font: "bold 24px Courier",
+  color: "white",
+  testString: `${ICONS.CLOCK}${ICONS.HEALTH}${ICONS.SCORE}1234567890:.`,
+  stroke: "black",
+  strokeThickness: 4,
+} as Phaser.Types.GameObjects.Text.TextStyle;
+
 export default class HUD {
   scene: Phaser.Scene;
   input: Phaser.GameObjects.Text;
   score: Phaser.GameObjects.Text;
+  clock: Phaser.GameObjects.Text;
   health: Phaser.GameObjects.Text;
 
   constructor(scene: Phaser.Scene) {
@@ -14,6 +24,7 @@ export default class HUD {
     this.input = this.initInput(scene);
     this.score = this.initScore(scene);
     this.health = this.initHealth(scene);
+    this.clock = this.initClock(scene);
   }
 
   initInput(scene: Phaser.Scene) {
@@ -26,34 +37,47 @@ export default class HUD {
   }
 
   initScore(scene: Phaser.Scene) {
-    return scene.add
-      .text(10, 10, "", {
-        font: "bold 32px Courier",
-        color: "lightgreen",
-        testString: `${ICONS.SCORE}100000`,
-      })
-      .setOrigin(0, 0);
+    return scene.add.text(10, 10, "", DEFAULT_TEXT_STYLE).setOrigin(0, 0);
   }
 
   initHealth(scene: Phaser.Scene) {
     return scene.add
-      .text(scene.cameras.main.width - 10, 10, "", {
-        font: "bold 32px Courier",
-        color: "orange",
-        testString: `100 ${ICONS.HEALTH}`,
-      })
+      .text(scene.cameras.main.width - 10, 10, "", DEFAULT_TEXT_STYLE)
       .setOrigin(1, 0);
   }
 
+  initClock(scene: Phaser.Scene) {
+    return scene.add
+      .text(
+        scene.cameras.main.width * 0.5,
+        10,
+        `${ICONS.CLOCK}1:23.32`,
+        DEFAULT_TEXT_STYLE,
+      )
+      .setOrigin(0.5, 0);
+  }
+
   setInput(input: string) {
     this.input.text = input;
   }
 
   setScore(score: number) {
-    this.score.text = `${ICONS.SCORE}${score}`;
+    this.score.text = `${ICONS.SCORE} ${score}`;
   }
 
   setHealth(health: number) {
-    this.health.text = `${health}${ICONS.HEALTH}`;
+    this.health.text = `${health} ${ICONS.HEALTH}`;
+  }
+
+  setClock(milliseconds: number) {
+    const minutes = Math.floor(milliseconds / 60000);
+    const seconds = Math.floor((milliseconds % 60000) / 1000)
+      .toString()
+      .padStart(2, "0");
+    const hundredths = Math.floor((milliseconds % 1000) / 10)
+      .toString()
+      .padStart(2, "0");
+    const formatted = `${minutes}:${seconds}.${hundredths}`;
+    this.clock.text = `${formatted} ${ICONS.CLOCK}`;
   }
 }