Resolve reactivity issues for cluster data

index.html

@@ -138,7 +138,6 @@
     </template>
 
     <template id="pkmn-data-template">
-      <!-- TODO styling -->
       <div>α&nbsp;=&nbsp;<span bind-to="alpha"></span></div>
       <div>σ&nbsp;=&nbsp;<span bind-to="sigma"></span></div>
       <div>Θ&nbsp;=&nbsp;<span bind-to="bigTheta"></span></div>
@@ -193,7 +192,6 @@
             ></div>
           </div>
         </div>
-        <!-- TODO the actual data -->
       </div>
     </template>
 

script.js

@@ -407,17 +407,49 @@ const displayPokemon = (pkmnName, target) => {
       image.src = `https://img.pokemondb.net/sprites/scarlet-violet/icon/${spriteName}.png`;
 
       name.innerText = name.title = image.alt = formattedName;
-
       U.reactive(() => {
         const { rankingValues } = currentResults.value;
         score.innerText = rankingValues[pkmnName][colorSpace.value].toFixed(2);
       });
 
-      U.reactive(() => {
-        const { total } = currentScores.value[pkmnName][colorSpace.value];
-        totalBtn.innerText = total.muHex;
-        totalBtn.style = getColorButtonStyle(total.muHex);
+      [
+        [({ total }) => total, totalBtn, totalData],
+        [({ clusters }) => clusters[0], cls1Btn, cls1Data],
+        [({ clusters }) => clusters[1], cls2Btn, cls2Data],
+        [({ clusters }) => clusters[2], cls3Btn, cls3Data],
+        [({ clusters }) => clusters[3], cls4Btn, cls4Data],
+      ].forEach(([getData, button, dataTile]) => {
+        U.reactive(() => {
+          const data = getData(currentScores.value[pkmnName][colorSpace.value]);
+          if (!data) {
+            button.hidden = true;
+            return;
+          }
+          button.hidden = false;
+
+          const { muHex } = data;
+          button.innerText = muHex;
+          button.style = getColorButtonStyle(muHex);
+        });
+
+        button.addEventListener("click", () => {
+          targetColor.value = getData(
+            currentScores.value[pkmnName][colorSpace.value]
+          )?.muHex;
+        });
+
+        U.template("pkmn-data-template", (binds) => {
+          Object.entries(binds).forEach(([metricName, target]) => {
+            U.reactive(() => {
+              target.innerText = getData(currentScores.value[pkmnName][colorSpace.value])
+                ?.[metricName]?.toFixed(2)
+                ?.replace(".00", "");
+            });
+          });
+          return dataTile;
+        });
       });
+
       U.reactive(() => {
         totalBtn.dataset.best = [
           sortUseWholeImage.value,
@@ -425,53 +457,14 @@ const displayPokemon = (pkmnName, target) => {
           sortUseInverseTotalSize.value,
         ].reduce((x, y) => x || y);
       });
-      totalBtn.addEventListener("click", () => {
-        targetColor.value = currentScores.value[pkmnName][colorSpace.value].total.muHex;
-      });
-      U.template("pkmn-data-template", (binds) => {
-        Object.entries(binds).forEach(([metricName, target]) => {
-          U.reactive(() => {
-            const { total } = currentScores.value[pkmnName][colorSpace.value];
-            target.innerText = total[metricName].toFixed(2).replace(".00", "");
-          });
-        });
-        return totalData;
-      });
-
-      // TODO make all this cluster logic reactive, refactor with above
-      const { clusters } = currentScores.value[pkmnName][colorSpace.value];
-      [cls1Btn, cls2Btn, cls3Btn, cls4Btn].forEach((button, index) => {
-        if (index >= clusters.length) {
-          return;
-        }
 
-        button.hidden = false;
-
-        const { muHex } = clusters[index];
-        button.innerText = muHex;
-        button.style = getColorButtonStyle(muHex);
-        button.addEventListener("click", () => {
-          targetColor.value = muHex;
-        });
-
-        U.reactive(() => {
-          const { bestClusterIndices } = currentResults.value;
-          const bestCluster = bestClusterIndices[pkmnName][colorSpace.value];
+      U.reactive(() => {
+        const { bestClusterIndices } = currentResults.value;
+        const bestCluster = bestClusterIndices[pkmnName][colorSpace.value];
+        [cls1Btn, cls2Btn, cls3Btn, cls4Btn].forEach((button, index) => {
           button.dataset.best = !sortIgnoresCluster.value && index === bestCluster;
         });
       });
-      [cls1Data, cls2Data, cls3Data, cls4Data].forEach((data, index) => {
-        U.template("pkmn-data-template", (binds) => {
-          if (index >= clusters.length) {
-            return;
-          }
-
-          Object.entries(binds).forEach(([metricName, target]) => {
-            target.innerText = clusters[index][metricName].toFixed(2).replace(".00", "");
-          });
-          return data;
-        });
-      });
 
       return target;
     }

styles.css

@@ -254,7 +254,6 @@ button.color-select:hover {
   --tile-block-padding: 0.25rem;
   --tile-border-radius: 8px;
   transition: transform 250ms ease-out;
-  background-color: var(--background);
 }
 
 .pkmn-tile:hover .ellipsis {