feat: #fe pause on ESC

frontend/src/js/fight_scene.ts

@@ -103,8 +103,20 @@ export default class FightScene extends Phaser.Scene {
     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));
+    this.events.on("pause", this.onPause.bind(this));
+    this.events.on("resume", this.onResume.bind(this));
+  }
+
+  onPause() {
+    this.concealClues();
+    this.typewriter.setActive(false);
+    this.scene.launch("pause");
+  }
+
+  onResume() {
+    this.uncoverClues();
+    this.typewriter.setActive(true);
+    this.scene.stop("pause");
   }
 
   initUiDimensions(): UIDimensions {
@@ -145,6 +157,11 @@ export default class FightScene extends Phaser.Scene {
   }
 
   async create() {
+    const escBinding = this.input.keyboard.addKey(
+      Phaser.Input.Keyboard.KeyCodes.ESC,
+    );
+    escBinding.onDown = () => this.scene.pause();
+
     this.gameTime = this.time.addEvent({
       delay: Number.MAX_SAFE_INTEGER,
       paused: true,

frontend/src/js/game.ts

@@ -4,6 +4,7 @@ import BackgroundScene from "./background_scene";
 import WelcomeScene from "./welcome_scene";
 import FightScene from "./fight_scene";
 import GameOverScene from "./game_over_scene";
+import PauseScene from "./pause_scene";
 
 export const GRAVITY_Y = 200;
 
@@ -20,7 +21,7 @@ const CONFIG = {
       // debug: true,
     },
   },
-  scene: [BackgroundScene, WelcomeScene, FightScene, GameOverScene],
+  scene: [BackgroundScene, WelcomeScene, FightScene, PauseScene, GameOverScene],
 };
 
 export default class Game extends Phaser.Game {
@@ -29,24 +30,18 @@ export default class Game extends Phaser.Game {
     this.bindFocusEvents();
   }
 
-  pause() {
-    this.scene
-      .getScenes(true)
-      .filter((scene) => !scene.scene.isPaused())
-      .forEach((scene) => scene.scene.pause());
+  pauseFight() {
+    if (this.scene.isActive("fight")) this.scene.pause("fight");
   }
 
-  resume() {
-    this.scene
-      .getScenes(false)
-      .filter((scene) => scene.scene.isPaused())
-      .forEach((scene) => scene.scene.resume());
+  resumeFight() {
+    if (this.scene.isPaused("fight")) this.scene.resume("fight");
   }
 
   bindFocusEvents() {
-    this.events.on(Phaser.Core.Events.BLUR, this.pause.bind(this));
-    this.events.on(Phaser.Core.Events.HIDDEN, this.pause.bind(this));
-    this.events.on(Phaser.Core.Events.FOCUS, this.resume.bind(this));
-    this.events.on(Phaser.Core.Events.VISIBLE, this.resume.bind(this));
+    this.events.on(Phaser.Core.Events.BLUR, this.pauseFight.bind(this));
+    this.events.on(Phaser.Core.Events.HIDDEN, this.pauseFight.bind(this));
+    this.events.on(Phaser.Core.Events.FOCUS, this.resumeFight.bind(this));
+    this.events.on(Phaser.Core.Events.VISIBLE, this.resumeFight.bind(this));
   }
 }

frontend/src/js/pause_scene.ts

+import "phaser";
+
+export default class PauseScene extends Phaser.Scene {
+  constructor() {
+    super("pause");
+  }
+
+  create() {
+    this.drawShade();
+    this.drawTitle();
+    this.drawCTA();
+    this.bindEvents();
+  }
+
+  drawShade() {
+    this.add
+      .rectangle(
+        0,
+        0,
+        this.cameras.main.width,
+        this.cameras.main.height,
+        0x000000,
+        0.75,
+      )
+      .setOrigin(0, 0);
+  }
+
+  drawTitle() {
+    const text = "PAUSE";
+    const title = this.add.text(0, 0, text, {
+      font: "bold 64px Courier",
+      color: "#ffffff",
+    });
+    title.setOrigin(0.5, 0.5);
+    title.setPosition(
+      this.cameras.main.width * 0.5,
+      this.cameras.main.height * 0.4,
+    );
+  }
+
+  drawCTA() {
+    const text = "TAKE A BREATH";
+    const title = this.add.text(0, 0, text, {
+      font: "bold 24px Courier",
+      color: "#ffffff",
+    });
+    title.setOrigin(0.5, 0.5);
+    title.setPosition(
+      this.cameras.main.width * 0.5,
+      this.cameras.main.height * 0.5,
+    );
+  }
+
+  bindEvents() {
+    const escBinding = this.input.keyboard.addKey(
+      Phaser.Input.Keyboard.KeyCodes.ESC,
+    );
+    escBinding.onDown = () => this.scene.resume("fight");
+  }
+}