beginnings of scoring stuff, faded cluster forms when not needed

script.js

@@ -31,6 +31,40 @@ const clusterMetric = addMetricForm(
   "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
@@ -175,7 +209,7 @@ U.template(
     clusterName,
     clusterNameInv,
   }) => {
-    form.name = "clusterFunction";
+    form.name = "clsFunction";
 
     form.elements.sortOrder.checked = true;
 
@@ -209,3 +243,12 @@ U.template(
     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);
+});

styles.css

@@ -169,3 +169,11 @@ hr {
   padding-bottom: 2px;
   border-block-end: 1px solid var(--highlight);
 }
+
+:is(#cls-fn-mount, #cls-metric-mount) form {
+  transition: opacity 200ms;
+}
+
+[data-faded="true"] {
+  opacity: 25%;
+}