misc improvements

index.html

@@ -81,13 +81,11 @@
     <template id="function-template">
       <form bind-to="form" autocomplete="off">
         <div class="fn-control | flex col no-gap">
-          <div class="center">
-            <label class="fn-minmax | pill-shape highlight-border">
-              <input type="checkbox" name="sortOrder" role="button" />
-              <span bind-to="minmaxLabel"></span>imizing
-            </label>
-            [
-          </div>
+          <label class="fn-minmax | center">
+            <!-- TODO ... this should be a radio. this whole time -->
+            <input type="checkbox" name="sortOrder" role="button" />
+            <span>Minimizing | Maximizing</span>
+          </label>
           <div class="fn-body | flex">
             <label bind-to="useWholeImageLabel">
               <input type="checkbox" name="useWholeImage" />
@@ -130,7 +128,6 @@
               </label>
             </div>
           </div>
-          <div class="center">] using</div>
         </div>
       </form>
     </template>
@@ -214,12 +211,12 @@
       </form>
       <hr />
       <div class="emphasis center">Ranking Function</div>
-      <div id="sort-fn-mount"></div>
       <div id="sort-metric-mount"></div>
+      <div id="sort-fn-mount"></div>
       <hr />
       <div id="cls-title" class="emphasis center">Cluster Ranking</div>
-      <div id="cls-fn-mount"></div>
       <div id="cls-metric-mount"></div>
+      <div id="cls-fn-mount"></div>
       <hr />
       <div id="nameSearch" class="flex col small-gap">
         <div class="emphasis center">Name Search</div>
@@ -229,13 +226,15 @@
           autocomplete="off"
           bind-to="input"
         />
-        <button type="button" bind-to="button">Random Pokemon</button>
+        <button type="button" bind-to="randomBtn">Random Pokemon</button>
+        <button type="button" bind-to="clearBtn">Clear</button>
       </div>
     </div>
 
     <main class="section flow">
       <div id="color-results-label" class="emphasis">By Color</div>
       <div id="color-results" class="flex wrap"></div>
+      <hr />
       <div id="name-results-label" class="emphasis">By Name</div>
       <div id="name-results" class="flex wrap"></div>
     </main>

script.js

@@ -145,7 +145,7 @@ const getMetricSymbol = (metric) =>
 
 U.template(
   "function-template",
-  ({ form, minmaxLabel, metricSymbol, metricSymbolCls, clusterName, clusterNameInv }) => {
+  ({ form, metricSymbol, metricSymbolCls, clusterName, clusterNameInv }) => {
     form.name = "sortFunction";
 
     const toggle = U.field(form.elements.sortOrder);
@@ -155,9 +155,6 @@ U.template(
     U.reactive(() => {
       sortOrder.value = toggle.value ? "max" : "min";
     });
-    U.reactive(() => {
-      minmaxLabel.innerText = sortOrder.value;
-    });
 
     U.field(form.elements.useWholeImage, { obs: sortUseWholeImage });
     U.field(form.elements.useBestCluster, { obs: sortUseBestCluster });
@@ -181,14 +178,7 @@ U.template(
 
 U.template(
   "function-template",
-  ({
-    form,
-    minmaxLabel,
-    useWholeImageLabel,
-    metricSymbolCls,
-    clusterName,
-    clusterNameInv,
-  }) => {
+  ({ form, useWholeImageLabel, metricSymbolCls, clusterName, clusterNameInv }) => {
     form.name = "clsFunction";
 
     form.elements.sortOrder.checked = true;
@@ -196,7 +186,6 @@ U.template(
     const toggle = U.field(form.elements.sortOrder);
     U.reactive(() => {
       toggle.value = clusterOrder.value === "max";
-      minmaxLabel.innerText = `(Arg) ${clusterOrder.value}`;
     });
     U.reactive(() => {
       clusterOrder.value = toggle.value ? "max" : "min";
@@ -468,7 +457,7 @@ colorSearchResults.subscribe(() => {
 });
 
 // ---- Name Search ----
-U.element("nameSearch", ({ input, button }) => {
+U.element("nameSearch", ({ input, randomBtn, clearBtn }) => {
   const nameSearchInput = U.field(input);
 
   const lookupLimit = 24;
@@ -479,13 +468,18 @@ U.element("nameSearch", ({ input, button }) => {
       .map(({ item: { name } }) => name)
   );
 
-  button.addEventListener("click", () => {
+  randomBtn.addEventListener("click", () => {
     nameSearchResults.value = Array.from(
       { length: lookupLimit },
       () => pokemonData[Math.floor(Math.random() * pokemonData.length)].name
     );
   });
 
+  clearBtn.addEventListener("click", () => {
+    nameSearchResults.value = [];
+    nameSearchInput.value = "";
+  });
+
   const nameResultsTarget = document.getElementById("name-results");
   nameSearchResults.subscribe(() => {
     nameResultsTarget.innerHTML = "";

styles.css

@@ -158,7 +158,7 @@ body {
   transition: accent-color 250ms, color 250ms, background-color 250ms;
 
   display: grid;
-  grid-template-columns: 14rem 1fr 8rem;
+  grid-template-columns: 14rem 1fr 7rem;
 }
 
 body > * + :not(#sidebar) {
@@ -169,6 +169,14 @@ hr {
   color: var(--highlight);
 }
 
+button,
+select,
+label,
+input[type="radio"],
+input[type="checkbox"] {
+  cursor: pointer;
+}
+
 button {
   border-radius: 100vmax;
   padding-block: 0.25rem;
@@ -211,7 +219,8 @@ button.color-select:hover {
   opacity: 25%;
 }
 
-#color-results {
+#color-results,
+#name-results {
   margin-inline-start: 1ch;
 }
 
@@ -300,15 +309,29 @@ button.color-select:hover {
 
 /* Sort Function Controls */
 
-.fn-control .fn-minmax {
+.fn-control .fn-minmax span {
+  position: relative;
   padding: 0.25rem 0.5ch;
   display: inline-flex;
   justify-content: center;
+}
+
+.fn-control .fn-minmax input[type="checkbox"] + span::before {
+  position: absolute;
+  content: "";
+  inset: 0;
   background-color: var(--shadow);
+  border-radius: 100vmax;
+  border: 1px solid var(--highlight);
+  transition: transform 200ms ease-in;
+
+  /* this is wildly fragile lol */
+  right: 52%;
 }
 
-.fn-control .fn-minmax span {
-  text-transform: capitalize;
+.fn-control .fn-minmax input[type="checkbox"]:checked + span::before {
+  /* this is wildly fragile lol */
+  transform: translateX(107%) scaleX(105%);
 }
 
 .fn-control .fn-body {
@@ -327,6 +350,7 @@ button.color-select:hover {
   color: inherit;
   background-color: inherit;
   border: none;
+  padding: 0;
 }
 
 .fn-fraction > *:first-child {