pokemon-color-search/nearest.js

const stripForm = ["flabebe", "floette", "florges", "vivillon", "basculin", "furfrou", "magearna"];

const getSprite = 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 titleCase = s => s.charAt(0).toUpperCase() + s.substr(1);

const vectorDot = (u, v) => u.map((x, i) => x * v[i]).reduce((x, y) => x + y);

const vectorMag = v => Math.sqrt(vectorDot(v, v));

const pokemonLookup = new Fuse(database, { keys: [ "name" ] });

// hex codes already include leading # in these functions
// rgb values are [0, 255] in these functions
const jab2hex = jab => d3.jab(...jab).formatHex();
const rgb2hex = rgb => d3.rgb(...rgb).formatHex();
const rgb2jab = rgb => {
  const { J, a, b } = d3.jab(d3.rgb(...rgb));
  return [ J, a, b ];
}
const hex2rgb = hex => {
  const { r, g, b } = d3.rgb(hex);
  return [ r, g, b ];
};

// scoring functions
const getNormedScorer = (c, q) => {
  const factor = c / vectorMag(q);
  return yVec => factor * vectorDot(q, yVec) / vectorMag(yVec);
};
const getUnnormedScorer = (c, q) => yVec => c * vectorDot(q, yVec);

// create a tile of a given hex color
const createTile = hexColor => {
  const tile = document.createElement("div");
  tile.setAttribute("class", "color-tile");
  tile.setAttribute("style", `background-color: ${hexColor};`)
  tile.textContent = hexColor;
  return tile;      
}

const createPokemon = ({ name, score, yRGB, yJAB }) => {
  const img = document.createElement("img");
  img.setAttribute("src", getSprite(name));

  const titleName = titleCase(name);
  const text = score ? `${titleName}: ${score.toFixed(3)}` : titleName

  const pkmn = document.createElement("div");
  pkmn.setAttribute("class", "pokemon");
  pkmn.appendChild(img);
  const textSpan = document.createElement("span");
  textSpan.textContent = text;
  textSpan.setAttribute("class", "pokemon_text");
  pkmn.appendChild(textSpan);
  pkmn.appendChild(createTile(rgb2hex(yRGB)));
  pkmn.appendChild(createTile(jab2hex(yJAB)));
  return pkmn;
}

let lastColorSearch = null;
let lastPkmnSearch = null;

const paramsChanged = (...args) => {
  const old = lastColorSearch;
  lastColorSearch = args;
  return old === null || old.filter((p, i) => p !== args[i]).length > 0
}

const renderVec = math => `\\vec{${math.charAt(0)}}${math.substr(1)}`;

const renderNorm = vec => `\\frac{${vec}}{\\left|\\left|${vec}\\right|\\right|}`;

const renderMath = (includeX, normQY) => {
  const xTerm = includeX ? "X\\left(P\\right)" : "";
  const qyMod = normQY ? c => renderNorm(renderVec(c)) : renderVec;
  return TeXZilla.toMathML(`${xTerm}-2${qyMod("q")}\\cdot ${qyMod("Y\\left(P\\right)")}`);
}

const onUpdate = (event) => {
  if (event) {
    event.preventDefault();
  }
  
  // Configuration Loading
  const includeX = document.getElementById("include-x")?.checked ?? false;
  const normQY = document.getElementById("norm-q-y")?.checked ?? false;
  const closeCoeff = document.getElementById("close-coeff")?.value ?? 2;
  const useRGB = document.getElementById("color-space")?.textContent === "RGB";
  const numPoke = document.getElementById("num-poke")?.value ?? 20;
  const pokemonName = document.getElementById("pokemon-name")?.value?.toLowerCase() ?? "";
  const targetColor = "#" + (document.getElementById("color-input")?.value?.replace("#", "") ?? "FFFFFF");
  const targetRGB = hex2rgb(targetColor);

  // Update display values
  // document.getElementById("x-term").textContent = includeX ? "X(P)" : "";
  // document.getElementById("c-value").textContent = closeCoeff;
  // document.getElementById("q-vec").innerHTML = normQY ? "<mover><m" : "q";
  // document.getElementById("y-vec").textContent = normQY ? "Ŷ(P)" : "Y(P)";
  // document.getElementById("close-coeff-display").innerHTML = closeCoeff;
  // document.getElementById("num-poke-display").textContent = numPoke;
  const objFnElem = document.getElementById("obj-fn");
  objFnElem.innerHTML = "";
  objFnElem.appendChild(renderMath(includeX, normQY));
  
  // determine metrics from configuration
  const targetInSpace = useRGB ? targetRGB : rgb2jab(targetRGB);
  const xSelector = includeX ? (useRGB ? ({ xRGB }) => xRGB : ({ xJAB }) => xJAB) : () => 0;
  const ySelector = useRGB ? ({ yRGB }) => yRGB : ({ yJAB }) => yJAB;
  const yScorer = (normQY ? getNormedScorer : getUnnormedScorer)(closeCoeff, targetInSpace);
  const totalScorer = info => xSelector(info) - yScorer(ySelector(info));

  const newParams = paramsChanged(includeX, normQY, closeCoeff, useRGB, numPoke, targetColor);

  if (targetColor.length === 7 && newParams) {
    // calculate luminance to determine if text should be dark or light
    const textColor = vectorDot(targetRGB, [0.3, 0.6, 0.1]) >= 128 ? "#222" : "#ddd";
    document.querySelector("body").setAttribute("style", `background: ${targetColor}; color: ${textColor}`);

    const bestList = document.getElementById("best-list");
    bestList.innerHTML = ''; // do the lazy thing
  
    // actually score pokemon
    database
      .map(info => ({ ...info, score: totalScorer(info) }))
      .sort((a, b) => a.score - b.score)
      .slice(0, numPoke)
      .forEach(info => {
        const li = document.createElement("li");
        li.appendChild(createPokemon(info))
        bestList.appendChild(li);
      });
  }

  if (pokemonName.length > 0 && (lastPkmnSearch !== pokemonName || newParams)) {
    lastPkmnSearch = pokemonName;
    // lookup by pokemon too
    const searchList = document.getElementById("search-list");
    searchList.innerHTML = '';
    pokemonLookup
      .search(pokemonName, { limit: 15 })
      .map(({ item }) => ({ ...item, score: totalScorer(item) }))
      .forEach(item => {
        const li = document.createElement("li");
        li.appendChild(createPokemon(item))
        searchList.appendChild(li);
      });
  }
};

const onRandomColor = () => {
  document.getElementById("color-input").value = rgb2hex([Math.random(), Math.random(), Math.random()].map(c => c * 255));
  onUpdate();
};

const onToggleSpace = () => {
  const element = document.getElementById("color-space");
  const current = element?.textContent;
  element.textContent = current === "RGB" ? "CAM02-UCS" : "RGB";
  document.getElementById("space-toggle").textContent = `Swap to ${current}`
  onUpdate();
};