pokemon-color-search/web/render.js

const getSprite = (() => { 
  const stripForm = ["flabebe", "floette", "florges", "vivillon", "basculin", "furfrou", "magearna"];
  return pokemon => {
    pokemon = pokemon
      .replace("-alola", "-alolan")
      .replace("-galar", "-galarian")
      .replace("darmanitan-galarian", "darmanitan-galarian-standard");
    if (stripForm.find(s => pokemon.includes(s))) {
      pokemon = pokemon.replace(/-.*$/, "");
    }
    return `https://img.pokemondb.net/sprites/sword-shield/icon/${pokemon}.png`;
  }
})();

const renderStatPair = (lbl, val, valueClass = "value") => `
  <span class="pkmn-tile_label">${lbl}</span>
  <span class="pkmn-tile_${valueClass}">${val}</span>
`;

const renderStatRow = lines => `
  <div class="pkmn-tile_row">
    ${lines.join("\n")}
  </div>
`;

const renderPokemonTileCluster = (area, { mu, nu, proportion }, scores) => {
  const textColor = getContrastingTextColor(mu.hex);
  return `
    <div
      class="pkmn-tile_stats"
      style="grid-area: ${area}; color: ${textColor}; background-color: ${mu.hex};"
    >
      <div class="pkmn-tile_row" style="justify-content: center;">
        ${(100 * proportion).toFixed(2)}% ${mu.hex}
      </div>
      <div class="toggle-on">
        ${
          [ ["α =", scores.alpha.toFixed(3)],
            ["σ =", scores.sigma.toFixed(3)],
            ["Θ =", scores.bigTheta.toFixed(3)],
            ["θ =", scores.theta.toFixed(3) + "°"],
            ["ϕ =", scores.phi.toFixed(3) + "°"],
            ["δ =", scores.delta.toFixed(3)],
            ["M =", scores.manhattan.toFixed(3)],
            ["Ч =", scores.ch.toFixed(3)],
            ["ℓ =", scores.lightnessDiff.toFixed(3)],
          ]
            .map(([lbl, val]) => renderStatPair(lbl, val))
            .map(ls => renderStatRow([ls]))
            .join("\n")
        }
        <hr style="width: 80%; color: ${textColor}"/>
        ${
          [ ["μ =", `(${mu.vector[0].toFixed(2)},`],
            ["", mu.vector[1].toFixed(2) + ","],
            ["", mu.vector[2].toFixed(2) + ")"],
            ["ν =", `(${nu[0].toFixed(2)},`],
            ["", nu[1].toFixed(2) + ","],
            ["", nu[2].toFixed(2) + ")"],
            ["I =", scores.inertia.toFixed(2)],
            ["L =", scores.lightness.toFixed(2)],
            ["C =", scores.chroma.toFixed(2)],
            ["β = ", scores.importance.toFixed(2)],
            ["V =", scores.muNuAngle.toFixed(2) + "°"],
            ["N =", scores.size],
          ]
            .map(([lbl, val]) => renderStatPair(lbl, val))
            .map(ls => renderStatRow([ls]))
            .join("\n")
        }
      </div>
    </div>
  `;
};

const clusterToggles = {};

const renderPokemonTile = (kind, name, { total: { mu, nu, size }, clusters }, scores, bestClusterIndex) => {
  const clusterToggleId = `${name}-${kind}-pkmn-expand-toggle`;
  const textColor = getContrastingTextColor(mu.hex);

  return `
    <div class="pkmn-tile toggle-box">
      <input
        autocomplete="off"
        type="checkbox"
        ${clusterToggles?.[clusterToggleId] ? "checked" : ""}
        id="${clusterToggleId}"
        onchange="clusterToggles['${clusterToggleId}'] = event.target.checked"
        class="toggle-button"
        role="button"
      >
      <label for="${clusterToggleId}" style="grid-area: togg; text-align: center; align-self: start;">
        <div class="toggle-off">►</div>
        <div class="toggle-on">▼</div>
      </label>
      <img style="grid-area: icon" src="${getSprite(name)}" />
      <span style="grid-area: name">
        ${name.split("-").map(part => part.charAt(0).toUpperCase() + part.substr(1)).join(" ")}
      </span>
      <div
        class="pkmn-tile_stats"
        style="grid-area: totl; color: ${textColor}; background-color: ${mu.hex};"
      >
        <div class="pkmn-tile_row" style="justify-content: center;">
          ${mu.hex}
        </div>
        <div class="toggle-on">
          ${ renderStatRow(
            [ ["α =", scores.total.alpha.toFixed(3)],
              ["σ =", scores.total.sigma.toFixed(3)],
              ["Θ =", scores.total.bigTheta.toFixed(3)],
            ].map(([lbl, val]) => renderStatPair(lbl, val))
          )}
          ${ renderStatRow(
            [ ["θ =", scores.total.theta.toFixed(3) + "°"],
              ["ϕ =", scores.total.phi.toFixed(3) + "°"],
              ["δ =", scores.total.delta.toFixed(3)],
            ].map(([lbl, val]) => renderStatPair(lbl, val))
          )}
          ${ renderStatRow(
            [ ["M =", scores.total.manhattan.toFixed(3)],
              ["Ч =", scores.total.ch.toFixed(3)],
              ["ℓ =", scores.total.lightnessDiff.toFixed(3)],
            ].map(([lbl, val]) => renderStatPair(lbl, val))
          )}
          <hr style="width: 80%; color: ${textColor}"/>
          ${ renderStatRow(
            [ ["μ =", `(${mu.vector.map(c => c.toFixed(2)).join(", ")})`, "vector"],
              ["ν =", `(${nu.map(c => c.toFixed(2)).join(", ")})`, "vector"],
            ].map(([lbl, val, cls]) => renderStatPair(lbl, val, cls))
          )}
          ${ renderStatRow(
            [ ["I =", scores.total.inertia.toFixed(2)],
              ["V =", scores.total.muNuAngle.toFixed(2) + "°"],
              ["N =", size],
              ["L =", scores.total.lightness.toFixed(2)],
              ["C =", scores.total.chroma.toFixed(2)],
            ].map(([lbl, val, cls]) => renderStatPair(lbl, val, cls))
          )}
          ${ bestClusterIndex < 0 ? "" : `<hr style="width: 80%; color: ${textColor}"/>` }
          ${ renderStatRow([
            `<span class="pkmn-tile_indicator">${bestClusterIndex === 0 ? "▼" : ""}</span>`,
            `<span class="pkmn-tile_indicator">${bestClusterIndex === 1 ? "▼" : ""}</span>`,
            `<span class="pkmn-tile_indicator">${bestClusterIndex === 2 ? "▼" : ""}</span>`,
          ])}
        </div>
      </div>
      ${clusters.map((c, i) => renderPokemonTileCluster(`cls${i+1}`, c, scores.clusters[i])).join("\n")}
    </div>
  `
};