feat(loopTracks): add minimal structure + empty scene

src/Game.tsx

@@ -2,6 +2,9 @@ import Phaser from 'phaser';
 import {DrumsScene} from './scenes/DrumsScene.ts';
 import {loadFonts} from './fonts.ts';
 import {ControlsScene} from './scenes/ControlsScene.ts';
+import {LoopTracksScene} from './scenes/LoopTracksScene.ts';
+import {isDarkMode} from './settings/color-settings.ts';
+import {EmptyScene} from './scenes/EmptyScene.ts';
 
 function resizeGame(game: Phaser.Game) {
   const width = window.innerWidth;
@@ -22,9 +25,11 @@ export const Game = () => {
         parent: 'phaser-container',
         width: window.innerWidth,
         height: window.innerHeight,
-        backgroundColor: '#FFF',
+        backgroundColor: isDarkMode() ? '#333' : '#DDD',
         scene: [
           ControlsScene,
+          LoopTracksScene,
+          EmptyScene,
           DrumsScene,
         ],
         input: {
@@ -36,6 +41,8 @@ export const Game = () => {
       });
       game.scene.start('ControlsScene');
       game.scene.start('DrumsScene');
+      // game.scene.start('LoopTracksScene');
+      // game.scene.start('EmptyScene');
     });
   }
   return <></>;

src/scenes/EmptyScene.ts

@@ -0,0 +1,61 @@
+import Phaser from 'phaser';
+
+import {LoopTracksScene} from './LoopTracksScene.ts';
+import {hexToColor} from '../colors.ts';
+import {FontFamily} from '../fonts.ts';
+
+export class EmptyScene extends Phaser.Scene {
+  constructor() {
+    super('EmptyScene');
+  }
+  create() {
+    this.cameras.main
+      .setOrigin(0, 0)
+      .setPosition(LoopTracksScene.sceneWidth, 0)
+      .setViewport(LoopTracksScene.sceneWidth, 0, window.innerWidth - LoopTracksScene.sceneWidth, window.innerHeight)
+      .setBackgroundColor('#147');
+    // divide the scene into 16 equal parts
+    const colNumber = 5;
+    const rowNumber = 5;
+    const width = (window.innerWidth - LoopTracksScene.sceneWidth) / colNumber;
+    const height = window.innerHeight / rowNumber;
+    // create matrix of buttons
+    const instrumentButtons: Phaser.GameObjects.Rectangle[][] = [];
+    for (let i = 0; i < colNumber; i++) {
+      instrumentButtons.push([]);
+      for (let j = 0; j < rowNumber; j++) {
+        instrumentButtons[i].push(
+          this.add.rectangle()
+            .setOrigin(0, 0)
+            .setPosition( i * width, j * height)
+            .setSize(width, height)
+            .setStrokeStyle(2, hexToColor('#FFF'), 0.1)
+        );
+      }
+    }
+    const drumsButton = instrumentButtons[1][2];
+    this.addText(drumsButton, 'Drums');
+
+    const otherDrumsButton = instrumentButtons[3][2];
+    this.addText(otherDrumsButton, 'Other Drums');
+
+    const activeButtons = [
+      drumsButton,
+      otherDrumsButton,
+    ];
+    activeButtons.forEach(button => button
+      .setFillStyle(hexToColor('#FFF'), 0.5)
+      .setInteractive()
+      .on(Phaser.Input.Events.POINTER_DOWN, () => button.setFillStyle(hexToColor('#FFF'), 0.8))
+      .on(Phaser.Input.Events.POINTER_UP, () => button.setFillStyle(hexToColor('#FFF'), 0.5))
+    );
+  }
+
+  private addText(button: Phaser.GameObjects.Rectangle, text: string) {
+    this.add.text(button.x + button.width / 2, button.y + button.height / 2, text, {
+      fontSize: '24px',
+      color: '#FFF',
+      fontFamily: FontFamily.Text,
+    }).setOrigin(0.5);
+  }
+}

src/scenes/LoopTracksScene.ts

@@ -0,0 +1,71 @@
+import Phaser from 'phaser';
+import {HexaColor, hexToColor} from '../colors.ts';
+
+const trackColorsState: Record<boolean, HexaColor> = {
+  true: '#DDD',
+  false: '#000',
+}
+
+type Track = {
+    button: Phaser.GameObjects.Rectangle;
+    selected: boolean,
+    scene: Phaser.Scene,
+};
+
+export class LoopTracksScene extends Phaser.Scene {
+  private tracks: Track[]
+
+  constructor() {
+    super('LoopTracksScene');
+  }
+
+  static numTracks = 5;
+  static get sceneWidth() {
+    return window.innerWidth / 10;
+  }
+
+  static get buttonHeight() {
+    return window.innerHeight / LoopTracksScene.numTracks;
+  }
+
+  create() {
+    this.cameras.main
+      .setOrigin(0, 0)
+      .setPosition(0, 0)
+      .setViewport(0, 0, LoopTracksScene.sceneWidth, window.innerHeight)
+      .setBackgroundColor('#963');
+    this.createTracks();
+  }
+
+  private createTracks() {
+    this.tracks = new Array(LoopTracksScene.numTracks).fill(null).map((_, index) => {
+      return {
+        button: this.add.rectangle()
+          .setOrigin(0, 0)
+          .setPosition(0, index * LoopTracksScene.buttonHeight)
+          .setSize(LoopTracksScene.sceneWidth, LoopTracksScene.buttonHeight)
+          .setStrokeStyle(2, hexToColor('#FFF'), 0.8)
+          .setInteractive()
+          .on(Phaser.Input.Events.POINTER_DOWN, () => this.selectTrack(index)),
+        selected: false,
+        scene: this.scene.get('EmptyScene' as any),
+      };
+    })
+    this.selectTrack(0);
+  }
+
+  private selectTrack(index: number) {
+    const track = this.tracks[index];
+    if (!track.selected) {
+      this.tracks.forEach(track => track.selected = false);
+      track.selected = true;
+      this.updateSelectedColor();
+    }
+  }
+
+  private updateSelectedColor() {
+    this.tracks.forEach(({button, selected}) => {
+      button.setFillStyle(hexToColor(trackColorsState[selected]));
+    });
+  }
+}