feat: #fe game over screen

frontend/src/js/fight_scene.ts

@@ -198,7 +198,8 @@ export default class FightScene extends Phaser.Scene {
 
   checkAlive() {
     if (this.health > 0) return;
-    // TODO: GAME OVER
+    // TODO: destroy scene more gracefully, as some stuff breaks
+    this.scene.start("game_over");
   }
 
   showSubmitFeedback(color: string) {
@@ -338,9 +339,9 @@ function gameStart(scene: any) {
 async function spawn(scene: any) {
   await spawnFoe(scene);
   scene.time.now;
-  const delay = 2000;
-  // const delay =
-  //   (8 * 1000 * (60 * 1000 - scene.time.now)) / 60 / 1000 + 2 * 1000;
+  // const delay = 2000;
+  const delay =
+    (8 * 1000 * (60 * 1000 - scene.time.now)) / 60 / 1000 + 2 * 1000;
   setTimeout(() => spawn(scene), Math.max(delay, 2000));
 }
 

frontend/src/js/game_over_scene.ts

+import "phaser";
+
+export default class GameOverScene extends Phaser.Scene {
+  constructor() {
+    super("game_over");
+  }
+
+  create() {
+    this.drawTitle();
+    this.drawCTA();
+    this.bindEvents();
+  }
+
+  drawTitle() {
+    const text = "ÖTZI\nDIED";
+    const title = this.add.text(0, 0, text, {
+      font: "bold 64px Courier",
+      color: "#ff0000",
+    });
+    title.setOrigin(0.5, 0.5);
+    title.setPosition(
+      this.cameras.main.width * 0.5,
+      this.cameras.main.height * 0.4,
+    );
+  }
+
+  drawCTA() {
+    const text = "press to continue";
+    const cta = this.add.text(0, 0, text, {
+      font: "bold 32px Courier",
+      color: "#ffffff",
+    });
+    cta.setOrigin(0.5, 0.5);
+    cta.setPosition(
+      this.cameras.main.width * 0.5,
+      this.cameras.main.height * 0.7,
+    );
+  }
+
+  bindEvents() {
+    this.input.keyboard.once("keydown", this.startFight.bind(this));
+    this.input.once("pointerdown", this.startFight.bind(this));
+  }
+
+  startFight() {
+    this.scene.start("welcome");
+  }
+}

frontend/src/js/main.ts

@@ -3,6 +3,7 @@ import * as Phaser from "phaser";
 import BackgroundScene from "./background_scene";
 import WelcomeScene from "./welcome_scene";
 import FightScene from "./fight_scene";
+import GameOverScene from "./game_over_scene";
 
 export const GRAVITY_Y = 200;
 
@@ -19,7 +20,7 @@ const config = {
       // debug: true,
     },
   },
-  scene: [BackgroundScene, WelcomeScene, FightScene],
+  scene: [BackgroundScene, WelcomeScene, FightScene, GameOverScene],
 };
 
 new Phaser.Game(config);

frontend/src/js/welcome_scene.ts

@@ -17,9 +17,10 @@ export default class WelcomeScene extends Phaser.Scene {
       font: "bold 64px Courier",
       color: "#ffffff",
     });
+    title.setOrigin(0.5, 0.5);
     title.setPosition(
-      (this.cameras.main.width - title.width) * 0.5,
-      (this.cameras.main.height - title.height) * 0.4,
+      this.cameras.main.width * 0.5,
+      this.cameras.main.height * 0.4,
     );
   }
 
@@ -29,9 +30,10 @@ export default class WelcomeScene extends Phaser.Scene {
       font: "bold 32px Courier",
       color: "#ffffff",
     });
+    cta.setOrigin(0.5, 0.5);
     cta.setPosition(
-      (this.cameras.main.width - cta.width) * 0.5,
-      (this.cameras.main.height - cta.height) * 0.7,
+      this.cameras.main.width * 0.5,
+      this.cameras.main.height * 0.7,
     );
   }