pokemon-color-search/script.js

// ---- Observables ----
const targetColor = U.obs();
const resultsToDisplay = U.obs(6);
const colorSpace = U.obs("jab");

const sortOrder = U.obs("min");
const sortUseWholeImage = U.obs(true);
const sortUseBestCluster = U.obs(true);
const sortUseClusterSize = U.obs(false);
const sortUseInverseClusterSize = U.obs(true);
const sortUseTotalSize = U.obs(true);
const sortUseInverseTotalSize = U.obs(false);
const sortMetric = addMetricForm(
  "sortMetric",
  "Sort Metric",
  "whole",
  "alpha",
  "sort-metric-mount"
);

const clusterOrder = U.obs("max");
const clusterUseClusterSize = U.obs(false);
const clusterUseInverseClusterSize = U.obs(false);
const clusterUseTotalSize = U.obs(false);
const clusterUseInverseTotalSize = U.obs(false);
const clusterMetric = addMetricForm(
  "clsMetric",
  "Cluster Metric",
  "stat",
  "importance",
  "cls-metric-mount"
);

// ---- Score Calculation ----
const currentScores = U.obs(() => {
  const rgb = d3.rgb(targetColor.value);
  const { J, a, b } = d3.jab(rgb);

  const targetJab = buildVectorData([J, a, b], jab2hue, jab2lit, jab2chroma, jab2hex);
  const targetRgb = buildVectorData(
    [rgb.r, rgb.g, rgb.b],
    rgb2hue,
    rgb2lit,
    rgb2chroma,
    rgb2hex
  );

  const scores = {};
  pokemonData.forEach(({ name, jab, rgb }) => {
    scores[name] = {
      jab: {
        total: calcScores(jab.total, targetJab),
        clusters: jab.clusters.map((c) => calcScores(c, targetJab)),
      },
      rgb: {
        total: calcScores(rgb.total, targetRgb),
        clusters: rgb.clusters.map((c) => calcScores(c, targetRgb)),
      },
    };
  });
  return scores;
});

const extractScore = (name) => {
  // TODO
};

// ---- Color Controls ----
const randomizeTargetColor = () => {
  targetColor.value = d3
    .hsl(Math.random() * 360, Math.random(), Math.random())
    .formatHex();
};

U.element("targetSelect", ({ randomButton }, form) => {
  U.field(form.elements.colorText, { obs: targetColor });
  U.field(form.elements.colorPicker, { obs: targetColor });

  U.field(form.elements.resultsToDisplay, { obs: resultsToDisplay });
  U.reactive(() => {
    form.elements.resultsToDisplayOutput.value = resultsToDisplay.value;
  });

  // non-reactive since the form onchange updates it
  form.elements.colorSpace.value = colorSpace.value;
  U.form(form, {
    onChange: {
      colorSpace(value) {
        colorSpace.value = value;
      },
    },
  });

  randomButton.addEventListener("click", randomizeTargetColor);
});

const getColorButtonStyle = (hex) => {
  const { h, s, l } = d3.hsl(hex);
  return `
    color: ${getContrastingTextColor(hex)}; 
    --button-bg: ${hex};
    --button-bg-hover: ${d3.hsl(h, s, clamp(0.25, l * 1.25, 0.9)).formatHex()};
  `;
};

targetColor.subscribe((hex, { previous }) => {
  const style = document.querySelector(":root").style;
  style.setProperty("--background", hex);
  style.setProperty("--highlight", getContrastingTextColor(hex));

  if (previous) {
    const prevButton = document.createElement("button");
    prevButton.innerText = previous;
    prevButton.classList = "color-select";
    prevButton.style = getColorButtonStyle(previous);
    prevButton.addEventListener("click", () => (targetColor.value = previous));
    document.getElementById("prevColors").prepend(prevButton);
  }
});

// ---- Metric Controls ----
function addMetricForm(formName, legendText, initialKind, initialMetric, mountPoint) {
  const metricKind = U.obs(initialKind);
  let metric;

  U.template("metric-select-template", ({ form, legend }) => {
    form.name = formName;
    legend.innerText = legendText;
    form.elements[initialKind].disabled = false;
    form.elements[initialKind].value = initialMetric;
    form.elements.metricKind.value = initialKind;

    U.reactive(() => {
      form.elements.whole.disabled = metricKind.value !== "whole";
      form.elements.mean.disabled = metricKind.value !== "mean";
      form.elements.stat.disabled = metricKind.value !== "stat";
    });

    const metrics = U.obs([
      U.field(form.elements.whole),
      U.field(form.elements.mean),
      U.field(form.elements.stat),
    ]);

    U.form(form, {
      onChange: {
        metricKind(kind) {
          metricKind.value = kind;
        },
      },
    });

    metric = U.obs(() => {
      const [whole, mean, stat] = metrics.value;
      return { whole, mean, stat }[metricKind.value];
    });

    return mountPoint;
  });

  return metric;
}

// ---- Sorting Function Controls ----
const getMetricSymbol = (metric) =>
  // terrible hack
  document.querySelector(`option[value=${metric}]`).textContent.at(-2);

U.template(
  "function-template",
  ({ form, minmaxLabel, metricSymbol, metricSymbolCls, clusterName, clusterNameInv }) => {
    form.name = "sortFunction";

    const toggle = U.field(form.elements.sortOrder);
    U.reactive(() => {
      toggle.value = sortOrder.value === "max";
    });
    U.reactive(() => {
      sortOrder.value = toggle.value ? "max" : "min";
    });
    U.reactive(() => {
      minmaxLabel.innerText = sortOrder.value;
    });

    U.field(form.elements.useWholeImage, { obs: sortUseWholeImage });
    U.field(form.elements.useBestCluster, { obs: sortUseBestCluster });
    U.field(form.elements.clusterSize, { obs: sortUseClusterSize });
    U.field(form.elements.invClusterSize, { obs: sortUseInverseClusterSize });
    U.field(form.elements.totalSize, { obs: sortUseTotalSize });
    U.field(form.elements.invTotalSize, { obs: sortUseInverseTotalSize });

    U.reactive(() => {
      const symbol = getMetricSymbol(sortMetric.value);
      metricSymbol.innerText = symbol;
      metricSymbolCls.innerText = `${symbol}(B)`;
    });

    clusterName.innerText = clusterNameInv.innerText = "B";

    U.form(form);
    return "sort-fn-mount";
  }
);

U.template(
  "function-template",
  ({
    form,
    minmaxLabel,
    useWholeImageLabel,
    metricSymbolCls,
    clusterName,
    clusterNameInv,
  }) => {
    form.name = "clsFunction";

    form.elements.sortOrder.checked = true;

    const toggle = U.field(form.elements.sortOrder);
    U.reactive(() => {
      toggle.value = clusterOrder.value === "max";
      minmaxLabel.innerText = `arg${clusterOrder.value}`;
    });
    U.reactive(() => {
      clusterOrder.value = toggle.value ? "max" : "min";
    });

    U.field(form.elements.clusterSize, { obs: clusterUseClusterSize });
    U.field(form.elements.invClusterSize, { obs: clusterUseInverseClusterSize });
    U.field(form.elements.totalSize, { obs: clusterUseTotalSize });
    U.field(form.elements.invTotalSize, { obs: clusterUseInverseTotalSize });

    // not needed for cluster function
    useWholeImageLabel.nextSibling.remove();
    useWholeImageLabel.remove();
    // and this can't be disabled so just replace the field with the span
    metricSymbolCls.parentElement.replaceWith(metricSymbolCls);

    U.reactive(() => {
      metricSymbolCls.innerText = `${getMetricSymbol(clusterMetric.value)}(K)`;
    });

    clusterName.innerText = clusterNameInv.innerText = "K";

    U.form(form);
    return "cls-fn-mount";
  }
);

U.reactive(() => {
  document.forms.clsMetric.dataset.faded = document.forms.clsFunction.dataset.faded = [
    // ensure dep on all three
    sortUseBestCluster.value,
    sortUseClusterSize.value,
    sortUseInverseClusterSize.value,
  ].every((v) => !v);
});

randomizeTargetColor();