potentially fix pausing issue, better mobile layout

src/classes/InputManager.ts

@@ -9,9 +9,9 @@ export enum Key {
   Back,
 }
 
-// TODO: Add support for gamepad
-
 export class InputManager {
+  scene: Scene;
+
   keys: Record<Key, boolean> = {
     [Key.Up]: false,
     [Key.Down]: false,
@@ -22,31 +22,26 @@ export class InputManager {
   };
 
   constructor(scene: Scene) {
-    scene.input.keyboard?.on('keydown-LEFT', () => (this.keys[Key.Left] = true));
-    scene.input.keyboard?.on('keydown-A', () => (this.keys[Key.Left] = true));
-    scene.input.keyboard?.on('keydown-RIGHT', () => (this.keys[Key.Right] = true));
-    scene.input.keyboard?.on('keydown-D', () => (this.keys[Key.Right] = true));
-    scene.input.keyboard?.on('keydown-UP', () => (this.keys[Key.Up] = true));
-    scene.input.keyboard?.on('keydown-W', () => (this.keys[Key.Up] = true));
-    scene.input.keyboard?.on('keydown-DOWN', () => (this.keys[Key.Down] = true));
-    scene.input.keyboard?.on('keydown-S', () => (this.keys[Key.Down] = true));
-
-    scene.input.keyboard?.on('keydown-SPACE', () => (this.keys[Key.Continue] = true));
-    scene.input.keyboard?.on('keydown-ENTER', () => (this.keys[Key.Continue] = true));
-    scene.input.keyboard?.on('keydown-ESC', () => (this.keys[Key.Back] = true));
-
-    scene.input.keyboard?.on('keyup-LEFT', () => (this.keys[Key.Left] = false));
-    scene.input.keyboard?.on('keyup-A', () => (this.keys[Key.Left] = false));
-    scene.input.keyboard?.on('keyup-RIGHT', () => (this.keys[Key.Right] = false));
-    scene.input.keyboard?.on('keyup-D', () => (this.keys[Key.Right] = false));
-    scene.input.keyboard?.on('keyup-UP', () => (this.keys[Key.Up] = false));
-    scene.input.keyboard?.on('keyup-W', () => (this.keys[Key.Up] = false));
-    scene.input.keyboard?.on('keyup-DOWN', () => (this.keys[Key.Down] = false));
-    scene.input.keyboard?.on('keyup-S', () => (this.keys[Key.Down] = false));
-
-    scene.input.keyboard?.on('keyup-SPACE', () => (this.keys[Key.Continue] = false));
-    scene.input.keyboard?.on('keyup-ENTER', () => (this.keys[Key.Continue] = false));
-    scene.input.keyboard?.on('keyup-ESC', () => (this.keys[Key.Back] = false));
+    this.scene = scene;
+
+    this.listener(Key.Left, 'LEFT');
+    this.listener(Key.Right, 'RIGHT');
+    this.listener(Key.Up, 'UP');
+    this.listener(Key.Down, 'DOWN');
+
+    this.listener(Key.Up, 'W');
+    this.listener(Key.Left, 'A');
+    this.listener(Key.Down, 'S');
+    this.listener(Key.Right, 'D');
+
+    this.listener(Key.Continue, 'SPACE');
+    this.listener(Key.Continue, 'ENTER');
+    this.listener(Key.Back, 'BACKSPACE');
+  }
+
+  listener(key: Key, str: string) {
+    this.scene.input.keyboard?.on(`keydown-${str}`, () => (this.keys[key] = true));
+    this.scene.input.keyboard?.on(`keyup-${str}`, () => (this.keys[key] = false));
   }
 
   resetKeys() {

src/classes/UI/Gamepad.ts

@@ -71,7 +71,7 @@ export class Gamepad extends GameObjects.Container {
 
   createButtons() {
     // Buttons
-    const buttonsContainer = this.scene.add.container(Config.width - 340, 0);
+    const buttonsContainer = this.scene.add.container(Config.width - 300, 0);
     this.add(buttonsContainer);
 
     // Buttons background

src/classes/UI/Message.ts

@@ -5,6 +5,7 @@ import { Game } from '../../scenes/Game';
 import { Colors, getColorNumber } from '../../utils/colors';
 import { NPCDialog } from '../../utils/dialog';
 import { fontStyle } from '../../utils/fonts';
+import { isMobile } from '../../utils/util';
 import { NPC, NPCData } from '../NPC';
 import { Player } from '../Player';
 import { Button } from './Button';
@@ -144,11 +145,13 @@ export class Message extends GameObjects.Container {
     this.options = this.getOptions();
     if (!this.options) return;
 
+    const tall = !isMobile();
+
     this.options.forEach((option, index) => {
       const text = new Button(
         this.scene,
         Config.width / 2,
-        120 + index * 74,
+        Config.height / (tall ? 9 : 14) + index * (30 + Config.height / (tall ? 16 : 22)),
         option,
         () => this.onSelectOption(option),
         {

src/config.ts

@@ -1,3 +1,5 @@
+import { isMobile } from './utils/util';
+
 let debug = false;
 // debug = true;
 
@@ -7,8 +9,13 @@ let rewindEnabled = false;
 let fastMode = false;
 fastMode = true;
 
-const width = 1280;
-const height = 720;
+let width = 1280;
+let height = 720;
+
+if (isMobile()) {
+  width = 960;
+  height = 540;
+}
 
 if (import.meta.env.PROD) {
   debug = false;

src/scenes/Game.ts

@@ -37,10 +37,11 @@ export class Game extends Scene {
 
     // ui
     this.add
-      .text(20, Config.height - 20, '⚙', {
-        fontSize: '32px',
+      .text(22, Config.height - 20, '⚙', {
+        fontSize: '48px',
         backgroundColor: `#${Colors.Teal}`,
-        padding: { x: 5, y: 5 },
+        padding: { x: 3, y: 7 },
+        align: 'center',
       })
       .setOrigin(0.5)
       .setScrollFactor(0)
@@ -160,6 +161,10 @@ export class Game extends Scene {
       this.player.journal.openJournal();
     });
 
+    this.events.on('resume', () => {
+      this.player.keys.resetKeys();
+    });
+
     if (import.meta.env.DEV) {
       if (Config.debug) {
         this.input.on(

src/scenes/MazeDialog.ts

@@ -71,7 +71,6 @@ export class MazeDialog extends Scene {
     this.scene.stop('Maze');
 
     this.scene.resume('Game');
-    this.player.keys.resetKeys();
 
     if (success) {
       warpTo(WarpType.Forest, this.player);

src/scenes/Paused.ts

@@ -6,6 +6,7 @@ import { Gamepad } from '../classes/UI/Gamepad';
 import { Config } from '../config';
 import { fontStyle } from '../utils/fonts';
 import { save } from '../utils/save';
+import { isMobile } from '../utils/util';
 import { Game } from './Game';
 
 export class Paused extends Scene {
@@ -28,28 +29,32 @@ export class Paused extends Scene {
       .setInteractive()
       .on('pointerdown', () => this.resume());
 
-    this.add.text(width / 2, 200, 'Game Paused', { ...fontStyle, fontSize: 72 }).setOrigin(0.5);
+    this.add.text(width / 2, 100, 'Game Paused', { ...fontStyle, fontSize: 72 }).setOrigin(0.5);
+
+    const tall = !isMobile();
+    const spacing = tall ? 100 : 88;
+    const start = height / 2 - (tall ? 100 : 60);
 
     const buttonGroup = new ButtonGroup(this);
 
-    buttonGroup.addButton(new Button(this, width / 2, height / 2, 'Resume', () => this.resume()));
+    buttonGroup.addButton(new Button(this, width / 2, start, 'Resume', () => this.resume()));
 
     buttonGroup.addButton(
-      new Button(this, width / 2, height / 2 + 90, 'Save', () => {
+      new Button(this, width / 2, start + spacing, 'Save', () => {
         this.resume();
         save(this.parent);
       })
     );
 
     buttonGroup.addButton(
-      new Button(this, width / 2, height / 2 + 180, 'Load', () => {
+      new Button(this, width / 2, start + spacing * 2, 'Load', () => {
         this.resume();
         this.parent.scene.restart();
       })
     );
 
     buttonGroup.addButton(
-      new Button(this, width / 2, height / 2 + 270, 'Toggle Gamepad', () => {
+      new Button(this, width / 2, start + spacing * 3, 'Toggle Gamepad', () => {
         this.parent.gamepad.setVisible(!this.parent.gamepad.visible);
       })
     );