// screens-day.jsx — Park Day: the start card, the recording banner, and the
// end-of-day screen where detections get confirmed or thrown away.
//
// The copy in here is load-bearing. This records while the app is on screen
// and not otherwise, and every string a user reads has to say so plainly
// rather than let them believe their phone is quietly following them around
// Frontierland in their pocket. "Paused" is the honest word and it appears
// wherever the recording could be about to stop.
(function () {
const { COLORS, Card, Caption, Display, Body, Icon, PerforatedDivider, Stamp } = window.PH365_UI;
const DAY = () => window.PH365_DAY;
// Dismissed detections. Detection is recomputed from the breadcrumbs every
// time the screen opens — nothing about a rejected guess is written to the
// database — so "no, I didn't ride that" has to be remembered here or the
// same wrong guess comes back every time they look.
const DISMISS_KEY = 'ph365_day_dismissed';
const loadDismissed = () => {
try { return new Set(JSON.parse(localStorage.getItem(DISMISS_KEY) || '[]')); }
catch { return new Set(); }
};
const saveDismissed = (set) => {
try { localStorage.setItem(DISMISS_KEY, JSON.stringify([...set].slice(-500))); } catch {}
};
const dismissKey = (dayId, p) => `${dayId}:${p.attractionId}:${p.start}`;
// ── Formatting ─────────────────────────────────────────────────────────────
const fmtTime = (iso) => new Date(iso).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
const fmtDate = (iso) => new Date(iso).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
function fmtDuration(ms) {
const mins = Math.max(0, Math.round(ms / 60_000));
if (mins < 60) return `${mins}m`;
return `${Math.floor(mins / 60)}h ${String(mins % 60).padStart(2, '0')}m`;
}
function fmtDistance(m) {
if (m == null) return '—';
if (m < 1000) return `${Math.round(m)}m`;
return `${(m / 1609.34).toFixed(1)} mi`;
}
// ── useDay — subscribe to the tracker ──────────────────────────────────────
function useDay() {
const [snap, setSnap] = React.useState(() => DAY()?.snapshot?.() || { active: false });
React.useEffect(() => DAY()?.subscribe?.(setSnap), []);
return snap;
}
// ── Home card ──────────────────────────────────────────────────────────────
function ParkDayHomeCard() {
const snap = useDay();
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState(null);
const USER = window.PH365.USER || {};
const open = () => window.dispatchEvent(new CustomEvent('ph365-open-park-day'));
const start = async () => {
setBusy(true); setErr(null);
try { await DAY().startDay(); }
catch (e) { setErr(e.message); }
finally { setBusy(false); }
};
if (snap.active) {
return (
Park day in progress
Started {fmtTime(snap.startedAt)} · {fmtDuration(Date.now() - new Date(snap.startedAt).getTime())}
);
}
return (
Start my day
Traces your path through the park and works out which rides you went on,
so you get a map of the day at the end of it.
Recording runs while this app is open. Lock the phone or switch apps and it
pauses until you come back — iPhone gives web apps no location in the
background, and this one doesn't pretend otherwise.
{USER.isGuest ? (
Sign in to record a park day.
) : (
)}
{err &&
{err}
}
);
}
function RecordingDot() {
return (
<>
);
}
// ── Recording banner ───────────────────────────────────────────────────────
// Rendered at the App level so it survives tab changes, which is also the
// point of the tracker living on a module: switching to the Map tab should
// not end someone's day.
function ParkDayBanner() {
const snap = useDay();
const [, tick] = React.useReducer(x => x + 1, 0);
const [ending, setEnding] = React.useState(false);
React.useEffect(() => {
if (!snap.active) return;
const id = setInterval(tick, 20_000);
return () => clearInterval(id);
}, [snap.active]);
if (!snap.active) return null;
const elapsed = fmtDuration(Date.now() - new Date(snap.startedAt).getTime());
const paused = document.hidden;
const end = async (e) => {
e.stopPropagation();
setEnding(true);
try {
const closed = await DAY().endDay({ endReason: 'ended' });
window.dispatchEvent(new CustomEvent('ph365-open-park-day', { detail: { dayId: closed?.id } }));
} catch (err) {
console.warn('[park-day] end failed', err);
} finally {
setEnding(false);
}
};
return (
window.dispatchEvent(new CustomEvent('ph365-open-park-day'))}
style={{
// A flex item in the app's column, not an overlay. Overlaying it
// would sit on top of every screen's own header; taking the space
// costs 44px and never covers anything up.
flexShrink: 0, margin: '6px 10px 0',
display: 'flex', alignItems: 'center', gap: 10,
padding: '8px 12px', borderRadius: 12,
background: COLORS.paperDeep,
border: `1px solid ${COLORS.paperEdge}`,
boxShadow: '0 6px 18px rgba(26,37,102,0.10)',
cursor: 'pointer',
}}
>
{paused ? 'Park day paused' : 'Recording your day'} · {elapsed}
{snap.lastError
? snap.lastError
: `${snap.sampleCount + snap.pendingCount} points · pauses when you leave the app`}
);
}
// ── The map ────────────────────────────────────────────────────────────────
// Same MapLibre + lazy-CDN-load pattern as screen-map.jsx. The path is drawn
// as one feature per segment rather than a single line: a straight run from
// the last fix before a gap to the first one after it is not a walk that
// happened, and drawing it as one would be inventing the most interesting
// part of the day.
function DayMap({ segments, rides = [], height = 240 }) {
const containerRef = React.useRef(null);
const mapRef = React.useRef(null);
const [ready, setReady] = React.useState(!!window.maplibregl);
React.useEffect(() => {
if (window.maplibregl) { setReady(true); return; }
if (!document.querySelector('link[data-maplibre]')) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css';
link.dataset.maplibre = 'true';
document.head.appendChild(link);
}
if (!document.querySelector('script[data-maplibre]')) {
const s = document.createElement('script');
s.src = 'https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js';
s.dataset.maplibre = 'true';
s.onload = () => setReady(true);
s.onerror = () => console.error('[park-day] MapLibre CDN load failed');
document.head.appendChild(s);
} else {
const wait = setInterval(() => {
if (window.maplibregl) { clearInterval(wait); setReady(true); }
}, 100);
return () => clearInterval(wait);
}
}, []);
const points = React.useMemo(() => segments.flat(), [segments]);
React.useEffect(() => {
if (!ready || !containerRef.current || mapRef.current || !points.length) return;
const ml = window.maplibregl;
const cfg = window.__PH365_CONFIG__ || {};
const style = cfg.stadiaApiKey
? `https://tiles.stadiamaps.com/styles/alidade_bright.json?api_key=${encodeURIComponent(cfg.stadiaApiKey)}`
: 'https://tiles.openfreemap.org/styles/bright';
const map = new ml.Map({
container: containerRef.current,
style,
center: [points[0].lon, points[0].lat],
zoom: 15.5,
attributionControl: { compact: true },
interactive: true,
});
mapRef.current = map;
map.on('load', () => {
map.addSource('day-path', {
type: 'geojson',
data: {
type: 'FeatureCollection',
features: segments.map(seg => ({
type: 'Feature',
properties: {},
geometry: { type: 'LineString', coordinates: seg.map(s => [s.lon, s.lat]) },
})),
},
});
map.addLayer({
id: 'day-path-glow', type: 'line', source: 'day-path',
layout: { 'line-cap': 'round', 'line-join': 'round' },
paint: { 'line-color': COLORS.teal, 'line-width': 9, 'line-opacity': 0.18 },
});
map.addLayer({
id: 'day-path-line', type: 'line', source: 'day-path',
layout: { 'line-cap': 'round', 'line-join': 'round' },
paint: { 'line-color': COLORS.teal, 'line-width': 3 },
});
const bounds = points.reduce(
(b, p) => b.extend([p.lon, p.lat]),
new ml.LngLatBounds([points[0].lon, points[0].lat], [points[0].lon, points[0].lat])
);
map.fitBounds(bounds, { padding: 36, maxZoom: 17, duration: 0 });
const dot = (color) => {
const el = document.createElement('div');
el.style.cssText = `width:12px;height:12px;border-radius:50%;background:${color};`
+ 'border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,0.3);';
return el;
};
new ml.Marker({ element: dot(COLORS.mustard) })
.setLngLat([points[0].lon, points[0].lat]).addTo(map);
new ml.Marker({ element: dot(COLORS.moss) })
.setLngLat([points[points.length - 1].lon, points[points.length - 1].lat]).addTo(map);
});
return () => { map.remove(); mapRef.current = null; };
}, [ready, points, segments]);
if (!points.length) {
return (
No path to draw — every fix was too rough to plot, or the app wasn't open long enough.
);
}
const segments = DAY().pathSegments(day.samples);
const open = !day.ended_at;
const elapsed = (day.ended_at ? new Date(day.ended_at) : new Date()) - new Date(day.started_at);
const live = proposals.filter(p => !dismissed.has(dismissKey(dayId, p)));
// Confirmed rides and still-unconfirmed guesses, interleaved into one
// timeline — which is the thing the user actually wants to look at.
const timeline = [
...day.visits.map(v => ({
key: `v-${v.id}`, at: v.visited_at, confirmed: true,
name: attractionsById.get(v.attraction_id)?.name || v.attraction_id,
source: v.source,
})),
...live.map(p => ({ key: `p-${p.start}-${p.attractionId}`, at: p.ridenAt, confirmed: false, proposal: p })),
].sort((a, b) => new Date(a.at) - new Date(b.at));
return (
{day.gap_count > 0
? `${day.gap_count} gap${day.gap_count === 1 ? '' : 's'} where the app was closed — distance walked doesn't count those, so it's an undercount.`
: 'Distance covers the stretches the app was open for.'}
{day.median_accuracy_m != null && ` Typical fix ±${day.median_accuracy_m}m.`}
{live.length > 0 && (
<>
Guesses from where you stopped and when the app went away. Nothing goes
into your history until you keep it.
{open
? 'Keep the app open as you go and rides will start showing up here.'
: 'No rides confirmed, and nothing detected from the path.'}
)}
{timeline.map(t => (
{day.sample_count} location points, visible only to you. Deleting them removes
the path and this map. Rides you kept stay in your ride history.
{confirmDelete ? (
{proposal.name}
{/* ridenAt, not the window start: this is the time the ride will be
logged at if they keep it, and it is also what the timeline below
shows. Two different times for the same ride on one screen reads
as a bug even when both are defensible. */}
{fmtTime(proposal.ridenAt)} · {proposal.minutes}m here · {proposal.basis}
{!proposal.anchored && (
Matched to the ride's map pin, not a surveyed entrance — nearby rides can look alike.
Your park days are stored against your account and no one else can read them —
not other passholders, not an admin. Recording only ever happens while this app
is open on your screen; nothing is collected in the background, because on
iPhone a web app simply can't.
{confirmWipe ? (
) : (
)}
Deletes every path and every location point, for every day. Rides you confirmed
stay in your ride history and your achievements are untouched.
{error &&
{error}
}
);
}
// ── Shared bits ────────────────────────────────────────────────────────────
function ScreenShell({ title, subtitle, onBack, children }) {
return (
{title}
{subtitle &&
{subtitle}
}
{children}
);
}
function StatCell({ label, value, small = false }) {
return (