// ───────────────────────────────────────────────────────────── // MOOD COMMUTE · TimeScrubber (global, controls both cities) // ───────────────────────────────────────────────────────────── function TimeScrubber({ hour, setHour, minute, setMinute, live, onGoLive, timelapse, onToggleTimelapse }) { const trackRef = React.useRef(null); // tick a 'seconds' clock so the readout shows live seconds in LIVE mode const [sec, setSec] = React.useState(() => new Date().getSeconds()); React.useEffect(() => { if (!live) return; const id = setInterval(() => setSec(new Date().getSeconds()), 1000); return () => clearInterval(id); }, [live]); const handleDrag = (clientX) => { const el = trackRef.current; if (!el) return; const r = el.getBoundingClientRect(); const t = Math.max(0, Math.min(1, (clientX - r.left) / r.width)); const total = t * 24 * 60; setHour(Math.floor(total / 60)); setMinute(Math.floor(total % 60)); }; const onPointerDown = (e) => { e.preventDefault(); handleDrag(e.clientX); const onMove = (ev) => handleDrag(ev.clientX); const onUp = () => { window.removeEventListener("pointermove", onMove); window.removeEventListener("pointerup", onUp); }; window.addEventListener("pointermove", onMove); window.addEventListener("pointerup", onUp); }; const tH = hour + (minute || 0) / 60; const cursorPct = (tH / 24) * 100; // sparkline: avg real train-schedule intensity across both cities const sparkline = React.useMemo(() => { const yamPeak = window.MOOD_TRAINS ? Math.max(...window.MOOD_TRAINS.SCHEDULE.yamanote) : 24; const loopPeak = window.MOOD_TRAINS ? Math.max(...window.MOOD_TRAINS.SCHEDULE.loop) : 16; const yamPct = window.MOOD_TRAINS ? window.MOOD_TRAINS.PEAK_CONGESTION.yamanote : 157; const loopPct = window.MOOD_TRAINS ? window.MOOD_TRAINS.PEAK_CONGESTION.loop : 108; const points = []; for (let h = 0; h < 24; h++) { const fy = window.MOOD_TRAINS ? window.MOOD_TRAINS.SCHEDULE.yamanote[h] : 0; const fl = window.MOOD_TRAINS ? window.MOOD_TRAINS.SCHEDULE.loop[h] : 0; const yam = yamPeak ? (fy / yamPeak) * yamPct : 0; const loop = loopPeak ? (fl / loopPeak) * loopPct : 0; points.push((yam + loop) / 2); } const max = Math.max(...points, 1); return points.map((v, i) => `${(i / 23) * 100},${100 - (v / max) * 100}`).join(" "); }, []); // human readable day label const period = hour < 5 ? "深夜 / LATE NIGHT" : hour < 9 ? "朝ラッシュ / MORNING RUSH" : hour < 12 ? "午前 / MID-MORNING" : hour < 14 ? "昼 / NOON" : hour < 17 ? "午後 / AFTERNOON" : hour < 20 ? "夕ラッシュ / EVENING RUSH" : hour < 23 ? "夜 / NIGHT" : "深夜 / LATE NIGHT"; return (
{/* play/jump controls */}
{live ? "●" : "LIVE"} setHour(Math.max(0, hour - 1))} title="−1 hour">‹‹ {timelapse ? "❚❚" : "▶"} setHour(Math.min(23, hour + 1))} title="+1 hour">››
{live ? ( ● LIVE · 実時間 ) : "SCRUB · 時間スクラブ"} {period} {new Date().toLocaleDateString("ja-JP", { year: "numeric", month: "2-digit", day: "2-digit", weekday: "short" })}
{/* sparkline (intensity) */} {/* baseline */}
{/* rush bands */}
{/* hour ticks */} {Array.from({ length: 25 }).map((_, i) => (
))} {/* hour labels */} {[0, 6, 12, 18, 24].map(h => (
{String(h).padStart(2,"0")}:00
))} {/* cursor */}
{/* huge digital readout */}
{String(hour).padStart(2, "0")}:{String(minute || 0).padStart(2, "0")} {live && ( :{String(sec).padStart(2, "0")} )}
{live ? "JST · 日本時間 · LIVE" : "JST · 日本時間"}
); } function ScrubBtn({ children, onClick, primary }) { return ( ); } Object.assign(window, { TimeScrubber });