refactor: extract pads creation

domi7777 · Sep 29, 2024 · e93cc5f · e93cc5f
1 parent d2d0b1c
commit e93cc5f
Showing 1 changed file with 15 additions and 11 deletions.
diff --git 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();