misc cleanup

web/index.html

@@ -203,8 +203,8 @@
           <span class="toggle-label | pill-shape highlight-border">Repeat Species</span>
         </label>
         <label class="center">
-          <input form="filterControl" type="checkbox" name="allowNoStartForms" hidden />
-          <span class="toggle-label | pill-shape highlight-border">Non-Start Forms</span>
+          <input form="filterControl" type="checkbox" name="hideNoStart" hidden checked />
+          <span class="toggle-label | pill-shape highlight-border">Start Forms Only</span>
         </label>
         <label class="center">
           <input form="filterControl" type="checkbox" name="allowNFE" hidden checked />

web/main.js

@@ -98,6 +98,89 @@ const pokemonData = database.map(({ total, clusters, ...rest }) => ({
   ...rest,
 }));
 const pokemonLookup = new Fuse(pokemonData, { keys: ["name"] });
+const pokemonDisplayLookup = Object.fromEntries(
+  database.map(({ name, species }) => {
+    const formattedName = name
+      .split("-")
+      .map(part => part.charAt(0).toUpperCase() + part.substr(1))
+      .join(" ");
+
+    let spriteName = name
+      .toLowerCase()
+      .replace("'", "") // farfetchd line
+      .replace("-gmax", "-gigantamax")
+      .replace("-alola", "-alolan")
+      .replace("-galar", "-galarian")
+      .replace("-hisui", "-hisuian")
+      .replace("-paldea", "-paldean")
+      .replace("-paldean-combat", "-paldean") // tauros
+      .replace("-paldean-blaze", "-paldean-fire") // tauros
+      .replace("-paldean-aqua", "-paldean-water") // tauros
+      .replace("-phony", "") // sinistea and polteageist
+      .replace(". ", "-") // mr mime + rime
+      .replace(": ", "-") // type: null
+      .replaceAll("é", "e") // flabébé
+      .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("pyroar-m", "pyroar")
+      .replace("pyroar-f", "pyroar-female")
+      .replace("indeedee-f", "indeedee-female")
+      .replace("basculegion-f", "basculegion-female")
+      .replace("tapu ", "tapu-")
+      .replace("urshifu-gigantamax", "urshifu-gigantamax-single-strike")
+      .replace("urshifu-rapid-strike-gigantamax", "urshifu-gigantamax-rapid-strike")
+      .replace("calyrex-shadow", "calyrex-shadow-rider")
+      .replace("calyrex-ice", "calyrex-ice-rider")
+      .replace("maushold-four", "maushold-family4")
+      .replace("chienpao", "chien-pao")
+      .replace("tinglu", "ting-lu")
+      .replace("wochien", "wo-chien")
+      .replace("chiyu", "chi-yu")
+      .replace(" ", "-");
+    if (
+      [
+        "flabebe",
+        "floette",
+        "florges",
+        "vivillon",
+        "basculin",
+        "furfrou",
+        "magearna",
+        "alcremie",
+        "minior",
+      ].find(s => spriteName.includes(s))
+    ) {
+      spriteName = spriteName.replace(/-.*$/, "");
+    }
+
+    const linkName = species.replace(/[':.]/, "").replace(" ", "-");
+
+    const handlerChain = [
+      `https://img.pokemondb.net/sprites/sword-shield/icon/${spriteName}.png`,
+      `https://img.pokemondb.net/sprites/scarlet-violet/icon/${spriteName}.png`,
+    ].map((url, i) => ({ target }) => {
+      target.removeEventListener("error", handlerChain[i]);
+      if (handlerChain[i + 1]) {
+        target.addEventListener("error", handlerChain[i + 1]);
+      }
+      pokemonDisplayLookup[name].sprite = target.src = url;
+    });
+
+    return [
+      name,
+      {
+        formattedName,
+        link: `https://pokemondb.net/pokedex/${linkName}`,
+        sprite: `https://img.pokemondb.net/sprites/sword-shield/normal/${spriteName}.png`,
+        handleSpriteError: handlerChain[0],
+      },
+    ];
+  })
+);
 
 const calcScores = (data, target) => {
   const { centroid, unitCentroid, tilt, stddev, chromaMean, chromaDev, hue } = data;
@@ -277,80 +360,12 @@ const createPokemonTooltip = makeTemplate("pkmn-data-template", data =>
 
 const createPokemonTile = makeTemplate(
   "pkmn-tile-template",
-  ({ name, species, color }, enableTotalFlags, enableClusterFlags) => {
-    const formattedName = name
-      .split("-")
-      .map(part => part.charAt(0).toUpperCase() + part.substr(1))
-      .join(" ");
-
-    let spriteName = name
-      .toLowerCase()
-      .replace("'", "") // farfetchd line
-      .replace("-gmax", "-gigantamax")
-      .replace("-alola", "-alolan")
-      .replace("-galar", "-galarian")
-      .replace("-hisui", "-hisuian")
-      .replace("-paldea", "-paldean")
-      .replace("-paldean-combat", "-paldean") // tauros
-      .replace("-paldean-blaze", "-paldean-fire") // tauros
-      .replace("-paldean-aqua", "-paldean-water") // tauros
-      .replace("-phony", "") // sinistea and polteageist
-      .replace(". ", "-") // mr mime + rime
-      .replace(": ", "-") // type: null
-      .replaceAll("é", "e") // flabébé
-      .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("pyroar-m", "pyroar")
-      .replace("pyroar-f", "pyroar-female")
-      .replace("indeedee-f", "indeedee-female")
-      .replace("basculegion-f", "basculegion-female")
-      .replace("tapu ", "tapu-")
-      .replace("urshifu-gigantamax", "urshifu-gigantamax-single-strike")
-      .replace("urshifu-rapid-strike-gigantamax", "urshifu-gigantamax-rapid-strike")
-      .replace("calyrex-shadow", "calyrex-shadow-rider")
-      .replace("calyrex-ice", "calyrex-ice-rider")
-      .replace("maushold-four", "maushold-family4")
-      .replace("chienpao", "chien-pao")
-      .replace("tinglu", "ting-lu")
-      .replace("wochien", "wo-chien")
-      .replace("chiyu", "chi-yu")
-      .replace(" ", "-");
-    if (
-      [
-        "flabebe",
-        "floette",
-        "florges",
-        "vivillon",
-        "basculin",
-        "furfrou",
-        "magearna",
-        "alcremie",
-        "minior",
-      ].find(s => spriteName.includes(s))
-    ) {
-      spriteName = spriteName.replace(/-.*$/, "");
-    }
-    const imageErrorHandler2 = ({ target }) => {
-      target.removeEventListener("error", imageErrorHandler2);
-      target.src = `https://img.pokemondb.net/sprites/scarlet-violet/icon/${spriteName}.png`;
-    };
-    const imageErrorHandler1 = ({ target }) => {
-      target.removeEventListener("error", imageErrorHandler1);
-      target.addEventListener("error", imageErrorHandler2);
-      target.src = `https://img.pokemondb.net/sprites/sword-shield/icon/${spriteName}.png`;
-    };
+  ({ name, color }, enableTotalFlags, enableClusterFlags) => {
+    const { formattedName, link, sprite, handleSpriteError } = pokemonDisplayLookup[name];
     const image = {
       alt: formattedName,
-      src: `https://img.pokemondb.net/sprites/sword-shield/normal/${spriteName}.png`,
-      "@error": imageErrorHandler1,
-    };
-    const linkName = species.replace(/[':.]/, "").replace(" ", "-");
-    const link = {
-      href: `https://pokemondb.net/pokedex/${linkName}`,
+      src: sprite,
+      "@error": handleSpriteError,
     };
 
     const score = {
@@ -401,7 +416,7 @@ const createPokemonTile = makeTemplate(
       },
       image,
       color: { innerText: color },
-      link,
+      link: { href: link },
       score,
       tileRoot: { dataset: { info: "hide" } },
       ...buttonBinds,
@@ -553,7 +568,7 @@ const model = {
       if (toRender.length >= count) {
         break;
       }
-      if (!filterElements.allowNoStartForms.checked && pkmn.traits.includes("nostart")) {
+      if (filterElements.hideNoStart.checked && pkmn.traits.includes("nostart")) {
         continue;
       }
       if (!filterElements.allowNFE.checked && pkmn.traits.includes("nfe")) {

web/styles.css

@@ -301,8 +301,7 @@ input[name="resultsToDisplay"] {
 .pkmn-tile:hover .ellipsis {
   overflow: visible;
   width: fit-content;
-  background-color: var(--background);
-  box-shadow: 0px 0px 2px 4px var(--background);
+  background-color: transparent;
 }
 
 .pkmn-tile .pkmn-info {