import pageData from "~/data/minesweeper.json"; export function MinesweeperGame() { const { data, updateData } = useData(pageData); const [gameState, setGameState] = React.useState('playing'); // 'playing', 'won', 'lost' const [firstClick, setFirstClick] = React.useState(true); const [showWinAnimation, setShowWinAnimation] = React.useState(false); const ROWS = 12; const COLS = 12; const MINES = 20; // Initialize empty board if not exists const initBoard = () => { const board = []; for (let i = 0; i < ROWS; i++) { board[i] = []; for (let j = 0; j < COLS; j++) { board[i][j] = { isMine: false, isRevealed: false, isFlagged: false, neighborCount: 0 }; } } return board; }; const board = (data.board && data.board.length > 0) ? data.board : initBoard(); // Place mines randomly const placeMines = (board, firstRow, firstCol) => { const newBoard = board.map(row => row.map(cell => ({ ...cell }))); let minesPlaced = 0; while (minesPlaced < MINES) { const row = Math.floor(Math.random() * ROWS); const col = Math.floor(Math.random() * COLS); // Don't place mine on first click or if already has mine if ((row === firstRow && col === firstCol) || newBoard[row][col].isMine) { continue; } newBoard[row][col].isMine = true; minesPlaced++; } // Calculate neighbor counts for (let i = 0; i < ROWS; i++) { for (let j = 0; j < COLS; j++) { if (!newBoard[i][j].isMine) { let count = 0; for (let di = -1; di <= 1; di++) { for (let dj = -1; dj <= 1; dj++) { const ni = i + di; const nj = j + dj; if (ni >= 0 && ni < ROWS && nj >= 0 && nj < COLS && newBoard[ni][nj].isMine) { count++; } } } newBoard[i][j].neighborCount = count; } } } return newBoard; }; // Reveal cell and adjacent empty cells const revealCell = (board, row, col) => { const newBoard = board.map(row => row.map(cell => ({ ...cell }))); const reveal = (r, c) => { if (r < 0 || r >= ROWS || c < 0 || c >= COLS || newBoard[r][c].isRevealed || newBoard[r][c].isFlagged) { return; } newBoard[r][c].isRevealed = true; // If empty cell, reveal neighbors if (newBoard[r][c].neighborCount === 0 && !newBoard[r][c].isMine) { for (let di = -1; di <= 1; di++) { for (let dj = -1; dj <= 1; dj++) { reveal(r + di, c + dj); } } } }; reveal(row, col); return newBoard; }; const handleCellClick = (row, col) => { if (gameState !== 'playing' || board[row][col].isRevealed || board[row][col].isFlagged) { return; } let newBoard = board; // Place mines on first click if (firstClick) { newBoard = placeMines(board, row, col); setFirstClick(false); } // Reveal cell newBoard = revealCell(newBoard, row, col); // Check if hit mine if (newBoard[row][col].isMine) { setGameState('lost'); // Reveal all mines for (let i = 0; i < ROWS; i++) { for (let j = 0; j < COLS; j++) { if (newBoard[i][j].isMine) { newBoard[i][j].isRevealed = true; } } } } else { // Check if won let revealedCount = 0; for (let i = 0; i < ROWS; i++) { for (let j = 0; j < COLS; j++) { if (newBoard[i][j].isRevealed && !newBoard[i][j].isMine) { revealedCount++; } } } if (revealedCount === ROWS * COLS - MINES) { setGameState('won'); setShowWinAnimation(true); // Auto-hide animation after 3 seconds setTimeout(() => setShowWinAnimation(false), 3000); } } updateData({ ...data, board: newBoard }); }; const handleRightClick = (e, row, col) => { e.preventDefault(); if (gameState !== 'playing' || board[row][col].isRevealed) { return; } const newBoard = board.map(row => row.map(cell => ({ ...cell }))); newBoard[row][col].isFlagged = !newBoard[row][col].isFlagged; updateData({ ...data, board: newBoard }); }; const resetGame = () => { setGameState('playing'); setFirstClick(true); setShowWinAnimation(false); updateData({ ...data, board: initBoard() }); }; const getFlagsCount = () => { let count = 0; for (let i = 0; i < ROWS; i++) { for (let j = 0; j < COLS; j++) { if (board[i][j].isFlagged) count++; } } return MINES - count; }; const getCellContent = (cell) => { if (cell.isFlagged) return '🚩'; if (!cell.isRevealed) return ''; if (cell.isMine) return '💣'; if (cell.neighborCount === 0) return ''; return cell.neighborCount.toString(); }; const getCellStyle = (cell) => { if (!cell.isRevealed) { return 'bg-gray-300 hover:bg-gray-200'; } if (cell.isMine) { return 'bg-red-500'; } return 'bg-gray-100'; }; const getNumberColor = (count) => { const colors = { 1: 'text-blue-600', 2: 'text-green-600', 3: 'text-red-600', 4: 'text-purple-600', 5: 'text-yellow-600', 6: 'text-pink-600', 7: 'text-black', 8: 'text-gray-600' }; return colors[count] || ''; }; return (

{/* Win Animation Overlay */} {showWinAnimation && (

🎉 VICTORY! 🎉

{/* Confetti-like elements */}

{[...Array(20)].map((_, i) => (

{['🌟', '✨', '🎊', '🎉'][Math.floor(Math.random() * 4)]}

))}

)}

Flags: {getFlagsCount()}

{gameState === 'won' && 🎉 You Won!} {gameState === 'lost' && '💥 Game Over'} {gameState === 'playing' && '🎯 Playing'}

{board.map((row, i) => row.map((cell, j) => ( )) )}

Left click to reveal cells. Right click to flag mines. Find all cells without mines to win!
12x12 grid with 20 mines

); }