Remove color double click hack

form.js

@@ -155,6 +155,8 @@ const onColorChange = (inputValue, skipUpdates = false) => {
     color: ${contrast}; 
     background-color: ${hex};
   `;
+  newColor.setAttribute("role", "button");
+  newColor.addEventListener("click", () => onColorChange(hex));
   selectors.prevColors.prepend(newColor);
 
   selectors.background = hex;
@@ -349,6 +351,7 @@ const makePokemonTile = (name) => {
 
   const mu = clone.querySelector(".pkmn-total");
   mu.appendChild(document.createTextNode(total.muHex));
+  mu.addEventListener("click", () => onColorChange(total.muHex));
   mu.style = `
     color: ${getContrastingTextColor(total.muHex)}; 
     background-color: ${total.muHex};
@@ -360,6 +363,7 @@ const makePokemonTile = (name) => {
 
   clusters.forEach((cls, i) => {
     const clsDiv = clone.querySelector(`.pkmn-cls${i + 1}`);
+    clsDiv.addEventListener("click", () => onColorChange(cls.muHex));
     clsDiv.querySelector("span:first-child").innerText =
       (cls.proportion * 100).toFixed(2) + "%";
     clsDiv.querySelector("span:nth-child(2)").innerText = cls.muHex;
@@ -433,14 +437,5 @@ window.addEventListener("load", () => {
   document.forms.clusterMetric.elements.statistic.value = "importance";
   onMetricChange(document.forms.clusterMetric.elements, true);
 
-  document.body.addEventListener("click", ({ target: { innerText }, detail }) => {
-    if (detail === 2 && innerText?.includes("#")) {
-      const clickedHex = innerText?.match(/.*(#[0-9a-fA-F]{6}).*/)?.[1] ?? "";
-      if (clickedHex) {
-        onColorChange(clickedHex);
-      }
-    }
-  });
-
   onColorChange(randomColor());
 });

index.html

@@ -105,6 +105,7 @@
         <img />
         <div class="pkmn-name"></div>
         <div
+          role="button"
           class="pkmn-total"
           onmouseenter="event.target.querySelector('dialog').show()"
           onmouseleave="event.target.querySelector('dialog').close()"
@@ -113,6 +114,7 @@
         </div>
         <div class="pkmn-score"></div>
         <div
+          role="button"
           class="pkmn-cls pkmn-cls1"
           onmouseenter="event.target.querySelector('dialog').show()"
           onmouseleave="event.target.querySelector('dialog').close()"
@@ -121,6 +123,7 @@
           <dialog class="pkmn-data" hidden></dialog>
         </div>
         <div
+          role="button"
           class="pkmn-cls pkmn-cls2"
           onmouseenter="event.target.querySelector('dialog').show()"
           onmouseleave="event.target.querySelector('dialog').close()"
@@ -129,6 +132,7 @@
           <dialog class="pkmn-data" hidden></dialog>
         </div>
         <div
+          role="button"
           class="pkmn-cls pkmn-cls3"
           onmouseenter="event.target.querySelector('dialog').show()"
           onmouseleave="event.target.querySelector('dialog').close()"
@@ -137,6 +141,7 @@
           <dialog class="pkmn-data" hidden></dialog>
         </div>
         <div
+          role="button"
           class="pkmn-cls pkmn-cls4"
           onmouseenter="event.target.querySelector('dialog').show()"
           onmouseleave="event.target.querySelector('dialog').close()"

styles.css

@@ -59,6 +59,7 @@ select:disabled {
   display: inline-flex;
   align-items: center;
   padding-inline-end: 1ch;
+  cursor: pointer;
 }
 
 .pkmn > .pkmn-score {
@@ -76,6 +77,7 @@ select:disabled {
   padding-inline-end: 0.5ch;
   display: flex;
   justify-content: space-between;
+  cursor: pointer;
 }
 
 .pkmn > :is(.pkmn-total, .pkmn-cls):hover {
@@ -381,6 +383,14 @@ input:checked + .fn-minmax-toggle > span:last-child {
   grid-area: prev;
 }
 
+#prev-colors > * {
+  cursor: pointer;
+}
+
+#prev-colors > *:hover {
+  outline: var(--highlight-border);
+}
+
 .metric-select-fieldset {
   width: 24ch;
   display: grid;