Implement pokemon tiles

index.html

@@ -132,15 +132,21 @@
     </template>
 
     <template id="pkmn-template">
-      <div class="pkmn-tile">
-        <img bind-to="image" />
-        <div bind-to="name"></div>
-        <div bind-to="value"></div>
-        <button bind-to="totalBtn" class="color-select"></button>
-        <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>
+      <div class="pkmn-tile | flex col no-gap">
+        <div class="ellipsis emphasis" bind-to="name"></div>
+        <div class="pkmn-info | flex even">
+          <div class="flex col small-gap">
+            <img bind-to="image" />
+            <div class="center" bind-to="score"></div>
+            <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>
+          </div>
+        </div>
         <!-- TODO the actual data -->
       </div>
     </template>
@@ -186,9 +192,9 @@
       <div id="cls-metric-mount"></div>
     </div>
 
-    <main class="section">
-      <div id="color-results-label">By Color</div>
-      <div id="color-results" class="flow"></div>
+    <main class="section flow">
+      <div id="color-results-label" class="emphasis">By Color</div>
+      <div id="color-results" class="flex wrap"></div>
       <div id="name-results-label">By Name</div>
       <div id="name-results"></div>
     </main>

script.js

@@ -401,7 +401,7 @@ const displayPokemon = (pkmnName, target) => {
 
   U.template(
     "pkmn-template",
-    ({ image, name, value, totalBtn, cls1Btn, cls2Btn, cls3Btn, cls4Btn }) => {
+    ({ image, name, score, totalBtn, cls1Btn, cls2Btn, cls3Btn, cls4Btn }) => {
       const imageErrHandler = () => {
         image.removeEventListener("error", imageErrHandler);
         image.src = `https://img.pokemondb.net/sprites/sword-shield/icon/${spriteName}.png`;
@@ -409,8 +409,8 @@ const displayPokemon = (pkmnName, target) => {
       image.addEventListener("error", imageErrHandler);
       image.src = `https://img.pokemondb.net/sprites/scarlet-violet/icon/${spriteName}.png`;
 
-      name.innerText = image.alt = formattedName;
-      value.innerText = rankingValue.toFixed(2);
+      name.innerText = name.title = image.alt = formattedName;
+      score.innerText = rankingValue.toFixed(2);
 
       totalBtn.innerText = total.muHex;
       totalBtn.style = getColorButtonStyle(total.muHex);

styles.css

@@ -205,6 +205,45 @@ hr {
   opacity: 25%;
 }
 
+#color-results {
+  margin-inline-start: 1ch;
+}
+
+.pkmn-tile {
+  max-width: 24ch;
+  padding-inline: 0.5ch;
+  --tile-block-padding: 0.25rem;
+  --tile-border-radius: 8px;
+  transition: transform 250ms ease-out;
+}
+
+.pkmn-tile:hover {
+  transform: scale(105%) translateX(-3%) translateY(-5%);
+}
+
+.pkmn-tile .pkmn-info {
+  /* no block-start padding here, this makes the 
+     images look like they go right up to the border */
+  padding: 0 0.5ch var(--tile-block-padding);
+  border: 1px solid var(--highlight);
+  border-radius: var(--tile-border-radius);
+  box-shadow: 4px 4px 2px var(--shadow);
+  margin-block-start: 0.25rem;
+}
+
+.pkmn-tile .cluster-buttons {
+  --gap: 0.125rem;
+  justify-content: center;
+
+  /* but here we put the block-start padding back to
+     fix the vertical centering of the cluster buttons */
+  margin-block-start: var(--tile-block-padding);
+  padding-inline: 0.25ch;
+  border-radius: var(--tile-border-radius);
+  background-color: var(--shadow);
+  box-shadow: 0px 0px 8px var(--shadow);
+}
+
 .pkmn-tile img {
   height: 64px;
 }
@@ -212,7 +251,7 @@ hr {
 .pkmn-tile button {
   font-size: 0.85rem;
   font-weight: 600;
-  padding-inline: 1ch; /* TODO remove this after using grid for layout*/
+  min-width: 12ch;
 }
 
 .pkmn-tile button[data-best="true"]::before {