feat(colors): refactor synths colors + use PhaserColor everywhere

src/scenes/DrumsScene.ts

@@ -1,5 +1,4 @@
-import Phaser from 'phaser';
-import {Colors, HexaColor, hexToColor} from '../utils/colors.ts';
+import {HexaColor, hexToColor, PhaserColors} from '../utils/colors.ts';
 import {playSample, Sample} from '../samples/play-sample.ts';
 import {PadsScene} from './PadsScene.ts';
 
@@ -32,16 +31,15 @@ export class DrumsScene extends PadsScene {
   }
 
   protected getPadColor(_numberOfPads: number, _index: number) {
-    return Phaser.Display.Color.IntegerToColor(hexToColor(Colors.black));
+    return PhaserColors.black;
   }
 
   protected getHitColor(_numberOfPads: number, index: number) {
-    console.log('getHitColor', index);
-    return Phaser.Display.Color.IntegerToColor(hexToColor(padColors[this.instruments[index]]));
+    return hexToColor(padColors[this.instruments[index]]);
   }
 
   protected getPadText(index: number) {
-    return { text: this.instruments[index], color: padColors[this.instruments[index]] };
+    return { text: this.instruments[index], color: hexToColor(padColors[this.instruments[index]]) };
   }
 
   playSound(index: number): void {

src/scenes/EmptyScene.ts

@@ -36,7 +36,7 @@ export class EmptyScene extends Phaser.Scene {
     const button = this.instrumentButtons[col][row];
     const trackSceneKey = LoopTracksScene.getTrackSceneKey(this.trackIndex);
     button.setData('text', this.addText(button, text))
-      .setFillStyle(hexToColor(colors.active), 0.5)
+      .setFillStyle(hexToColor(colors.active).color, 0.5)
       .setInteractive()
       .on(Phaser.Input.Events.POINTER_DOWN, () => {
         this.scene.setVisible(false);
@@ -74,7 +74,7 @@ export class EmptyScene extends Phaser.Scene {
         this.instrumentButtons[i].push(
           this.add.rectangle()
             .setOrigin(0, 0)
-            .setStrokeStyle(2, hexToColor(colors.border), 0.1)
+            .setStrokeStyle(2, hexToColor(colors.border).color, 0.1)
             .setInteractive()
         );
       }

src/scenes/GiberishScene.ts

@@ -1,5 +1,5 @@
 import Phaser from 'phaser';
-import {Colors, hexToColor} from '../utils/colors.ts';
+import {PhaserColors} from '../utils/colors.ts';
 import {LoopTracksScene} from './LoopTracksScene.ts';
 import {rotateArray} from '../utils/math.ts';
 import {logger} from '../utils/logger.ts';
@@ -108,7 +108,7 @@ export class GibberishScene extends Phaser.Scene {
     const hitColor = padColor.brighten(4).color;
     const button = this.add.rectangle()
       .setFillStyle(inactiveColor)
-      .setStrokeStyle(2, hexToColor(Colors.white), 0.8)
+      .setStrokeStyle(2, PhaserColors.white.color, 0.8)
       .setInteractive()
       .setOrigin(0, 0);
     button.on('pointerdown', (e: Phaser.Input.Pointer) => {

src/scenes/LoopTracksScene.ts

@@ -1,16 +1,11 @@
 import Phaser from 'phaser';
-import {Colors, HexaColor, hexToColor} from '../utils/colors.ts';
+import {Colors, PhaserColors} from '../utils/colors.ts';
 import {FontColor, FontFamily, FontSize} from '../utils/fonts.ts';
 import {EmptyScene} from './EmptyScene.ts';
 import {Loop} from '../Loop.ts';
 import {PadsScene} from './PadsScene.ts';
 import {EVENTS} from '../events.ts';
 
-const trackColorsState: Record<string, HexaColor> = {
-  selected: Colors.white,
-  unselected: Colors.black,
-}
-
 const controlIcons = {
   play: 'play_arrow',
   record: 'fiber_manual_record',
@@ -132,11 +127,11 @@ export class LoopTracksScene extends Phaser.Scene {
         loop: new Loop(index),
         button: this.add.rectangle()
           .setOrigin(0, 0)
-          .setStrokeStyle(2, hexToColor('#777'), 0.8)
+          .setStrokeStyle(2, PhaserColors.white.color, 0.8)
           .setInteractive()
           .on(Phaser.Input.Events.POINTER_DOWN, () => this.selectTrack(index)),
         selected: false,
-        buttonSelectedCircle: this.add.ellipse(0, 0, 0, 0, hexToColor(Colors.white)),
+        buttonSelectedCircle: this.add.ellipse(0, 0, 0, 0, PhaserColors.white.color),
         buttonText: this.add.text(0, 0, `${index + 1}`, {
           fontFamily: FontFamily.Text,
           fontSize: FontSize.medium,
@@ -235,12 +230,12 @@ export class LoopTracksScene extends Phaser.Scene {
 
   private updateControlsState() {
     LoopTracksScene.tracks.forEach((track, index) => {
-      track.button.setFillStyle(hexToColor(trackColorsState.unselected));
+      track.button.setFillStyle(PhaserColors.black.color);
       track.buttonText
         .setColor(track.selected ? Colors.black : Colors.white);
       track.buttonSelectedCircle
         .setVisible(true)
-        .setFillStyle(hexToColor(track.selected ? Colors.white : Colors.black));
+        .setFillStyle(track.selected ? PhaserColors.white.color : PhaserColors.black.color);
 
       const trackScene = this.getTrackScene(index);
       const hasLoopControls = trackScene && trackScene instanceof PadsScene;

src/scenes/PadsScene.ts

@@ -1,7 +1,7 @@
 import Phaser from 'phaser';
 import {LoopTracksScene} from './LoopTracksScene.ts';
 import {rotateArray} from '../utils/math.ts';
-import {Colors, HexaColor, hexToColor} from '../utils/colors.ts';
+import {colorToHex, PhaserColor, PhaserColors} from '../utils/colors.ts';
 import {FontColor, FontFamily, FontSize} from '../utils/fonts.ts';
 import {EVENTS} from '../events.ts';
 import {logger} from '../utils/logger.ts';
@@ -26,6 +26,12 @@ export type PadsSceneSettings = {
   onChange?: (setting: Setting) => void;
 }
 
+export type PadText = {
+  text: string,
+  color?: PhaserColor,
+  alpha?: number
+};
+
 export abstract class PadsScene extends Phaser.Scene {
 
   private pads: Pad[] = [];
@@ -89,15 +95,15 @@ export abstract class PadsScene extends Phaser.Scene {
     const padText = this.getPadText(index);
     const button = this.add.rectangle()
       .setFillStyle(padColor.color)
-      .setStrokeStyle(2, hexToColor(Colors.white))
+      .setStrokeStyle(2, PhaserColors.white.color)
       .setInteractive()
       .setOrigin(0, 0);
     let buttonText: Pad['text'] = undefined;
     if (padText) {
       buttonText = this.add.text(0, 0, padText.text, {
         fontFamily: FontFamily.Text,
         fontSize: FontSize.tiny,
-        color: padText.color ?? FontColor.white,
+        color: padText.color ? colorToHex(padText.color) : FontColor.white,
       })
         .setAlpha(padText.alpha ?? 0.5)
         .setOrigin(0.5, 0.5)
@@ -139,10 +145,11 @@ export abstract class PadsScene extends Phaser.Scene {
   }
 
   protected getPadColor(numberOfPads: number, index: number): Phaser.Display.Color {
+    // TODO move to colors.ts
     return Phaser.Display.Color.HSLToColor((numberOfPads - index) / (numberOfPads * 1.5), 1, 0.5);
   }
 
-  protected getPadText(_index: number): { text: string, color?: HexaColor, alpha?: number } | undefined {
+  protected getPadText(_index: number): PadText | undefined {
     return undefined;
   }
 

src/scenes/SimpleSynthScene.ts

@@ -1,7 +1,8 @@
-import {PadsScene, PadsSceneSettings, Range, Setting} from './PadsScene.ts';
+import {PadsScene, PadsSceneSettings, PadText, Range, Setting} from './PadsScene.ts';
 import {allFrequencies} from '../samples/synth-frequencies.ts';
 import {createAudioContext} from '../samples/sample-utils.ts';
 import Phaser from 'phaser';
+import {PhaserColors} from '../utils/colors.ts';
 
 const numberOfNotes = 12;
 const maxNumberOfOctaves = 6;
@@ -28,22 +29,46 @@ export class SimpleSynthScene extends PadsScene {
     this.settings.octaveRange = octaveRange;
   }
 
-  getPadText(index: number) {
+  protected getNoteColor(index: number): Phaser.Display.Color {
+    return super.getPadColor(
+      maxNumberOfPads,
+      index + this.getNoteIndexOffset()
+    );
+    // const key = allFrequencies[index]?.key;
+    // if (key?.includes('#')) {
+    //   return color.darken(70);
+    // }
+    // return color.darken(50);
+  }
+
+  protected getPadText(index: number): PadText | undefined {
     const note = allFrequencies[index];
-    return note?.key ? { text: note?.key } : undefined;
+    return note?.key ? {
+      text: note?.key,
+      color: this.getNoteColor(index)
+    } : undefined;
   }
 
-  getPadColor(_numberOfPads: number, index: number): Phaser.Display.Color {
-    index += this.getNoteIndexOffset();
-    const color = super.getPadColor(
-      maxNumberOfPads,
-      index
-    );
-    const key = allFrequencies[index]?.key;
-    if (key?.includes('#')) {
-      return color.darken(70);
+  protected getPadColor(_numberOfPads: number, index: number): Phaser.Display.Color {
+    if (this.isSharpKey(index)) {
+      return PhaserColors.black;
     }
-    return color.darken(50);
+    return this.getNoteColor(index).darken(90);
+  }
+
+  private isSharpKey(index: number) {
+    return this.getKey(index)?.includes('#');
+  }
+
+  protected getHitColor(_numberOfPads: number, index: number): Phaser.Display.Color {
+    if (this.isSharpKey(index)) {
+      return this.getNoteColor(index).darken(50);
+    }
+    return this.getNoteColor(index);
+  }
+
+  protected getKey(index: number) {
+    return allFrequencies[index + this.getNoteIndexOffset()]?.key;
   }
 
   /**

src/utils/colors.ts

@@ -3,13 +3,29 @@ import Phaser from 'phaser';
 export type HexaColor = `#${string}`;
 
 export const Colors = {
-  white: '#b5b7bd',
+  // white: '#b5b7bd',
+  // white: '#E0E0E0',
+  white: '#D3D3D3',
   black: '#1F2023FF',
   // black: '#1a1a1ac',
 } as const;
 
-export const hexToColor = (hex: HexaColor, isDarkMode = false) => {
-  return Phaser.Display.Color.HexStringToColor(hex)
-    .darken(isDarkMode ? 75 : 0)
-    .color;
+export type PhaserColor =  Phaser.Display.Color;
+
+export const PhaserColors = {
+  get white() {
+    return hexToColor(Colors.white);
+  },
+  get black() {
+    return hexToColor(Colors.black);
+  },
+} as const;
+
+// @Deprecated
+export const hexToColor = (hexColor: HexaColor): PhaserColor => {
+  return Phaser.Display.Color.HexStringToColor(hexColor);
+}
+
+export const colorToHex = (color: PhaserColor): HexaColor => {
+  return Phaser.Display.Color.RGBToString(color.red, color.green, color.blue) as HexaColor;
 }