VARASYS/metronome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move live status into the display under the BPM (drop bottom status line)

Browse source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Me Here 2026-05-24 18:01:55 -05:00
parent 3f04383e2b
commit 7010ba7cb8
1 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
index.html
View file

@ -55,7 +55,8 @@
.card h2 { font-size:11px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted); margin:0 0 14px; }
.display { background:#0a0d11; border:1px solid #000; border-radius:8px; padding:8px 14px; text-align:center; box-shadow:inset 0 2px 10px rgba(0,0,0,.7); }
.display .big { font-family:"Courier New",monospace; font-weight:700; font-size:40px; color:#ffd166; letter-spacing:3px; text-shadow:0 0 12px rgba(255,209,102,.5); }
.display .ctx { font-family:"Courier New",monospace; font-size:12px; color:#4dd0e1; height:15px; }
.display .ctx { font-family:"Courier New",monospace; font-size:12px; color:#4dd0e1; min-height:15px; line-height:1.3; }
.display .ctx.muted-cue { color:#ffb454; }
.knob { margin-bottom:10px; }
.knob label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:5px; }
.knob label b { color:#fff; font-variant-numeric:tabular-nums; }
@ -223,10 +224,8 @@
<div id="meters"></div>
<div style="margin-top:10px"><button class="add" id="addMeterBtn">+ Add meter</button></div>
<!-- (presets moved into the Transport card; set lists live in the slide-out tray) -->
<div style="height:14px"></div>
<div class="sub" id="statusLine">Stopped.</div>
<!-- (presets moved into the Transport card; set lists live in the slide-out tray;
status now shows under the BPM in the display) -->
</div>
<!-- Set-list panel: docked beside the metronome; drawer on narrow screens -->
@ -940,21 +939,24 @@ function drawLoop() {
requestAnimationFrame(drawLoop);
}
function updateCtx() {
ctxDisplay.textContent = meters.length ? `${meters.length} meter${meters.length > 1 ? "s" : ""}` : "no meters";
}
// Status shows in the display, under the BPM. Stopped → meter count; running →
// bar + trainer/ramp flags (kept short for the narrow display column).
function updateStatus() {
if (!state.running) { statusLine.textContent = meters.length ? "Stopped." : "Add a meter to begin."; return; }
if (!state.running) {
ctxDisplay.textContent = meters.length ? (meters.length + " meter" + (meters.length > 1 ? "s" : "") + " · ready") : "no meters";
ctxDisplay.classList.remove("muted-cue");
return;
}
const mbpb = masterBeatsPerBar();
const barIndex = Math.floor(Math.max(0, masterBeat - 1) / mbpb);
let s = `Running · bar ${barIndex + 1} · ${meters.map((m) => m.groups.join("+")).join(" vs ")}`;
if (trainer.on) {
const muted = isMutedAt(audioCtx.currentTime);
s += muted ? " — TRAINER: muted (count!)" : " — TRAINER: playing";
}
if (ramp.on) s += ` — ramp ${ramp.amount >= 0 ? "+" : ""}${ramp.amount}/${ramp.everyBars} bars`;
statusLine.textContent = s;
const muted = trainer.on && isMutedAt(audioCtx.currentTime);
let s = "▶ bar " + (barIndex + 1);
if (trainer.on) s += muted ? " · mute — count!" : " · play";
if (ramp.on) s += " · ramp";
ctxDisplay.textContent = s;
ctxDisplay.classList.toggle("muted-cue", muted);
}
function updateCtx() { updateStatus(); }
/* =========================================================================
UI WIRING