refactor(colors): centralize drum colors

domi7777 · Dec 14, 2024 · 273c2d5 · 273c2d5
1 parent 15f68c8
commit 273c2d5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 9 deletions.
diff --git a/src/scenes/DrumsScene.ts b/src/scenes/DrumsScene.ts
@@ -1,18 +1,20 @@
-import {HexaColor, hexToColor, PhaserColors} from '../utils/colors.ts';
+import {Colors, HexaColor, hexToColor, PhaserColors} from '../utils/colors.ts';
 import {playSample, Sample} from '../samples/play-sample.ts';
 import {PadsScene} from './PadsScene.ts';
 
 const padColors: Record<Sample, HexaColor> = {
-  hihat: '#FDA341',
-  kick: '#F24E1E',
-  snare: '#4A90E2',
-  crash: '#A0D8C5',
-  'hihat-open': '#F9F871',
-  ride: '#F5C542',
-  'tom-low': '#FF7F50',
-  'tom-high': '#9B59B6',
+  hihat: Colors.orange,
+  kick: Colors.red,
+  snare: Colors.blue,
+  crash: Colors.green,
+  'hihat-open': Colors.yellow,
+  ride: Colors.yellow2,
+  'tom-low': Colors.orange2,
+  'tom-high': Colors.purple,
 };
 
+// create same object but instead of instrument, name colors
+
 export class DrumsScene extends PadsScene {
 
   private instruments: Sample[] = [

diff --git a/src/utils/colors.ts b/src/utils/colors.ts
@@ -8,6 +8,14 @@ export const Colors = {
   white: '#D3D3D3',
   black: '#1F2023FF',
   // black: '#1a1a1ac',
+  orange: '#FDA341',
+  red: '#F24E1E',
+  blue: '#4A90E2',
+  green: '#A0D8C5',
+  yellow: '#F9F871',
+  yellow2: '#F5C542',
+  orange2: '#FF7F50',
+  purple: '#9B59B6',
 } as const;
 
 export type PhaserColor =  Phaser.Display.Color;
@@ -19,6 +27,30 @@ export const PhaserColors = {
   get black() {
     return hexToColor(Colors.black);
   },
+  get orange() {
+    return hexToColor(Colors.orange);
+  },
+  get red() {
+    return hexToColor(Colors.red);
+  },
+  get blue() {
+    return hexToColor(Colors.blue);
+  },
+  get green() {
+    return hexToColor(Colors.green);
+  },
+  get yellow() {
+    return hexToColor(Colors.yellow);
+  },
+  get yellow2() {
+    return hexToColor(Colors.yellow2);
+  },
+  get orange2() {
+    return hexToColor(Colors.orange2);
+  },
+  get purple() {
+    return hexToColor(Colors.purple);
+  },
 } as const;
 
 // @Deprecated