{/* Wait stamp + status — prominent, just under the title so the
number that drove the user here is the second thing they see. */}
{a.type !== 'Show' && (
{a.isOpen === false ? (
<>
● Closed
) : a.lastUpdated ? (
<>
● Live
) : (
<>
No live data
)}
);
}
function LiveTab({ attraction, onPin, pinned }) {
const [busy, setBusy] = React.useState(false);
// Locally tracked ride count — initialised from the supabase-backed count
// so the button label stays accurate across remounts and additional taps.
const [rideCount, setRideCount] = React.useState(attraction.rides ?? 0);
const [myStars, setMyStars] = React.useState(0);
// Crowd-sourced wait override: if a passholder reported their position
// in the last 10 min, use that. Falls back to attraction.wait (queue-times).
const [effectiveWait, setEffectiveWait] = React.useState(null);
// Keep local count in sync if the upstream attraction object refreshes
// (e.g. live-data reload after sign-in or background sync).
React.useEffect(() => {
setRideCount(attraction.rides ?? 0);
}, [attraction.id, attraction.rides]);
React.useEffect(() => {
let cancelled = false;
const fetchEff = async () => {
try {
const w = await window.PH365_ACTIONS?.getEffectiveWait?.(attraction.id);
if (!cancelled) setEffectiveWait(w ?? null);
} catch {}
};
fetchEff();
const id = setInterval(fetchEff, 30_000);
return () => { cancelled = true; clearInterval(id); };
}, [attraction.id]);
const actions = window.PH365_ACTIONS || {};
async function dropPin() {
if (busy) return;
setBusy(true);
try {
if (actions.dropQueuePin) {
await actions.dropQueuePin({ attractionId: attraction.id, postedWait: attraction.wait });
}
onPin();
} catch (e) {
console.warn(e);
onPin(); // optimistic — still flip UI
} finally { setBusy(false); }
}
async function logRide() {
if (busy) return;
setBusy(true);
const wasFirst = rideCount === 0;
try {
if (actions.checkIn) {
await actions.checkIn({ attractionId: attraction.id, waitMinutes: attraction.wait });
}
const next = rideCount + 1;
setRideCount(next);
// Mutate the attraction object in place so the "Your visits" stat and
// checklist row update without waiting for a full live-data reload.
attraction.rides = next;
// Pop the rating modal only on the first completion — subsequent rides
// shouldn't nag the user for a re-rating.
if (wasFirst) {
actions.openRatingModal?.({
kind: 'attraction',
attractionId: attraction.id,
name: attraction.name,
defaultStars: attraction.userStars ?? 7,
});
}
} catch (e) {
alert(e.message || 'Could not log this ride. Are you signed in?');
} finally { setBusy(false); }
}
function rate(stars) {
// Redirect to the rating modal (0-10 with optional review). Pre-seed the
// slider with the tapped stub × 2 so a 5-star tap reads as a strong 10.
actions.openRatingModal?.({
kind: 'attraction',
attractionId: attraction.id,
name: attraction.name,
defaultStars: Math.min(10, stars * 2),
});
}
const isShow = attraction.type === 'Show';
return (
);
}
// ─────────────────────────────────────────────────────────────
// CALIBRATION CARD — admin manual pin-drop flow
// ─────────────────────────────────────────────────────────────
// Admin-only. Tap "Calibrate queue path" → starts a draft set + jumps to
// the Map tab where the admin drops one pin per minute as they advance
// through the line. The legacy GPS-based tracker is kept in user-actions
// for backward compat but no longer surfaced in the UI.
function CalibrationCard({ attraction }) {
const user = window.PH365.USER || {};
const isAdmin = !!user.isAdmin;
const actions = window.PH365_ACTIONS || {};
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState(null);
const [calib, setCalib] = React.useState(() =>
actions.calibrationSnapshot?.() ?? { active: false });
React.useEffect(() => {
if (!actions.subscribeCalibration) return;
return actions.subscribeCalibration(setCalib);
}, []);
if (!isAdmin) return null;
const calibratingThis = calib.active && calib.attractionId === attraction.id;
const calibratingOther = calib.active && calib.attractionId !== attraction.id;
async function startNew() {
setBusy(true); setErr(null);
try {
await actions.startCalibrationSet(attraction.id);
// Tell App to switch to the Map tab so the admin can immediately
// start dropping pins on the right map.
window.dispatchEvent(new CustomEvent('ph365-go-to-map'));
} catch (e) {
setErr(e.message || 'Could not start calibration');
} finally { setBusy(false); }
}
async function cancelExisting() {
setBusy(true); setErr(null);
try { await actions.cancelCalibrationSet(); }
catch (e) { setErr(e.message); }
finally { setBusy(false); }
}
return (
ADMIN · QUEUE CALIBRATION
{calibratingThis ? (
<>
Calibration in progress · {calib.pinCount} pin{calib.pinCount === 1 ? '' : 's'} dropped.
Switch to the Map tab to keep dropping pins, finish, or cancel.
) : calibratingOther ? (
<>
Calibration is active for another ride.
Finish or cancel that one before starting a new calibration here.
) : (
<>
Walk into the line, then tap below. The map will open zoomed to this ride —
tap the map at your spot in line, ideally once per minute, and the system
builds a time-calibrated path. Last pin = boarding point.
)}
{err && {err}}
);
}
function formatElapsed(sec) {
const h = Math.floor(sec / 3600);
const m = Math.floor((sec % 3600) / 60);
const s = sec % 60;
if (h > 0) return `${h}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
return `${m}:${String(s).padStart(2, '0')}`;
}
function formatMeters(m) {
if (m == null) return '—';
if (m < 1000) return `${Math.round(m)} m`;
return `${(m / 1000).toFixed(2)} km`;
}
function CalibStat({ label, value, color }) {
return (
{label}
{value}
);
}
// "Usual wait at this hour" — fetches a 14-day rolling window of wait_times
// for this attraction once per mount, buckets by hour-of-day (local), and
// returns the median for the *current* hour. Bucketing by hour-of-day (vs
// hour-of-week) keeps the data dense — even a 14-day window only gives
// ~14 samples per (day-of-week, hour) pair, which is too sparse for a
// stable median. Hour-of-day rolls weekday and weekend together, which
// is fine for "is the line short for this time of day?" framing.
function useUsualWait(attractionId, days = 14) {
const [usual, setUsual] = React.useState(null); // { now, range: [lo, hi] } | null
React.useEffect(() => {
let cancelled = false;
(async () => {
const sb = window.PH365_SUPABASE;
if (!sb) { setUsual(null); return; }
try {
const since = new Date(Date.now() - days * 24 * 3600 * 1000).toISOString();
const { data, error } = await sb
.from('wait_times')
.select('wait_minutes, recorded_at')
.eq('attraction_id', attractionId)
.gte('recorded_at', since)
.not('wait_minutes', 'is', null);
if (error) throw error;
if (cancelled) return;
// Bucket by hour-of-day; track per-bucket arrays so we can take median
const buckets = new Array(24).fill(null).map(() => []);
for (const r of data) {
const h = new Date(r.recorded_at).getHours();
buckets[h].push(r.wait_minutes);
}
const nowHour = new Date().getHours();
const samples = buckets[nowHour];
// Need at least 5 samples in the bucket to surface a meaningful "usual"
if (!samples || samples.length < 5) { setUsual(null); return; }
samples.sort((a, b) => a - b);
const median = samples[Math.floor(samples.length / 2)];
// Compute IQR for a "typical range" caption — gives users intuition
// for how variable this hour is
const q1 = samples[Math.floor(samples.length * 0.25)];
const q3 = samples[Math.floor(samples.length * 0.75)];
setUsual({ median: Math.round(median), range: [Math.round(q1), Math.round(q3)], n: samples.length });
} catch (e) {
console.warn('useUsualWait failed:', e);
if (!cancelled) setUsual(null);
}
})();
return () => { cancelled = true; };
}, [attractionId, days]);
return usual;
}
function useWaitHistory(attractionId, hours = 24) {
const [points, setPoints] = React.useState(null);
React.useEffect(() => {
let cancelled = false;
async function load() {
const sb = window.PH365_SUPABASE;
if (!sb) { setPoints([]); return; }
try {
const since = new Date(Date.now() - hours * 3600 * 1000).toISOString();
const { data, error } = await sb
.from('wait_times')
.select('wait_minutes, recorded_at')
.eq('attraction_id', attractionId)
.gte('recorded_at', since)
.order('recorded_at', { ascending: true });
if (error) throw error;
if (cancelled) return;
// Convert to {h, v} the Sparkline expects (h is decimal hour-of-day)
const mapped = data
.filter(r => r.wait_minutes != null)
.map(r => {
const d = new Date(r.recorded_at);
return { h: d.getHours() + d.getMinutes() / 60, v: r.wait_minutes };
});
setPoints(mapped);
} catch (e) {
console.warn('useWaitHistory failed:', e);
if (!cancelled) setPoints([]);
}
}
load();
return () => { cancelled = true; };
}, [attractionId, hours]);
return points;
}
function TodayTab({ attraction }) {
const live = useWaitHistory(attraction.id, 24);
const usual = useUsualWait(attraction.id, 14);
const points = live ?? [];
const values = points.map(p => p.v).filter(v => v != null);
const hasData = values.length > 0;
const avg = hasData ? Math.round(values.reduce((a, b) => a + b, 0) / values.length) : null;
const peak = hasData ? Math.max(...values) : null;
const isShow = attraction.type === 'Show';
// Compare current wait to usual — drives a "shorter than usual" / "longer
// than usual" hint that's the actual product, not the raw number.
let usualHint = null;
if (usual && attraction.wait != null && attraction.lastUpdated) {
const diff = attraction.wait - usual.median;
const pct = usual.median > 0 ? diff / usual.median : 0;
if (Math.abs(diff) < 4) {
usualHint = { tone: 'neutral', label: 'about typical', color: COLORS.inkSoft };
} else if (pct < -0.25) {
usualHint = { tone: 'good', label: `${Math.abs(diff)} min shorter than usual`, color: COLORS.moss };
} else if (pct < -0.1) {
usualHint = { tone: 'good', label: 'a little shorter than usual', color: COLORS.moss };
} else if (pct > 0.25) {
usualHint = { tone: 'bad', label: `${diff} min longer than usual`, color: COLORS.clay };
} else if (pct > 0.1) {
usualHint = { tone: 'bad', label: 'a little longer than usual', color: COLORS.clay };
}
}
if (isShow) {
return (
Wait times today
This is a show — check the official Disneyland app for showtimes.
);
}
return (
Wait times today
{hasData &&
● LIVE
}
Now
{attraction.lastUpdated
?
: }
Usually
{usual
?
: }
Today avg
{hasData
?
: }
Peak
{hasData
?
: }
{usualHint && (
● {usualHint.label}
)}
{usual && (
Typical {Math.floor(new Date().getHours() % 12 || 12)}{new Date().getHours() < 12 ? 'a' : 'p'} range:
{' '}{usual.range[0]}–{usual.range[1]} min · {usual.n} samples over 14 days
)}
{hasData ? (
) : (
{live === null ? 'Loading…' : 'Collecting data — check back soon'}
)}
{['8a', '12p', '4p', '8p', '12a'].map(t => {t})}
);
}
// Hook: load the signed-in user's visits to this attraction (descending).
// Returns null while loading, [] when not signed in or empty, or the list.
function useUserVisits(attractionId) {
const [visits, setVisits] = React.useState(null);
const [error, setError] = React.useState(null);
React.useEffect(() => {
let cancelled = false;
(async () => {
const sb = window.PH365_SUPABASE;
if (!sb) { setVisits([]); return; }
try {
const { data: { user } } = await sb.auth.getUser();
if (!user) { setVisits([]); return; }
const { data, error } = await sb
.from('user_visits')
.select('visited_at, wait_minutes')
.eq('user_id', user.id)
.eq('attraction_id', attractionId)
.order('visited_at', { ascending: false })
.limit(500);
if (error) throw error;
if (cancelled) return;
setVisits(data || []);
} catch (e) {
if (!cancelled) { setVisits([]); setError(e.message); }
}
})();
return () => { cancelled = true; };
}, [attractionId]);
return { visits, error };
}
// Personal ride history — every time the signed-in user logged this ride,
// most recent first. This is the user's own log, not multi-day wait stats.
function HistoryTab({ attraction }) {
const { visits, error } = useUserVisits(attraction.id);
if (visits === null) {
return
Loading your history…
;
}
if (error) {
return (
Couldn't load history
{error}
);
}
if (!visits.length) {
return (
You haven't ridden this yet. Tap "I just rode this" on the Live tab to start your log.
);
}
// Group visits by calendar date so the list reads as a timeline ("Oct 12,
// 3 rides") rather than a flat dump of one-per-row when the user marathons.
const byDate = [];
let currentKey = null;
for (const v of visits) {
const d = new Date(v.visited_at);
const key = d.toDateString();
if (key !== currentKey) {
byDate.push({
key,
date: d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }),
weekday: d.toLocaleDateString('en-US', { weekday: 'short' }),
rides: [],
});
currentKey = key;
}
byDate[byDate.length - 1].rides.push({
time: d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }),
wait: v.wait_minutes,
});
}
return (
);
}
// Public reviews from user_ratings (where is_public=true), with display
// names resolved from user_profiles in a single follow-up round-trip.
function ReviewsTab({ attraction }) {
const [reviews, setReviews] = React.useState(null);
const [error, setError] = React.useState(null);
React.useEffect(() => {
let cancelled = false;
(async () => {
const sb = window.PH365_SUPABASE;
if (!sb) { setReviews([]); return; }
try {
const { data, error } = await sb
.from('user_ratings')
.select('user_id, stars, review_text, created_at, updated_at')
.eq('attraction_id', attraction.id)
.eq('is_public', true)
.order('updated_at', { ascending: false, nullsFirst: false })
.limit(50);
if (error) throw error;
if (cancelled) return;
const userIds = [...new Set((data || []).map(r => r.user_id))].filter(Boolean);
let nameById = new Map();
if (userIds.length) {
const { data: profs } = await sb
.from('user_profiles')
.select('id, display_name')
.in('id', userIds);
nameById = new Map((profs || []).map(p => [p.id, p.display_name]));
}
if (cancelled) return;
setReviews((data || []).map(r => ({
name: friendlyReviewerName(nameById.get(r.user_id)),
stars: r.stars,
text: r.review_text,
date: formatReviewDate(r.updated_at || r.created_at),
})));
} catch (e) {
if (!cancelled) { setReviews([]); setError(e.message); }
}
})();
return () => { cancelled = true; };
}, [attraction.id]);
if (reviews === null) {
return
Loading reviews…
;
}
if (error) {
return (
Couldn't load reviews
{error}
);
}
// Split into ones with text (top of list) and stars-only (footer count)
const withText = reviews.filter(r => r.text);
const starsOnly = reviews.length - withText.length;
if (!reviews.length) {
return (
No reviews yet. Be the first — rate this attraction on the Live tab after you ride.
);
}
return (
);
}
// Personal stats summary for this attraction. Total rides, first / last
// ride dates, average posted wait at time of ride, and the user's own
// rating if they left one.
function VisitsTab({ attraction }) {
const { visits, error } = useUserVisits(attraction.id);
// Pull the user's rating + review separately from user_ratings — the
// attraction.userStars overlay only carries stars, not the review text.
const [myRating, setMyRating] = React.useState(undefined); // undefined = loading
React.useEffect(() => {
let cancelled = false;
(async () => {
const sb = window.PH365_SUPABASE;
if (!sb) { setMyRating(null); return; }
try {
const { data: { user } } = await sb.auth.getUser();
if (!user) { setMyRating(null); return; }
const { data, error } = await sb
.from('user_ratings')
.select('stars, review_text, updated_at, created_at')
.eq('user_id', user.id)
.eq('attraction_id', attraction.id)
.maybeSingle();
if (error) throw error;
if (!cancelled) setMyRating(data || null);
} catch {
if (!cancelled) setMyRating(null);
}
})();
return () => { cancelled = true; };
}, [attraction.id]);
if (visits === null) {
return
Loading your stats…
;
}
if (error) {
return (
Couldn't load stats
{error}
);
}
const total = visits.length;
// visits is already ordered visited_at DESC, so [0] is most recent and
// last entry is the first-ever ride.
const lastVisit = total ? visits[0] : null;
const firstVisit = total ? visits[total - 1] : null;
const waitsLogged = visits.map(v => v.wait_minutes).filter(w => w != null);
const avgWait = waitsLogged.length
? Math.round(waitsLogged.reduce((s, w) => s + w, 0) / waitsLogged.length)
: null;
// Days-since helper for the headline ("last rode 12 days ago"). Today
// and yesterday get friendly labels — anything older falls back to a
// raw count so the user knows whether to plan a return trip.
const daysSince = (iso) => {
const ms = Date.now() - new Date(iso).getTime();
return Math.floor(ms / (24 * 3600 * 1000));
};
const fmtDate = (iso) => new Date(iso).toLocaleDateString('en-US', {
month: 'short', day: 'numeric', year: 'numeric',
});
const fmtTime = (iso) => new Date(iso).toLocaleTimeString('en-US', {
hour: 'numeric', minute: '2-digit',
});
if (!total && myRating == null) {
return (
You haven't ridden this yet. Tap "I just rode this" on the Live tab
to start tracking your stats.
);
}
function openRating() {
window.PH365_ACTIONS?.openRatingModal?.({
kind: 'attraction',
attractionId: attraction.id,
name: attraction.name,
defaultStars: myRating?.stars ?? attraction.userStars ?? 7,
});
}
return (
{myRating.review_text && (
"{myRating.review_text}"
)}
) : (
<>
You haven't rated this yet.
)}
);
}
function StatBox({ label, children }) {
return (
{label}
{children}
);
}
// "Margaret Eldridge" → "Margaret E."
function friendlyReviewerName(s) {
if (!s) return 'Passholder';
const parts = String(s).trim().split(/\s+/);
if (parts.length === 1) return parts[0];
return `${parts[0]} ${parts[parts.length - 1][0]}.`;
}
function formatReviewDate(iso) {
if (!iso) return '';
try {
return new Date(iso).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
} catch { return ''; }
}
// ─────────────────────────────────────────────────────────────
// CHECKLIST
// ─────────────────────────────────────────────────────────────
function ChecklistScreen() {
// 'combined' is the default: every item for the land in one list, what's
// left to do first and what's already done underneath, so the per-land
// (done/total) header reads against the full set rather than a slice.
const [filter, setFilter] = React.useState('combined');
const [query, setQuery] = React.useState('');
// Scope: 'allTime' counts everything you've ever completed (the lifetime
// checklist); 'today' restricts to items completed today (uses item.date,
// which mirrors user_visits.visited_at / user_checklist.completed_at via
// formatShortDate).
const [scope, setScope] = React.useState('allTime');
// Lands start collapsed so the screen opens to a tidy list of category
// headers — easier to scan than one long scroll of every item.
const [expandedLand, setExpandedLand] = React.useState({});
const selectedPark = usePark();
// Read live so we re-render after hydration
const ALL_ATTRACTIONS = window.PH365.ATTRACTIONS;
const ALL_CHECKLIST = window.PH365.CHECKLIST;
const LANDS = window.PH365.LANDS;
// Scope to the selected park so the Checklist matches what the TopBar
// label says. 'BOTH' falls through to no filter for parity with the
// dropdown's third option.
const inSelectedPark = (landId) =>
selectedPark === 'BOTH' ? true : (LANDS[landId]?.park === selectedPark);
const ATTRACTIONS = ALL_ATTRACTIONS.filter(a => inSelectedPark(a.land));
const CHECKLIST = ALL_CHECKLIST.filter(c => inSelectedPark(c.land));
// Build today's friendly date in the same shape live-data.formatShortDate
// emits ("Apr 18") so we can compare against item.date / a.lastRidden.
const todayLabel = new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
// Combine attractions + checklist into a unified list. In 'today' scope,
// an item only reads as done if its most-recent completion was today —
// that keeps the "Today" view honest about what you did *this visit*
// without touching the underlying lifetime records.
const rawItems = [
...ATTRACTIONS.filter(a => a.queueTimesId != null).map(a => ({
id: 'r-' + a.id, name: a.name, land: a.land, category: 'Ride',
done: (a.rides ?? 0) > 0, date: a.lastRidden, verb: 'COMPLETED',
rides: a.rides ?? 0,
})),
...CHECKLIST.map(c => ({ id: c.id, ...c })),
];
const items = scope === 'today'
? rawItems.map(i => ({ ...i, done: !!i.done && i.date === todayLabel }))
: rawItems;
// "This Trip" only makes sense when trip mode is on — otherwise it's a
// dead chip pointing at "things I did today" with no surrounding UX.
const tripModeOn = (window.PH365_TRIP?.get?.() ?? false);
const FILTERS = [
{ id: 'combined', label: 'All' },
{ id: 'all', label: 'Incomplete' },
{ id: 'completed', label: 'Completed' },
{ id: 'seasonal', label: 'Seasonal' },
...(tripModeOn ? [{ id: 'trip', label: 'This Trip' }] : []),
];
let visible = items;
// 'combined' keeps everything — the split happens inside each land group.
if (filter === 'all') visible = items.filter(i => !i.done);
if (filter === 'completed') visible = items.filter(i => i.done);
// "This Trip" used to hardcode 'Apr 18'. Now uses today, so a passholder
// tapping it actually sees what they did at the parks today.
if (filter === 'trip') visible = items.filter(i => i.done && i.date === todayLabel);
// Free-text search applies on top of the filter so users can drill into
// a category (e.g. Completed) and still narrow by name.
if (query.trim()) {
const q = query.trim().toLowerCase();
visible = visible.filter(i => (i.name || '').toLowerCase().includes(q));
}
// Group by land
const grouped = {};
visible.forEach(i => {
if (!grouped[i.land]) grouped[i.land] = [];
grouped[i.land].push(i);
});
// In the combined view each land holds both halves, so order them
// to-do-first and let the render drop a divider at the seam. Every other
// filter is already single-state, so leave its natural order alone.
if (filter === 'combined') {
for (const landId of Object.keys(grouped)) {
grouped[landId] = [
...grouped[landId].filter(i => !i.done),
...grouped[landId].filter(i => i.done),
];
}
}
// Total progress
const completed = items.filter(i => i.done).length;
const total = items.length;
const SCOPES = [
{ id: 'today', label: 'Today' },
{ id: 'allTime', label: 'All Time' },
];
return (
Checklist
{/* Today vs All Time — segmented pill control. "Today" shows only
items completed today (via item.date === todayLabel); "All Time"
is the lifetime view that's always existed. Sized large so it's
comfortable to tap on the iPhone frame. */}
{Object.keys(grouped).map(landId => {
const land = LANDS[landId];
const list = grouped[landId];
const done = list.filter(i => i.done).length;
const remaining = list.length - done;
// Force-expand while the user is searching — otherwise typing a
// query into a fully-collapsed list looks like it returned nothing.
const open = expandedLand[landId] === true || !!query.trim();
// Index of the first completed row in the combined view — that's
// where the "Completed" divider goes. -1 when the land is all to-do.
const seam = filter === 'combined' ? list.findIndex(i => i.done) : -1;
return (
);
}
// ─────────────────────────────────────────────────────────────
// PROFILE / ACHIEVEMENTS
// ─────────────────────────────────────────────────────────────
function ProfileScreen() {
// The achievement detail sheet is rendered at the App level (in
// Passholder365.html) so it overlays the entire iPhone frame
// regardless of scroll position. We just dispatch an event with the
// achievement; App owns the modal lifecycle.
const openAchievement = (a) =>
window.dispatchEvent(new CustomEvent('ph365-open-achievement', { detail: a }));
// Read live from window so we re-render when live-data.jsx swaps it in
const user = window.PH365.USER || {};
const achievements = window.PH365.ACHIEVEMENTS || [];
const isGuest = !!user.isGuest;
// Friendly date strings
const joinedDisplay = user.joined
? new Date(user.joined).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
: null;
// Pass-number — derive from user id if not stored, else show "—"
const passNumber = user.passNumber || (user.id ? user.id.slice(0, 8).toUpperCase() : '—');
if (isGuest) {
return (
★
Sign in to track your year
Save your check-ins, ratings, and achievements across devices. It's free, takes 10 seconds, and we never share your data.
Lumenears Hub is an independent companion app for park enthusiasts.
Not affiliated with, sponsored by, or endorsed by The Walt Disney Company,
Disneyland Resort, or any other theme park operator.
);
}
return (
{joinedDisplay ? `Passholder since ${joinedDisplay}` : 'Welcome'}
Settings
);
})()}
{/* One-line legal footer. Full disclaimer + working links live on
the Settings → About section now, so this stays a footer not
a full card — keeps the bottom of Profile from feeling cramped. */}
);
}
function YTDStat({ value, unit, label }) {
return (
{label}
);
}
function AchievementTile({ achievement, onClick }) {
// Prefer the DB glyph (achievements.glyph) when present — falls back to a
// small static map for legacy MVP IDs and finally a star.
const fallbackGlyph = { mountain: '⛰', foodie: '☕', opener: '☀', dawn: '☾', ten: '✦', grad: '⚡', first: '★', century: '∞', ghost: '◐' }[achievement.id] || '★';
const glyph = achievement.glyph || fallbackGlyph;
return (
);
}
function AchievementSheet({ achievement, onClose }) {
const glyph = { mountain: '⛰', foodie: '☕', opener: '☀', dawn: '☾', ten: '✦', grad: '⚡', first: '★', century: '∞', ghost: '◐' }[achievement.id] || '★';
return (
e.stopPropagation()} style={{
width: '100%',
background: COLORS.paper,
borderRadius: '16px 16px 0 0',
// Cap the sheet at 85% of the visible screen-wrap and let it scroll
// internally. Without this, long descriptions push the title off
// the top of the iPhone frame and there's no way to recover —
// tapping a tile felt like nothing happened.
maxHeight: '85%',
overflowY: 'auto',
WebkitOverflowScrolling: 'touch',
// The sheet's paper runs to the bottom of the screen — it is the last
// 32px of padding that has to clear the home indicator, not the panel.
padding: '14px 20px calc(32px + var(--safe-b))',
backgroundImage: `url("${window.PH365_UI.PAPER_NOISE}")`,
backgroundSize: '220px 220px',
animation: 'slideUp 0.24s cubic-bezier(.2,.7,.3,1)',
boxShadow: '0 -8px 24px rgba(26,37,102,0.18)',
}}>
)}
{/* ── Trip mode ────────────────────────────────────────────── */}
{/* ── Account ─────────────────────────────────────────────── */}
{isGuest ? (
You're browsing as a guest. Sign in below to enable account features.
) : (
)}
{!isGuest && (
)}
{/* ── Danger zone ──────────────────────────────────────────── */}
{!isGuest && (
<>
Delete my data
Removes your profile, visits, ratings, checklist, achievements,
and any calibration sessions. Your sign-in remains, so you can
start fresh later if you change your mind. This can't be undone.
{!confirmDelete ? (
) : (
)}
)}
{(msg || err) && (
{err || msg}
)}
{/* ── About ────────────────────────────────────────────────── */}
Lumenears Hub is an independent companion app for park enthusiasts.
Not affiliated with, sponsored by, or endorsed by The Walt Disney Company,
Disneyland Resort, or any other theme park operator. Trademarks and
attraction names are property of their respective owners. Wait-time data
is sourced from public APIs and may be delayed.
Open any ride's detail screen, set its entrance from your
location, and tap "Start calibration walk" to record your first.
)}
{sessions?.length > 0 && (
{sessions.map(s => (
))}
)}
);
}
function CalibrationLogRow({ session, attraction }) {
const [path, setPath] = React.useState(null);
const [open, setOpen] = React.useState(false);
// Lazy-load the path samples only when the user opens the row — keeps
// the list snappy when there are 50+ sessions.
React.useEffect(() => {
if (!open || path !== null) return;
let cancelled = false;
(async () => {
try {
const supabase = window.PH365_SUPABASE;
const headers = { 'Content-Type': 'application/json' };
if (supabase) {
const { data: { session: sess } } = await supabase.auth.getSession();
if (sess?.access_token) headers.Authorization = `Bearer ${sess.access_token}`;
}
const apiBase = window.PH365_API_BASE || '';
const res = await fetch(`${apiBase}/api/queue/session/${session.id}/path`, { headers });
if (!res.ok) throw new Error(`API → ${res.status}`);
const json = await res.json();
if (!cancelled) setPath(json.samples || []);
} catch (e) {
if (!cancelled) setPath([]);
}
})();
return () => { cancelled = true; };
}, [open, path, session.id]);
const startedAt = new Date(session.started_at);
const endedAt = session.ended_at ? new Date(session.ended_at) : null;
const dateLabel = startedAt.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
const timeLabel = startedAt.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
const duration = endedAt ? Math.round((endedAt - startedAt) / 60_000) : null;
const accColor = session.median_accuracy_m == null ? COLORS.inkSoft
: session.median_accuracy_m <= 15 ? COLORS.moss
: session.median_accuracy_m <= 30 ? COLORS.mustard
: COLORS.clay;
return (
{open && (
{path === null ? (
Loading path…
) : path.length < 2 ? (
No samples — session likely cut off before the first 10s tick.
) : (
<>
Path shape
Yellow = start · Green = end · Light dots = each 10s sample.
The sparkline is the literal lat/lon trace, normalized so
the bounding box fills the panel.
)}
)}
);
}
// SVG drawing of a lat/lon trace, normalized into a fixed viewport.
// Square aspect (using max(latSpan, lonSpan)) so the path's true shape
// is preserved instead of stretched.
function PathSparkline({ samples, width = 280, height = 180 }) {
if (!samples || samples.length < 2) return null;
const lats = samples.map(s => s.lat);
const lons = samples.map(s => s.lon);
const minLat = Math.min(...lats), maxLat = Math.max(...lats);
const minLon = Math.min(...lons), maxLon = Math.max(...lons);
// Use the larger of the two spans so the shape isn't stretched. Latitude
// and longitude aren't equal at this scale (lon-degree ≈ lat-degree × cos),
// so we compensate for the cosine factor before picking the span.
const cosLat = Math.cos(((minLat + maxLat) / 2) * Math.PI / 180);
const lonSpanScaled = (maxLon - minLon) * cosLat;
const latSpan = maxLat - minLat;
const span = Math.max(latSpan, lonSpanScaled, 1e-6);
const pad = 12;
const cx = (minLon + maxLon) / 2;
const cy = (minLat + maxLat) / 2;
const proj = (lon, lat) => {
const x = ((lon - cx) * cosLat / span) * (width - pad * 2) + width / 2;
const y = -((lat - cy) / span) * (height - pad * 2) + height / 2;
return [x, y];
};
const points = samples.map(s => proj(s.lon, s.lat));
const d = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
return (
);
}
Object.assign(window, {
DetailScreen, ChecklistScreen, ProfileScreen, SettingsScreen,
AchievementSheet, CalibrationLogScreen,
PH365_TRIP: { get: getTripMode, set: setTripMode },
PH365_PARK: { get: getPark, set: setSelectedPark },
usePark,
});
})();