{/* Hero card */}

Welcome back,

{user}

{rank > 0 && ( · #{rank} globally )}

{fmt(stats.pts)}

Total Points

{earned.length > 0 && (

🏅 {earned.length} achievement{earned.length !== 1 ? "s" : ""} earned

)}

{/* Points by category chart */}

POINTS BY CATEGORY

{!hasAnyPts ? (

No points yet — go check off some places!

) : ( [`${fmt(v)} pts`, ""]} contentStyle={{ borderRadius: 10, border: "none", boxShadow: "0 4px 20px rgba(0,0,0,.12)", fontSize: 13 }} /> {chartData.map((d, i) => )} )}

{/* Completion bars */}

COMPLETION

{completionRows.map(r => { const pct = Math.round((r.done / r.total) * 100); return (

{r.emoji} {r.label} {r.done}/{r.total} · {pct}%

); })}

{/* Achievements */}

ACHIEVEMENTS

{achievements.map(a => (

{a.emoji} {a.label} {a.done && }

))}

); } /* ─── SUB-CHECK PANEL ──────────────────────────────────────────────────── */ function SubPanel({ catId, item, color, checks, customSubs, pv, onToggleSub, onAddCustom, onRemoveCustom }) { const key = ikey(catId, item); const mp = getMainPts(pv, catId, item); const sp = getSubPts(mp); const defs = DEFAULT_SUBS[catId] || []; const cust = customSubs[key] || []; const subs = (checks[key] && checks[key].subs) || {}; const done = defs.concat(cust).filter(s => subs[s.id]).length; const [adding, setAdding] = useState(false); const [newL, setNewL] = useState(""); const [newE, setNewE] = useState("⭐"); const EMOJIS = ["⭐","🎯","🏆","📍","🎪","🌟","🎉","🗺️","🍕","🏖️","🎨","🚀","💎","🤩","🔥"]; function saveCustom() { if (!newL.trim()) return; onAddCustom(catId, item, { l: newL.trim(), e: newE }); setNewL(""); setAdding(false); } return (

SUB-CHECKS · each {done}/{defs.length + cust.length} done

{defs.map(s => (

onToggleSub(catId, item, s.id)}> {s.e} {s.l}

))} {cust.length > 0 && (

{item} Specials

{cust.map(s => (

onToggleSub(catId, item, s.id)}> {s.e} {s.l}

))}

)} {adding ? (

{EMOJIS.map(e => ( ))}

setNewL(e.target.value)} placeholder="e.g. Visit local brewery" style={{ marginBottom: 8 }} onKeyDown={e => { if (e.key === "Enter") saveCustom(); }}/>

) : ( )}

); } /* ─── TRACKER ──────────────────────────────────────────────────────────── */ function Tracker({ categories, checks, customSubs, pv, onToggleMain, onToggleSub, onAddCustom, onRemoveCustom, isPaid, onPaywall, mainCount }) { const [selCat, setSelCat] = useState(null); const [league, setLeague] = useState("nfl"); const [openItem,setOpenItem]= useState(null); const [search, setSearch] = useState(""); const cat = selCat ? categories.find(c => c.id === selCat) : null; const items = !cat ? [] : cat.leagues ? (cat.leagues.find(l => l.id === league) || cat.leagues[0]).items : cat.items; const shown = items.filter(i => i.toLowerCase().includes(search.toLowerCase())); function catProgress(c) { const its = c.leagues ? (c.leagues.find(l => l.id === league) || c.leagues[0]).items : c.items; const done = its.filter(i => checks[ikey(c.id, i)] && checks[ikey(c.id, i)].main).length; return { done, total: its.length }; } return (

{/* Free trial bar */} {!isPaid && (

Free Trial: {mainCount}/{FREE_LIMIT} checks used

)} {/* Category grid */} {!selCat && ( <>

My Journey Tracker

Choose a category. Expand any item to see sub-checks and point values.

{categories.map(c => { const p = catProgress(c); const pct = Math.round((p.done / p.total) * 100); return (

{ setSelCat(c.id); setSearch(""); setOpenItem(null); }} style={{ padding: "26px", cursor: "pointer", border: "2px solid transparent", transition: "all .25s" }} onMouseEnter={e => { e.currentTarget.style.borderColor = c.color; e.currentTarget.style.transform = "translateY(-2px)"; }} onMouseLeave={e => { e.currentTarget.style.borderColor = "transparent"; e.currentTarget.style.transform = "translateY(0)"; }}>

{c.emoji}

{c.title}

Base: per visit

{p.total}

PROGRESS {p.done}/{p.total} · {pct}%

); })}

)} {/* Item list */} {cat && (

{cat.emoji} {cat.title}

{cat.leagues && (

{cat.leagues.map(l => ( ))}

)}

setSearch(e.target.value)} style={{ paddingLeft: 36 }}/>

{shown.map(item => { const key = ikey(cat.id, item); const checked = checks[key] && checks[key].main; const mp = getMainPts(pv, cat.id, item); const defs = DEFAULT_SUBS[cat.id] || []; const cust = customSubs[key] || []; const allSubs = defs.concat(cust); const subDone = allSubs.filter(s => checks[key] && checks[key].subs && checks[key].subs[s.id]).length; const isOpen = openItem === item; return (

setOpenItem(isOpen ? null : item)}>

{ e.stopPropagation(); onToggleMain(cat.id, item); }} style={{ marginRight: 8 }}>

{item}

{subDone > 0 && (

{subDone}/{allSubs.length} sub-checks done

)}

{isOpen ? : }

{isOpen && ( )}

); })} {shown.length === 0 && (

No results for "{search}"

)}

{/* Side info */}

POINTS IN THIS CATEGORY

Main visit

Each sub-check

HOW POINTS WORK

Earn {CAT_BASE_PTS[cat.id]} pts for each main check. Each sub-check adds {getSubPts(CAT_BASE_PTS[cat.id])} pts (25% of main). Remote locations like Alaska or Denali are worth extra!

{!isPaid && (

Unlock Pro

{FREE_LIMIT - mainCount > 0 ? `${FREE_LIMIT - mainCount} free checks remaining.` : "You've used all free checks."} Go Pro to track everything.

See Pricing →

)}

); } /* ─── LEADERBOARD ──────────────────────────────────────────────────────── */ function Leaderboard({ lb, user, userStats }) { const sorted = [...lb].sort((a, b) => b.pts - a.pts); const medals = ["🥇", "🥈", "🥉"]; const podium = [sorted[1], sorted[0], sorted[2]]; const heights = [140, 170, 120]; const podPos = [2, 1, 3]; return (

🏆 Global Rankings

Compete with adventurers worldwide. Check off more places to climb the board.

{/* Podium */}

{podium.map((entry, i) => { if (!entry) return

; const isMe = entry.u === user; const t = getTier(entry.pts); const podPts = isMe ? userStats.pts : entry.pts; const podColors = ["#C0C0C0", "#F4B942", "#CD7F32"]; return (

{entry.u}{isMe ? " (You)" : ""}

{medals[podPos[i] - 1]}

#{podPos[i]}

{fmt(podPts)} pts

); })}

{/* Full table */}

PLAYER

POINTS

TIER

🗺️

🌲

🏟️

🗽

{sorted.map((entry, idx) => { const isMe = entry.u === user; const t = getTier(entry.pts); const displayPts = isMe ? userStats.pts : entry.pts; const displayStates = isMe ? userStats.states : entry.states; const displayParks = isMe ? userStats.parks : entry.parks; const displayArenas = isMe ? userStats.arenas : entry.arenas; const displayLand = isMe ? userStats.land : entry.land; return (

{idx + 1}

{t.emoji}

{entry.u}{isMe ? " (You)" : ""}

{fmt(displayPts)}

{t.emoji} {t.label}

{displayStates}

{displayParks}

{displayArenas}

{displayLand}

); })}

); } /* ─── ADMIN PANEL ──────────────────────────────────────────────────────── */ function AdminPanel({ pv, onSavePv }) { const [filter, setFilter] = useState("states"); const [search, setSearch] = useState(""); const [editing, setEditing] = useState(null); const [editVal, setEditVal] = useState(""); const cat = CATEGORIES.find(c => c.id === filter); const allItems = cat && cat.leagues ? cat.leagues.flatMap(l => l.items) : (cat ? cat.items : []); const unique = [...new Set(allItems)]; const shown = unique.filter(i => i.toLowerCase().includes(search.toLowerCase())); const catDef = pv[`${filter}:default`] || CAT_BASE_PTS[filter] || 100; function startEdit(item) { setEditing(item); setEditVal(String(pv[`${filter}:${item}`] !== undefined ? pv[`${filter}:${item}`] : catDef)); } function saveEdit(item) { const val = parseInt(editVal, 10); if (!isNaN(val) && val > 0) { const newPv = Object.assign({}, pv, { [`${filter}:${item}`]: val }); onSavePv(newPv); } setEditing(null); } function resetItem(item) { const newPv = Object.assign({}, pv); delete newPv[`${filter}:${item}`]; onSavePv(newPv); } return (

Point Editor

Click any row to change its point value. Changes are instant and affect all users.

Category default:

{CATEGORIES.map(c => ( ))}

setSearch(e.target.value)} style={{ paddingLeft: 36, maxWidth: 320 }}/>

DESTINATION

MAIN PTS

SUB-CHECK PTS

ACTIONS

{shown.map(item => { const specificKey = `${filter}:${item}`; const isCustom = pv[specificKey] !== undefined; const mp = isCustom ? pv[specificKey] : catDef; const sp = getSubPts(mp); const isEdit = editing === item; return (

{item} {isCustom && ( CUSTOM )}

{isEdit ? ( setEditVal(e.target.value)} style={{ width: 80, padding: "5px 10px", fontSize: 14 }} autoFocus onKeyDown={e => { if (e.key === "Enter") saveEdit(item); if (e.key === "Escape") setEditing(null); }} onBlur={() => saveEdit(item)} /> ) : (

startEdit(item)}>

)}

auto

{isEdit ? ( ) : ( )} {isCustom && ( )}

); })}

Tip: Click ✕ to revert any item to the category default of {catDef} pts. Sub-check values are always 25% of the main, calculated automatically.

); } /* ─── MAIN APP ─────────────────────────────────────────────────────────── */ export default function App() { const [user, setUser] = useState(null); const [tab, setTab] = useState("dashboard"); const [checks, setChecks] = useState({}); const [customSubs, setCustomSubs] = useState(INIT_CUSTOM); const [pv, setPv] = useState(() => { const base = {}; CATEGORIES.forEach(c => { base[`${c.id}:default`] = CAT_BASE_PTS[c.id]; }); return Object.assign({}, ITEM_OVERRIDES, base); }); const [lb, setLb] = useState(SEED_LB); const [isPaid, setIsPaid] = useState(false); const [showPaywall,setShowPaywall]= useState(false); const [adminMode, setAdminMode] = useState(false); const [showAdminLogin, setShowAdminLogin] = useState(false); const [loading, setLoading] = useState(true); const stats = calcStats(checks, pv, customSubs); const mainCount = Object.values(checks).filter(c => c && c.main).length; const canCheck = isPaid || mainCount < FREE_LIMIT; // Load from storage on mount useEffect(() => { (async () => { try { const r = await window.storage.get("vta_pointValues", true); if (r) setPv(JSON.parse(r.value)); } catch (_) {} try { const r = await window.storage.get("vta_leaderboard", true); if (r) setLb(JSON.parse(r.value)); } catch (_) { try { await window.storage.set("vta_leaderboard", JSON.stringify(SEED_LB), true); } catch (_) {} } try { const r = await window.storage.get("vta_lastUser"); if (r) { setUser(r.value); try { const c = await window.storage.get(`vta_checks:${r.value}`); if (c) setChecks(JSON.parse(c.value)); } catch (_) {} } } catch (_) {} setLoading(false); })(); }, []); // Persist checks + update leaderboard when checks change useEffect(() => { if (!user) return; const s = calcStats(checks, pv, customSubs); (async () => { try { await window.storage.set(`vta_checks:${user}`, JSON.stringify(checks)); } catch (_) {} setLb(prev => { const entry = { u: user, pts: s.pts, states: s.states, parks: s.parks, arenas: s.arenas, land: s.land }; const updated = prev.filter(e => e.u !== user).concat(entry).sort((a, b) => b.pts - a.pts); (async () => { try { await window.storage.set("vta_leaderboard", JSON.stringify(updated), true); } catch (_) {} })(); return updated; }); })(); }, [checks, user]); async function handleJoin(name) { setUser(name); try { await window.storage.set("vta_lastUser", name); } catch (_) {} try { const r = await window.storage.get(`vta_checks:${name}`); if (r) setChecks(JSON.parse(r.value)); } catch (_) {} setTab("dashboard"); } function handleToggleMain(catId, item) { const key = ikey(catId, item); const current = checks[key] && checks[key].main; if (!current && !canCheck) { setShowPaywall(true); return; } setChecks(prev => { const existing = prev[key] || {}; return Object.assign({}, prev, { [key]: Object.assign({}, existing, { main: !existing.main, subs: existing.subs || {} }) }); }); } function handleToggleSub(catId, item, subId) { const key = ikey(catId, item); setChecks(prev => { const existing = prev[key] || {}; const oldSubs = existing.subs || {}; return Object.assign({}, prev, { [key]: Object.assign({}, existing, { subs: Object.assign({}, oldSubs, { [subId]: !oldSubs[subId] }) }) }); }); } function handleAddCustom(catId, item, { l, e }) { if (!l.trim()) return; const key = ikey(catId, item); setCustomSubs(prev => { const existing = prev[key] || []; return Object.assign({}, prev, { [key]: existing.concat([{ id: `c-${Date.now()}`, l: l.trim(), e }]) }); }); } function handleRemoveCustom(catId, item, subId) { const key = ikey(catId, item); setCustomSubs(prev => { const existing = prev[key] || []; return Object.assign({}, prev, { [key]: existing.filter(s => s.id !== subId) }); }); } async function handleSavePv(newPv) { setPv(newPv); try { await window.storage.set("vta_pointValues", JSON.stringify(newPv), true); } catch (_) {} } if (loading) { return (

⚙ Loading...

); } if (!user) { return (

); } const NAV_TABS = [ { id:"dashboard", label:"Dashboard", emoji:"📊" }, { id:"tracker", label:"Tracker", emoji:"🗺️" }, { id:"leaderboard", label:"Rankings", emoji:"🏆" }, ...(adminMode ? [{ id:"admin", label:"Admin", emoji:"🔧" }] : []), ]; return (

{/* NAV */}

setTab("dashboard")}>

VISIT THEM ALL

by Own All 50

{NAV_TABS.map(t => ( ))}

🪙 {fmt(stats.pts)}

{user}

{!isPaid && ( )}

{/* VIEWS */} {tab === "dashboard" && ( )} {tab === "tracker" && ( setShowPaywall(true)} mainCount={mainCount} /> )} {tab === "leaderboard" && ( )} {tab === "admin" && adminMode && ( )} {/* MODALS */} {showPaywall && ( setShowPaywall(false)} onPay={() => { setIsPaid(true); setShowPaywall(false); }} used={mainCount} /> )} {showAdminLogin && ( setShowAdminLogin(false)} onSuccess={() => { setAdminMode(true); setShowAdminLogin(false); setTab("admin"); }} /> )}

); }