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

First Fixes/Adjustments to the MelodyBuilder and SpeedCalc

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-22 13:59:31 +02:00
parent 8703c4fe26
commit cfae55025d
6 changed files with 418 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.claude/settings.local.json
View File

@@ -9,7 +9,8 @@
"Bash(wc:*)",
"Bash(ls:*)",
"Bash(node -c:*)",
"Bash(npm run lint:*)"
"Bash(npm run lint:*)",
"Bash(python:*)"
]
}
}

2
backend/builder/service.py
View File

@@ -11,7 +11,7 @@ from fastapi import HTTPException
logger = logging.getLogger("builder.service")
# Storage directory for built .bsm files
STORAGE_DIR = Path("storage/built_melodies")
STORAGE_DIR = Path(__file__).parent.parent / "storage" / "built_melodies"
def _ensure_storage_dir():

0
backend/mqtt_data.db Normal file
View File

1
frontend/src/melodies/MelodyDetail.jsx
View File

@@ -443,6 +443,7 @@ export default function MelodyDetail() {
<SpeedCalculatorModal
open={showSpeedCalc}
melody={melody}
builtMelody={builtMelody}
onClose={() => setShowSpeedCalc(false)}
onSaved={() => {
setShowSpeedCalc(false);

27
frontend/src/melodies/MelodyForm.jsx
View File

@@ -4,6 +4,7 @@ import api from "../api/client";
import TranslationModal from "./TranslationModal";
import SelectBuiltMelodyModal from "./builder/SelectBuiltMelodyModal";
import BuildOnTheFlyModal from "./builder/BuildOnTheFlyModal";
import SpeedCalculatorModal from "./SpeedCalculatorModal";
import {
getLocalizedValue,
getLanguageName,
@@ -84,6 +85,8 @@ export default function MelodyForm() {
const [showSelectBuilt, setShowSelectBuilt] = useState(false);
const [showBuildOnTheFly, setShowBuildOnTheFly] = useState(false);
const [showSpeedCalc, setShowSpeedCalc] = useState(false);
const [builtMelody, setBuiltMelody] = useState(null);
useEffect(() => {
api.get("/settings/melody").then((ms) => {
@@ -124,6 +127,13 @@ export default function MelodyForm() {
setPid(melody.pid || "");
setMelodyStatus(melody.status || "published");
setExistingFiles(files);
// Load built melody assignment (non-fatal)
try {
const bm = await api.get(`/builder/melodies/for-melody/${id}`);
setBuiltMelody(bm || null);
} catch {
setBuiltMelody(null);
}
} catch (err) {
setError(err.message);
} finally {
@@ -259,6 +269,16 @@ export default function MelodyForm() {
{isEdit ? "Edit Melody" : "Add Melody"}
</h1>
<div className="flex gap-3">
{isEdit && (
<button
type="button"
onClick={() => setShowSpeedCalc(true)}
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
>
Speed Calculator
</button>
)}
<button
type="button"
onClick={() => navigate(isEdit ? `/melodies/${id}` : "/melodies")}
@@ -610,6 +630,13 @@ export default function MelodyForm() {
{isEdit && (
<>
<SpeedCalculatorModal
open={showSpeedCalc}
melody={{ id, information, default_settings: settings, type, url, uid, pid }}
builtMelody={builtMelody}
onClose={() => setShowSpeedCalc(false)}
onSaved={() => { setShowSpeedCalc(false); loadMelody(); }}
/>
<SelectBuiltMelodyModal
open={showSelectBuilt}
melodyId={id}

674
frontend/src/melodies/SpeedCalculatorModal.jsx
View File

@@ -35,7 +35,7 @@ function playStep(audioCtx, stepValue, beatDurationMs) {
gain.gain.setValueAtTime(0, now);
gain.gain.linearRampToValueAtTime(0.3, now + fadeIn);
gain.gain.setValueAtTime(0.3, now + duration - fadeOut);
gain.gain.setValueAtTime(0.3, now + Math.max(duration - fadeOut, fadeIn + 0.001));
gain.gain.linearRampToValueAtTime(0, now + duration);
osc.start(now);
@@ -45,7 +45,7 @@ function playStep(audioCtx, stepValue, beatDurationMs) {
}
// ============================================================================
// Parse raw steps string into list of uint16 values
// Parse / decode helpers
// ============================================================================
function parseBellNotation(notation) {
@@ -72,10 +72,28 @@ function getActiveBells(stepValue) {
return bells;
}
/** Decode a .bsm binary (big-endian uint16 per step) to uint16 array */
async function decodeBsmBinary(url) {
const token = localStorage.getItem("access_token");
const res = await fetch(url, {
headers: token ? { Authorization: `Bearer ${token}` } : {},
});
if (!res.ok) throw new Error(`Failed to fetch binary: ${res.statusText}`);
const buf = await res.arrayBuffer();
const view = new DataView(buf);
const steps = [];
for (let i = 0; i + 1 < buf.byteLength; i += 2) {
steps.push(view.getUint16(i, false)); // big-endian
}
return steps;
}
// ============================================================================
// Speed math
// MIN is derived so that at 50%, speed = normal (geometric mean)
// normal = sqrt(MIN * MAX) => MIN = normal^2 / MAX
// Note: higher ms = SLOWER. MAX ms = fastest hardware speed.
// Normal ms must be HIGHER (slower) than MAX ms to make sense.
// ============================================================================
function calcMin(normal, max) {
@@ -90,27 +108,47 @@ function calcMin(normal, max) {
const labelStyle = { color: "var(--text-secondary)" };
const mutedStyle = { color: "var(--text-muted)" };
export default function SpeedCalculatorModal({ open, melody, onClose, onSaved }) {
// Step Delay slider is inverted: right = fast (low ms), left = slow (high ms)
// We store actual ms in state, but display with inverted slider value.
const DELAY_MIN = 50;
const DELAY_MAX = 3000;
function delayToSlider(ms) { return DELAY_MIN + DELAY_MAX - ms; }
function sliderToDelay(val) { return DELAY_MIN + DELAY_MAX - val; }
export default function SpeedCalculatorModal({ open, melody, builtMelody, onClose, onSaved }) {
const info = melody?.information || {};
// Raw steps input (not stored in Firestore — only used locally for playback)
// Raw steps input
const [stepsInput, setStepsInput] = useState("");
const [steps, setSteps] = useState([]); // parsed uint16 values
const [steps, setSteps] = useState([]);
const [loadingBinary, setLoadingBinary] = useState(false);
const [binaryLoadError, setBinaryLoadError] = useState("");
// Playback
const audioCtxRef = useRef(null);
const playbackRef = useRef(null); // { timer, stepIndex }
const stepsRef = useRef([]);
const stepDelayRef = useRef(500);
const effectiveBeatRef = useRef(100);
const loopRef = useRef(false);
const [playing, setPlaying] = useState(false);
const [paused, setPaused] = useState(false);
const [loop, setLoop] = useState(false);
const [currentStep, setCurrentStep] = useState(-1);
// Sliders
const [stepDelay, setStepDelay] = useState(500); // ms
const [beatDuration, setBeatDuration] = useState(100); // ms
const [stepDelay, setStepDelay] = useState(500);
const [beatDuration, setBeatDuration] = useState(100);
const effectiveBeat = Math.min(beatDuration, Math.max(20, stepDelay - 20));
// Keep refs in sync so playback loop always reads current values
useEffect(() => { stepsRef.current = steps; }, [steps]);
useEffect(() => { stepDelayRef.current = stepDelay; }, [stepDelay]);
useEffect(() => { effectiveBeatRef.current = effectiveBeat; }, [effectiveBeat]);
useEffect(() => { loopRef.current = loop; }, [loop]);
// Speed capture
const [capturedMax, setCapturedMax] = useState(null);
const [capturedNormal, setCapturedNormal] = useState(null);
@@ -120,22 +158,27 @@ export default function SpeedCalculatorModal({ open, melody, onClose, onSaved })
const [saveError, setSaveError] = useState("");
const [saveSuccess, setSaveSuccess] = useState(false);
// Warnings
// Warnings:
// MAX is the fastest (lowest ms). Normal must be > MAX (slower than MAX).
// If Normal < MAX, it means Normal is faster than MAX — nonsensical.
const maxWarning = capturedMax !== null && capturedMax < 100;
const orderWarning = capturedMax !== null && capturedNormal !== null && capturedNormal > capturedMax;
const orderWarning = capturedMax !== null && capturedNormal !== null && capturedNormal < capturedMax;
// Pre-fill existing speeds from melody
// Reset on open
useEffect(() => {
if (open) {
setCapturedMax(info.maxSpeed > 0 ? info.maxSpeed : null);
setCapturedNormal(null);
setStepsInput("");
setSteps([]);
setBinaryLoadError("");
setCurrentStep(-1);
setPlaying(false);
setPaused(false);
setSaveError("");
setSaveSuccess(false);
}
}, [open]);
}, [open]); // eslint-disable-line react-hooks/exhaustive-deps
const stopPlayback = useCallback(() => {
if (playbackRef.current) {
@@ -147,7 +190,6 @@ export default function SpeedCalculatorModal({ open, melody, onClose, onSaved })
setCurrentStep(-1);
}, []);
// Stop when modal closes
useEffect(() => {
if (!open) stopPlayback();
}, [open, stopPlayback]);
@@ -162,44 +204,51 @@ export default function SpeedCalculatorModal({ open, melody, onClose, onSaved })
return audioCtxRef.current;
};
const scheduleStep = useCallback(
(stepIndex, startFrom = 0) => {
if (!steps.length) return;
// Recursive scheduler using refs for live updates — no restart needed when sliders change
const scheduleStep = useCallback((stepIndex) => {
const currentSteps = stepsRef.current;
if (!currentSteps.length) return;
const playFrom = stepIndex % steps.length;
if (!loop && playFrom === 0 && stepIndex > 0) {
stopPlayback();
return;
}
const playFrom = stepIndex % currentSteps.length;
const ctx = ensureAudioCtx();
const stepValue = steps[playFrom];
// End of sequence without loop
if (!loopRef.current && playFrom === 0 && stepIndex > 0) {
setPlaying(false);
setPaused(false);
setCurrentStep(-1);
playbackRef.current = null;
return;
}
setCurrentStep(playFrom);
playStep(ctx, stepValue, effectiveBeat);
const ctx = ensureAudioCtx();
const stepValue = currentSteps[playFrom];
const timer = setTimeout(() => {
const next = playFrom + 1;
if (next >= steps.length) {
if (loop) {
scheduleStep(0);
} else {
stopPlayback();
}
setCurrentStep(playFrom);
playStep(ctx, stepValue, effectiveBeatRef.current);
const delay = stepDelayRef.current;
const timer = setTimeout(() => {
const next = playFrom + 1;
if (next >= stepsRef.current.length) {
if (loopRef.current) {
scheduleStep(0);
} else {
scheduleStep(next);
setPlaying(false);
setPaused(false);
setCurrentStep(-1);
playbackRef.current = null;
}
}, stepDelay);
} else {
scheduleStep(next);
}
}, delay);
playbackRef.current = { timer, stepIndex: playFrom };
},
[steps, stepDelay, effectiveBeat, loop, stopPlayback]
);
playbackRef.current = { timer, stepIndex: playFrom };
}, []); // no deps — reads everything from refs
const handlePlay = () => {
if (!steps.length) return;
if (!stepsRef.current.length) return;
if (paused && playbackRef.current) {
// Resume from current step
setPaused(false);
setPlaying(true);
scheduleStep(playbackRef.current.stepIndex);
@@ -218,14 +267,34 @@ export default function SpeedCalculatorModal({ open, melody, onClose, onSaved })
setPlaying(false);
};
const handleStop = () => {
stopPlayback();
};
const handleStepsParse = () => {
const parsed = parseStepsString(stepsInput);
setSteps(parsed);
stepsRef.current = parsed;
stopPlayback();
setBinaryLoadError("");
};
const handleLoadFromBinary = async () => {
if (!builtMelody?.binary_url) return;
setLoadingBinary(true);
setBinaryLoadError("");
try {
const decoded = await decodeBsmBinary(`/api${builtMelody.binary_url}`);
setSteps(decoded);
stepsRef.current = decoded;
stopPlayback();
// Also reconstruct a human-readable steps string for the textarea
const stepsStr = decoded.map((v) => {
if (!v) return "0";
return getActiveBells(v).join("+");
}).join(",");
setStepsInput(stepsStr);
} catch (err) {
setBinaryLoadError(err.message);
} finally {
setLoadingBinary(false);
}
};
const handleSetSliderToCapture = (value) => {
@@ -233,7 +302,7 @@ export default function SpeedCalculatorModal({ open, melody, onClose, onSaved })
};
const handleSave = async () => {
if (!capturedMax || !derivedMin) return;
if (!capturedMax || !capturedNormal || !derivedMin) return;
setSaving(true);
setSaveError("");
setSaveSuccess(false);
@@ -251,9 +320,7 @@ export default function SpeedCalculatorModal({ open, melody, onClose, onSaved })
pid: melody.pid,
});
setSaveSuccess(true);
setTimeout(() => {
onSaved();
}, 800);
setTimeout(() => onSaved(), 800);
} catch (err) {
setSaveError(err.message);
} finally {
@@ -269,6 +336,7 @@ export default function SpeedCalculatorModal({ open, melody, onClose, onSaved })
return set;
}, new Set());
const currentBells = currentStep >= 0 ? getActiveBells(steps[currentStep] || 0) : [];
const maxBell = allBellsUsed.size > 0 ? Math.max(...Array.from(allBellsUsed)) : 0;
return (
<div
@@ -277,11 +345,18 @@ export default function SpeedCalculatorModal({ open, melody, onClose, onSaved })
onClick={(e) => e.target === e.currentTarget && !playing && onClose()}
>
<div
className="w-full max-w-2xl rounded-lg border shadow-xl"
style={{ backgroundColor: "var(--bg-card)", borderColor: "var(--border-primary)", maxHeight: "90vh", overflowY: "auto" }}
className="w-full rounded-lg border shadow-xl"
style={{
backgroundColor: "var(--bg-card)",
borderColor: "var(--border-primary)",
maxWidth: "900px",
maxHeight: "92vh",
display: "flex",
flexDirection: "column",
}}
>
{/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b" style={{ borderColor: "var(--border-primary)" }}>
<div className="flex items-center justify-between px-6 py-4 border-b flex-shrink-0" style={{ borderColor: "var(--border-primary)" }}>
<div>
<h2 className="text-lg font-semibold" style={{ color: "var(--text-heading)" }}>Speed Calculator</h2>
<p className="text-xs mt-0.5" style={mutedStyle}>
@@ -291,254 +366,279 @@ export default function SpeedCalculatorModal({ open, melody, onClose, onSaved })
<button onClick={() => { stopPlayback(); onClose(); }} className="text-xl leading-none" style={mutedStyle}>&times;</button>
</div>
<div className="p-6 space-y-5">
{/* Steps Input */}
<div>
<label className="block text-sm font-medium mb-1" style={labelStyle}>
Melody Steps
<span className="font-normal ml-2" style={mutedStyle}>(paste your step notation)</span>
</label>
<div className="flex gap-2">
<textarea
value={stepsInput}
onChange={(e) => setStepsInput(e.target.value)}
rows={2}
placeholder="e.g. 1,2,2+1,1,2,3+1,0,3,2..."
className="flex-1 px-3 py-2 rounded-md text-sm border"
style={{ fontFamily: "monospace", resize: "none" }}
/>
<button
onClick={handleStepsParse}
className="px-4 py-2 text-sm rounded-md self-start transition-colors"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
>
Load
</button>
</div>
{totalSteps > 0 && (
<p className="text-xs mt-1" style={{ color: "var(--success-text)" }}>
{totalSteps} steps loaded &nbsp;·&nbsp; {allBellsUsed.size} unique bell{allBellsUsed.size !== 1 ? "s" : ""} used
</p>
)}
</div>
{/* Two-column body */}
<div className="flex-1 overflow-y-auto">
<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0", minHeight: 0 }}>
{/* Bell visualizer */}
{totalSteps > 0 && (
<div>
<p className="text-xs mb-2" style={mutedStyle}>Bell indicator (current step)</p>
<div className="flex flex-wrap gap-1.5">
{Array.from({ length: Math.max(...Array.from(allBellsUsed), 1) }, (_, i) => i + 1).map((b) => {
const isActive = currentBells.includes(b);
const isUsed = allBellsUsed.has(b);
return (
<div
key={b}
className="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold transition-all"
style={{
backgroundColor: isActive
? "var(--accent)"
: isUsed
? "var(--bg-card-hover)"
: "var(--bg-primary)",
color: isActive ? "var(--bg-primary)" : isUsed ? "var(--text-secondary)" : "var(--border-primary)",
border: `2px solid ${isActive ? "var(--accent)" : isUsed ? "var(--border-primary)" : "var(--border-primary)"}`,
transform: isActive ? "scale(1.2)" : "scale(1)",
}}
{/* LEFT COLUMN: Steps, visualizer, controls, sliders */}
<div className="p-6 space-y-5 border-r" style={{ borderColor: "var(--border-primary)" }}>
{/* Steps Input */}
<div>
<div className="flex items-center justify-between mb-1">
<label className="text-sm font-medium" style={labelStyle}>
Melody Steps
</label>
{builtMelody?.binary_url && (
<button
onClick={handleLoadFromBinary}
disabled={loadingBinary}
className="text-xs px-2 py-1 rounded transition-colors disabled:opacity-50"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-secondary)", border: "1px solid var(--border-primary)" }}
>
{b}
{loadingBinary ? "Loading..." : "Load from Binary"}
</button>
)}
</div>
{binaryLoadError && (
<p className="text-xs mb-1" style={{ color: "var(--danger-text)" }}>{binaryLoadError}</p>
)}
<div className="flex gap-2">
<textarea
value={stepsInput}
onChange={(e) => setStepsInput(e.target.value)}
rows={3}
placeholder="e.g. 1,2,2+1,1,2,3+1,0,3,2..."
className="flex-1 px-3 py-2 rounded-md text-sm border"
style={{ fontFamily: "monospace", resize: "none" }}
/>
<button
onClick={handleStepsParse}
className="px-3 py-2 text-sm rounded-md self-start transition-colors"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
>
Load
</button>
</div>
{totalSteps > 0 && (
<p className="text-xs mt-1" style={{ color: "var(--success-text)" }}>
{totalSteps} steps &nbsp;·&nbsp; {allBellsUsed.size} bell{allBellsUsed.size !== 1 ? "s" : ""}
</p>
)}
</div>
{/* Bell visualizer */}
{totalSteps > 0 && (
<div>
<p className="text-xs mb-2" style={mutedStyle}>
Bell indicator
{currentStep >= 0 && <span> &nbsp;·&nbsp; Step {currentStep + 1} / {totalSteps}</span>}
</p>
<div className="flex flex-wrap gap-1.5">
{Array.from({ length: maxBell }, (_, i) => i + 1).map((b) => {
const isActive = currentBells.includes(b);
const isUsed = allBellsUsed.has(b);
return (
<div
key={b}
className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold transition-all"
style={{
backgroundColor: isActive ? "var(--accent)" : isUsed ? "var(--bg-card-hover)" : "var(--bg-primary)",
color: isActive ? "var(--bg-primary)" : isUsed ? "var(--text-secondary)" : "var(--border-primary)",
border: `2px solid ${isActive ? "var(--accent)" : "var(--border-primary)"}`,
transform: isActive ? "scale(1.2)" : "scale(1)",
}}
>
{b}
</div>
);
})}
</div>
</div>
)}
{/* Playback Controls */}
<div className="flex items-center gap-2">
{!playing ? (
<button
onClick={handlePlay}
disabled={!totalSteps}
className="px-4 py-2 text-sm rounded-md disabled:opacity-40 transition-colors font-medium"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
>
{paused ? "Resume" : "Play"}
</button>
) : (
<button
onClick={handlePause}
className="px-4 py-2 text-sm rounded-md transition-colors font-medium"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
>
Pause
</button>
)}
<button
onClick={stopPlayback}
disabled={!playing && !paused}
className="px-4 py-2 text-sm rounded-md disabled:opacity-40 transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
>
Stop
</button>
<label className="flex items-center gap-1.5 ml-1 text-sm cursor-pointer" style={labelStyle}>
<input
type="checkbox"
checked={loop}
onChange={(e) => { setLoop(e.target.checked); loopRef.current = e.target.checked; }}
className="h-4 w-4 rounded"
/>
Loop
</label>
</div>
{/* Step Delay Slider — inverted: right = fast (low ms) */}
<div>
<div className="flex items-center justify-between mb-1">
<label className="text-sm font-medium" style={labelStyle}>Step Delay (Speed)</label>
<span className="text-sm font-bold" style={{ color: "var(--accent)" }}>{stepDelay} ms</span>
</div>
<input
type="range"
min={DELAY_MIN}
max={DELAY_MAX}
step="10"
value={delayToSlider(stepDelay)}
onChange={(e) => setStepDelay(sliderToDelay(Number(e.target.value)))}
className="w-full h-2 rounded-lg appearance-none cursor-pointer"
/>
<div className="flex justify-between text-xs mt-0.5" style={mutedStyle}>
<span>Slow (3000ms)</span>
<span>Fast (50ms)</span>
</div>
</div>
{/* Beat Duration Slider */}
<div>
<div className="flex items-center justify-between mb-1">
<label className="text-sm font-medium" style={labelStyle}>Tone Length</label>
<span className="text-sm" style={mutedStyle}>
{effectiveBeat} ms
{effectiveBeat < beatDuration && <span style={{ color: "var(--warning, #f59e0b)" }}> (capped)</span>}
</span>
</div>
<input
type="range"
min="20"
max="500"
step="5"
value={beatDuration}
onChange={(e) => setBeatDuration(Number(e.target.value))}
className="w-full h-2 rounded-lg appearance-none cursor-pointer"
/>
<div className="flex justify-between text-xs mt-0.5" style={mutedStyle}>
<span>20ms (short)</span>
<span>500ms (long)</span>
</div>
</div>
</div>
{/* RIGHT COLUMN: Speed Capture */}
<div className="p-6">
<div className="rounded-lg border p-4 space-y-4 h-full" style={{ borderColor: "var(--border-primary)", backgroundColor: "var(--bg-primary)" }}>
<div>
<h3 className="text-sm font-semibold" style={{ color: "var(--text-heading)" }}>Speed Capture</h3>
<p className="text-xs mt-1" style={mutedStyle}>
Play and find the fastest speed the controller can handle (MAX). Then find a speed that feels natural (Normal). MIN is auto-derived so that 50% slider = Normal.
</p>
</div>
{/* MAX */}
<div className="rounded-md p-3 border" style={{ borderColor: "var(--border-primary)", backgroundColor: "var(--bg-card)" }}>
<span className="text-xs font-semibold uppercase tracking-wide block mb-2" style={{ color: "var(--text-muted)" }}>MAX — fastest safe</span>
<div className="flex items-center justify-between">
<span className="text-2xl font-bold" style={{ color: capturedMax !== null ? "var(--accent)" : "var(--text-muted)" }}>
{capturedMax !== null ? `${capturedMax} ms` : "—"}
</span>
<div className="flex gap-2">
<button
onClick={() => handleSetSliderToCapture(capturedMax)}
disabled={capturedMax === null}
className="px-2 py-1 text-xs rounded disabled:opacity-40 transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-muted)", border: "1px solid var(--border-primary)" }}
title="Set slider to this value"
>
Set ↑
</button>
<button
onClick={() => setCapturedMax(stepDelay)}
className="px-3 py-1.5 text-xs rounded-md transition-colors font-medium"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
>
Capture
</button>
</div>
);
})}
</div>
{currentStep >= 0 && (
<p className="text-xs mt-1" style={mutedStyle}>
Step {currentStep + 1} / {totalSteps}
</p>
)}
</div>
)}
{/* Playback Controls */}
<div className="flex items-center gap-3">
{!playing ? (
<button
onClick={handlePlay}
disabled={!totalSteps}
className="px-4 py-2 text-sm rounded-md disabled:opacity-40 transition-colors font-medium"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
>
{paused ? "Resume" : "Play"}
</button>
) : (
<button
onClick={handlePause}
className="px-4 py-2 text-sm rounded-md transition-colors font-medium"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
>
Pause
</button>
)}
<button
onClick={handleStop}
disabled={!playing && !paused}
className="px-4 py-2 text-sm rounded-md disabled:opacity-40 transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-primary)", border: "1px solid var(--border-primary)" }}
>
Stop
</button>
<label className="flex items-center gap-2 ml-2 text-sm cursor-pointer" style={labelStyle}>
<input type="checkbox" checked={loop} onChange={(e) => setLoop(e.target.checked)} className="h-4 w-4 rounded" />
Loop
</label>
</div>
{/* Step Delay Slider */}
<div>
<div className="flex items-center justify-between mb-1">
<label className="text-sm font-medium" style={labelStyle}>Step Delay (Speed)</label>
<span className="text-sm font-bold" style={{ color: "var(--accent)" }}>{stepDelay} ms</span>
</div>
<input
type="range"
min="50"
max="3000"
step="10"
value={stepDelay}
onChange={(e) => setStepDelay(Number(e.target.value))}
className="w-full h-2 rounded-lg appearance-none cursor-pointer"
/>
<div className="flex justify-between text-xs mt-0.5" style={mutedStyle}>
<span>50ms (fastest)</span>
<span>3000ms (slowest)</span>
</div>
</div>
{/* Beat Duration Slider */}
<div>
<div className="flex items-center justify-between mb-1">
<label className="text-sm font-medium" style={labelStyle}>Tone Length</label>
<span className="text-sm" style={mutedStyle}>
{effectiveBeat} ms
{effectiveBeat < beatDuration && <span style={{ color: "var(--warning, #f59e0b)" }}> (capped)</span>}
</span>
</div>
<input
type="range"
min="20"
max="500"
step="5"
value={beatDuration}
onChange={(e) => setBeatDuration(Number(e.target.value))}
className="w-full h-2 rounded-lg appearance-none cursor-pointer"
/>
<div className="flex justify-between text-xs mt-0.5" style={mutedStyle}>
<span>20ms (short)</span>
<span>500ms (long)</span>
</div>
</div>
{/* Speed Capture Panel */}
<div className="rounded-lg border p-4 space-y-3" style={{ borderColor: "var(--border-primary)", backgroundColor: "var(--bg-primary)" }}>
<h3 className="text-sm font-semibold" style={{ color: "var(--text-heading)" }}>Speed Capture</h3>
<p className="text-xs" style={mutedStyle}>
Find the fastest speed the controller can handle (MAX), then find the speed that feels "normal" (Normal).
MIN is auto-calculated so that 50% = Normal speed.
</p>
{/* MAX */}
<div className="flex items-center gap-3">
<div className="flex-1">
<span className="text-xs font-medium block mb-0.5" style={labelStyle}>MAX (fastest safe)</span>
<div className="flex items-center gap-2">
<span className="text-lg font-bold w-20" style={{ color: capturedMax ? "var(--accent)" : "var(--text-muted)" }}>
{capturedMax !== null ? `${capturedMax} ms` : "—"}
</span>
<button
onClick={() => handleSetSliderToCapture(capturedMax)}
disabled={capturedMax === null}
className="px-2 py-1 text-xs rounded disabled:opacity-40 transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-muted)", border: "1px solid var(--border-primary)" }}
title="Load this value to slider"
>
Set ↑
</button>
</div>
</div>
</div>
<button
onClick={() => setCapturedMax(stepDelay)}
className="px-3 py-2 text-xs rounded-md transition-colors font-medium"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
>
Capture
</button>
</div>
{/* Normal */}
<div className="flex items-center gap-3">
<div className="flex-1">
<span className="text-xs font-medium block mb-0.5" style={labelStyle}>Normal (50% speed feel)</span>
<div className="flex items-center gap-2">
<span className="text-lg font-bold w-20" style={{ color: capturedNormal ? "var(--accent)" : "var(--text-muted)" }}>
{capturedNormal !== null ? `${capturedNormal} ms` : "—"}
</span>
<button
onClick={() => handleSetSliderToCapture(capturedNormal)}
disabled={capturedNormal === null}
className="px-2 py-1 text-xs rounded disabled:opacity-40 transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-muted)", border: "1px solid var(--border-primary)" }}
title="Load this value to slider"
>
Set ↑
</button>
{/* Normal */}
<div className="rounded-md p-3 border" style={{ borderColor: "var(--border-primary)", backgroundColor: "var(--bg-card)" }}>
<span className="text-xs font-semibold uppercase tracking-wide block mb-2" style={{ color: "var(--text-muted)" }}>Normal — at 50% speed</span>
<div className="flex items-center justify-between">
<span className="text-2xl font-bold" style={{ color: capturedNormal !== null ? "var(--accent)" : "var(--text-muted)" }}>
{capturedNormal !== null ? `${capturedNormal} ms` : "—"}
</span>
<div className="flex gap-2">
<button
onClick={() => handleSetSliderToCapture(capturedNormal)}
disabled={capturedNormal === null}
className="px-2 py-1 text-xs rounded disabled:opacity-40 transition-colors"
style={{ backgroundColor: "var(--bg-card-hover)", color: "var(--text-muted)", border: "1px solid var(--border-primary)" }}
title="Set slider to this value"
>
Set ↑
</button>
<button
onClick={() => setCapturedNormal(stepDelay)}
className="px-3 py-1.5 text-xs rounded-md transition-colors font-medium"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
>
Capture
</button>
</div>
</div>
</div>
</div>
<button
onClick={() => setCapturedNormal(stepDelay)}
className="px-3 py-2 text-xs rounded-md transition-colors font-medium"
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
>
Capture
</button>
</div>
{/* MIN (auto-calculated) */}
<div className="pt-1 border-t" style={{ borderColor: "var(--border-primary)" }}>
<span className="text-xs font-medium block mb-0.5" style={mutedStyle}>MIN (auto-calculated)</span>
<span className="text-lg font-bold" style={{ color: derivedMin ? "var(--text-secondary)" : "var(--text-muted)" }}>
{derivedMin !== null ? `${derivedMin} ms` : "—"}
</span>
{derivedMin !== null && (
<span className="text-xs ml-2" style={mutedStyle}>(normal² / max)</span>
)}
</div>
{/* MIN (derived) */}
<div className="rounded-md p-3 border" style={{ borderColor: "var(--border-primary)", backgroundColor: "var(--bg-card)" }}>
<span className="text-xs font-semibold uppercase tracking-wide block mb-1" style={{ color: "var(--text-muted)" }}>
MIN — auto-calculated
{derivedMin !== null && <span className="font-normal ml-1">(normal² / max)</span>}
</span>
<span className="text-2xl font-bold" style={{ color: derivedMin !== null ? "var(--text-secondary)" : "var(--text-muted)" }}>
{derivedMin !== null ? `${derivedMin} ms` : "—"}
</span>
</div>
{/* Warnings */}
{maxWarning && (
<div className="text-xs rounded p-2" style={{ backgroundColor: "var(--danger-bg)", color: "var(--danger-text)" }}>
Warning: MAX speed of {capturedMax}ms is very fast (&lt;100ms). This could damage the device.
{/* Warnings */}
{maxWarning && (
<div className="text-xs rounded p-2" style={{ backgroundColor: "var(--danger-bg)", color: "var(--danger-text)" }}>
Warning: MAX of {capturedMax}ms is very fast (&lt;100ms). This could damage the device.
</div>
)}
{orderWarning && (
<div className="text-xs rounded p-2" style={{ backgroundColor: "var(--danger-bg)", color: "var(--danger-text)" }}>
Warning: Normal ({capturedNormal}ms) is faster than MAX ({capturedMax}ms). Normal should be slower (higher ms). Please re-capture.
</div>
)}
{/* Save messages */}
{saveError && (
<div className="text-xs rounded-md p-2 border" style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}>
{saveError}
</div>
)}
{saveSuccess && (
<div className="text-xs rounded-md p-2 border" style={{ backgroundColor: "var(--success-bg)", borderColor: "var(--success)", color: "var(--success-text)" }}>
Speeds saved to melody!
</div>
)}
</div>
)}
{orderWarning && (
<div className="text-xs rounded p-2" style={{ backgroundColor: "var(--danger-bg)", color: "var(--danger-text)" }}>
Warning: Normal speed ({capturedNormal}ms) is slower than MAX ({capturedMax}ms). Please check your values.
</div>
)}
</div>
</div>
{/* Save */}
{saveError && (
<div className="text-sm rounded-md p-3 border" style={{ backgroundColor: "var(--danger-bg)", borderColor: "var(--danger)", color: "var(--danger-text)" }}>
{saveError}
</div>
)}
{saveSuccess && (
<div className="text-sm rounded-md p-3 border" style={{ backgroundColor: "var(--success-bg)", borderColor: "var(--success)", color: "var(--success-text)" }}>
Speeds saved to melody!
</div>
)}
</div>
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t" style={{ borderColor: "var(--border-primary)" }}>
{/* Footer */}
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t flex-shrink-0" style={{ borderColor: "var(--border-primary)" }}>
<button
onClick={() => { stopPlayback(); onClose(); }}
className="px-4 py-2 text-sm rounded-md transition-colors"