beads.html with palette separated

1two3code · 1two3code · commit 4b8f9deae1dd · 2025-01-14T10:58:50.000+01:00
diff --git a/beads.html b/beads.html
@@ -4,6 +4,12 @@
 <head>
   <title></title>
   <style>
+    body {
+      display: grid;
+      grid-template-columns: auto auto;
+      gap: 1px;
+    }
+
     #grid-container {
       display: grid;
       grid-template-columns: repeat(29, 32px);
@@ -54,15 +60,69 @@
     .inactive {
       opacity: 0.4;
     }
+
+    .active {
+      /* margin: 4px; */
+      /* outline: 4px green */
+    }
+
+    .palette-item {
+      display: inline-block;
+      vertical-align: top;
+      margin: 5px;
+    }
+
+    .palette-item p {
+      display: inline-block;
+      vertical-align: top;
+      margin: 0 0 0 10px;
+      /* Add some space between the div and the text */
+      font-size: 12px;
+      font-weight: bold;
+      color: black;
+    }
   </style>
 </head>
 
 <body>
   <div id="grid-container">
     <!-- Grid will be generated here -->
   </div>
+  <div id="palette-container"></div>
 
   <script>
+    function createPalette(colorData) {
+      const container = document.getElementById('palette-container');
+
+      const allColors = colorData.flat()
+
+      const allUniqueColors = [...new Set(allColors.map(pixel => pixel.color))];
+      const allUniquePixels = allUniqueColors.map(color => allColors.find(pixel => pixel.color === color));
+
+      allUniquePixels
+        .sort((a, b) => a.number - b.number)
+        .forEach(({ name, number, color }) => {
+          const colorContainer = document.createElement('div');
+          colorContainer.style.display = 'flex'
+          const colorDiv = document.createElement('div');
+          colorDiv.style.backgroundColor = color;
+          colorDiv.style.width = '32px';
+          colorDiv.style.height = '32px';
+          colorDiv.style.border = '1px solid black';
+          colorDiv.className = 'palette-item';
+          const colorDivP = document.createElement('p');
+          colorDiv.append(colorDivP);
+          colorDivP.textContent = number;
+
+          const p = document.createElement('p');
+          p.textContent = `${number} ${name}`;
+
+          colorContainer.appendChild(colorDiv);
+          colorContainer.appendChild(p);
+          container.appendChild(colorContainer);
+        });
+    }
+
     function createGrid(colorData) {
       const container = document.getElementById('grid-container');
       container.innerHTML = ''; // Clear existing grid
@@ -71,10 +131,11 @@
         for (let col = 0; col < 29; col++) {
           const div = document.createElement('div');
 
-          const pixel = colorData[row][col]
+          const pixel = colorData[row][col];
           div.style.backgroundColor = pixel.color;
 
           const p = document.createElement('p');
+          p.style.display = 'none';
           p.textContent = pixel?.number;
           div.appendChild(p);
           container.appendChild(div);
@@ -85,6 +146,7 @@
         }
       }
     }
+
     // Function to move the selected class
     function moveSelected(direction) {
       const grid = document.getElementById('grid-container');
@@ -131,9 +193,7 @@
     }
 
     // Function to read JSON file
-    async function readJSON(filename) {
-    }
-
+    async function readJSON(filename) { }
 
     let selectedPValue = '';
     function handleSpacebarPress() {
@@ -143,22 +203,25 @@
       const selectedColor = selectedDiv.style.backgroundColor;
 
       // First make all divs active
-      Array.from(grid.children).forEach(div => div.classList.remove('inactive'));
+      Array.from(grid.children).forEach(div => div.classList.remove('inactive', 'active'));
 
       if (newSelectedPValue !== selectedPValue) {
         // Add 'inactive' class to divs not matching the color
         Array.from(grid.children).forEach(div => {
           if (div.style.backgroundColor !== selectedColor) {
             div.classList.add('inactive');
+          } else {
+            div.classList.add('active');
+
           }
         });
         selectedPValue = newSelectedPValue;
       } else {
-        selectedPValue = ''
+
+        selectedPValue = '';
       }
     }
 
-
     // Event listener for arrow keys
     document.addEventListener('keydown', function (event) {
       if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
@@ -175,17 +238,17 @@
         const load = urlParams.get('t');
         url = `https://tinyurl.com/${load.replaceAll("_", "ZZ")}`;
       }
-      
+
       const imageData = await (await fetch(url)).json();
       createGrid(imageData);
+      createPalette(imageData);
     });
 
     document.addEventListener('keydown', function (event) {
       if (event.key === ' ') {
         handleSpacebarPress();
       }
     });
-
   </script>
 </body>
 
