info tiles

index.html

@@ -142,14 +142,12 @@
       <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>
-      <hr />
       <div>θ&nbsp;=&nbsp;<span bind-to="theta"></span>°</div>
       <div>ϕ&nbsp;=&nbsp;<span bind-to="phi"></span>°</div>
       <div>δ&nbsp;=&nbsp;<span bind-to="delta"></span></div>
       <div>M&nbsp;=&nbsp;<span bind-to="manhattan"></span></div>
       <div>Ч&nbsp;=&nbsp;<span bind-to="ch"></span></div>
       <div>ℓ&nbsp;=&nbsp;<span bind-to="lightnessDiff"></span></div>
-      <hr />
       <div>β&nbsp;=&nbsp;<span bind-to="importance"></span></div>
       <div>I&nbsp;=&nbsp;<span bind-to="inertia"></span></div>
       <div>V&nbsp;=&nbsp;<span bind-to="variance"></span></div>
@@ -167,12 +165,32 @@
             <img bind-to="image" />
             <div class="center" bind-to="score"></div>
             <button bind-to="totalBtn" class="pkmn-total | color-select"></button>
+            <div
+              class="total-info | highlight-border grid small-gap"
+              bind-to="totalData"
+            ></div>
           </div>
           <div class="cluster-buttons | flex col">
             <button bind-to="cls1Btn" class="color-select" hidden></button>
+            <div
+              class="cluster-info | highlight-border grid small-gap"
+              bind-to="cls1Data"
+            ></div>
             <button bind-to="cls2Btn" class="color-select" hidden></button>
+            <div
+              class="cluster-info | highlight-border grid small-gap"
+              bind-to="cls2Data"
+            ></div>
             <button bind-to="cls3Btn" class="color-select" hidden></button>
+            <div
+              class="cluster-info | highlight-border grid small-gap"
+              bind-to="cls3Data"
+            ></div>
             <button bind-to="cls4Btn" class="color-select" hidden></button>
+            <div
+              class="cluster-info | highlight-border grid small-gap"
+              bind-to="cls4Data"
+            ></div>
           </div>
         </div>
         <!-- TODO the actual data -->

script.js

@@ -384,7 +384,21 @@ const displayPokemon = (pkmnName, target) => {
 
   U.template(
     "pkmn-template",
-    ({ image, name, score, totalBtn, cls1Btn, cls2Btn, cls3Btn, cls4Btn }) => {
+    ({
+      image,
+      name,
+      score,
+      totalBtn,
+      totalData,
+      cls1Btn,
+      cls2Btn,
+      cls3Btn,
+      cls4Btn,
+      cls1Data,
+      cls2Data,
+      cls3Data,
+      cls4Data,
+    }) => {
       const imageErrHandler = () => {
         image.removeEventListener("error", imageErrHandler);
         image.src = `https://img.pokemondb.net/sprites/sword-shield/icon/${spriteName}.png`;
@@ -414,8 +428,17 @@ const displayPokemon = (pkmnName, target) => {
       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 this will need to be reactive when we start actually pulling stats
+      // 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) {
@@ -437,8 +460,18 @@ const displayPokemon = (pkmnName, target) => {
           button.dataset.best = !sortIgnoresCluster.value && index === bestCluster;
         });
       });
-
-      // TODO stat dialog
+      [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,17 +254,14 @@ button.color-select:hover {
   --tile-block-padding: 0.25rem;
   --tile-border-radius: 8px;
   transition: transform 250ms ease-out;
-}
-
-.pkmn-tile:hover {
-  transform: scale(105%) translateX(-3%) translateY(-5%);
+  background-color: var(--background);
 }
 
 .pkmn-tile:hover .ellipsis {
   overflow: visible;
   width: fit-content;
   background-color: var(--background);
-  z-index: 1;
+  box-shadow: 0px 0px 2px 4px var(--background);
 }
 
 .pkmn-tile .pkmn-info {
@@ -277,6 +274,7 @@ button.color-select:hover {
 }
 
 .pkmn-tile .cluster-buttons {
+  position: relative;
   --gap: 0.125rem;
   justify-content: center;
 
@@ -306,9 +304,70 @@ button.color-select:hover {
 
 .pkmn-tile button[data-best="true"]::before {
   position: absolute;
-  top: calc(50% - 1.25ch);
-  left: 0.5rem;
   content: "▸";
+  inset: 50% auto auto 1ch;
+  /* slightly nicer than a normal vertical centering */
+  transform: translateY(-55%);
+}
+
+.pkmn-tile :is(.cluster-info, .total-info) {
+  visibility: hidden;
+  position: absolute;
+  opacity: 0%;
+  transition: visibility 200ms, opacity 200ms ease-out, transform 200ms ease-out;
+  font-size: 0.75rem;
+
+  grid-template-columns: repeat(4, 1fr);
+  column-gap: 0.5ch;
+
+  padding: var(--tile-block-padding) 0.5ch;
+  border-radius: var(--tile-border-radius);
+  background-color: var(--highlight);
+  color: var(--background);
+}
+
+.pkmn-tile .cluster-info {
+  inset: 50% 105% auto auto;
+  transform: translateY(-50%);
+}
+
+.pkmn-tile .total-info {
+  inset: 50% auto auto 50%;
+  z-index: 20;
+  transform: translateY(-25%);
+}
+
+.pkmn-tile button:hover + :is(.cluster-info, .total-info),
+:is(.cluster-info, .total-info):hover {
+  visibility: visible;
+  opacity: 100%;
+}
+
+@media not (prefers-reduced-motion) {
+  .pkmn-tile:hover {
+    transform: scale(105%) translateX(-3%) translateY(-5%);
+    z-index: 10;
+  }
+
+  .pkmn-tile button:hover + .total-info {
+    transform: translateY(-50%);
+  }
+
+  .pkmn-tile button:hover + .cluster-info:nth-child(2) {
+    transform: translateY(-80%);
+  }
+
+  .pkmn-tile button:hover + .cluster-info:nth-child(4) {
+    transform: translateY(-60%);
+  }
+
+  .pkmn-tile button:hover + .cluster-info:nth-child(6) {
+    transform: translateY(-40%);
+  }
+
+  .pkmn-tile button:hover + .cluster-info:nth-child(8) {
+    transform: translateY(-20%);
+  }
 }
 
 /* Sort Function Controls */