From 72bc186a742d4d6294323a118c16dcbdb9322ac4 Mon Sep 17 00:00:00 2001 From: Dominique Loiseau <5888729+domi7777@users.noreply.github.com> Date: Sat, 28 Sep 2024 15:37:46 +0200 Subject: [PATCH] feat(mobile/resize): support portrait/landscape modes --- index.html | 3 +++ src/Kit.tsx | 17 +++++++++++++++- src/scenes/KitScene.ts | 45 +++++++++++++++++++++++++++++------------- 3 files changed, 50 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 73f9337..361f75d 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,9 @@ max-width: 100%; height: 100%; } + canvas { + border: 1px solid white + } diff --git a/src/Kit.tsx b/src/Kit.tsx index 58b800f..f685b68 100644 --- a/src/Kit.tsx +++ b/src/Kit.tsx @@ -1,12 +1,24 @@ import Phaser from 'phaser'; import {KitScene} from './scenes/KitScene.ts'; +function resizeGame(game: Phaser.Game) { + const width = window.innerWidth; + const height = window.innerHeight; + + game.scale.resize(width, height); + game.scene.scenes.forEach(scene => { + if (scene instanceof Phaser.Scene && scene.sys.scale) { + scene.sys.scale.refresh(); + } + }); +} + let isGameInitialized = false; export const Kit = () => { if (!isGameInitialized) { isGameInitialized = true; - new Phaser.Game({ + const game =new Phaser.Game({ type: Phaser.AUTO, mode: Phaser.Scale.RESIZE, parent: 'phaser-container', @@ -16,6 +28,9 @@ export const Kit = () => { KitScene ], }); + window.addEventListener('resize', () => { + resizeGame(game); + }); return <>; } } diff --git a/src/scenes/KitScene.ts b/src/scenes/KitScene.ts index 04fa9f2..cad5017 100644 --- a/src/scenes/KitScene.ts +++ b/src/scenes/KitScene.ts @@ -8,11 +8,11 @@ import {playCrashCymbal} from '../samples/crash.ts'; export class KitScene extends Phaser.Scene { get gameWidth() { - return this.game.canvas.width; + return window.innerWidth; } get gameHeight() { - return this.game.canvas.height; + return window.innerHeight; } protected hexToColor(hex: string) { @@ -20,17 +20,34 @@ export class KitScene extends Phaser.Scene { } create () { - this.add.rectangle(0, 0, this.gameWidth/2, this.gameHeight/2, this.hexToColor('#FDA341')) - .setInteractive() - .on('pointerdown', () => playHiHat()); - this.add.rectangle(this.gameWidth/2, 0, this.gameWidth/2, this.gameHeight/2, this.hexToColor('#FE5156')) - .setInteractive() - .on('pointerdown', () => playSnare()); - this.add.rectangle(0, this.gameHeight/2, this.gameWidth/2, this.gameHeight/2, this.hexToColor('#4A90E2')) - .setInteractive() - .on('pointerdown', () => playKick()); - this.add.rectangle(this.gameWidth/2, this.gameHeight/2, this.gameWidth/2, this.gameHeight/2, this.hexToColor('#C56BFE')) - .setInteractive() - .on('pointerdown', () => playCrashCymbal()); + const rectangles = [ + this.add.rectangle(0, 0, this.gameWidth/2, this.gameHeight/2, this.hexToColor('#FDA341')) + .setInteractive() + .setOrigin(0, 0) + .on('pointerdown', () => playHiHat()), + this.add.rectangle(this.gameWidth/2, 0, this.gameWidth/2, this.gameHeight/2, this.hexToColor('#FE5156')) + .setInteractive() + .setOrigin(0, 0) + + .on('pointerdown', () => playSnare()), + this.add.rectangle(0, this.gameHeight/2, this.gameWidth/2, this.gameHeight/2, this.hexToColor('#4A90E2')) + .setInteractive() + .setOrigin(0, 0) + + .on('pointerdown', () => playKick()), + this.add.rectangle(this.gameWidth/2, this.gameHeight/2, this.gameWidth/2, this.gameHeight/2, this.hexToColor('#C56BFE')) + .setInteractive() + .setOrigin(0, 0) + .on('pointerdown', () => playCrashCymbal()) + ]; + window.addEventListener('resize', () => { + const width = this.gameWidth; + const height = this.gameHeight; + // Update the rectangles + rectangles[0].setSize(width / 2, height / 2).setPosition(0, 0); + rectangles[1].setSize(width / 2, height / 2).setPosition(width / 2, 0); + rectangles[2].setSize(width / 2, height / 2).setPosition(0, height / 2); + rectangles[3].setSize(width / 2, height / 2).setPosition(width / 2, height / 2); + }); } }