feat(mobile/resize): support portrait/landscape modes

domi7777 · Sep 28, 2024 · 72bc186 · 72bc186
1 parent 9c4cac8
commit 72bc186
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -14,6 +14,9 @@
               max-width: 100%;
               height: 100%;
           }
+          canvas {
+              border: 1px solid white
+          }
       </style>
   </head>
   <body style="padding: 0;margin: 0">

diff --git 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
@@ -8,29 +8,46 @@ 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) {
     return Phaser.Display.Color.HexStringToColor(hex).color;
   }
 
   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);
+    });
   }
 }