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);
+ });
}
}