misc cleanup

index.html

@@ -167,17 +167,17 @@
             <button bind-to="totalBtn" class="pkmn-total | color-select"></button>
           </div>
           <div class="cluster-buttons | flex col">
-            <button bind-to="cls1Btn" class="color-select"></button>
-            <button bind-to="cls2Btn" class="color-select"></button>
-            <button bind-to="cls3Btn" class="color-select"></button>
-            <button bind-to="cls4Btn" class="color-select"></button>
+            <button bind-to="cls1Btn" class="color-select" hidden></button>
+            <button bind-to="cls2Btn" class="color-select" hidden></button>
+            <button bind-to="cls3Btn" class="color-select" hidden></button>
+            <button bind-to="cls4Btn" class="color-select" hidden></button>
           </div>
         </div>
         <!-- TODO the actual data -->
       </div>
     </template>
 
-    <div id="sidebar" class="section | flow">
+    <div id="sidebar" class="section | flow small-flow-space">
       <form id="targetSelect" class="flex col small-gap" autocomplete="off">
         <label class="emphasis center" for="colorInputText">Target Color</label>
         <div class="color-inputs | flex small-gap">

script.js

@@ -395,9 +395,6 @@ const displayPokemon = (pkmnName, target) => {
     .map((part) => part.charAt(0).toUpperCase() + part.substr(1))
     .join(" ");
 
-  // TODO this will need to be reactive when we start actually pulling stats
-  const { total, clusters } = currentScores.value[pkmnName][colorSpace.value];
-
   U.template(
     "pkmn-template",
     ({ image, name, score, totalBtn, cls1Btn, cls2Btn, cls3Btn, cls4Btn }) => {
@@ -415,22 +412,31 @@ const displayPokemon = (pkmnName, target) => {
         score.innerText = rankingValues[pkmnName][colorSpace.value].toFixed(2);
       });
 
-      totalBtn.innerText = total.muHex;
-      totalBtn.style = getColorButtonStyle(total.muHex);
+      U.reactive(() => {
+        const { total } = currentScores.value[pkmnName][colorSpace.value];
+        totalBtn.innerText = total.muHex;
+        totalBtn.style = getColorButtonStyle(total.muHex);
+      });
+      U.reactive(() => {
+        totalBtn.dataset.best = [
+          sortUseWholeImage.value,
+          sortUseTotalSize.value,
+          sortUseInverseTotalSize.value,
+        ].reduce((x, y) => x || y);
+      });
       totalBtn.addEventListener("click", () => {
-        targetColor.value = total.muHex;
+        targetColor.value = currentScores.value[pkmnName][colorSpace.value].total.muHex;
       });
-      totalBtn.dataset.best =
-        sortUseWholeImage.value ||
-        sortUseTotalSize.value ||
-        sortUseInverseTotalSize.value;
 
+      // TODO this will need to be reactive when we start actually pulling stats
+      const { clusters } = currentScores.value[pkmnName][colorSpace.value];
       [cls1Btn, cls2Btn, cls3Btn, cls4Btn].forEach((button, index) => {
         if (index >= clusters.length) {
-          button.remove();
           return;
         }
 
+        button.hidden = false;
+
         const { muHex } = clusters[index];
         button.innerText = muHex;
         button.style = getColorButtonStyle(muHex);
@@ -446,7 +452,6 @@ const displayPokemon = (pkmnName, target) => {
       });
 
       // TODO stat dialog
-      // TODO click name to copy?
 
       return target;
     }

styles.css

@@ -247,6 +247,13 @@ button.color-select:hover {
   transform: scale(105%) translateX(-3%) translateY(-5%);
 }
 
+.pkmn-tile:hover .ellipsis {
+  overflow: visible;
+  width: fit-content;
+  background-color: var(--background);
+  z-index: 1;
+}
+
 .pkmn-tile .pkmn-info {
   /* no block-start padding here, this makes the 
      images look like they go right up to the border */
@@ -280,11 +287,15 @@ button.color-select:hover {
   min-width: 12ch;
 }
 
+.pkmn-tile button[data-best="true"] {
+  position: relative;
+}
+
 .pkmn-tile button[data-best="true"]::before {
+  position: absolute;
+  top: calc(50% - 1.25ch);
+  left: 0.5rem;
   content: "▸";
-  display: inline-block;
-  width: 1ch;
-  margin-inline: 0.25ch;
 }
 
 /* Sort Function Controls */
@@ -294,7 +305,6 @@ button.color-select:hover {
   display: inline-flex;
   justify-content: center;
   background-color: var(--shadow);
-  /* TODO might want to bring back that shifting pill */
 }
 
 .fn-control .fn-minmax span {