[V0_FILE]typescriptreact:file="number-selector.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Check } from "lucide-react" export default function NumberSelector() { const [calledNumbers, setCalledNumbers] = useState([]) const [inputValue, setInputValue] = useState("") // First, let's update the state to include a 2D grid structure and track completed lines // Replace the numberBoxes state with: const [grid, setGrid] = useState(() => { // Generate a 5x5 grid of random numbers const numbers = Array.from({ length: 75 }, (_, i) => i + 1) .sort(() => Math.random() - 0.5) .slice(0, 25) // Convert to 5x5 grid return Array.from({ length: 5 }, (_, i) => numbers.slice(i * 5, (i + 1) * 5)) }) // Add new state for tracking completed lines const [completedLines, setCompletedLines] = useState<{ rows: number[] columns: number[] diagonals: number[] }>({ rows: [], columns: [], diagonals: [], }) // Function to call a number // Update the callNumber function to check for completed lines: const callNumber = () => { const num = Number.parseInt(inputValue) if (!isNaN(num) && num > 0 && !calledNumbers.includes(num)) { const newCalledNumbers = [...calledNumbers, num] setCalledNumbers(newCalledNumbers) setInputValue("") checkCompletedLines(newCalledNumbers) } } // Add a function to check for completed lines after a number is called // Add this after the callNumber function: const checkCompletedLines = (newCalledNumbers: number[]) => { const newCompletedLines = { rows: [...completedLines.rows], columns: [...completedLines.columns], diagonals: [...completedLines.diagonals], } // Check rows grid.forEach((row, rowIndex) => { if (!newCompletedLines.rows.includes(rowIndex) && row.every((num) => newCalledNumbers.includes(num))) { newCompletedLines.rows.push(rowIndex) } }) // Check columns for (let col = 0; col < 5; col++) { if (!newCompletedLines.columns.includes(col) && grid.every((row) => newCalledNumbers.includes(row[col]))) { newCompletedLines.columns.push(col) } } // Check main diagonal (top-left to bottom-right) if (!newCompletedLines.diagonals.includes(0) && grid.every((row, i) => newCalledNumbers.includes(row[i]))) { newCompletedLines.diagonals.push(0) } // Check other diagonal (top-right to bottom-left) if (!newCompletedLines.diagonals.includes(1) && grid.every((row, i) => newCalledNumbers.includes(row[4 - i]))) { newCompletedLines.diagonals.push(1) } setCompletedLines(newCompletedLines) } // Function to check if a number has been called const isNumberCalled = (num: number) => { return calledNumbers.includes(num) } // Function to reset the game // Replace the resetGame function with: const resetGame = () => { setCalledNumbers([]) // Shuffle the number boxes const numbers = Array.from({ length: 75 }, (_, i) => i + 1) .sort(() => Math.random() - 0.5) .slice(0, 25) // Convert to 5x5 grid setGrid(Array.from({ length: 5 }, (_, i) => numbers.slice(i * 5, (i + 1) * 5))) // Reset completed lines setCompletedLines({ rows: [], columns: [], diagonals: [], }) } return (

Number Selector

setInputValue(e.target.value)} onKeyDown={(e) => e.key === "Enter" && callNumber()} className="flex-1" />

{calledNumbers.length > 0 ? ( calledNumbers.map((num) => ( {num} )) ) : (

No numbers called yet

)}

{/* Replace the grid rendering section with: */}

{grid.map((row, rowIndex) => row.map((num, colIndex) => { const called = isNumberCalled(num) const isInCompletedRow = completedLines.rows.includes(rowIndex) const isInCompletedColumn = completedLines.columns.includes(colIndex) const isInCompletedDiagonal1 = completedLines.diagonals.includes(0) && rowIndex === colIndex const isInCompletedDiagonal2 = completedLines.diagonals.includes(1) && rowIndex === 4 - colIndex const isInCompletedLine = isInCompletedRow || isInCompletedColumn || isInCompletedDiagonal1 || isInCompletedDiagonal2 return (

{num} {called && }

) }), )} {/* Horizontal line indicators */} {completedLines.rows.map((rowIndex) => (

))} {/* Vertical line indicators */} {completedLines.columns.map((colIndex) => (

))} {/* Diagonal line indicators */} {completedLines.diagonals.includes(0) && (

)} {completedLines.diagonals.includes(1) && (

)}

{/* Add a section to display bingo status */}

{completedLines.rows.length > 0 || completedLines.columns.length > 0 || completedLines.diagonals.length > 0 ? (

BINGO!{" "} {completedLines.rows.length + completedLines.columns.length + completedLines.diagonals.length} line(s) completed

) : null}

) }

About

Tags

Share

About

Tags

Share

More from wooder2050

More Templates Like This

About

Tags

Share

About

Tags

Share

More from wooder2050

More Templates Like This