/** @jsxImportSource https://esm.sh/react */ import confetti from "https://esm.sh/canvas-confetti"; import React, { useEffect, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function slugify(text: string): string { return text .toLowerCase() .trim() .replace(/[^\w\s-]/g, "") .replace(/[\s_-]+/g, "-") .replace(/^-+|-+$/g, ""); } function shuffleArray(array: T[]): T[] { const newArray = [...array]; for (let i = newArray.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [newArray[i], newArray[j]] = [newArray[j], newArray[i]]; } return newArray; } function CreateGame() { const [name, setName] = useState(""); const [terms, setTerms] = useState(""); const termCount = terms.split("\n").filter(t => t.trim()).length; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); const termsList = terms.split("\n").filter(t => t.trim()); if (termsList.length < 24) { alert("Please enter at least 24 terms (one per line)"); return; } if (!name.trim()) { alert("Please enter a game name"); return; } const response = await fetch("/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: name.trim(), terms: termsList.slice(0, 24), }), }); const { gameId } = await response.json(); window.location.href = `/${gameId}`; }; return (

Create Bingo Game

setName(e.target.value)} placeholder="Enter game name" className="name-input" required />

Terms: {termCount}/24 {termCount >= 24 ? "✅" : ""}

setTerms(e.target.value)}
          placeholder="Enter terms (one per line)"
          rows={10}
          required
        />
        <button type="submit" disabled={termCount < 24 || !name.trim()}>Create Game</button>
      </form>
    </div>
  );
}

const checkBingo = (newChecked: boolean[]) => {
    if (hasBingo) return false; // Don't recheck if already won

// Check rows
    for (let i = 0; i < 5; i++) {
      if (newChecked.slice(i * 5, (i + 1) * 5).every(Boolean)) {
        return true;
      }
    }

// Check columns
    for (let i = 0; i < 5; i++) {
      if ([0, 1, 2, 3, 4].every(j => newChecked[j * 5 + i])) {
        return true;
      }
    }

// Check diagonals
    if ([0, 6, 12, 18, 24].every(i => newChecked[i])) {
      return true;
    }
    if ([4, 8, 12, 16, 20].every(i => newChecked[i])) {
      return true;
    }

return false;
  };

const celebrateBingo = async () => {
    confetti({
      particleCount: 100,
      spread: 70,
      origin: { y: 0.6 },
    });

// Fire again from the sides after a small delay
    setTimeout(() => {
      confetti({ particleCount: 50, angle: 60, spread: 80, origin: { x: 0 } });
      confetti({ particleCount: 50, angle: 120, spread: 80, origin: { x: 1 } });
    }, 250);

// Record the win
    await fetch("/record-win", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        gameId,
        playerId,
        playerName: playerName || "Anonymous Player",
      }),
    });
  };

useEffect(() => {
    const shuffled = shuffleArray(terms.slice(0, 24)); // Only take first 24 terms
    shuffled.splice(12, 0, "FREE");
    setShuffledTerms(shuffled);
  }, [terms]);

useEffect(() => {
    // Load saved state
    const saved = localStorage.getItem(`bingo-${gameId}-${playerId}`);
    if (saved) {
      const savedChecked = JSON.parse(saved);
      savedChecked[12] = true; // Ensure FREE is always checked
      setChecked(savedChecked);
      // Check if loaded state has a bingo
      if (checkBingo(savedChecked)) {
        setHasBingo(true);
      }
    }
  }, [gameId, playerId]);

const toggleCheck = (index: number) => {
    if (index === 12) return; // Prevent unchecking FREE space
    const newChecked = [...checked];
    newChecked[index] = !newChecked[index];

if (checkBingo(newChecked)) {
      setHasBingo(true);
      celebrateBingo();
    }
    setChecked(newChecked);
    localStorage.setItem(`bingo-${gameId}-${playerId}`, JSON.stringify(newChecked));
  };

return (
    <div className="container">
      <h2>{name}</h2>
      <div className="player-name-input">
        <input
          type="text"
          value={playerName}
          onChange={handleNameChange}
          placeholder="Enter your name"
          className="name-input"
        />
      </div>
      {hasBingo && <div className="bingo-winner">🎉 BINGO! 🎉</div>}
      <div className="bingo-card">
        {shuffledTerms.map((term, i) => (
          <div
            key={i}
            className={`bingo-cell ${checked[i] ? "checked" : ""}`}
            onClick={() => toggleCheck(i)}
          >
            {term}
          </div>
        ))}
      </div>
      <div className="share-link">
        Share this game: <input readOnly value={window.location.origin + "/" + gameId} />
      </div>
    </div>
  );
}

function AdminPanel() {
  const [games, setGames] = useState<
    Array<{
      id: string;
      name: string;
      winners: Array<{
        playerName: string;
        timestamp: string;
      }>;
    }>
  >([]);

useEffect(() => {
    fetchGames();
  }, []);

const fetchGames = async () => {
    const response = await fetch("/admin/games");
    const data = await response.json();
    setGames(data);
  };

const deleteAllGames = async () => {
    if (!confirm("Delete ALL games? This cannot be undone!")) return;
    await fetch("/admin/games", { method: "DELETE" });
    fetchGames();
  };

return (
    <div className="container">
      <h1>Admin Panel</h1>
      <div className="admin-header">
        <div>{games.length} games total</div>
        <button
          onClick={deleteAllGames}
          className="delete-all"
        >
          Delete All Games
        </button>
      </div>
      <div className="admin-list">
        {games.map(game => (
          <div key={game.id} className="admin-item">
            <div className="admin-item-info">
              <strong>{game.name}</strong>
              <a href={`/${game.id}`} target="_blank">/{game.id}</a>
              {game.winners.length > 0 && (
                <ol className="winners-list">
                  <h4>Winners:</h4>
                  {game.winners.sort((a, b) => new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime()).map((
                    winner,
                    i,
                  ) => (
                    <li key={i} className="winner-entry" title={new Date(winner.timestamp).toLocaleString()}>
                      {winner.playerName}
                    </li>
                  ))}
                </ol>
              )}
            </div>
            <button
              onClick={() => deleteGame(game.id)}
              className="delete-game"
            >
              Delete
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

function client() {
  const root = document.getElementById("root");
  if (!root) return;

const isCreate = root.dataset.create === "true";
  const isAdmin = root.dataset.admin === "true";

if (isAdmin) {
    createRoot(root).render(<AdminPanel />);
    return;
  }

if (isCreate) {
    createRoot(root).render(<CreateGame />);
    return;
  }

// Only check for these props if we're not on the create or admin page
  if (!root.dataset.terms) return;
  const terms = JSON.parse(root.dataset.terms);
  const gameId = root.dataset.gameId || "";
  const playerId = root.dataset.playerId || "";
  const name = root.dataset.name || "Bingo Game";

createRoot(root).render(
    <BingoCard gameId={gameId} playerId={playerId} name={name} terms={terms} />,
  );
}

if (typeof document !== "undefined") { client(); }

export default async function server(req: Request): Promise<Response> {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const url = new URL(req.url);
  const KEY = new URL(import.meta.url).pathname.split("/").at(-1);

// Create tables if they don't exist
  await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${KEY}_games_v2 (
      id TEXT PRIMARY KEY,
      name TEXT NOT NULL,
      terms TEXT NOT NULL
    )
  `);

await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${KEY}_winners (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      game_id TEXT NOT NULL,
      player_id TEXT NOT NULL,
      player_name TEXT NOT NULL,
      timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
      FOREIGN KEY (game_id) REFERENCES ${KEY}_games_v2(id) ON DELETE CASCADE
    )
  `);

if (req.method === "POST" && url.pathname === "/record-win") {
    const { gameId, playerId, playerName } = await req.json();
    await sqlite.execute(
      `INSERT INTO ${KEY}_winners (game_id, player_id, player_name) VALUES (?, ?, ?)`,
      [gameId, playerId, playerName],
    );
    return new Response(null, { status: 204 });
  }

// Admin routes
  if (url.pathname === "/admin") {
    return new Response(
      `
      <!DOCTYPE html>
      <html>
        <head>
          <title>Admin - Bingo Games</title>
          <style>${css}</style>
        </head>
        <body>
          <div id="root" data-admin="true"></div>
          <script src="https://esm.town/v/std/catch"></script>
          <script type="module" src="${import.meta.url}"></script>
        </body>
      </html>
    `,
      { headers: { "Content-Type": "text/html" } },
    );
  }

if (url.pathname === "/admin/games") {
    if (req.method === "GET") {
      const games = await sqlite.execute(`
        SELECT 
          g.id, 
          g.name,
          json_group_array(
            json_object(
              'playerName', w.player_name,
              'timestamp', w.timestamp
            )
          ) as winners
        FROM ${KEY}_games_v2 g
        LEFT JOIN ${KEY}_winners w ON g.id = w.game_id
        GROUP BY g.id
        ORDER BY g.id
      `);

// Parse the winners JSON string and filter out null entries
      const processedGames = games.rows.map(game => ({
        ...game,
        winners: JSON.parse(game.winners).filter((w: any) => w.playerName !== null),
      }));

return Response.json(processedGames);
    }

if (req.method === "DELETE") {
      await sqlite.execute(`DELETE FROM ${KEY}_winners`);
      await sqlite.execute(`DELETE FROM ${KEY}_games_v2`);
      return new Response(null, { status: 204 });
    }
  }

if (url.pathname.startsWith("/admin/games/")) {
    if (req.method === "DELETE") {
      const gameId = url.pathname.split("/").pop();
      await sqlite.execute(
        `DELETE FROM ${KEY}_winners WHERE game_id = ?`,
        [gameId],
      );
      await sqlite.execute(
        `DELETE FROM ${KEY}_games_v2 WHERE id = ?`,
        [gameId],
      );
      return new Response(null, { status: 204 });
    }
  }

if (req.method === "POST" && url.pathname === "/create") {
    const { name, terms } = await req.json();
    const gameId = slugify(name);
    await sqlite.execute(
      `INSERT INTO ${KEY}_games_v2 (id, name, terms) VALUES (?, ?, ?)`,
      [gameId, name, JSON.stringify(terms)],
    );
    return Response.json({ gameId });
  }

const gameId = url.pathname.slice(1);
  if (!gameId) {
    return new Response(
      `
      <!DOCTYPE html>
      <html>
        <head>
          <title>Create Bingo Game</title>
          <style>${css}</style>
        </head>
        <body>
          <div id="root" data-create="true"></div>
          <script src="https://esm.town/v/std/catch"></script>
          <script type="module" src="${import.meta.url}"></script>
        </body>
      </html>
    `,
      { headers: { "Content-Type": "text/html" } },
    );
  }

const game = (await sqlite.execute(
    `SELECT name, terms FROM ${KEY}_games_v2 WHERE id = ?`,
    [gameId],
  )).rows[0];

if (!game) {
    return new Response("Game not found", { status: 404 });
  }

const playerId = Math.random().toString(36).slice(2, 8);
  const terms = JSON.parse(game.terms);

return new Response(
    `
    <!DOCTYPE html>
    <html>
      <head>
        <title>${game.name} - Bingo Game</title>
        <style>${css}</style>
      </head>
      <body>
        <div id="root" 
          data-terms='${JSON.stringify(terms)}'
          data-game-id="${gameId}"
          data-name="${game.name}"
          data-player-id="${playerId}"
        ></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    { headers: { "Content-Type": "text/html" } },
  );
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }
  
  .admin-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .admin-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  
  .admin-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .admin-item-info a {
    color: #666;
    text-decoration: none;
  }
  
  .admin-item-info a:hover {
    text-decoration: underline;
  }
  
  .delete-game {
    background: #dc3545;
  }
  
  .delete-game:hover {
    background: #c82333;
  }
  
  .delete-all {
    background: #dc3545;
  }
  
  .delete-all:hover {
    background: #c82333;
  }

.bingo-winner {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #4CAF50;
    margin: 1rem 0;
    animation: bounce 1s infinite;
  }
  
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

.player-name-input {
    margin: 1rem 0;
  }

.winners-list {
    margin-top: 1rem;
    padding: 0.5rem;
    background: #f8f9fa;
    border-radius: 4px;
  }

.winners-list h4 {
    margin: 0 0 0.5rem 0;
    color: #4CAF50;
  }

.winner-entry {
    font-size: 0.9rem;
    color: #666;
    margin: 0.25rem 0;
  }
`;</article></body></html>

bingo

Version 26