Refactored the emulator configuration and allows saving custom color …

…palettes
franciscodelahoz · Apr 14, 2024 · eebc3c7 · eebc3c7
1 parent 52e415d
commit eebc3c7
Show file tree

Hide file tree

Showing 16 changed files with 1,096 additions and 462 deletions.
diff --git a/src/html/index.html b/src/html/index.html
@@ -20,7 +20,7 @@
     </header>
     <main class="container">
       <section class="emulator-view">
-        <canvas id="canvas"></canvas>
+        <canvas id="canvas" width="768" height="384"></canvas>
         <div class="rom-controller">
           <input type="file" name="file" id="file" accept=".ch8,.sc8,.xo8" aria-label="Chip8 file selector">
           <button id="reset-rom-btn" class="default-button">Reset rom</button>
@@ -168,27 +168,38 @@ <h2 class="configuration-title">Compatibility Presets</h2>
           <h2 class="configuration-title">Appearance</h2>
           <section class="configuration-subsection">
             <h3 class="configuration-subtitle">Color settings</h3>
-            <label>
-              Color palette presets
-              <select name="color-palettes-select" id="color-palettes-select">
-                <option value="custom" disabled>Custom</option>
-                <option value="default">Default</option>
-                <option value="black_and_white">Black and white</option>
-                <option value="cyberpunk">Cyberpunk</option>
-                <option value="angry_orange">Angry Orange</option>
-                <option value="octo">Octo</option>
-                <option value="arctic_horizon">Arctic Horizon</option>
-                <option value="harbor_mist">Harbor Mist</option>
-                <option value="autumn">Autumn</option>
-                <option value="gameboy">Game Boy</option>
-              </select>
-            </label>
+            <div class="color-select-section">
+              <label for="color-palettes-select">Color palettes</label>
+              <div class="select-container">
+                <select name="color-palettes-select" id="color-palettes-select">
+                  <option value="custom" disabled>Custom</option>
+                  <optgroup label="Default palettes">
+                    <option value="default">Default</option>
+                    <option value="black_and_white">Black and white</option>
+                    <option value="cyberpunk">Cyberpunk</option>
+                    <option value="angry_orange">Angry Orange</option>
+                    <option value="octo">Octo</option>
+                    <option value="arctic_horizon">Arctic Horizon</option>
+                    <option value="harbor_mist">Harbor Mist</option>
+                    <option value="autumn">Autumn</option>
+                    <option value="gameboy">Game Boy</option>
+                  </optgroup>
+                  <optgroup label="Custom palettes">
+                  </optgroup>
+                </select>
+                <div class="custom-color-palette-options">
+                  <button class="default-button custom-color-palette-button" id="save-custom-color-palette" aria-label="Save current custom color palette" title="Save current custom color palette" style="display: none;" disabled>S</button>
+                  <button class="default-button custom-color-palette-button" id="rename-custom-color-palette" aria-label="Rename current stored custom color palette" title="Rename current stored custom color palette" style="display: none;" disabled>R</button>
+                  <button class="default-button custom-color-palette-button" id="delete-custom-color-palette" aria-label="Delete current stored custom color palette" title="Delete current stored custom color palette" style="display: none;" disabled>D</button>
+                </div>
+              </div>
+            </div>
             <table class="configuration-table" id="configuration-table">
               <tbody>
                 <tr>
                   <td>Background</td>
                   <td class="color-input-container">
-                    <input class="color-value" type="text" value="#000000">
+                    <input class="color-value" type="text" value="#000000" aria-label="Background color value">
                   </td>
                   <td class="color-swatch-container">
                     <input type="color" class="color-swatch" value="#000000" aria-label="Background color">
@@ -198,7 +209,7 @@ <h3 class="configuration-subtitle">Color settings</h3>
                 <tr>
                   <td>Foreground 1</td>
                   <td class="color-input-container">
-                    <input class="color-value" type="text" value="#000000">
+                    <input class="color-value" type="text" value="#000000" aria-label="Foreground 1 color value">
                   </td>
                   <td class="color-swatch-container">
                     <input type="color" class="color-swatch" value="#000000" aria-label="Foreground 1 color">
@@ -208,7 +219,7 @@ <h3 class="configuration-subtitle">Color settings</h3>
                 <tr>
                   <td>Foreground 2</td>
                   <td class="color-input-container">
-                    <input class="color-value" type="text" value="#000000">
+                    <input class="color-value" type="text" value="#000000" aria-label="Foreground 2 color value">
                   </td>
                   <td class="color-swatch-container">
                     <input type="color" class="color-swatch" value="#000000" aria-label="Foreground 2 color">
@@ -218,7 +229,7 @@ <h3 class="configuration-subtitle">Color settings</h3>
                 <tr>
                   <td>Blend</td>
                   <td class="color-input-container">
-                    <input class="color-value" type="text" value="#000000">
+                    <input class="color-value" type="text" value="#000000" aria-label="Blend color value">
                   </td>
                   <td class="color-swatch-container">
                     <input type="color" class="color-swatch" value="#000000" aria-label="Blend color">

diff --git a/src/scripts/constants/chip8.constants.ts b/src/scripts/constants/chip8.constants.ts
@@ -72,9 +72,9 @@ export const loresDisplayScale = 12;
 
 export const defaultFontAppearance: EmulatorFontAppearance = 'octo';
 
-export const defaultColorPalette: EmulatorColorPalette = 'default';
+export const defaultColorPaletteId: EmulatorColorPalette = 'default';
 
-export const customColorPaletteKeyName = 'custom';
+export const customColorPaletteKeyId = 'custom';
 
 export enum Chip8CpuEvents {
   EXIT = 'exit',

diff --git a/src/scripts/constants/color-palettes.constants.ts b/src/scripts/constants/color-palettes.constants.ts
@@ -15,7 +15,7 @@ export const colorPalettes = {
     '#100019',
     '#FFE1FF',
     '#EF46E0',
-    '#D326C0'
+    '#AB269C'
   ],
   angry_orange: [
     '#492D17',

diff --git a/src/scripts/constants/emulator.constants.ts b/src/scripts/constants/emulator.constants.ts
@@ -6,3 +6,14 @@ export const emulatorConfigurationsKeys = {
     'blend'
   ]
 }
+
+export const customPalettePrefix = 'custom_palette_';
+
+export const database = {
+  name: 'emulator',
+  storage_name: {
+    custom_color_palettes: 'custom_color_palettes',
+    settings: 'settings',
+  },
+  current_version: 1,
+}
diff --git a/src/scripts/emulator/interfaces/display.ts b/src/scripts/emulator/interfaces/display.ts
@@ -1,5 +1,5 @@
 import { loresDisplayScale, screenDimensions } from '../../constants/chip8.constants';
-import { colorPalettes } from '../../constants/color-palettes.constants';
+import ColorPalettesManager from '../../tools/color-palettes-manager.tools';
 
 export class DisplayInterface {
   private canvas: HTMLCanvasElement;
@@ -18,7 +18,7 @@ export class DisplayInterface {
 
   private displayHeight: number;
 
-  private planeColors: string[];
+  private planeColors: string[] = [];
 
   private bitPlane: number = 1;
 
@@ -47,7 +47,7 @@ export class DisplayInterface {
     this.context.canvas.width = this.displayWidth;
     this.context.canvas.height = this.displayHeight;
 
-    this.planeColors = [ ...colorPalettes.default ];
+    this.planeColors = [ ...ColorPalettesManager.getCurrentSelectedPalette() ];
   }
 
   setPaletteColor(index: number, color: string) {
@@ -78,6 +78,7 @@ export class DisplayInterface {
 
     const scaleX = this.canvas.width / this.columns;
     const scaleY = this.canvas.height / this.rows;
+
     this.displayScale = Math.min(scaleX, scaleY);
 
     this.displayBuffers = [