From e93cc5fa6ab42744699af537da37387dee1f2ae9 Mon Sep 17 00:00:00 2001
From: Dominique Loiseau <5888729+domi7777@users.noreply.github.com>
Date: Sun, 29 Sep 2024 10:08:02 +0200
Subject: [PATCH] refactor: extract pads creation

---
 src/scenes/KitScene.ts | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

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();