function MainComponent() { const [gameState, setGameState] = React.useState({ board: [], status: 'playing', time: 0, difficulty: 'beginner', minesCount: 10 }); const difficulties = { beginner: { size: 9, mines: 10 }, intermediate: { size: 16, mines: 40 }, advanced: { size: 30, mines: 99 } }; React.useEffect(()=>{ initializeGame(); }, [ gameState.difficulty ]); React.useEffect(()=>{ const timer = setInterval(()=>{ if (gameState.status === 'playing') { setGameState((prevState)=>({ ...prevState, time: prevState.time + 1 })); } }, 1000); return ()=>{ clearInterval(timer); }; }, [ gameState.status ]); const initializeGame = ()=>{ const { size, mines } = difficulties[gameState.difficulty]; const board = []; for(let row = 0; row < size; row++){ const currentRow = []; for(let col = 0; col < size; col++){ currentRow.push({ mined: false, opened: false, flagged: false, adjacentMines: 0 }); } board.push(currentRow); } let minedCount = 0; while(minedCount < mines){ const row = Math.floor(Math.random() * size); const col = Math.floor(Math.random() * size); if (!board[row][col].mined) { board[row][col].mined = true; minedCount++; } } setGameState((prevState)=>({ ...prevState, board, status: 'playing', time: 0, minesCount: mines })); }; const openCell = (row, col)=>{ const newBoard = [ ...gameState.board ]; const cell = newBoard[row][col]; if (cell.flagged || cell.opened) return; cell.opened = true; if (cell.mined) { setGameState((prevState)=>({ ...prevState, board: newBoard, status: 'lost' })); return; } const adjacentCells = getAdjacentCells(row, col); const mines = adjacentCells.filter((cell)=>cell.mined).length; cell.adjacentMines = mines; if (mines === 0) { adjacentCells.forEach((adjCell)=>{ if (!adjCell.opened && !adjCell.flagged) { const newRow = adjCell.row; const newCol = adjCell.col; openCell(newRow, newCol); } }); } setGameState((prevState)=>({ ...prevState, board: newBoard })); checkWin(newBoard); }; const flagCell = (event, row, col)=>{ event.preventDefault(); const newBoard = [ ...gameState.board ]; const cell = newBoard[row][col]; if (cell.opened) return; cell.flagged = !cell.flagged; setGameState((prevState)=>({ ...prevState, board: newBoard })); }; const getAdjacentCells = (row, col)=>{ const { size } = difficulties[gameState.difficulty]; const adjacentCells = []; for(let i = -1; i <= 1; i++){ for(let j = -1; j <= 1; j++){ const newRow = row + i; const newCol = col + j; if (newRow >= 0 && newRow < size && newCol >= 0 && newCol < size && !(i === 0 && j === 0)) { adjacentCells.push({ row: newRow, col: newCol, ...gameState.board[newRow][newCol] }); } } } return adjacentCells; }; const checkWin = (board)=>{ const { size, mines } = difficulties[gameState.difficulty]; let openedCells = 0; for(let row = 0; row < size; row++){ for(let col = 0; col < size; col++){ if (board[row][col].opened) { openedCells++; } } } if (size * size - openedCells === mines) { setGameState((prevState)=>({ ...prevState, status: 'won' })); } }; const renderBoard = ()=>{ return gameState.board.map((row, rowIndex)=>/*#__PURE__*/ React.createElement("div", { key: rowIndex, className: "flex", __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this }, row.map((cell, colIndex)=>/*#__PURE__*/ React.createElement("div", { key: colIndex, className: `w-8 h-8 border-2 border-gray-400 flex items-center justify-center font-bold ${cell.opened ? 'bg-[#FFFFFF]' : 'bg-[#C0C0C0]'} ${gameState.status === 'lost' && cell.mined ? 'bg-[#FF0000]' : ''}`, onClick: ()=>openCell(rowIndex, colIndex), onContextMenu: (event)=>flagCell(event, rowIndex, colIndex), __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, cell.flagged && !cell.opened && /*#__PURE__*/ React.createElement("span", { style: { color: '#0000FF' }, __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, "🚩"), cell.opened && cell.mined && /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this }, "💣"), cell.opened && !cell.mined && cell.adjacentMines > 0 && /*#__PURE__*/ React.createElement("span", { style: { color: '#000000', fontSize: '16px' }, __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, cell.adjacentMines))))); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F0F0F0] font-arial", __source: { fileName: "", lineNumber: 202, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-500 text-white p-4", __source: { fileName: "", lineNumber: 203, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 204, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 205, columnNumber: 11 }, __self: this }, "Minesweeper"))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto py-8", __source: { fileName: "", lineNumber: 209, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 210, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "difficulty", value: gameState.difficulty, onChange: (e)=>setGameState((prevState)=>({ ...prevState, difficulty: e.target.value })), className: "border p-2", __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "beginner", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, "Beginner"), /*#__PURE__*/ React.createElement("option", { value: "intermediate", __source: { fileName: "", lineNumber: 223, columnNumber: 13 }, __self: this }, "Intermediate"), /*#__PURE__*/ React.createElement("option", { value: "advanced", __source: { fileName: "", lineNumber: 224, columnNumber: 13 }, __self: this }, "Advanced")), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: ()=>initializeGame(), __source: { fileName: "", lineNumber: 227, columnNumber: 11 }, __self: this }, "Restart")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 234, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-4", __source: { fileName: "", lineNumber: 235, columnNumber: 11 }, __self: this }, "Time: ", Math.floor(gameState.time / 60), ":", (gameState.time % 60).toString().padStart(2, '0')), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 239, columnNumber: 11 }, __self: this }, "Mines: ", gameState.minesCount)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 242, columnNumber: 9 }, __self: this }, renderBoard()), gameState.status === 'won' && /*#__PURE__*/ React.createElement("p", { className: "text-green-500 font-bold text-2xl", __source: { fileName: "", lineNumber: 245, columnNumber: 11 }, __self: this }, "You Won!"), gameState.status === 'lost' && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 font-bold text-2xl", __source: { fileName: "", lineNumber: 248, columnNumber: 11 }, __self: this }, "Game Over!")), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-white py-4", __source: { fileName: "", lineNumber: 252, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center", __source: { fileName: "", lineNumber: 253, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 254, columnNumber: 11 }, __self: this }, "© 2023 Minesweeper. All rights reserved.")))); }