pokemon-color-search/nearest.js

const getSprite = pokemon => `https://img.pokemondb.net/sprites/sword-shield/icon/${pokemon}.png`

const vectorMag = v => Math.sqrt(v.map(x => x * x).reduce((x, y) => x + y));

const onColorChange = () => {
  const numPoke = document.getElementById("num-poke")?.value;
  document.getElementById("num-poke-display").innerHTML = numPoke;

  const closeCoeff = document.getElementById("close-coeff")?.value;
  document.getElementById("close-coeff-display").innerHTML = closeCoeff;

  const includeX = document.getElementById("include-x")?.checked ?? false;
  const normQY = document.getElementById("norm-q-y")?.checked ?? false;

  const bestList = document.getElementById("best-list");
  bestList.innerHTML = ''; // do the lazy thing

  const color = document.getElementById("color-input")?.value;
  if (color.length !== 6) {
    return;
  }
  document.querySelector("body").setAttribute("style", `background: #${color}`);
  const colorValues = [
    Number.parseInt(color.substring(0, 2), 16),
    Number.parseInt(color.substring(2, 4), 16),
    Number.parseInt(color.substring(4, 6), 16),
  ];
  const colorMag = vectorMag(colorValues);

  database.map(([name, x, ...y]) => {
    const xComp = includeX ? x : 0;
    const norm = normQY ? vectorMag(y) * colorMag : 1;
    return {
      name,
      score: xComp - closeCoeff * y.map((yc, i) => yc * colorValues[i] / norm).reduce((x, y) => x + y),
      avgColor: y,
    };
  }).sort((a, b) => a.score - b.score)
    .slice(0, numPoke)
    .forEach(({ name, avgColor}) => {
      const li = document.createElement("li");
      const img = document.createElement("img");
      const tile = document.createElement("div");
      const hexColor = avgColor.map(c => Math.round(c).toString(16).padStart(2, "0")).reduce((x, y) => x + y);
      tile.setAttribute("style", `width: 25px; height: 25px; background-color: #${hexColor}`)
      img.setAttribute("src", getSprite(name));
      li.appendChild(img)
      li.appendChild(document.createTextNode(name));
      li.appendChild(tile)
      li.setAttribute("style", "display: flex; flex-flow: row nowrap; justify-content: space-between; width: 320px")
      bestList.appendChild(li);
    });
};

const onRandomColor = () => {
  const colorInput = document.getElementById("color-input");
  colorInput.value = hsvToRGB(Math.random(), 0.9, 0.9);
  onColorChange();
};

// mostly stolen from https://stackoverflow.com/a/17243070
// adapted slightly
const hsvToRGB = (h, s, v) => {
  var r, g, b, i, f, p, q, t;
  i = Math.floor(h * 6);
  f = h * 6 - i;
  p = v * (1 - s);
  q = v * (1 - f * s);
  t = v * (1 - (1 - f) * s);
  switch (i % 6) {
      case 0: r = v, g = t, b = p; break;
      case 1: r = q, g = v, b = p; break;
      case 2: r = p, g = v, b = t; break;
      case 3: r = p, g = q, b = v; break;
      case 4: r = t, g = p, b = v; break;
      case 5: r = v, g = p, b = q; break;
  }
  return [r, g, b].map(c => Math.round(c * 255).toString(16).padStart(2, "0")).reduce((x, y) => x + y);
}