Allow to set custom palette color using a text input

franciscodelahoz · Apr 10, 2024 · 8a31d6a · 8a31d6a
1 parent a4a55e5
commit 8a31d6a
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 9 deletions.
diff --git a/src/html/index.html b/src/html/index.html
@@ -187,31 +187,39 @@ <h3 class="configuration-subtitle">Color settings</h3>
               <tbody>
                 <tr>
                   <td>Background</td>
-                  <td class="color-value"></td>
+                  <td class="color-input-container">
+                    <input class="color-value" type="text" value="#000000">
+                  </td>
                   <td class="color-swatch-container">
                     <input type="color" class="color-swatch" value="#000000" aria-label="Background color">
                     <div class="color-overlay"></div>
                   </td>
                 </tr>
                 <tr>
                   <td>Foreground 1</td>
-                  <td class="color-value"></td>
+                  <td class="color-input-container">
+                    <input class="color-value" type="text" value="#000000">
+                  </td>
                   <td class="color-swatch-container">
                     <input type="color" class="color-swatch" value="#000000" aria-label="Foreground 1 color">
                     <div class="color-overlay"></div>
                   </td>
                 </tr>
                 <tr>
                   <td>Foreground 2</td>
-                  <td class="color-value"></td>
+                  <td class="color-input-container">
+                    <input class="color-value" type="text" value="#000000">
+                  </td>
                   <td class="color-swatch-container">
                     <input type="color" class="color-swatch" value="#000000" aria-label="Foreground 2 color">
                     <div class="color-overlay"></div>
                   </td>
                 </tr>
                 <tr>
                   <td>Blend</td>
-                  <td class="color-value"></td>
+                  <td class="color-input-container">
+                    <input class="color-value" type="text" value="#000000">
+                  </td>
                   <td class="color-swatch-container">
                     <input type="color" class="color-swatch" value="#000000" aria-label="Blend color">
                     <div class="color-overlay"></div>

diff --git a/src/scripts/emulator/interfaces/display.ts b/src/scripts/emulator/interfaces/display.ts
@@ -1,6 +1,5 @@
 import { loresDisplayScale, screenDimensions } from '../../constants/chip8.constants';
 import { colorPalettes } from '../../constants/color-palettes.constants';
-import { EmulatorColorPalette } from '../../types/emulator';
 
 export class DisplayInterface {
   private canvas: HTMLCanvasElement;

diff --git a/src/scripts/main.ts b/src/scripts/main.ts
@@ -147,15 +147,15 @@ function setColorPaletteInLocalStorage(colorPaletteName: EmulatorColorPalette) {
 
 function setColorPaletteInTable(colorPaletteName?: EmulatorColorPalette) {
   colorPaletteTable?.querySelectorAll(`tr`)?.forEach((element, index) => {
-    const colorInput = element.querySelector('.color-value') as HTMLElement;
+    const colorInput = element.querySelector('.color-value') as HTMLInputElement;
     const colorSwatch = element.querySelector('.color-swatch') as HTMLInputElement;
     const colorOverlay = element.querySelector('.color-overlay') as HTMLElement;
 
     const colorValue = colorPaletteName ? colorPalettes[colorPaletteName][index]
       : getColorValueFromLocalStorage(index);
 
     if (colorInput) {
-      colorInput.innerText = colorValue;
+      colorInput.value = colorValue;
     }
 
     if (colorSwatch) {
@@ -193,6 +193,24 @@ function setColorPaletteInEmulator() {
   });
 }
 
+function processInputColorValue(event: Event) {
+  let colorValue = (event.target as HTMLInputElement).value.toUpperCase();
+
+  colorValue = colorValue.replace(/[^#A-F0-9]/g, '').substring(0, 7);
+
+  if (colorValue.length && colorValue.at(0) !== '#') {
+    colorValue = `#${colorValue}`;
+  }
+
+  const validColorLengths = [0, 4, 7];
+  const isValidColor = validColorLengths.includes(colorValue.length);
+
+  return {
+    color_value: colorValue,
+    is_valid: isValidColor
+  }
+}
+
 function setInitialColorPaletteSelectState() {
   setColorPaletteInTable();
   setColorPaletteInSelect();
@@ -217,6 +235,28 @@ function setInitialColorPaletteSelectState() {
   }
 
   if (colorPaletteTable) {
+    colorPaletteTable.querySelectorAll(`tr .color-input-container`).forEach((container, index) => {
+      const colorInput = container.querySelector('.color-value') as HTMLInputElement;
+
+      colorInput?.addEventListener('input', (element) => {
+        const { color_value: colorValue, is_valid: isValidColor } = processInputColorValue(element);
+
+        if (!isValidColor) {
+          (container as HTMLElement).style.backgroundColor = 'rgba(255, 0, 0, 0.2)';
+          return;
+        }
+
+        (container as HTMLElement).style.backgroundColor = '';
+
+        storeColorInLocalStorage(index, colorValue);
+        setColorPaletteInSelect();
+        setColorPaletteInTable();
+
+        setColorPaletteInEmulator();
+        emulatorInstance.resetRom();
+      });
+    });
+
     colorPaletteTable.querySelectorAll(`tr .color-swatch-container`).forEach((element, index) => {
       const colorSwatch = element.querySelector('.color-swatch') as HTMLInputElement;
 

diff --git a/src/styles/style.css b/src/styles/style.css
@@ -267,7 +267,7 @@ input[type="file"]::file-upload-button {
 }
 
 .configuration-subsection > table, label {
-  margin: 0.5rem auto;
+  margin: 0.8rem auto;
 }
 
 .configuration-group:nth-last-child(1) {
@@ -307,7 +307,6 @@ input[type="file"]::file-upload-button {
 }
 
 .configuration-table {
-  padding-top: 10px;
   width: 100%;
   border-collapse: collapse;
 }
@@ -322,6 +321,20 @@ input[type="file"]::file-upload-button {
   width: calc(100% / 3);
 }
 
+.configuration-table td input[type="text"] {
+  width: 100%;
+  box-sizing: border-box;
+  background: none;
+  border: none;
+  color: #34ff66;
+  font-family: inherit;
+  padding: 0;
+}
+
+.configuration-table td input[type="text"]:focus {
+  outline: none;
+}
+
 .color-swatch-container {
   position: relative;
   width: 100%;