Browser GUI: add step and total countdown to header

Shows remaining time for the current step and the entire sud in large
accent-coloured monospace text to the right of the transport buttons,
matching the per-step plate colour. Hidden until a step is active.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SH2D4LRuCnhLSzoYerAfJX
This commit is contained in:
2026-06-28 09:34:21 +02:00
co-authored by Claude Sonnet 4.6
parent 93fcf373ab
commit a500bc559e
3 changed files with 58 additions and 0 deletions
+25
View File
@@ -270,6 +270,31 @@ function updateStepPlates() {
plate.energy.textContent = (i in energyByStep) ? `Energy ${energyByStep[i].toFixed(0)} Wh` : 'Energy —';
}
});
updateHeaderCountdown();
}
function updateHeaderCountdown() {
const currentElapsed = (elapsed !== null) ? elapsed : 0;
const n = sudSchedule.length;
let stepText = '--:--';
let totalText = '--:--';
let visible = false;
if (n > 0 && sudStepIndex !== null) {
visible = true;
let endT = forecastStepStarts[sudStepIndex + 1];
if (endT === undefined && sudStepIndex === n - 1 && forecastFinished) {
endT = forecastFinalT;
}
if (endT !== undefined) {
stepText = formatDuration(Math.max(0, endT - currentElapsed));
}
if (forecastFinalT !== null && elapsed !== null) {
totalText = formatDuration(Math.max(0, forecastFinalT - currentElapsed));
}
}
document.getElementById('hdr-step-remaining').textContent = stepText;
document.getElementById('hdr-total-remaining').textContent = totalText;
document.getElementById('header-countdown').classList.toggle('hidden', !visible);
}
// --- Stirrer visualization ---