// ───────────────────────────────────────────────────────────── // MOOD COMMUTE · main app // Single full-bleed viz: header + (Tokyo | Osaka | Rail) + scrubber // ───────────────────────────────────────────────────────────── const TWEAK_DEFAULTS = { nav: "diegetic", type: "mixed", density: "maximal", scanlines: true, vhsTint: true, glow: true, playSpeed: 1, }; function App() { const t = TWEAK_DEFAULTS; // tick when async data files finish loading so dependent renders refresh const [, setDataRev] = React.useState(0); React.useEffect(() => { const onLoad = () => setDataRev(x => x + 1); window.addEventListener("mood-data-loaded", onLoad); return () => window.removeEventListener("mood-data-loaded", onLoad); }, []); const ctxValue = React.useMemo(() => ({ nav: t.nav, type: t.type, density: t.density, scanlines: t.scanlines, vhsTint: t.vhsTint, glow: t.glow, }), [t.nav, t.type, t.density, t.scanlines, t.vhsTint, t.glow]); // Resolve current Japan Standard Time from the user's wall clock. // Browsers can't always pin to JST directly, but the offset is fixed +09:00. function jstNow() { const d = new Date(); const utcMs = d.getTime() + d.getTimezoneOffset() * 60000; const jst = new Date(utcMs + 9 * 3600 * 1000); return { h: jst.getHours(), m: jst.getMinutes(), s: jst.getSeconds() }; } // Time state. `live` = true means follow real JST on a 1-second tick. // Any scrub interaction sets live=false; the LIVE button re-engages it. const initial = jstNow(); const [hour, setHour] = React.useState(initial.h); const [minute, setMinute] = React.useState(initial.m); // Sub-minute fraction (0..1) — used to interpolate train positions so // trains glide smoothly along the track rather than jumping each minute. // Mood/halos/labels still tick on the integer minute to avoid jitter. const [subMinute, setSubMinute] = React.useState(0); const [live, setLive] = React.useState(true); const [timelapse, setTimelapse] = React.useState(false); // alt mode for exploration // Wrapped setters that drop out of live mode when a user manually scrubs. const userSetHour = React.useCallback((v) => { setLive(false); setTimelapse(false); setHour(v); }, []); const userSetMinute = React.useCallback((v) => { setLive(false); setTimelapse(false); setMinute(v); }, []); // emotion filter (empty = show all) const [filter, setFilter] = React.useState(new Set()); // picked station — track which city is active const [picked, setPicked] = React.useState("shinjuku"); const [pickedCity, setPickedCity] = React.useState("tokyo"); const pickInCity = (city) => (id) => { setPicked(id); setPickedCity(city); }; // Punched rebel-nudge — one commitment per local day. Record: // { stationId, city, emotion, jp, en, at } // The matching station gets its emotion overridden in the map. const todayKey = React.useMemo(() => { const d = new Date(); return `mood-commute.nudge.${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`; }, []); const [punched, setPunchedState] = React.useState(() => { try { const raw = localStorage.getItem(todayKey); return raw ? JSON.parse(raw) : null; } catch (e) { return null; } }); const setPunched = React.useCallback((record) => { setPunchedState(record); try { if (record === null) localStorage.removeItem(todayKey); else localStorage.setItem(todayKey, JSON.stringify(record)); } catch (e) {} }, [todayKey]); // LIVE tick: sync to real JST every second. Train sub-minute animates // smoothly across the second between minute ticks. React.useEffect(() => { if (!live) return; const tick = () => { const d = new Date(); const utcMs = d.getTime() + d.getTimezoneOffset() * 60000; const jst = new Date(utcMs + 9 * 3600 * 1000); setHour(jst.getHours()); setMinute(jst.getMinutes()); setSubMinute((jst.getSeconds() * 1000 + jst.getMilliseconds()) / 60000); }; tick(); const id = setInterval(tick, 250); // 4 Hz — smooth train glide return () => clearInterval(id); }, [live]); // Time-lapse tick — slow, smooth scrub forward. Sub-minute fraction // climbs continuously so trains glide; integer minute advances once // per `playSpeed` of those animation ticks. React.useEffect(() => { if (!timelapse) return; const id = setInterval(() => { setSubMinute(prev => { const next = prev + 0.1; // 0.1 min per 250ms = 6 sec wall = 1 min sim if (next >= 1) { setMinute(m => { let nm = m + 1; if (nm >= 60) { setHour(h => (h + 1) % 24); nm = 0; } return nm; }); return next - 1; } return next; }); }, 250); return () => clearInterval(id); }, [timelapse]); // CRT classes React.useEffect(() => { document.documentElement.classList.toggle("no-scan", !t.scanlines); document.documentElement.classList.toggle("vhs-tint", !!t.vhsTint); }, [t.scanlines, t.vhsTint]); const goLive = () => { setLive(true); setTimelapse(false); }; const toggleTimelapse = () => { if (timelapse) { setTimelapse(false); } else { setLive(false); setTimelapse(true); } }; return (
{/* GLOBAL TOP BAR */} {/* MAIN — three side-by-side containers */}
{/* FOOTER SCRUBBER */}
); } function TopBar() { return (
MOOD COMMUTE
気分通勤
URBAN EMOTION FEED · 都市感情中継
GEO · OSM/ODbL · MOOD · WRIME 46k REAL TWEETS
REC
FEED 0x4A21
); } function Marquee() { const items = [ "▲ SHINJUKU 緊張 +24%", "▼ TENNOJI 喜び -8%", "● HARAJUKU 喜び 92%", "▲ TOKYO 疲労 +12%", "● OSAKA 怒り SPIKE", "▼ AKIHABARA 畏怖 -4%", "▲ TSURUHASHI 喜び SPIKE", "● UENO 平静 89%", ]; return (
{[...items, ...items].map((it, i) => ( {it} ))}
); } function SignalBars() { return (
{[6, 10, 14, 18].map((h, i) => (
))}
); } ReactDOM.createRoot(document.getElementById("root")).render();