From 1b15057bdd3f7808b9ae9f33e8e586f2840179e8 Mon Sep 17 00:00:00 2001 From: Andrew McOlash Date: Thu, 18 Jul 2024 10:54:33 -0700 Subject: [PATCH] potentially fix pausing issue, better mobile layout --- src/classes/InputManager.ts | 49 +++++++++++++++++-------------------- src/classes/UI/Gamepad.ts | 2 +- src/classes/UI/Message.ts | 5 +++- src/config.ts | 11 +++++++-- src/scenes/Game.ts | 11 ++++++--- src/scenes/MazeDialog.ts | 1 - src/scenes/Paused.ts | 15 ++++++++---- 7 files changed, 54 insertions(+), 40 deletions(-) diff --git a/src/classes/InputManager.ts b/src/classes/InputManager.ts index e6dd2f7..95f2cf9 100644 --- a/src/classes/InputManager.ts +++ b/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.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() { diff --git a/src/classes/UI/Gamepad.ts b/src/classes/UI/Gamepad.ts index 54b78e8..83f59dd 100644 --- a/src/classes/UI/Gamepad.ts +++ b/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 diff --git a/src/classes/UI/Message.ts b/src/classes/UI/Message.ts index d62ca82..d1d250c 100644 --- a/src/classes/UI/Message.ts +++ b/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), { diff --git a/src/config.ts b/src/config.ts index 4777dc8..e74f709 100644 --- a/src/config.ts +++ b/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; diff --git a/src/scenes/Game.ts b/src/scenes/Game.ts index 8fbfa9e..a0ebd3c 100644 --- a/src/scenes/Game.ts +++ b/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( diff --git a/src/scenes/MazeDialog.ts b/src/scenes/MazeDialog.ts index 7b2e1b1..a724866 100644 --- a/src/scenes/MazeDialog.ts +++ b/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); diff --git a/src/scenes/Paused.ts b/src/scenes/Paused.ts index 0c918d7..aee1793 100644 --- a/src/scenes/Paused.ts +++ b/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); }) );