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 renderPokemonTileCluster = (area, totalSize, { mu, nu }, scores) => {
  const textColor = getContrastingTextColor(hex2rgb(mu.hex));
  return String.raw`
  <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 * scores.size / totalSize).toFixed(2)}% ${mu.hex}
    </div>
    <div class="toggle-on">
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">σ =</span>
        <span class="pkmn-tile_value">${scores.sigma.toFixed(2)}</span>
      </div>
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">δ =</span>
        <span class="pkmn-tile_value">${scores.delta.toFixed(2)}</span>
      </div>
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">M =</span>
        <span class="pkmn-tile_value">${scores.manhattan.toFixed(2)}</span>
      </div>
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">Ч =</span>
        <span class="pkmn-tile_value">${scores.ch.toFixed(2)}</span>
      </div>
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">Θ =</span>
        <span class="pkmn-tile_value">${scores.bigTheta.toFixed(2)}°</span>
      </div>
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">θ =</span>
        <span class="pkmn-tile_value">${scores.theta.toFixed(2)}°</span>
      </div>
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">ϕ =</span>
        <span class="pkmn-tile_value">${scores.phi.toFixed(2)}°</span>
      </div>
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">ℓ =</span>
        <span class="pkmn-tile_value">${scores.lightnessDiff.toFixed(2)}</span>
      </div>
      <hr style="width: 80%; color: ${textColor}"/>
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">μ =</span>
        <span class="pkmn-tile_vector">(${mu.vector.map(c => c.toFixed(2)).join(", ")})</span>
      </div>
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">I =</span>
        <span class="pkmn-tile_value">${scores.inertia.toFixed(2)}</span>
      </div>
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">ℒ =</span>
        <span class="pkmn-tile_value">${scores.lightness.toFixed(2)}</span>
      </div>
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">ν =</span>
        <span class="pkmn-tile_vector">(${nu.map(c => c.toFixed(2)).join(", ")})</span>
      </div>
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">V =</span>
        <span class="pkmn-tile_value">${scores.muNuAngle.toFixed(2)}°</span>
      </div>
      <div class="pkmn-tile_row">
        <span class="pkmn-tile_label">N =</span>
        <span class="pkmn-tile_value">${scores.size}px</span>
      </div>
    </div>
  </div>
`
};

const clusterToggles = {};

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

  return String.raw`
    <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">
          <div class="pkmn-tile_row">
            <span class="pkmn-tile_label">σ =</span>
            <span class="pkmn-tile_value">${scores.total.sigma.toFixed(2)}</span>
            <span class="pkmn-tile_label">δ =</span>
            <span class="pkmn-tile_value">${scores.total.delta.toFixed(2)}</span>
            <span class="pkmn-tile_label">M =</span>
            <span class="pkmn-tile_value">${scores.total.manhattan.toFixed(2)}</span>
            <span class="pkmn-tile_label">Ч =</span>
            <span class="pkmn-tile_value">${scores.total.ch.toFixed(2)}</span>
          </div>
          <div class="pkmn-tile_row">
            <span class="pkmn-tile_label">Θ =</span>
            <span class="pkmn-tile_value">${scores.total.bigTheta.toFixed(2)}°</span>
            <span class="pkmn-tile_label">θ =</span>
            <span class="pkmn-tile_value">${scores.total.theta.toFixed(2)}°</span>
            <span class="pkmn-tile_label">ϕ =</span>
            <span class="pkmn-tile_value">${scores.total.phi.toFixed(2)}°</span>
            <span class="pkmn-tile_label">ℓ =</span>
            <span class="pkmn-tile_value">${scores.total.lightnessDiff.toFixed(2)}</span>
          </div>
          <hr style="width: 80%; color: ${textColor}"/>
          <div class="pkmn-tile_row">
            <span class="pkmn-tile_label">μ =</span>
            <span class="pkmn-tile_vector">(${mu.vector.map(c => c.toFixed(2)).join(", ")})</span>
            <span class="pkmn-tile_label">I =</span>
            <span class="pkmn-tile_value">${scores.total.inertia.toFixed(2)}</span>
            <span class="pkmn-tile_label">ℒ =</span>
            <span class="pkmn-tile_value">${scores.total.lightness.toFixed(2)}</span>
          </div>
          <div class="pkmn-tile_row">
            <span class="pkmn-tile_label">ν =</span>
            <span class="pkmn-tile_vector">(${nu.map(c => c.toFixed(2)).join(", ")})</span>
            <span class="pkmn-tile_label">V =</span>
            <span class="pkmn-tile_value">${scores.total.muNuAngle.toFixed(2)}°</span>
            <span class="pkmn-tile_label">N =</span>
            <span class="pkmn-tile_value">${size}px</span>
          </div>
        </div>
      </div>
      ${clusters.map((c, i) => renderPokemonTileCluster(`cls${i+1}`, size, c, scores.clusters[i])).join("\n")}
    </div>
  `
};