From 6e10d31a1fb061bf3f6ed645e84844e2436ede03 Mon Sep 17 00:00:00 2001
From: Dan <UnrealDanMail@gmail.com>
Date: Fri, 16 Aug 2024 02:13:17 -0700
Subject: [PATCH] colorselect interactive preview update

---
 docs/assets/js/ColorSelect.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/docs/assets/js/ColorSelect.js b/docs/assets/js/ColorSelect.js
index a6cd8bc489..f1bd828ebe 100644
--- a/docs/assets/js/ColorSelect.js
+++ b/docs/assets/js/ColorSelect.js
@@ -140,9 +140,10 @@ function moveAddButton(slot) {
     prevAddSlot.onclick = null; // Remove the click handler for empty slots
   }
 
-  // Update the newly filled slot
+  // Update the newly filled slot (ensures the color is displayed correctly)
   currentSlot.classList.remove('empty');
   currentSlot.classList.remove('add-slot');
+  currentSlot.style.backgroundColor = ''; // Clear the background color
   currentSlot.onclick = function() {
     editColor(slot);
   };
@@ -195,7 +196,6 @@ function deleteSlot(slot) {
       currentSlotElement.innerHTML = '';
       currentSlotElement.style.cursor = 'default'; // Remove pointer cursor
       currentSlotElement.onclick = null;
-      break; // Stop shifting once the next slot is empty
     }
   }
 
@@ -212,6 +212,19 @@ function deleteSlot(slot) {
       editColor(filledSlots + 1);
     };
   }
+
+  // Ensure that the slot after the add button is correctly updated
+  for (let i = filledSlots + 2; i <= 8; i++) {
+    const slotToCheck = document.getElementById(`slot${i}`);
+    if (slotToCheck) {
+      slotToCheck.classList.add('empty');
+      slotToCheck.classList.remove('add-slot');
+      slotToCheck.style.backgroundColor = '#222'; // Darker background for empty slots
+      slotToCheck.innerHTML = '';
+      slotToCheck.style.cursor = 'default';
+      slotToCheck.onclick = null;
+    }
+  }
 }
 
 // Handle holding and deleting