import React from "react" import { useFireproof } from "use-fireproof" function Roster({ c, players, canWrite, database }) { const [name, setName] = React.useState(""); const inPill = "bg-[oklch(0.86_0.18_90)] text-[oklch(0.20_0.04_163)]"; const outPill = "bg-[oklch(0.39_0.065_165)] text-[oklch(0.95_0.01_100)]"; const idlePill = "bg-transparent border border-[oklch(0.39_0.065_165)] text-[oklch(0.95_0.01_100)]"; async function setStatus(p, status) { await database.put({ ...p, status: p.status === status ? "pending" : status }); } async function addPlayer(e) { e.preventDefault(); if (!name.trim()) return; await database.put({ type: "player", name: name.trim(), status: "pending" }); setName(""); } return (

Roster

{players.length === 0 ? (

No players yet. {canWrite ? "Add some below." : "Captain hasn't set the roster."}

) : (

{p.name} {canWrite && ( )}

)} {canWrite && ( )}

); } function GameDetails({ c, game, canWrite, database }) { const [when, setWhen] = React.useState(""); const [where, setWhere] = React.useState(""); React.useEffect(() => { if (game) { setWhen(game.when || ""); setWhere(game.where || ""); } }, [game?._id]); async function save(e) { e.preventDefault(); await database.put({ ...(game || {}), type: "game", when, where }); } return (

This Week's Game

When

{game?.when || "Not set yet"}

Where

{game?.where || "Not set yet"}

{canWrite ? ( ) : (

Read-only view — contact the captain to change game info.

)}

); } export default function App() { const { useLiveQuery, useDocument, database } = useFireproof("game-on"); const { docs: players } = useLiveQuery("type", { key: "player" }); const { docs: games } = useLiveQuery("type", { key: "game", limit: 1 }); const game = games[0]; const inCount = players.filter(p => p.status === "in").length; const outCount = players.filter(p => p.status === "out").length; const pendingCount = players.filter(p => !p.status || p.status === "pending").length; const c = { page: "min-h-screen bg-[oklch(0.22_0.05_163)] text-[oklch(0.95_0.01_100)] font-['Space_Grotesk',sans-serif]", header: "sticky top-0 bg-[oklch(0.27_0.055_163)] border-b border-[oklch(0.39_0.065_165)] px-4 py-4 z-10", title: "text-2xl font-bold tracking-tight", tagline: "text-sm text-[oklch(0.55_0.04_165)] mt-1", main: "max-w-2xl mx-auto px-4 py-5 space-y-5 pb-24", section: "bg-[oklch(0.27_0.055_163)] border border-[oklch(0.39_0.065_165)] rounded-xl p-5", h2: "text-lg font-semibold mb-3", label: "block text-xs uppercase tracking-wide text-[oklch(0.55_0.04_165)] mb-1", input: "w-full bg-[oklch(0.22_0.05_163)] border border-[oklch(0.39_0.065_165)] rounded-lg px-3 py-3 text-[oklch(0.95_0.01_100)] min-h-[44px]", btn: "bg-[oklch(0.86_0.18_90)] text-[oklch(0.20_0.04_163)] font-semibold rounded-lg px-4 py-3 min-h-[44px] w-full", btnGhost: "bg-transparent border border-[oklch(0.39_0.065_165)] text-[oklch(0.95_0.01_100)] rounded-lg px-3 py-2 min-h-[40px]", row: "flex items-center justify-between gap-3 py-3 border-b border-[oklch(0.39_0.065_165)] last:border-b-0", pill: "px-3 py-1.5 rounded-full text-xs font-semibold font-['Space_Mono',monospace]", muted: "text-[oklch(0.55_0.04_165)] text-sm", countBig: "text-5xl font-bold text-[oklch(0.86_0.18_90)] font-['Space_Mono',monospace]", }; return (

Headcount

{inCount}

confirmed in

{outCount} out · {pendingCount} pending

); }