feat: #fe pause for mobile

frontend/src/js/fight_scene.ts

@@ -157,10 +157,7 @@ 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.bindPauseShortcut();
 
     this.gameTime = this.time.addEvent({
       delay: Number.MAX_SAFE_INTEGER,
@@ -444,4 +441,21 @@ export default class FightScene extends Phaser.Scene {
     // NOTE: pretty please, don't access the timer directly.
     return Math.round(this.gameTime.getElapsed());
   }
+
+  bindPauseShortcut() {
+    if (this.game.device.os.desktop) {
+      const escBinding = this.input.keyboard.addKey(
+        Phaser.Input.Keyboard.KeyCodes.ESC,
+      );
+      escBinding.onDown = () => this.scene.pause();
+    } else {
+      const onPointerUp = (pointer: Phaser.Input.Pointer) => {
+        const tapped =
+          pointer.downY <
+          this.cameras.main.height - this.uiDimensions.kbdHeight;
+        if (tapped) this.scene.pause();
+      };
+      this.input.on("pointerup", onPointerUp);
+    }
+  }
 }

frontend/src/js/pause_scene.ts

@@ -9,7 +9,7 @@ export default class PauseScene extends Phaser.Scene {
     this.drawShade();
     this.drawTitle();
     this.drawCTA();
-    this.bindEvents();
+    this.bindResumeShortcut();
   }
 
   drawShade() {
@@ -51,10 +51,14 @@ export default class PauseScene extends Phaser.Scene {
     );
   }
 
-  bindEvents() {
-    const escBinding = this.input.keyboard.addKey(
-      Phaser.Input.Keyboard.KeyCodes.ESC,
-    );
-    escBinding.onDown = () => this.scene.resume("fight");
+  bindResumeShortcut() {
+    if (this.game.device.os.desktop) {
+      const escBinding = this.input.keyboard.addKey(
+        Phaser.Input.Keyboard.KeyCodes.ESC,
+      );
+      escBinding.onDown = () => this.scene.resume("fight");
+    } else {
+      this.input.on("pointerup", () => this.scene.resume("fight"));
+    }
   }
 }