bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CODEX - Colour improvements

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-23 14:11:03 +02:00
parent 04b2a0bcb8
commit cf9fa91238
3 changed files with 101 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/melodies/PlaybackModal.jsx
View File

@@ -110,12 +110,39 @@ function applyNoteAssignments(rawStepValue, noteAssignments) {
return result;
}
function interpolateHue(t) {
const stops = [
[0.0, 190], // bright teal/blue
[0.24, 140], // green
[0.5, 56], // yellow
[0.82, 30], // orange
[1.0, 0], // red
];
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 bellDotColor(assignedBell) {
const bell = Number(assignedBell || 0);
if (bell <= 0) return "rgba(148,163,184,0.7)";
const t = Math.min(1, Math.max(0, (bell - 1) / 15));
const light = 62 - t * 40; // bright green -> very dark green
return `hsl(132, 74%, ${light}%)`;
const hue = interpolateHue(t);
return `hsl(${hue}, 78%, 68%)`;
}
function bellDotGlow(assignedBell) {
const bell = Number(assignedBell || 0);
if (bell <= 0) return "rgba(100,116,139,0.35)";
const t = Math.min(1, Math.max(0, (bell - 1) / 15));
const hue = interpolateHue(t);
return `hsla(${hue}, 78%, 56%, 0.45)`;
}
const mutedStyle = { color: "var(--text-muted)" };
@@ -490,11 +517,11 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
height: "68%",
borderRadius: "9999px",
backgroundColor: isUnassigned ? "rgba(100,116,139,0.7)" : bellDotColor(assignedBell),
color: "var(--text-white)",
color: "#111827",
opacity: dotVisible ? 1 : 0,
transform: dotVisible ? "scale(1)" : "scale(0.4)",
boxShadow: dotVisible
? (isUnassigned ? "0 0 8px 2px rgba(100,116,139,0.35)" : `0 0 10px 3px ${bellDotColor(assignedBell)}66`)
? (isUnassigned ? "0 0 8px 2px rgba(100,116,139,0.35)" : `0 0 10px 3px ${bellDotGlow(assignedBell)}`)
: "none",
transition: "opacity 140ms ease, transform 140ms ease, box-shadow 180ms ease",
}}