// Badges / Collection screen — ported (session S-D). Hardcoded earned/locked
// demo arrays replaced by badgeProgress() (badge_defs seeded in session S-B:
// first-stamp, ten-stamps, utah-mighty-five, desert-rat, pacific-crest,
// all-63). Icon assignment is a small fixed lookup by badge key since
// badge_defs has no icon column — not fabricated data, just a display choice.
const BADGE_ICONS = {
'first-stamp': 'tree', 'ten-stamps': 'mtn', 'utah-mighty-five': 'sun',
'desert-rat': 'sun', 'pacific-crest': 'mtn', 'all-63': 'lake',
};
function BadgeGlyph({ kind }) {
const col = 'var(--accent)';
if (kind === 'tree') return ();
if (kind === 'mtn') return ();
if (kind === 'sun') return ();
if (kind === 'lake') return ();
if (kind === 'book') return ();
return null;
}
function ThemeToggle() {
const [pref, setPref] = React.useState('auto');
React.useEffect(() => {
setPref(window.phGetTheme ? window.phGetTheme() : 'auto');
const onChange = () => setPref(window.phGetTheme ? window.phGetTheme() : 'auto');
window.addEventListener('ph-theme-change', onChange);
return () => window.removeEventListener('ph-theme-change', onChange);
}, []);
const opts = [['auto', 'Auto'], ['light', 'Day'], ['dark', 'Night']];
return (
{opts.map(([k, l]) => {
const active = pref === k;
return (
);
})}
);
}
function ProfileBlock({ go, openPark }) {
const [loading, setLoading] = React.useState(true);
const [user, setUser] = React.useState(null);
const [persona, setPersona] = React.useState(null);
const [stats, setStats] = React.useState({ trips: 0, saved: 0, journal: 0 });
const [nextTripSlug, setNextTripSlug] = React.useState(null);
React.useEffect(() => {
(async () => {
try {
const [u, trips, items, journal] = await Promise.all([
window.PH.getUser(), window.PH.listTrips({ status: undefined }),
window.PH.listAllTripItems(), window.PH.listJournal({ limit: 100 }),
]);
setUser(u);
try { const prof = await window.PH.getProfile(); setPersona(prof && prof.persona); } catch (e) {}
setStats({ trips: trips.length, saved: items.length, journal: journal.length });
const active = trips.filter(t => t.status !== 'completed').sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at))[0];
if (active) setNextTripSlug(active.park_slug);
} finally { setLoading(false); }
})();
}, []);
const signOut = async () => { try { await window.PH.signOut(); } catch (e) {} };
return (
<>
{!loading && user && (
<>
Signed in as
{user.email}
Edit on the website →
)}
{persona && (
)}
Display · day or night
);
}
function BadgesScreen({ go, openPark }) {
const [loading, setLoading] = React.useState(true);
const [progress, setProgress] = React.useState([]);
React.useEffect(() => {
(async () => { try { setProgress(await window.PH.badgeProgress()); } finally { setLoading(false); } })();
}, []);
if (loading) return Loading your stamps…
;
const earned = progress.filter(b => b.earned);
const inProgress = progress.filter(b => !b.earned);
return (
The Passport
Stamps in the
passport.
A quiet record of what you have seen — not trophies, but reasons to remember.
{earned.length === 0 && (
Stamp your first park to start earning badges.
)}
{earned.map((b, i) => (
№{String(i + 1).padStart(3, '0')}
{b.name}
{b.description}
))}
{inProgress.map((b) => (
))}
);
}
Object.assign(window, { BadgesScreen });