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

CODEX - Added Warning sign if Archetype is missing

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-23 13:21:42 +02:00
parent d49a9636e5
commit d390bdac0d
6 changed files with 119 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -110,6 +110,14 @@ function applyNoteAssignments(rawStepValue, noteAssignments) {
return result;
}
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 mutedStyle = { color: "var(--text-muted)" };
const labelStyle = { color: "var(--text-secondary)" };
const NOTE_LABELS = "ABCDEFGHIJKLMNOP";
@@ -460,7 +468,9 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
const enabled = Boolean(stepValue & (1 << noteIdx));
const isCurrent = currentStep === stepIdx;
const assignedBell = Number(noteAssignments[noteIdx] || 0);
const dotLabel = assignedBell > 0 ? assignedBell : noteIdx + 1;
const dotLabel = assignedBell > 0 ? assignedBell : "";
const isUnassigned = assignedBell <= 0;
const dotVisible = enabled || (isUnassigned && Boolean(stepValue & (1 << noteIdx)));
return (
<td
key={`${noteIdx}-${stepIdx}`}
@@ -479,15 +489,17 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet
width: "68%",
height: "68%",
borderRadius: "9999px",
backgroundColor: "var(--btn-primary)",
backgroundColor: isUnassigned ? "rgba(100,116,139,0.7)" : bellDotColor(assignedBell),
color: "var(--text-white)",
opacity: enabled ? 1 : 0,
transform: enabled ? "scale(1)" : "scale(0.4)",
boxShadow: enabled ? "0 0 10px 3px rgba(116, 184, 22, 0.5)" : "none",
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`)
: "none",
transition: "opacity 140ms ease, transform 140ms ease, box-shadow 180ms ease",
}}
>
{enabled ? dotLabel : ""}
{dotVisible ? dotLabel : ""}
</span>
</span>
</td>