diff --git a/frontend/src/melodies/PlaybackModal.jsx b/frontend/src/melodies/PlaybackModal.jsx index 10244d6..f506d9c 100644 --- a/frontend/src/melodies/PlaybackModal.jsx +++ b/frontend/src/melodies/PlaybackModal.jsx @@ -357,9 +357,9 @@ export default function PlaybackModal({ open, melody, builtMelody, files, archet

Note → Assigned Bell

{noteAssignments.map((assignedBell, noteIdx) => { - // A note is active if the current step has this note's bit set (raw archetype value) - const isActive = currentStep >= 0 && Boolean(steps[currentStep] & (1 << noteIdx)); + // A note is active (flashing) if its assigned bell is currently lit in activeBells const firesABell = assignedBell && assignedBell > 0; + const isActive = firesABell && activeBells.has(assignedBell); return (
{ @@ -237,6 +245,17 @@ export default function SpeedCalculatorModal({ open, melody, builtMelody, archet const stepValue = currentSteps[playFrom]; setCurrentStep(playFrom); + + // Flash active bells for tone length, then clear + const bellsNow = new Set(); + getActiveBells(stepValue).forEach((b) => bellsNow.add(b)); + setActiveBells(bellsNow); + if (flashTimerRef.current) clearTimeout(flashTimerRef.current); + flashTimerRef.current = setTimeout(() => { + setActiveBells(new Set()); + flashTimerRef.current = null; + }, effectiveBeatRef.current); + playStep(ctx, stepValue, effectiveBeatRef.current); const delay = stepDelayRef.current; @@ -353,7 +372,6 @@ export default function SpeedCalculatorModal({ open, melody, builtMelody, archet getActiveBells(v).forEach((b) => set.add(b)); return set; }, new Set()); - const currentBells = currentStep >= 0 ? getActiveBells(steps[currentStep] || 0) : []; const maxBell = allBellsUsed.size > 0 ? Math.max(...Array.from(allBellsUsed)) : 0; return ( @@ -439,12 +457,12 @@ export default function SpeedCalculatorModal({ open, melody, builtMelody, archet {totalSteps > 0 && (

- Bell indicator + Notes Indicators {currentStep >= 0 &&  ·  Step {currentStep + 1} / {totalSteps}}

{Array.from({ length: maxBell }, (_, i) => i + 1).map((b) => { - const isActive = currentBells.includes(b); + const isActive = activeBells.has(b); const isUsed = allBellsUsed.has(b); return (