Create Bingo Game

\n );\n}\n\nfunction BingoCard(\n { gameId, playerId, name, terms }: { gameId: string; playerId: string; name: string; terms: string[] },\n) {\n const [checked, setChecked] = useState(() => {\n const initial = Array(25).fill(false);\n initial[12] = true; // Pre-check the FREE space\n return initial;\n });\n const [shuffledTerms, setShuffledTerms] = useState([]);\n const [hasBingo, setHasBingo] = useState(false);\n const [playerName, setPlayerName] = useState(() => localStorage.getItem(`player-name-${gameId}-${playerId}`) || \"\");\n\n const checkBingo = (newChecked: boolean[]) => {\n if (hasBingo) return false; // Don't recheck if already won\n\n // Check rows\n for (let i = 0; i < 5; i++) {\n if (newChecked.slice(i * 5, (i + 1) * 5).every(Boolean)) {\n return true;\n }\n }\n\n // Check columns\n for (let i = 0; i < 5; i++) {\n if ([0, 1, 2, 3, 4].every(j => newChecked[j * 5 + i])) {\n return true;\n }\n }\n\n // Check diagonals\n if ([0, 6, 12, 18, 24].every(i => newChecked[i])) {\n return true;\n }\n if ([4, 8, 12, 16, 20].every(i => newChecked[i])) {\n return true;\n }\n\n return false;\n };\n\n const celebrateBingo = async () => {\n confetti({\n particleCount: 100,\n spread: 70,\n origin: { y: 0.6 },\n });\n\n // Fire again from the sides after a small delay\n setTimeout(() => {\n confetti({ particleCount: 50, angle: 60, spread: 80, origin: { x: 0 } });\n confetti({ particleCount: 50, angle: 120, spread: 80, origin: { x: 1 } });\n }, 250);\n\n // Record the win\n await fetch(\"/record-win\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n gameId,\n playerId,\n playerName: playerName || \"Anonymous Player\",\n }),\n });\n };\n\n useEffect(() => {\n const shuffled = shuffleArray(terms.slice(0, 24)); // Only take first 24 terms\n shuffled.splice(12, 0, \"FREE\");\n setShuffledTerms(shuffled);\n }, [terms]);\n\n useEffect(() => {\n // Load saved state\n const saved = localStorage.getItem(`bingo-${gameId}-${playerId}`);\n if (saved) {\n const savedChecked = JSON.parse(saved);\n savedChecked[12] = true; // Ensure FREE is always checked\n setChecked(savedChecked);\n // Check if loaded state has a bingo\n if (checkBingo(savedChecked)) {\n setHasBingo(true);\n }\n }\n }, [gameId, playerId]);\n\n const toggleCheck = (index: number) => {\n if (index === 12) return; // Prevent unchecking FREE space\n const newChecked = [...checked];\n newChecked[index] = !newChecked[index];\n\n if (checkBingo(newChecked)) {\n setHasBingo(true);\n celebrateBingo();\n }\n setChecked(newChecked);\n localStorage.setItem(`bingo-${gameId}-${playerId}`, JSON.stringify(newChecked));\n };\n\n const handleNameChange = (e: React.ChangeEvent) => {\n const newName = e.target.value;\n setPlayerName(newName);\n localStorage.setItem(`player-name-${gameId}-${playerId}`, newName);\n };\n\n return (\n

{name}

\n \n

\n {hasBingo &&

🎉 BINGO! 🎉

}\n

\n {shuffledTerms.map((term, i) => (\n toggleCheck(i)}\n >\n {term}\n

\n ))}\n

\n Share this game: \n

\n \n );\n}\n\nfunction AdminPanel() {\n const [games, setGames] = useState<\n Array<{\n id: string;\n name: string;\n winners: Array<{\n playerName: string;\n timestamp: string;\n }>;\n }>\n >([]);\n\n useEffect(() => {\n fetchGames();\n }, []);\n\n const fetchGames = async () => {\n const response = await fetch(\"/admin/games\");\n const data = await response.json();\n setGames(data);\n };\n\n const deleteGame = async (id: string) => {\n if (!confirm(`Delete game \"${games.find(g => g.id === id)?.name}\"?`)) return;\n await fetch(`/admin/games/${id}`, { method: \"DELETE\" });\n fetchGames();\n };\n\n const deleteAllGames = async () => {\n if (!confirm(\"Delete ALL games? This cannot be undone!\")) return;\n await fetch(\"/admin/games\", { method: \"DELETE\" });\n fetchGames();\n };\n\n return (\n

Admin Panel

{games.length} games total

\n \n Delete All Games\n \n

\n {games.map(game => (\n

\n {game.name}\n /{game.id}\n {game.winners.length > 0 && (\n

Winners:

\n {winner.playerName}\n

\n )}\n

\n deleteGame(game.id)}\n className=\"delete-game\"\n >\n Delete\n \n

\n ))}\n

\n );\n}\n\nfunction client() {\n const root = document.getElementById(\"root\");\n if (!root) return;\n\n const isCreate = root.dataset.create === \"true\";\n const isAdmin = root.dataset.admin === \"true\";\n\n if (isAdmin) {\n createRoot(root).render();\n return;\n }\n\n if (isCreate) {\n createRoot(root).render();\n return;\n }\n\n // Only check for these props if we're not on the create or admin page\n if (!root.dataset.terms) return;\n const terms = JSON.parse(root.dataset.terms);\n const gameId = root.dataset.gameId || \"\";\n const playerId = root.dataset.playerId || \"\";\n const name = root.dataset.name || \"Bingo Game\";\n\n createRoot(root).render(\n ,\n );\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(req: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const url = new URL(req.url);\n const KEY = \"bingo\";\n\n // Create tables if they don't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_games_v2 (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n terms TEXT NOT NULL\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_winners (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n game_id TEXT NOT NULL,\n player_id TEXT NOT NULL,\n player_name TEXT NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,\n FOREIGN KEY (game_id) REFERENCES ${KEY}_games_v2(id) ON DELETE CASCADE\n )\n `);\n\n if (req.method === \"POST\" && url.pathname === \"/record-win\") {\n const { gameId, playerId, playerName } = await req.json();\n await sqlite.execute(\n `INSERT INTO ${KEY}_winners (game_id, player_id, player_name) VALUES (?, ?, ?)`,\n [gameId, playerId, playerName],\n );\n return new Response(null, { status: 204 });\n }\n\n // Admin routes\n if (url.pathname === \"/admin\") {\n return new Response(\n `\n \n \n \n Admin - Bingo Games\n \n \n \n

\n \n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n\n if (url.pathname === \"/admin/games\") {\n if (req.method === \"GET\") {\n const games = await sqlite.execute(`\n SELECT \n g.id, \n g.name,\n json_group_array(\n json_object(\n 'playerName', w.player_name,\n 'timestamp', w.timestamp\n )\n ) as winners\n FROM ${KEY}_games_v2 g\n LEFT JOIN ${KEY}_winners w ON g.id = w.game_id\n GROUP BY g.id\n ORDER BY g.id\n `);\n\n // Parse the winners JSON string and filter out null entries\n const processedGames = games.rows.map(game => ({\n ...game,\n winners: JSON.parse(game.winners).filter((w: any) => w.playerName !== null),\n }));\n\n return Response.json(processedGames);\n }\n\n if (req.method === \"DELETE\") {\n await sqlite.execute(`DELETE FROM ${KEY}_winners`);\n await sqlite.execute(`DELETE FROM ${KEY}_games_v2`);\n return new Response(null, { status: 204 });\n }\n }\n\n if (url.pathname.startsWith(\"/admin/games/\")) {\n if (req.method === \"DELETE\") {\n const gameId = url.pathname.split(\"/\").pop();\n await sqlite.execute(\n `DELETE FROM ${KEY}_winners WHERE game_id = ?`,\n [gameId],\n );\n await sqlite.execute(\n `DELETE FROM ${KEY}_games_v2 WHERE id = ?`,\n [gameId],\n );\n return new Response(null, { status: 204 });\n }\n }\n\n if (req.method === \"POST\" && url.pathname === \"/create\") {\n const { name, terms } = await req.json();\n const gameId = slugify(name);\n await sqlite.execute(\n `INSERT INTO ${KEY}_games_v2 (id, name, terms) VALUES (?, ?, ?)`,\n [gameId, name, JSON.stringify(terms)],\n );\n return Response.json({ gameId });\n }\n\n const gameId = url.pathname.slice(1);\n if (!gameId) {\n return new Response(\n `\n \n \n \n Create Bingo Game\n \n \n \n

\n \n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n }\n\n const game = (await sqlite.execute(\n `SELECT name, terms FROM ${KEY}_games_v2 WHERE id = ?`,\n [gameId],\n )).rows[0];\n\n if (!game) {\n return new Response(\"Game not found\", { status: 404 });\n }\n\n const playerId = Math.random().toString(36).slice(2, 8);\n const terms = JSON.parse(game.terms);\n\n return new Response(\n `\n \n \n \n ${game.name} - Bingo Game\n \n \n \n

\n \n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}\n\nconst css = `\n body {\n margin: 0;\n font-family: system-ui, sans-serif;\n background: #f0f0f0;\n }\n .container {\n max-width: 800px;\n margin: 2rem auto;\n padding: 0 1rem;\n }\n .bingo-card {\n display: grid;\n grid-template-columns: repeat(5, 1fr);\n gap: 8px;\n margin: 2rem 0;\n }\n .bingo-cell {\n aspect-ratio: 1;\n background: white;\n border: 2px solid #333;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 8px;\n text-align: center;\n cursor: pointer;\n font-size: 0.9rem;\n transition: background-color 0.2s;\n }\n .bingo-cell.checked {\n background: #4CAF50;\n color: white;\n }\n .terms-input, .name-input {\n width: 100%;\n border: 1px solid #ccc;\n border-radius: 4px;\n padding: 8px;\n margin: 0.5rem 0;\n }\n \n .terms-input {\n min-height: 200px;\n resize: vertical;\n }\n \n .terms-input:focus, .name-input:focus {\n outline: none;\n border-color: #4CAF50;\n }\n \n button {\n background: #4CAF50;\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n cursor: pointer;\n border-radius: 4px;\n }\n \n button:disabled {\n background: #ccc;\n cursor: not-allowed;\n }\n \n .term-count {\n margin-bottom: 0.5rem;\n font-size: 0.9rem;\n color: #666;\n }\n \n .input-group {\n margin-bottom: 1rem;\n }\n \n .share-link {\n margin-top: 1rem;\n }\n \n .share-link input {\n width: 100%;\n padding: 0.5rem;\n margin-top: 0.5rem;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n\n .admin-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 2rem;\n }\n \n .admin-list {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n }\n \n .admin-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem;\n background: white;\n border-radius: 4px;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n }\n \n .admin-item-info {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n }\n \n .admin-item-info a {\n color: #666;\n text-decoration: none;\n }\n \n .admin-item-info a:hover {\n text-decoration: underline;\n }\n \n .delete-game {\n background: #dc3545;\n }\n \n .delete-game:hover {\n background: #c82333;\n }\n \n .delete-all {\n background: #dc3545;\n }\n \n .delete-all:hover {\n background: #c82333;\n }\n\n .bingo-winner {\n text-align: center;\n font-size: 1.5rem;\n font-weight: bold;\n color: #4CAF50;\n margin: 1rem 0;\n animation: bounce 1s infinite;\n }\n \n @keyframes bounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n\n .player-name-input {\n margin: 1rem 0;\n }\n\n .winners-list {\n margin-top: 1rem;\n padding: 0.5rem;\n background: #f8f9fa;\n border-radius: 4px;\n }\n\n .winners-list h4 {\n margin: 0 0 0.5rem 0;\n color: #4CAF50;\n }\n\n .winner-entry {\n font-size: 0.9rem;\n color: #666;\n margin: 0.25rem 0;\n }\n`;","deleted","label",[98],"permalink","https://www.val.town/x/nn/bingo/code/main.tsx","extension","actionData","errors"]