{dots.map((d, i) => (

))}

); } // ---- Logo ---- function Logo({ small = false, familyName = null }) { return (

SvendeBanan {familyName || "Family Game Hub"}

); } // ---- Header ---- function Header({ active = "home", family = null }) { const linkStyle = (key) => ({ fontFamily: "'DM Sans', sans-serif", fontWeight: 500, fontSize: 15, color: active === key ? "var(--ink)" : "var(--ink-dim)", textDecoration: "none", padding: "8px 14px", borderRadius: 999, background: active === key ? "rgba(255,255,255,0.08)" : "transparent", transition: "all 0.15s", }); const [inviteOpen, setInviteOpen] = useState(false); return (

{inviteOpen && family && setInviteOpen(false)} />}

); } // Small chip in the header showing sign-in status. Tied to firebase-auth.js // (which exposes window.svendeAuth). Optional — if Firebase isn't loaded yet // or the user isn't signed in, shows a "Sign in" button. function AuthChip() { const [user, setUser] = useState(() => window.svendeAuth?.getUser?.() ?? null); const [busy, setBusy] = useState(false); useEffect(() => { if (!window.svendeAuth) return; return window.svendeAuth.onChange(setUser); }, []); const signIn = async () => { if (!window.svendeAuth) return; setBusy(true); try { await window.svendeAuth.signIn(); } catch (e) { console.warn("sign-in failed:", e.message); } finally { setBusy(false); } }; const signOut = async () => { if (!window.svendeAuth) return; if (!confirm("Sign out? Your in-progress games are kept on this device.")) return; await window.svendeAuth.signOut(); }; if (!user) { return ( ); } const initial = (user.displayName || user.email || "?")[0].toUpperCase(); return ( ); } // ---- Pill / Badge ---- function Pill({ color = "var(--pink)", children }) { return ( {children} ); } // ---- Player palette ---- // Roster is per-family (loaded from /api/players). PLAYER_COLORS provides // the random-pick palette when adding a brand-new player slot. const PLAYER_COLORS = [ "#ff6b9d", "#ffd23f", "#3ddbd9", "#a8e635", "#ff8a5c", "#c084fc", "#f472b6", "#60a5fa", "#fbbf24", "#34d399", "#fb7185", "#a78bfa", ]; function pickRandomPlayerColor() { return PLAYER_COLORS[Math.floor(Math.random() * PLAYER_COLORS.length)]; } // Cached roster for first paint and offline-resilience. const ROSTER_CACHE_KEY = "svende-roster-cache"; function getRosterCache() { try { const raw = localStorage.getItem(ROSTER_CACHE_KEY); if (!raw) return []; const arr = JSON.parse(raw); return Array.isArray(arr) ? arr : []; } catch (e) { return []; } } function setRosterCache(arr) { localStorage.setItem(ROSTER_CACHE_KEY, JSON.stringify(arr)); } async function fetchRoster() { if (!window.svendeApi || !window.svendeAuth?.getUser?.()) return getRosterCache(); try { const players = await window.svendeApi.listPlayers(); const sorted = Array.isArray(players) ? players : []; setRosterCache(sorted); return sorted; } catch (e) { console.warn("[svende] fetchRoster failed, using cache:", e.message); return getRosterCache(); } } // React hook used by every scorekeeper's Setup screen. function useRoster() { const [roster, setRoster] = useState(() => getRosterCache()); useEffect(() => { let alive = true; const refresh = async () => { const next = await fetchRoster(); if (alive) setRoster(next); }; refresh(); const unsubAuth = window.svendeAuth ? window.svendeAuth.onChange(refresh) : null; return () => { alive = false; if (unsubAuth) unsubAuth(); }; }, []); return roster; } // ---- Family context ---- // `useFamily()` is the source of truth for "which family am I in right now". // It calls /api/families/me on auth change and caches the result so first // paint doesn't flash an onboarding screen for users who're already members. const FAMILY_CACHE_KEY = "svende-family-cache"; function getFamilyCache() { try { const raw = localStorage.getItem(FAMILY_CACHE_KEY); if (!raw) return null; return JSON.parse(raw); } catch (e) { return null; } } function setFamilyCache(payload) { if (payload) localStorage.setItem(FAMILY_CACHE_KEY, JSON.stringify(payload)); else localStorage.removeItem(FAMILY_CACHE_KEY); } function useFamily() { const [user, setUser] = useState(() => window.svendeAuth?.getUser?.() ?? null); const [me, setMe] = useState(() => getFamilyCache()); const [loading, setLoading] = useState(false); const refresh = async () => { if (!window.svendeApi || !window.svendeAuth?.getUser?.()) { setMe(null); setFamilyCache(null); return null; } setLoading(true); try { const data = await window.svendeApi.me(); setMe(data); setFamilyCache(data); return data; } catch (e) { console.warn("[svende] /api/families/me failed:", e.message); return null; } finally { setLoading(false); } }; useEffect(() => { if (!window.svendeAuth) return; const unsub = window.svendeAuth.onChange((u) => { setUser(u); if (u) refresh(); else { setMe(null); setFamilyCache(null); } }); if (window.svendeAuth.getUser?.()) refresh(); return unsub; }, []); const currentFamily = me?.families?.[0] ?? null; return { user, me, currentFamily, loading, refresh }; } // Onboarding screen — shown when a signed-in user has zero families. function FamilyOnboarding({ onJoined }) { const [mode, setMode] = useState("choose"); // "choose" | "create" | "join" const [name, setName] = useState(""); const [code, setCode] = useState(""); const [busy, setBusy] = useState(false); const [error, setError] = useState(""); const create = async () => { if (!name.trim() || busy) return; setBusy(true); setError(""); try { await window.svendeApi.createFamily({ name: name.trim() }); await onJoined(); } catch (e) { setError(e.message || "Could not create family"); } finally { setBusy(false); } }; const join = async () => { const cleaned = code.toUpperCase().replace(/[^A-Z0-9]/g, ""); if (cleaned.length !== 6 || busy) return; setBusy(true); setError(""); try { await window.svendeApi.redeemInvite(cleaned); await onJoined(); } catch (e) { setError(e.message || "Could not redeem invite"); } finally { setBusy(false); } }; return (

— Welcome to SvendeBanan

Set up your family

Every family has its own private leaderboard, roster, and game history.

{mode === "choose" && (

)} {mode === "create" && (

Family name setName(e.target.value)} onKeyDown={(e) => e.key === "Enter" && create()} placeholder="The Heltmølgaards" style={onbInputStyle} /> {error &&

{error}

}

)} {mode === "join" && (

Invite code setCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 6))} onKeyDown={(e) => e.key === "Enter" && join()} placeholder="K7M3PA" style={{ ...onbInputStyle, fontFamily: "'Space Grotesk', monospace", letterSpacing: "0.2em", textAlign: "center", fontSize: 24, fontWeight: 700 }} /> {error &&

{error}

}

)}

); } const onbCardStyle = (accent) => ({ background: accent, color: "#0a0a0a", border: "3px solid var(--border)", borderRadius: 18, padding: 24, display: "flex", flexDirection: "column", gap: 8, alignItems: "center", fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 17, boxShadow: "5px 5px 0 var(--border)", cursor: "pointer", transition: "all 0.15s", }); const onbCardSubStyle = { fontFamily: "'DM Sans', sans-serif", fontSize: 12, fontWeight: 500, opacity: 0.75, }; const onbLabelStyle = { display: "block", fontFamily: "'DM Sans', sans-serif", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.15em", color: "var(--ink-dim)", fontWeight: 700, marginBottom: 8, }; const onbInputStyle = { width: "100%", boxSizing: "border-box", background: "rgba(255,255,255,0.06)", color: "var(--ink)", border: "2px solid rgba(255,255,255,0.15)", borderRadius: 14, padding: "14px 16px", fontFamily: "'DM Sans', sans-serif", fontSize: 16, outline: "none", }; const onbErrorStyle = { marginTop: 12, fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: "var(--coral)", fontWeight: 600, }; const onbBtnStyle = (accent, disabled) => ({ flex: 1, background: disabled ? "rgba(255,255,255,0.1)" : accent, color: disabled ? "var(--ink-dim)" : "#0a0a0a", border: "3px solid var(--border)", borderRadius: 14, padding: "14px 18px", fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 15, cursor: disabled ? "not-allowed" : "pointer", boxShadow: disabled ? "none" : "5px 5px 0 var(--border)", }); const onbBtnStyleSecondary = { background: "transparent", color: "var(--ink)", border: "2px solid var(--border)", borderRadius: 14, padding: "14px 18px", fontFamily: "'Space Grotesk', sans-serif", fontWeight: 600, fontSize: 14, cursor: "pointer", }; // Invite modal — shown via the "Invite" button in the header. function InviteModal({ family, onClose }) { const [invites, setInvites] = useState([]); const [busy, setBusy] = useState(false); const [error, setError] = useState(""); const refresh = async () => { try { const list = await window.svendeApi.listInvites(family.id); setInvites(list); } catch (e) { setError(e.message); } }; useEffect(() => { refresh(); }, [family.id]); const generate = async () => { setBusy(true); setError(""); try { await window.svendeApi.createInvite(family.id); await refresh(); } catch (e) { setError(e.message); } finally { setBusy(false); } }; const revoke = async (code) => { if (!confirm(`Revoke invite ${code}? Anyone using it will get an error.`)) return; await window.svendeApi.revokeInvite(family.id, code); await refresh(); }; const copy = async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { /* ignore */ } }; return (

e.stopPropagation()} style={{ maxWidth: 480, width: "100%", background: "var(--bg)", color: "var(--ink)", border: "3px solid var(--border)", borderRadius: "var(--radius)", boxShadow: "var(--card-shadow)", padding: 28, }}>

Invite to {family.name}

Share a code with a family member. Codes expire after 24 hours and can be used by multiple people.

{invites.length === 0 ? (

No active invites

) : (

{invites.map((inv) => { const expiresIn = new Date(inv.expiresAt).getTime() - Date.now(); const hours = Math.max(0, Math.round(expiresIn / 3600000)); return (

{inv.code}

{hours}h left

); })}

)} {error &&

{error}

}

); } const inviteIconBtn = { background: "transparent", border: "none", cursor: "pointer", padding: 4, fontSize: 16, opacity: 0.7, }; // ---- Game history ---- // Source of truth is the API (/api/games) so the family-wide leaderboard is // shared across devices. localStorage is kept as a write-ahead cache for // instant first paint and for offline resilience: writes go to the cache // immediately, then sync to the server in the background. On reads we serve // from the cache, refresh from the API, and overwrite the cache with the // authoritative server response. const HISTORY_KEY = "svende-history"; const PENDING_KEY = "svende-history-pending"; const GAME_TITLES = { "danish-500": "500", "backgammon": "Backgammon", "shithead": "Shithead", }; function getHistoryCache() { try { const raw = localStorage.getItem(HISTORY_KEY); if (!raw) return []; const arr = JSON.parse(raw); return Array.isArray(arr) ? arr : []; } catch (e) { return []; } } function setHistoryCache(arr) { localStorage.setItem(HISTORY_KEY, JSON.stringify(arr)); } // Synchronous read for first-paint (returns cached snapshot). function getHistory() { return getHistoryCache(); } // Async read that hits the API and refreshes the cache. Falls back to the // cached snapshot on any failure (offline, signed-out, server down). async function fetchHistory() { if (!window.svendeApi || !window.svendeAuth) return getHistoryCache(); const user = window.svendeAuth.getUser ? window.svendeAuth.getUser() : null; if (!user) return getHistoryCache(); try { const games = await window.svendeApi.listGames(); const sorted = Array.isArray(games) ? [...games].sort((a, b) => (a.finishedAt || "").localeCompare(b.finishedAt || "") ) : []; setHistoryCache(sorted); return sorted; } catch (e) { console.warn("[svende] fetchHistory failed, using cache:", e.message); return getHistoryCache(); } } function setHistory(arr) { // Used by the "Reset history" button. Wipe local cache + tell server. setHistoryCache(arr); if (arr.length === 0 && window.svendeApi) { window.svendeApi.deleteAllGames().catch((e) => console.warn("[svende] deleteAllGames failed:", e.message), ); } } // Pending queue: writes that failed to reach the server. Drained on next // sync attempt (auth state change, focus, online event). function getPendingQueue() { try { const raw = localStorage.getItem(PENDING_KEY); return raw ? JSON.parse(raw) : []; } catch (e) { return []; } } function setPendingQueue(arr) { localStorage.setItem(PENDING_KEY, JSON.stringify(arr)); } async function flushPending() { if (!window.svendeApi) return; const user = window.svendeAuth?.getUser?.(); if (!user) return; const queue = getPendingQueue(); if (queue.length === 0) return; const remaining = []; for (const record of queue) { try { await window.svendeApi.saveGame(record); } catch (e) { console.warn("[svende] flushPending: keeping in queue:", e.message); remaining.push(record); } } setPendingQueue(remaining); } function appendGame(record) { if (!record || !record.id) return; if (!record.finishedAt) record.finishedAt = new Date().toISOString(); // 1. Update local cache immediately (so the hub feels instant). const h = getHistoryCache(); const idx = h.findIndex(g => g.id === record.id); if (idx >= 0) h[idx] = record; else h.push(record); setHistoryCache(h); // 2. Push to the API. If it fails, queue for retry. if (window.svendeApi && window.svendeAuth?.getUser?.()) { window.svendeApi.saveGame(record).catch((e) => { console.warn("[svende] saveGame failed, queuing:", e.message); const q = getPendingQueue(); const pIdx = q.findIndex((r) => r.id === record.id); if (pIdx >= 0) q[pIdx] = record; else q.push(record); setPendingQueue(q); }); } else { // Not signed in / API unavailable — queue and let auth flow drain it. const q = getPendingQueue(); const pIdx = q.findIndex((r) => r.id === record.id); if (pIdx >= 0) q[pIdx] = record; else q.push(record); setPendingQueue(q); } } // Drain the queue whenever the user signs in or comes back online. if (typeof window !== "undefined") { if (window.svendeAuth) { window.svendeAuth.onChange((user) => { if (user) flushPending(); }); } window.addEventListener("online", flushPending); } function newGameId() { return Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 8); } function getPlayerStats(history) { const stats = {}; for (const g of history) { g.players.forEach((p, i) => { if (!stats[p.name]) stats[p.name] = { name: p.name, color: p.color, played: 0, wins: 0, points: 0, lastPlayed: null, }; stats[p.name].played += 1; if (g.winner && g.winner.name === p.name) stats[p.name].wins += 1; const sc = (g.finalScores && g.finalScores[i]) || 0; stats[p.name].points += sc; if (!stats[p.name].lastPlayed || g.finishedAt > stats[p.name].lastPlayed) { stats[p.name].lastPlayed = g.finishedAt; } // keep latest known color if (p.color) stats[p.name].color = p.color; }); } return stats; } function lastPlayedByGame(history) { const out = {}; for (const g of history) { if (!out[g.game] || g.finishedAt > out[g.game]) out[g.game] = g.finishedAt; } return out; } function formatRelativeTime(iso) { if (!iso) return "Never played"; const ts = new Date(iso).getTime(); if (isNaN(ts)) return "Never played"; const diff = Date.now() - ts; if (diff < 0) return "just now"; const m = Math.floor(diff / 60000); if (m < 1) return "just now"; if (m < 60) return `${m} minute${m === 1 ? "" : "s"} ago`; const h = Math.floor(m / 60); if (h < 24) return `${h} hour${h === 1 ? "" : "s"} ago`; const d = Math.floor(h / 24); if (d < 7) return `${d} day${d === 1 ? "" : "s"} ago`; const w = Math.floor(d / 7); if (w < 4) return `${w} week${w === 1 ? "" : "s"} ago`; const mo = Math.floor(d / 30); if (mo < 12) return `${mo} month${mo === 1 ? "" : "s"} ago`; const y = Math.floor(d / 365); return `${y} year${y === 1 ? "" : "s"} ago`; } // Player avatar — simple colored circle with initial function Avatar({ name, color, size = 48, ring = false }) { const initial = (name || "?")[0].toUpperCase(); return (

{initial}

); } Object.assign(window, { THEMES, applyTheme, Mascot, ConfettiBg, Logo, Header, AuthChip, Pill, Avatar, PLAYER_COLORS, pickRandomPlayerColor, fetchRoster, useRoster, useFamily, FamilyOnboarding, InviteModal, GAME_TITLES, HISTORY_KEY, getHistory, fetchHistory, setHistory, appendGame, flushPending, newGameId, getPlayerStats, lastPlayedByGame, formatRelativeTime, });