// ───────────────────────────────────────────────────────────── // MOOD COMMUTE · CityPanel // One container per city — header, isometric map, mood bar // ───────────────────────────────────────────────────────────── function CityPanel({ city, hour, minute, subMinute = 0, filter, picked, setPicked, punched, accentColor, lineColor }) { const { density, glow } = useTweak(); const stations = city === "osaka" ? OSAKA_STATIONS : TOKYO_STATIONS; const cityJP = city === "osaka" ? "大阪" : "東京"; const cityEN = city === "osaka" ? "OSAKA" : "TOKYO"; const lineJP = city === "osaka" ? "大阪環状線" : "山手線"; const lineEN = city === "osaka" ? "OSAKA LOOP" : "YAMANOTE"; // city-wide mood now — sample each station at exact (hour, minute) so // the city mix shifts smoothly between minutes, not in once-an-hour steps. const cityMood = React.useMemo(() => { const sums = {}; EMOTIONS.forEach(e => sums[e.id] = 0); stations.forEach(s => { const p = s.moodAt(hour, minute); EMOTIONS.forEach(e => sums[e.id] += p[e.id]); }); return EMOTIONS.map(e => ({ ...e, v: sums[e.id] / stations.length })) .sort((a, b) => b.v - a.v); }, [stations, hour, minute]); // REAL intensity from train schedule + MLIT congestion ratios const realIntensity = React.useMemo(() => { if (!window.MOOD_TRAINS) return {}; const key = city === "osaka" ? "loop" : "yamanote"; // freq alone (no per-train spatial calc here — we just want per-station // hour-of-day intensity for ranking pills) const freq = window.MOOD_TRAINS.SCHEDULE[key][hour] || 0; const peak = Math.max(...window.MOOD_TRAINS.SCHEDULE[key]); const peakPct = window.MOOD_TRAINS.PEAK_CONGESTION[key]; const hourMul = peak ? freq / peak : 0; const base = Math.round(hourMul * peakPct); const out = {}; stations.forEach(s => { const hubFactor = s.hub ? 1.18 : 0.92; // Per-station character: hubs busier, smaller stations quieter out[s.id] = Math.max(0, Math.round(base * hubFactor)); }); return out; }, [city, hour, stations]); const loudest = React.useMemo(() => { let best = null, bv = -1; stations.forEach(s => { const v = realIntensity[s.id] ?? 0; if (v > bv) { bv = v; best = s; } }); return { s: best, v: bv }; }, [stations, realIntensity]); const calmest = React.useMemo(() => { let best = null, bv = 999; stations.forEach(s => { const v = realIntensity[s.id] ?? 999; if (v < bv) { bv = v; best = s; } }); return { s: best, v: bv }; }, [stations, realIntensity]); return (
{/* HEADER */}
{lineJP}
{stations.length} STATIONS · LIVE
{/* huge city kanji in the back — very subtle, doesn't compete with the map */}
{cityJP}
{/* MAP — fills remaining space */}
{/* FOOTER — mood mix */}
CITY MOOD · 全体気分 SAMPLE · {(stations.length * 480).toLocaleString()}
setPicked(loudest.s.id)} active={picked === loudest.s.id} /> setPicked(calmest.s.id)} active={picked === calmest.s.id} />
); } function CornerCrosshair({ color }) { const corners = [ { top: 6, left: 6, rot: 0 }, { top: 6, right: 6, rot: 90 }, { bottom: 6, left: 6, rot: -90 }, { bottom: 6, right: 6, rot: 180 }, ]; return ( <> {corners.map((c, i) => ( ))} ); } function MoodMixBar({ cityMood }) { const total = cityMood.reduce((a, b) => a + b.v, 0); return (
{cityMood.map(e => { const pct = (e.v / total) * 100; return (
{pct > 6 ? e.glyph : ""}
); })}
); } function StatPill({ label, jp, en, val, color, pickedHook, active }) { return ( ); } Object.assign(window, { CityPanel });