function MainComponent() { const [gameState, setGameState] = React.useState('menu'); const [difficulty, setDifficulty] = React.useState('easy'); const [grid, setGrid] = React.useState([]); const [minesLeft, setMinesLeft] = React.useState(0); const [time, setTime] = React.useState(0); const [intervalId, setIntervalId] = React.useState(null); const difficulties = { easy: { size: 10, mines: 10 }, medium: { size: 16, mines: 40 }, hard: { size: 24, mines: 99 } }; const cellColors = [ '#0000ff', '#008000', '#ff0000', '#000080', '#800000', '#008080', '#000000', '#808080' ]; const initializeGrid = ()=>{ const { size, mines } = difficulties[difficulty]; const newGrid = Array(size).fill().map(()=>Array(size).fill({ revealed: false, isMine: false, adjacentMines: 0, flagged: false })); // Place mines let minesPlaced = 0; while(minesPlaced < mines){ const x = Math.floor(Math.random() * size); const y = Math.floor(Math.random() * size); if (!newGrid[y][x].isMine) { newGrid[y][x].isMine = true; minesPlaced++; } } // Calculate adjacent mines for(let y = 0; y < size; y++){ for(let x = 0; x < size; x++){ if (!newGrid[y][x].isMine) { let count = 0; for(let dy = -1; dy <= 1; dy++){ for(let dx = -1; dx <= 1; dx++){ if (y + dy >= 0 && y + dy < size && x + dx >= 0 && x + dx < size) { if (newGrid[y + dy][x + dx].isMine) count++; } } } newGrid[y][x].adjacentMines = count; } } } setGrid(newGrid); setMinesLeft(mines); }; const startGame = ()=>{ setGameState('playing'); initializeGrid(); setTime(0); const id = setInterval(()=>setTime((prevTime)=>prevTime + 1), 1000); setIntervalId(id); }; const endGame = (won)=>{ clearInterval(intervalId); setGameState(won ? 'won' : 'lost'); }; const revealCell = (x, y)=>{ if (grid[y][x].flagged || grid[y][x].revealed) return; const newGrid = [ ...grid ]; newGrid[y][x].revealed = true; if (newGrid[y][x].isMine) { endGame(false); return; } if (newGrid[y][x].adjacentMines === 0) { const { size } = difficulties[difficulty]; for(let dy = -1; dy <= 1; dy++){ for(let dx = -1; dx <= 1; dx++){ if (y + dy >= 0 && y + dy < size && x + dx >= 0 && x + dx < size) { revealCell(x + dx, y + dy); } } } } setGrid(newGrid); // Check win condition const unrevealed = newGrid.flat().filter((cell)=>!cell.revealed && !cell.isMine); if (unrevealed.length === 0) { endGame(true); } }; const toggleFlag = (x, y)=>{ if (grid[y][x].revealed) return; const newGrid = [ ...grid ]; newGrid[y][x].flagged = !newGrid[y][x].flagged; setGrid(newGrid); setMinesLeft((prevMines)=>newGrid[y][x].flagged ? prevMines - 1 : prevMines + 1); }; const renderCell = (cell, x, y)=>{ let content = ''; let cellClass = 'w-6 h-6 md:w-8 md:h-8 border border-gray-400 flex items-center justify-center font-verdana text-xs md:text-sm font-bold'; if (!cell.revealed && !cell.flagged) { cellClass += ' bg-[#cccccc] cursor-pointer'; } else if (cell.flagged) { content = '🚩'; cellClass += ' bg-[#ffcc00] cursor-pointer'; } else if (cell.isMine) { content = '💣'; cellClass += ' bg-[#ff4d4d]'; } else { cellClass += ' bg-[#ffffff]'; if (cell.adjacentMines > 0) { content = cell.adjacentMines; cellClass += ` text-[${cellColors[cell.adjacentMines - 1]}]`; } } return /*#__PURE__*/ React.createElement("div", { key: `${x}-${y}`, className: cellClass, onClick: ()=>revealCell(x, y), onContextMenu: (e)=>{ e.preventDefault(); toggleFlag(x, y); }, __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, content); }; const renderGrid = ()=>{ return /*#__PURE__*/ React.createElement("div", { className: "grid", style: { gridTemplateColumns: `repeat(${difficulties[difficulty].size}, minmax(0, 1fr))` }, __source: { fileName: "", lineNumber: 140, columnNumber: 7 }, __self: this }, grid.map((row, y)=>row.map((cell, x)=>renderCell(cell, x, y)))); }; const renderMenu = ()=>/*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f0f0f0] text-black", __source: { fileName: "", lineNumber: 147, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8", __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this }, "Minesweeper"), /*#__PURE__*/ React.createElement("select", { className: "mb-4 p-2 rounded", value: difficulty, onChange: (e)=>setDifficulty(e.target.value), __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "easy", __source: { fileName: "", lineNumber: 154, columnNumber: 9 }, __self: this }, "Easy"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 155, columnNumber: 9 }, __self: this }, "Medium"), /*#__PURE__*/ React.createElement("option", { value: "hard", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, "Hard")), /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "bg-blue-500 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 158, columnNumber: 7 }, __self: this }, "Start Game")); const renderGame = ()=>/*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 163, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex justify-between w-full max-w-md", __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 165, columnNumber: 9 }, __self: this }, "Mines left: ", minesLeft), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 166, columnNumber: 9 }, __self: this }, "Time: ", time, "s")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 168, columnNumber: 7 }, __self: this }, renderGrid()), /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "bg-blue-500 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 169, columnNumber: 7 }, __self: this }, "New Game")); const renderGameOver = (won)=>/*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f0f0f0] text-black", __source: { fileName: "", lineNumber: 174, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-bold mb-8", __source: { fileName: "", lineNumber: 175, columnNumber: 7 }, __self: this }, won ? 'You Won!' : 'Game Over'), /*#__PURE__*/ React.createElement("p", { className: "text-2xl mb-8", __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this }, "Time: ", time, "s"), /*#__PURE__*/ React.createElement("button", { onClick: startGame, className: "bg-blue-500 text-white font-bold py-2 px-4 rounded mb-4", __source: { fileName: "", lineNumber: 177, columnNumber: 7 }, __self: this }, "Play Again"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setGameState('menu'), className: "bg-green-500 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 178, columnNumber: 7 }, __self: this }, "Main Menu")); return /*#__PURE__*/ React.createElement("div", { className: "font-arial", __source: { fileName: "", lineNumber: 183, columnNumber: 5 }, __self: this }, gameState === 'menu' && renderMenu(), gameState === 'playing' && renderGame(), gameState === 'won' && renderGameOver(true), gameState === 'lost' && renderGameOver(false)); }