quick and dirty color history + double click listener

nearest.html

@@ -39,6 +39,15 @@
       document.getElementById("nu-def").innerHTML = TeXZilla.toMathMLString(String.raw`
           \vec{\nu}\left(P\right) = \frac{1}{\left|P\right|}\sum_{p\in P}{\hat{p}}
       `);
+      document.body.addEventListener("click", event => {
+        if (event.detail === 2 && event.target.innerText.includes("#")) {
+          const clickedHex = event.target.innerText?.match(/.*(#[0-9a-fA-F]{6}).*/)?.[1] ?? "";
+          if (clickedHex) {
+            document.getElementById("color-input").value = clickedHex;
+            onColorChanged(state, clickedHex);
+          }
+        }
+      });
       
       const metricSelect = document.getElementById("sort-metric");
       const clusterMetricSelect = document.getElementById("cluster-sort-metric");
@@ -214,6 +223,8 @@
       </div>
       <ul id="search-list" class="pkmn-list"></ul>
     </div>
+    <div class="divider"></div>
+    <div>Previous colors:<div id="prev-colors"></div></div>
   </div>
 </body>
 

web/listeners.js

@@ -145,6 +145,13 @@ const onColorChanged = (state, newValue) => {
   }
   const { J, a, b } = d3.jab(rgb);
 
+  if (state.target) {
+    const lastColor = document.createElement("div");
+    lastColor.innerHTML = state.target.rgb.hex;
+    lastColor.style = `color: ${getContrastingTextColor(state.target.rgb.hex)}; background-color: ${state.target.rgb.hex}; width: 6em; text-align: center;`;
+    document.getElementById("prev-colors").prepend(lastColor);
+  }
+
   state.target = {
     jab: buildVectorData([J, a, b], jab2hue, jab2lit, jab2chroma, jab2hex),
     rgb: buildVectorData([rgb.r, rgb.g, rgb.b], rgb2hue, rgb2lit, rgb2chroma, rgb2hex),