attempt to make data display less jarring

web/index.html

@@ -54,51 +54,56 @@
     </template>
 
     <template id="pkmn-data-template">
+      <div>L̅&nbsp;=&nbsp;<span bind-to="lightness"></span>%</div>
+      <div>C̅&nbsp;=&nbsp;<span bind-to="chroma"></span></div>
+      <div>h̅&nbsp;=&nbsp;<span bind-to="hue"></span>°</div>
+      <div>σ²&nbsp;=&nbsp;<span bind-to="variance"></span></div>
+      <div>a̅&nbsp;=&nbsp;<span bind-to="abar"></span></div>
+      <div>b̅&nbsp;=&nbsp;<span bind-to="bbar"></span></div>
+      <div class="full-grid-row center">τ&nbsp;=&nbsp;(<span bind-to="tilt"></span>)</div>
+      <div class="pkmn-data-separator | full-grid-row" role="presentation"></div>
       <div>α&nbsp;=&nbsp;<span bind-to="alpha"></span></div>
       <div>Ψ&nbsp;=&nbsp;<span bind-to="psi"></span></div>
       <div>Ω&nbsp;=&nbsp;<span bind-to="omega"></span></div>
       <div role="presentation"></div>
       <div>δ&nbsp;=&nbsp;<span bind-to="delta"></span></div>
       <div>θ&nbsp;=&nbsp;<span bind-to="theta"></span>°</div>
+      <div class="pkmn-data-separator | full-grid-row" role="presentation"></div>
+      <div class="pkmn-data-size">N&nbsp;=&nbsp;<span bind-to="size"></span></div>
+      <div>β&nbsp;=&nbsp;<span bind-to="beta"></span></div>
       <div>ΔL&nbsp;=&nbsp;<span bind-to="deltaL"></span></div>
       <div>ΔC&nbsp;=&nbsp;<span bind-to="deltaC"></span></div>
       <div>Δh&nbsp;=&nbsp;<span bind-to="deltaH"></span>°</div>
-      <div class="pkmn-data-separator | full-grid-row" role="presentation"></div>
-      <div>β&nbsp;=&nbsp;<span bind-to="beta"></span></div>
-      <div>σ²&nbsp;=&nbsp;<span bind-to="variance"></span></div>
-      <div>L̅&nbsp;=&nbsp;<span bind-to="lightness"></span>%</div>
-      <div class="pkmn-data-size">N&nbsp;=&nbsp;<span bind-to="size"></span></div>
-      <div>C̅&nbsp;=&nbsp;<span bind-to="chroma"></span></div>
-      <div class="pkmn-data-separator | full-grid-row" role="presentation"></div>
-      <div>a̅&nbsp;=&nbsp;<span bind-to="abar"></span></div>
-      <div>b̅&nbsp;=&nbsp;<span bind-to="bbar"></span></div>
-      <div>h̅&nbsp;=&nbsp;<span bind-to="hue"></span>°</div>
-      <div class="full-grid-row center">τ&nbsp;=&nbsp;(<span bind-to="tilt"></span>)</div>
     </template>
 
     <template id="pkmn-tile-template">
-      <div class="pkmn-tile | flex col no-gap">
-        <div class="ellipsis emphasis" bind-to="name"></div>
+      <div class="pkmn-tile | flex col no-gap" bind-to="tileRoot">
+        <div class="pkmn-title | emphasis flex">
+          <span class="ellipsis" bind-to="name"></span>
+          <span class="pkmn-info-icon | smaller" bind-to="infoHover">ⓘ</span>
+        </div>
         <div class="pkmn-info | highlight-border flex">
+          <div class="pkmn-info-detail | math-font grid" bind-to="totalData"></div>
+          <div class="pkmn-info-detail | math-font grid" bind-to="cls1Data"></div>
+          <div class="pkmn-info-detail | math-font grid" bind-to="cls2Data"></div>
+          <div class="pkmn-info-detail | math-font grid" bind-to="cls3Data"></div>
+          <div class="pkmn-info-detail | math-font grid" bind-to="cls4Data"></div>
           <div class="pkmn-info-main | flex col">
-            <a bind-to="link" href=""><img bind-to="image" /></a>
+            <a bind-to="link" target="_blank" rel="noopener noreferrer" href="">
+              <img bind-to="image" />
+            </a>
             <div class="math-font center" bind-to="score"></div>
             <div class="smallest center">"<span bind-to="color"></span>"</div>
             <button
               bind-to="totalBtn"
               class="pkmn-total | math-font color-select"
             ></button>
-            <div class="total-info | math-font grid" bind-to="totalData"></div>
           </div>
           <div class="cluster-buttons | math-font flex col">
             <button bind-to="cls1Btn" class="color-select" hidden></button>
-            <div class="cluster-info | grid" bind-to="cls1Data"></div>
             <button bind-to="cls2Btn" class="color-select" hidden></button>
-            <div class="cluster-info | grid" bind-to="cls2Data"></div>
             <button bind-to="cls3Btn" class="color-select" hidden></button>
-            <div class="cluster-info | grid" bind-to="cls3Data"></div>
             <button bind-to="cls4Btn" class="color-select" hidden></button>
-            <div class="cluster-info | grid" bind-to="cls4Data"></div>
           </div>
         </div>
       </div>

web/main.js

@@ -269,6 +269,11 @@ const createPokemonTile = makeTemplate(
       .replace("-phony", "") // sinistea and polteageist
       .replace(". ", "-") // mr mime + rime
       .replace("darmanitan-galarian", "darmanitan-galarian-standard")
+      .replace("hippopotas-m", "hippopotas")
+      .replace("hippowdon-m", "hippowdon")
+      .replace("unfezant-m", "unfezant")
+      .replace("frillish-m", "frillish")
+      .replace("jellicent-m", "jellicent")
       .replace("chienpao", "chien-pao")
       .replace("tinglu", "ting-lu")
       .replace("wochien", "wo-chien")
@@ -318,24 +323,22 @@ const createPokemonTile = makeTemplate(
       [total, "totalBtn", "totalData"],
     ]
       .filter(([data]) => !!data)
-      .map(([data, button, tooltip], index) => {
-        return {
-          [button]: {
-            dataset: {
-              included: enableClusterFlags && index === bestClusterIndices[name],
-            },
-            hidden: false,
-            innerText: data.hex + (data.proportion ? ` - ${data.proportion}%` : ""),
-            "@click"() {
-              model.setTargetColor(data.hex);
-            },
-            ...getColorStyles(data.hex),
+      .map(([data, button, tooltip], index) => ({
+        [button]: {
+          dataset: {
+            included: enableClusterFlags && index === bestClusterIndices[name],
           },
-          [tooltip]: {
-            append: createPokemonTooltip(data)[0],
+          hidden: false,
+          innerText: data.hex + (data.proportion ? ` - ${data.proportion}%` : ""),
+          "@click"() {
+            model.setTargetColor(data.hex);
           },
-        };
-      })
+          ...getColorStyles(data.hex),
+        },
+        [tooltip]: {
+          append: createPokemonTooltip(data)[0],
+        },
+      }))
       .reduce((a, b) => ({ ...a, ...b }), {});
     buttonBinds.totalBtn.dataset.included = enableTotalFlags;
 
@@ -348,6 +351,15 @@ const createPokemonTile = makeTemplate(
       color: { innerText: color },
       link,
       score,
+      tileRoot: { dataset: { info: "hide" } },
+      infoHover: {
+        "@mouseenter"({ target }) {
+          target.closest(".pkmn-tile").dataset.info = "show";
+        },
+        "@mouseleave"({ target }) {
+          target.closest(".pkmn-tile").dataset.info = "hide";
+        },
+      },
       ...buttonBinds,
     };
   }

web/styles.css

@@ -267,6 +267,7 @@ button.color-select:hover {
 /* Pokemon Tiles */
 
 .pkmn-tile {
+  position: relative;
   width: 28ch;
   padding-inline: 0.5ch;
   --tile-block-padding: 0.25rem;
@@ -274,6 +275,15 @@ button.color-select:hover {
   transition: transform 250ms ease-out;
 }
 
+.pkmn-tile .pkmn-title {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.pkmn-tile .pkmn-info-icon {
+  cursor: default;
+}
+
 .pkmn-tile:hover .ellipsis {
   overflow: visible;
   width: fit-content;
@@ -296,7 +306,6 @@ button.color-select:hover {
 }
 
 .pkmn-tile .cluster-buttons {
-  position: relative;
   --gap: 0.125rem;
   justify-content: center;
 
@@ -341,15 +350,15 @@ button.color-select:hover {
   transform: translateY(-48%);
 }
 
-.pkmn-tile :is(.cluster-info, .total-info) {
+.pkmn-tile .pkmn-info-detail {
   visibility: hidden;
   position: absolute;
   opacity: 0%;
-  inset: 100% auto auto 50%;
-  transform: translateX(-50%);
+  inset: 100% auto auto;
   transition: visibility 200ms, opacity 200ms ease-out, transform 200ms ease-out;
   font-size: 0.75rem;
 
+  width: 32ch;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: min-content;
   column-gap: 0.5ch;
@@ -363,6 +372,26 @@ button.color-select:hover {
   color: var(--background);
 }
 
+.pkmn-tile .pkmn-info-detail:nth-child(1) {
+  transform: translateX(-50%);
+}
+
+.pkmn-tile .pkmn-info-detail:nth-child(2) {
+  transform: translateX(50%);
+}
+
+.pkmn-tile .pkmn-info-detail:nth-child(3) {
+  transform: translateX(50%) translateY(100%);
+}
+
+.pkmn-tile .pkmn-info-detail:nth-child(4) {
+  transform: translateX(150%);
+}
+
+.pkmn-tile .pkmn-info-detail:nth-child(5) {
+  transform: translateX(150%) translateY(100%);
+}
+
 .pkmn-tile .pkmn-data-separator {
   height: 1px;
   background-color: var(--background);
@@ -376,21 +405,15 @@ button.color-select:hover {
   z-index: 10;
 }
 
-.pkmn-tile button:hover + :is(.cluster-info, .total-info),
-:is(.cluster-info, .total-info):hover {
+.pkmn-tile[data-info="show"] .pkmn-info-detail:not(:empty) {
   visibility: visible;
   opacity: 100%;
 }
 
 @media (prefers-reduced-motion: no-preference) {
   .pkmn-tile:hover {
-    /* TODO fix total */
     transform: scale(105%) translateX(-3%) translateY(-5%);
   }
-
-  .pkmn-tile button:hover + :is(.cluster-info, .total-info) {
-    transform: translateX(-50%) translateY(5%);
-  }
 }
 
 /* Sort Function Controls */