diff --git a/src/scenes/KitScene.ts b/src/scenes/KitScene.ts index a1d6d9b..eb8fb44 100644 --- a/src/scenes/KitScene.ts +++ b/src/scenes/KitScene.ts @@ -12,13 +12,17 @@ export class KitScene extends Phaser.Scene { } create () { - const rectangles = [ - this.add.rectangle().setFillStyle(this.hexToColor('#FDA341')).on('pointerdown', () => playHiHat()), - this.add.rectangle().setFillStyle(this.hexToColor('#F24E1E')).on('pointerdown', () => playKick()), - this.add.rectangle().setFillStyle(this.hexToColor('#4A90E2')).on('pointerdown', () => playSnare()), - this.add.rectangle().setFillStyle(this.hexToColor('#A0D8C5')).on('pointerdown', () => playCrashCymbal()) + this.createPads(); + } + + private createPads() { + const pads = [ + this.add.rectangle().setFillStyle(this.hexToColor('#FDA341')).on('pointerdown', () => playHiHat()), + this.add.rectangle().setFillStyle(this.hexToColor('#F24E1E')).on('pointerdown', () => playKick()), + this.add.rectangle().setFillStyle(this.hexToColor('#4A90E2')).on('pointerdown', () => playSnare()), + this.add.rectangle().setFillStyle(this.hexToColor('#A0D8C5')).on('pointerdown', () => playCrashCymbal()) ]; - rectangles.forEach(rectangle => rectangle + pads.forEach(rectangle => rectangle .setInteractive() .setOrigin(0, 0) .on('pointerdown', () => { @@ -34,11 +38,11 @@ export class KitScene extends Phaser.Scene { const resizePads = () => { const width = window.innerWidth; const height = window.innerHeight; - // 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); + // Update the pads + pads[0].setSize(width / 2, height / 2).setPosition(0, 0); + pads[1].setSize(width / 2, height / 2).setPosition(width / 2, 0); + pads[2].setSize(width / 2, height / 2).setPosition(0, height / 2); + pads[3].setSize(width / 2, height / 2).setPosition(width / 2, height / 2); }; window.addEventListener('resize', resizePads); resizePads();