rand color, prev color track, bg update

form.js

@@ -11,6 +11,15 @@ const selectors = {
   get useClusters() {
     return selectors.sortControl.useClusters.value;
   },
+  get prevColors() {
+    return document.getElementById("prev-colors");
+  },
+  set background(hex) {
+    document.querySelector(":root").style.setProperty("--background", hex);
+  },
+  set highlight(hex) {
+    document.querySelector(":root").style.setProperty("--highlight", hex);
+  },
 };
 
 const onMetricChange = (elements, skipUpdates = false) => {
@@ -30,7 +39,6 @@ const onMetricChange = (elements, skipUpdates = false) => {
 };
 
 const onColorChange = (inputValue, skipUpdates = false) => {
-  console.log(inputValue);
   const colorInput = "#" + (inputValue?.replace("#", "") ?? "FFFFFF");
 
   if (colorInput.length !== 7) {
@@ -42,12 +50,22 @@ const onColorChange = (inputValue, skipUpdates = false) => {
     return;
   }
 
-  const refomatted = rgb.formatHex();
-  selectors.sortControl.colorText.value = refomatted;
-  selectors.sortControl.colorPicker.value = refomatted;
+  const hex = rgb.formatHex();
+  selectors.sortControl.colorText.value = hex;
+  selectors.sortControl.colorPicker.value = hex;
+
+  const contrast = getContrastingTextColor(hex);
 
-  // TODO last color saver
-  // TODO bg + text color change
+  const newColor = document.createElement("div");
+  newColor.innerHTML = hex;
+  newColor.style = `
+    color: ${contrast}; 
+    background-color: ${hex};
+  `;
+  selectors.prevColors.prepend(newColor);
+
+  selectors.background = hex;
+  selectors.highlight = contrast;
 
   if (!skipUpdates) {
     updateScores(rgb);
@@ -56,6 +74,9 @@ const onColorChange = (inputValue, skipUpdates = false) => {
   }
 };
 
+const randomColor = () =>
+  d3.hsl(Math.random() * 360, Math.random(), Math.random()).formatHex();
+
 const calcScores = (data, target) => {
   const sigma = Math.sqrt(
     data.inertia - 2 * vectorDot(data.mu.vector, target.vector) + target.sqMag
@@ -111,15 +132,17 @@ const updateScores = (rgb) => {
         clusters: rgb.clusters.map((c) => calcScores(c, targetRgb)),
       },
     };
+  });
+};
+
+const updateSort = () => {
+  pokemonData.forEach(({ name, jab, rgb }) => {
     currentBestClusterIndices[name] = {
       // TODO
       jab: 0,
       rgb: 0,
     };
   });
-};
-
-const updateSort = () => {
   // TODO
 };
 
@@ -127,7 +150,7 @@ const showResults = (resultsToDisplay) => {
   // TODO
 };
 
-window.onload = () => {
+window.addEventListener("load", () => {
   const metricTemplate = document.getElementById("metric-form-template").content;
 
   selectors.sortControl.metric.appendChild(metricTemplate.cloneNode(true));
@@ -147,4 +170,4 @@ window.onload = () => {
 
   selectors.clusterControl.rescaleSection.appendChild(scaleTemplate.cloneNode(true));
   selectors.clusterControl.rescaleFactor.value = "inverse";
-};
+});

index.html

@@ -115,6 +115,7 @@
           type="color"
           onchange="onColorChange(event.target.value)"
         />
+        <button type="button" onclick="onColorChange(randomColor())">Random Color</button>
       </div>
       <div>
         <label>
@@ -195,5 +196,10 @@
         <!-- template mount point -->
       </fieldset>
     </form>
+
+    <div>
+      <div>Previous Colors</div>
+      <div id="prev-colors"></div>
+    </div>
   </body>
 </html>

styles.css

@@ -9,6 +9,7 @@ body {
     "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   color: var(--highlight);
   background-color: var(--background);
+  accent-color: var(--highlight);
 }
 
 select:disabled {