Something went wrong. Try again.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116// Timeline playback — rAF-driven frame advance plus scrubber wiring.
const FRAMES_PER_SEC = 12;
function startPlayback() { isPlaying = true; $("play").textContent = "❚❚"; lastTickTs = null; if (rafHandle) cancelAnimationFrame(rafHandle); rafHandle = requestAnimationFrame(tick);}
function stopPlayback() { isPlaying = false; $("play").textContent = "▶"; if (rafHandle) { cancelAnimationFrame(rafHandle); rafHandle = null; } lastTickTs = null;}
function tick(now) { if (!isPlaying || !filmstrip) return; if (lastTickTs === null) lastTickTs = now; const dt = (now - lastTickTs) / 1000; lastTickTs = now;
currentFrame += FRAMES_PER_SEC * playSpeed * dt; const n = filmstrip.snapshots.length; if (currentFrame >= n - 1) { currentFrame = n - 1; draw(); updateScrubInfo(); $("scrub").value = Math.floor(currentFrame); stopPlayback(); return; } $("scrub").value = Math.floor(currentFrame); draw(); updateScrubInfo(); rafHandle = requestAnimationFrame(tick);}
function updateScrubInfo() { if (!filmstrip || !filmstrip.snapshots.length) { $("scrub-frame").textContent = "-"; $("scrub-time").textContent = "-"; return; } const fi = Math.max(0, Math.min(filmstrip.snapshots.length - 1, Math.floor(currentFrame))); const snap = filmstrip.snapshots[fi]; const n = filmstrip.snapshots.length; $("scrub-frame").textContent = `frame ${fi + 1} / ${n}`; const date = new Date(snap.ts * 1000); $("scrub-time").textContent = date.toLocaleString("en-US", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }); $("stat-tiles").textContent = totalTilesAtFrame(currentFrame);}
function totalTilesAtFrame(idx) { const fi = Math.max(0, Math.min((filmstrip?.snapshots.length ?? 0) - 1, Math.floor(idx))); if (!filmstrip || !filmstrip.snapshots[fi]) return 0; return filmstrip.snapshots[fi].frames.reduce((s, f) => s + f.tiles.length, 0);}
// ---- playback section listeners ----$("play").addEventListener("click", () => { if (!filmstrip) return; if (isPlaying) stopPlayback(); else { if (currentFrame >= filmstrip.snapshots.length - 1) currentFrame = 0; startPlayback(); }});
$("scrub").addEventListener("input", () => { if (isPlaying) stopPlayback(); currentFrame = parseInt($("scrub").value, 10); draw(); updateScrubInfo();});
$("speed-sel").addEventListener("change", () => { playSpeed = parseFloat($("speed-sel").value);});
$("snap-count").addEventListener("input", () => { $("snap-val").textContent = $("snap-count").value;});
// window-sel just stages the value — the user has to press Run to apply it.// While the staged value differs from what's actually simulated, lock out// play/scrub with an explanatory tooltip so it's obvious why nothing// happens until Run is clicked. setState() re-enables them on the next sim.$("window-sel").addEventListener("change", () => { if (appState !== "ready") return; if (isPlaying) stopPlayback(); const msg = "Time window changed — click Run simulation to apply."; const play = $("play"); const scrub = $("scrub"); play.disabled = true; play.title = msg; scrub.disabled = true; scrub.title = msg;});
// Spacebar = play/pause when a filmstrip exists. Ignored if focus is in a// form field so it doesn't fight with text inputs / sliders.window.addEventListener("keydown", (e) => { if (e.code !== "Space") return; const t = e.target; if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.tagName === "SELECT" || t.isContentEditable)) return; if (!filmstrip || appState !== "ready") return; e.preventDefault(); $("play").click();});