CODEX - Colour improvements

frontend/src/melodies/MelodyComposer.jsx

@@ -22,6 +22,39 @@ function stepToHex(stepValue) {
   return `0x${(stepValue >>> 0).toString(16).toUpperCase().padStart(4, "0")}`;
 }
 
+function interpolateHue(t) {
+  const stops = [
+    [0.0, 190],
+    [0.24, 140],
+    [0.5, 56],
+    [0.82, 30],
+    [1.0, 0],
+  ];
+  for (let i = 0; i < stops.length - 1; i++) {
+    const [aPos, aHue] = stops[i];
+    const [bPos, bHue] = stops[i + 1];
+    if (t >= aPos && t <= bPos) {
+      const local = (t - aPos) / (bPos - aPos || 1);
+      return aHue + (bHue - aHue) * local;
+    }
+  }
+  return stops[stops.length - 1][1];
+}
+
+function noteDotColor(noteNumber) {
+  const n = Number(noteNumber || 1);
+  const t = Math.min(1, Math.max(0, (n - 1) / 15));
+  const hue = interpolateHue(t);
+  return `hsl(${hue}, 78%, 68%)`;
+}
+
+function noteDotGlow(noteNumber) {
+  const n = Number(noteNumber || 1);
+  const t = Math.min(1, Math.max(0, (n - 1) / 15));
+  const hue = interpolateHue(t);
+  return `hsla(${hue}, 78%, 56%, 0.45)`;
+}
+
 function playStep(audioCtx, stepValue, noteDurationMs) {
   if (!audioCtx) return;
 
@@ -527,10 +560,10 @@ export default function MelodyComposer() {
                               width: "54%",
                               height: "54%",
                               borderRadius: "9999px",
-                              backgroundColor: "var(--btn-primary)",
+                              backgroundColor: noteDotColor(noteIndex + 1),
                               opacity: enabled ? 1 : 0,
                               transform: enabled ? "scale(1)" : "scale(0.4)",
-                              boxShadow: enabled ? "0 0 10px 3px rgba(116, 184, 22, 0.5)" : "none",
+                              boxShadow: enabled ? `0 0 10px 3px ${noteDotGlow(noteIndex + 1)}` : "none",
                               transition: "opacity 140ms ease, transform 140ms ease, box-shadow 180ms ease",
                             }}
                           />