[V0_FILE]typescriptreact:file="app/page.tsx" import BingoGame from "@/components/bingo-game" export default function Home() { return (

Bingo Game

) } [V0_FILE]typescriptreact:file="components/number-caller.tsx" "use client" import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll-area" interface NumberCallerProps { currentNumber: string | null calledNumbers: string[] onCallNumber: () => void onNewGame: () => void gameStarted: boolean } export default function NumberCaller({ currentNumber, calledNumbers, onCallNumber, onNewGame, gameStarted, }: NumberCallerProps) { return (

Number Caller

{currentNumber || "?"}

Called Numbers

{gameStarted ? (

{calledNumbers.map((number, index) => (

{number}

))}

) : (

No numbers called yet. Click "Call Number" to start the game.

)}

) } [V0_FILE]typescriptreact:file="components/winner-modal.tsx" "use client" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" interface WinnerModalProps { onClose: () => void onNewGame: () => void } export default function WinnerModal({ onClose, onNewGame }: WinnerModalProps) { const handleNewGame = () => { onNewGame() onClose() } return ( ) } [V0_FILE]typescriptreact:file="lib/bingo-utils.ts" export function generateBingoCard(): string[][] { // Create empty 5x5 card const card: string[][] = Array(5) .fill(null) .map(() => Array(5).fill("")) // Generate columns with appropriate number ranges // B: 1-15, I: 16-30, N: 31-45, G: 46-60, O: 61-75 for (let col = 0; col < 5; col++) { const min = col * 15 + 1 const max = min + 14 const letter = "BINGO"[col] // Generate unique numbers for this column const usedNumbers = new Set() for (let row = 0; row < 5; row++) { // Skip the center free space if (col === 2 && row === 2) { card[row][col] = "FREE" continue } let num: number do { num = Math.floor(Math.random() * (max - min + 1)) + min } while (usedNumbers.has(num)) usedNumbers.add(num) card[row][col] = `${letter}${num}` } } return card } [V0_FILE]typescriptreact:file="components/bingo-card.tsx" isQuickEdit="true" "use client" import { cn } from "@/lib/utils" interface BingoCardProps { card: string[][] markedCells: boolean[][] onToggleCell: (row: number, col: number) => void calledNumbers: string[] // Add this line } export default function BingoCard({ card, markedCells, onToggleCell, calledNumbers }: BingoCardProps) { const headers = ["B", "I", "N", "G", "O"] return (

{headers.map((header, index) => (

{header}

))}

{card.map((row, rowIndex) => row.map((cell, colIndex) => ( )), )}

) } [V0_FILE]typescriptreact:file="components/bingo-game.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card } from "@/components/ui/card" import BingoCard from "./bingo-card" import NumberCaller from "./number-caller" import WinnerModal from "./winner-modal" import { generateBingoCard } from "@/lib/bingo-utils" export default function BingoGame() { const [card, setCard] = useState([]) const [markedCells, setMarkedCells] = useState([]) const [calledNumbers, setCalledNumbers] = useState([]) const [currentNumber, setCurrentNumber] = useState(null) const [isWinner, setIsWinner] = useState(false) const [gameStarted, setGameStarted] = useState(false) const [showWinnerModal, setShowWinnerModal] = useState(false) // Initialize the game useEffect(() => { newGame() }, []) // Check for win conditions whenever marked cells change useEffect(() => { if (markedCells.length > 0 && checkForWin()) { setIsWinner(true) setShowWinnerModal(true) } }, [markedCells]) const newGame = () => { const newCard = generateBingoCard() setCard(newCard) // Initialize all cells as unmarked except the center free space const initialMarkedCells = Array(5) .fill(null) .map((_, rowIndex) => Array(5) .fill(false) .map((_, colIndex) => (rowIndex === 2 && colIndex === 2 ? true : false)), ) setMarkedCells(initialMarkedCells) setCalledNumbers([]) setCurrentNumber(null) setIsWinner(false) setGameStarted(false) } const callNumber = () => { if (!gameStarted) { setGameStarted(true) } // Generate all possible bingo numbers const allPossibleNumbers = [ ...Array.from({ length: 15 }, (_, i) => `B${i + 1}`), ...Array.from({ length: 15 }, (_, i) => `I${i + 16}`), ...Array.from({ length: 15 }, (_, i) => `N${i + 31}`), ...Array.from({ length: 15 }, (_, i) => `G${i + 46}`), ...Array.from({ length: 15 }, (_, i) => `O${i + 61}`), ] // Filter out already called numbers const availableNumbers = allPossibleNumbers.filter((num) => !calledNumbers.includes(num)) if (availableNumbers.length === 0) { setCurrentNumber("All numbers called!") return } // Pick a random number from available numbers const randomIndex = Math.floor(Math.random() * availableNumbers.length) const newNumber = availableNumbers[randomIndex] setCurrentNumber(newNumber) setCalledNumbers((prev) => [...prev, newNumber]) } const toggleCell = (row: number, col: number) => { if (row === 2 && col === 2) return // Don't toggle the free space const cellValue = card[row][col] // Only allow marking if the number has been called if (!calledNumbers.includes(cellValue)) { return } const newMarkedCells = [...markedCells] newMarkedCells[row][col] = !newMarkedCells[row][col] setMarkedCells(newMarkedCells) } const checkForWin = () => { // Check rows for (let row = 0; row < 5; row++) { if (markedCells[row].every((cell) => cell)) { return true } } // Check columns for (let col = 0; col < 5; col++) { if (markedCells.every((row) => row[col])) { return true } } // Check diagonal (top-left to bottom-right) if (markedCells[0][0] && markedCells[1][1] && markedCells[2][2] && markedCells[3][3] && markedCells[4][4]) { return true } // Check diagonal (top-right to bottom-left) if (markedCells[0][4] && markedCells[1][3] && markedCells[2][2] && markedCells[3][1] && markedCells[4][0]) { return true } return false } return (

Your Bingo Card

{showWinnerModal && setShowWinnerModal(false)} onNewGame={newGame} />}

) }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This