// Main React app — renders the iPhone-framed interactive itinerary const { useState, useEffect, useRef, useMemo } = React; const TRIP = window.TRIP; const INFO = window.INFO || {}; function useRouteMilesText() { const [milesText, setMilesText] = useState(TRIP.totalMiles); useEffect(() => { const onMetrics = (e) => { const next = e && e.detail && e.detail.totalMilesText; if (next) setMilesText(next); }; window.addEventListener("route-metrics-updated", onMetrics); return () => window.removeEventListener("route-metrics-updated", onMetrics); }, []); return milesText; } function useRouteDayMetrics() { const [perDay, setPerDay] = useState({}); useEffect(() => { const onMetrics = (e) => { const next = e && e.detail && e.detail.perDay; if (next && typeof next === 'object') { setPerDay(next); } }; window.addEventListener("route-metrics-updated", onMetrics); return () => window.removeEventListener("route-metrics-updated", onMetrics); }, []); return perDay; } function useRoadtripAuthState() { const [auth, setAuth] = useState(() => { if (window.RoadtripAuth && window.RoadtripAuth.getState) { return window.RoadtripAuth.getState(); } return { ready: true, user: null, error: "Auth not initialized" }; }); useEffect(() => { if (!window.RoadtripAuth || !window.RoadtripAuth.subscribe) return; return window.RoadtripAuth.subscribe(setAuth); }, []); return auth; } // ===== Scene components (pure CSS illustrations) ===== // `dayN` (when supplied) replaces the static `temp` with live weather (high/low + condition). function Scene({ kind, label, temp, dayN }) { return (
{label &&
{label}
} {dayN && window.WeatherChip ? : (temp &&
{temp}
)} {kind === 'cover' && } {kind === 'd1' && } {kind === 'd2' && } {kind === 'd3' && } {kind === 'd4' && } {kind === 'd5' && } {kind === 'd6' && } {kind === 'd7' && }
); } const CoverSceneBits = () => (<>
); const D1Bits = () => (<>
); const D2Bits = () => (<>
); const D3Bits = () => (<>
); const D4Bits = () => (<>
); const D5Bits = () => (<>
); const D6Bits = () => (<>
); const D7Bits = () => (<>
); // ===== iPhone status bar ===== function StatusBar() { const [time, setTime] = useState(() => { const d = new Date(); return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: false }); }); useEffect(() => { const t = setInterval(() => { const d = new Date(); setTime(d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: false })); }, 30000); return () => clearInterval(t); }, []); return (
{time}
); } // ===== Day navigation pills ===== function DayNav({ activeDay, onNav }) { const navRef = useRef(); useEffect(() => { if (!navRef.current) return; const navEl = navRef.current; const active = navEl.querySelector('.day-pill.active'); if (!active) return; // IMPORTANT: We deliberately set navEl.scrollLeft directly (NOT scrollIntoView). // scrollIntoView walks up ALL scroll ancestors and can issue a no-op scrollTo on // the parent .app, which cancels any in-flight smooth vertical scroll triggered // by clicking a day pill. const pillCenter = active.offsetLeft + active.offsetWidth / 2; const navCenter = navEl.clientWidth / 2; const targetLeft = pillCenter - navCenter; if (Math.abs(navEl.scrollLeft - targetLeft) > 4) { navEl.scrollLeft = targetLeft; } }, [activeDay]); return ( ); } // ===== Cover ===== function Cover() { const routeMilesText = useRouteMilesText(); return (
); } // ===== Flag chip ===== function Flag({ kind }) { if (kind === 'reservation') return ⚑ Reservation; if (kind === 'cash-only') return $ Cash only; if (kind === 'departure') return ✈ Departure; return null; } // ===== Contact links ===== function Links({ name }) { const p = window.placeFor ? window.placeFor(name) : null; const mapHref = window.mapsLinkFor(name, p && p.addr); return (
e.stopPropagation()}> {p && p.phone && ( ☏ Call )} {p && p.web && ( ↗ Website )} ◉ Maps
); } // ===== Custom-meal storage (user-added lunch/dinner options) ===== const CUSTOM_MEALS_KEY = 'roadtrip-custom-meals-v1'; function readCustomMeals() { try { return JSON.parse(localStorage.getItem(CUSTOM_MEALS_KEY) || '{}'); } catch { return {}; } } function writeCustomMeals(data) { try { localStorage.setItem(CUSTOM_MEALS_KEY, JSON.stringify(data)); } catch {} window.dispatchEvent(new CustomEvent('custom-meals-updated', { detail: data })); } function useCustomMealsForKey(key) { const [data, setData] = useState(() => readCustomMeals()); useEffect(() => { const h = (e) => setData(e.detail || readCustomMeals()); window.addEventListener('custom-meals-updated', h); return () => window.removeEventListener('custom-meals-updated', h); }, []); return data[key] || []; } function addCustomMeal(key, item) { const all = readCustomMeals(); all[key] = [...(all[key] || []), item]; writeCustomMeals(all); } function removeCustomMeal(key, idx) { const all = readCustomMeals(); if (!all[key]) return; all[key] = all[key].filter((_, i) => i !== idx); writeCustomMeals(all); } // ===== "+ Add another option" UI inside a meal card ===== function CustomMealAdder({ dayN, kind, canEdit }) { const key = `${dayN}-${kind}`; const customs = useCustomMealsForKey(key); const [open, setOpen] = useState(false); const [name, setName] = useState(''); const [desc, setDesc] = useState(''); const [reservation, setReservation] = useState(false); const [usePlaces, setUsePlaces] = useState(false); const inputRef = useRef(); const placesRef = useRef(); // If Google Maps + Places library is loaded, attach an Autocomplete to the name field useEffect(() => { if (!open) return; if (!window.google || !window.google.maps || !window.google.maps.places) { setUsePlaces(false); return; } if (placesRef.current) return; // already attached try { const ac = new window.google.maps.places.Autocomplete(inputRef.current, { types: ['restaurant', 'cafe', 'food', 'bakery'], fields: ['name', 'formatted_address', 'rating', 'website', 'formatted_phone_number'], }); ac.addListener('place_changed', () => { const p = ac.getPlace(); if (p && p.name) { setName(p.name); if (!desc && p.formatted_address) setDesc(p.formatted_address); // Update PLACES so the "Maps" / "Call" / "Web" links work for this entry if (window.PLACES && p.name) { window.PLACES[p.name] = { phone: p.formatted_phone_number || undefined, web: p.website || undefined, addr: p.formatted_address || undefined, }; } } }); placesRef.current = ac; setUsePlaces(true); } catch (e) { setUsePlaces(false); } }, [open]); const submit = (e) => { e.preventDefault(); if (!name.trim()) return; addCustomMeal(key, { name: name.trim(), desc: desc.trim() || 'Added by you.', flag: reservation ? 'reservation' : null, custom: true, }); setName(''); setDesc(''); setReservation(false); setOpen(false); }; return (
{customs.length > 0 && (
{customs.map((o, i) => (
+
{o.name} {canEdit && ( )}
{o.desc}
added {o.flag && }
))}
)} {canEdit && !open ? ( ) : canEdit ? (
setName(e.target.value)} placeholder={usePlaces ? "Start typing — search powered by Google" : "e.g. Cliffside Café"} autoFocus />