diff --git a/src/pages/minesweeper/index.js b/src/pages/minesweeper/index.js index faa6fe6..c4cdae4 100644 --- a/src/pages/minesweeper/index.js +++ b/src/pages/minesweeper/index.js @@ -87,6 +87,41 @@ const MinesweeperGame = () => { if (!timerActive) { setTimerActive(true); + // Ensure first click is safe + if (board[row][col].isMine) { + const newBoard = [...board]; + // Remove mine from current cell + newBoard[row][col].isMine = false; + + // Find a new spot for the mine + let placed = false; + while (!placed) { + const newRow = Math.floor(Math.random() * board.length); + const newCol = Math.floor(Math.random() * board[0].length); + if (!newBoard[newRow][newCol].isMine && (newRow !== row || newCol !== col)) { + newBoard[newRow][newCol].isMine = true; + placed = true; + } + } + + // Recalculate neighbor counts + for (let r = 0; r < board.length; r++) { + for (let c = 0; c < board[0].length; c++) { + if (!newBoard[r][c].isMine) { + let count = 0; + for (let i = -1; i <= 1; i++) { + for (let j = -1; j <= 1; j++) { + if (r + i >= 0 && r + i < board.length && c + j >= 0 && c + j < board[0].length) { + if (newBoard[r + i][c + j].isMine) count++; + } + } + } + newBoard[r][c].neighborMines = count; + } + } + } + setBoard(newBoard); + } } const newBoard = [...board]; diff --git a/src/pages/minesweeper/styles.module.css b/src/pages/minesweeper/styles.module.css index 83df005..0f3245f 100644 --- a/src/pages/minesweeper/styles.module.css +++ b/src/pages/minesweeper/styles.module.css @@ -14,6 +14,38 @@ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); padding: 2rem; margin-top: 2rem; + position: relative; +} + +.controls { + display: flex; + gap: 1rem; + margin-bottom: 2rem; + justify-content: center; + position: sticky; + left: 0; + right: 0; + z-index: 1; +} + +.gameStatus { + display: flex; + justify-content: space-between; + align-items: center; + background: rgba(52, 73, 94, 0.8); + backdrop-filter: blur(10px); + padding: 0.5rem 1rem; + border-radius: 12px; + color: #fff; + margin-bottom: 1rem; + font-family: 'Courier New', monospace; + font-size: 0.9rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(255, 255, 255, 0.1); + position: sticky; + left: 0; + right: 0; + z-index: 1; } .header { @@ -46,6 +78,17 @@ color: #2c3e50; } +@media (max-width: 480px) { + .button { + padding: 0.4rem 0.6rem; + font-size: 0.9rem; + } + + .controls { + gap: 0.5rem; + } +} + .button:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); @@ -120,8 +163,23 @@ margin: 0 auto; grid-template-columns: repeat(auto-fill, 30px); overflow-x: auto; - max-width: 100%; + max-width: none; -webkit-overflow-scrolling: touch; + scrollbar-width: thin; + scrollbar-color: rgba(52, 73, 94, 0.8) transparent; +} + +.grid::-webkit-scrollbar { + height: 8px; +} + +.grid::-webkit-scrollbar-track { + background: transparent; +} + +.grid::-webkit-scrollbar-thumb { + background-color: rgba(52, 73, 94, 0.8); + border-radius: 4px; } .cell { @@ -189,32 +247,13 @@ .gameContainer { padding: 1rem; - } - - .cell { - width: 25px; - height: 25px; - font-size: 0.9rem; - } - - .title { - font-size: 2rem; - } - - .mobileWarning { - background: rgba(255, 193, 7, 0.2); - color: #856404; - padding: 0.75rem; - border-radius: 6px; - margin-bottom: 1rem; - text-align: center; - font-size: 0.9rem; - border: 1px solid rgba(255, 193, 7, 0.3); + width: 100%; + overflow-x: auto; } .grid { - padding: 0.5px 0.5px 0.5px; - margin: 0 -1rem; - border-radius: 0; + margin: 0 auto; + padding: 1px; + border-radius: 4px; } } \ No newline at end of file