add clearCells and logic to minesweeper b00tc4mp#200

staff/joseramon-rodriguez/shapes/minesweeper/src/App.css

@@ -1,8 +1,6 @@
 .board {
   display: grid;
   border: 2px solid black;
-  width: 400px;
-  height: 400px;
   background-color: lightgray;
   gap: 1px
 }
@@ -35,4 +33,13 @@
 
 .pointer-cursor {
   cursor: pointer;
+}
+
+.selected-button {
+  border: 4px solid rgb(48, 153, 233);
+  border-radius: 2px
+}
+
+.select-marker-button {
+  width: 30px;
 }

staff/joseramon-rodriguez/shapes/minesweeper/src/components/Board.jsx

@@ -1,18 +1,23 @@
 import { useState } from "react";
 import { generateBoard } from "../logic/generateBoard";
+import { clearCells } from "../logic/clearCells";
 import Cell from "./Cell"
 
-const columns = 8
-const rows = 8
-const bombs = 10
 
-const initialBoard = generateBoard(columns, rows, bombs)
+
+const dificultLevels = [
+    { columns: 8, rows: 8, bombs: 10 },
+    { columns: 12, rows: 12, bombs: 25 },
+    { columns: 15, rows: 15, bombs: 35 }
+]
+const initialBoard = generateBoard(dificultLevels[0].columns, dificultLevels[0].rows, dificultLevels[0].bombs)
 
 function Board() {
     const [board, setBoard] = useState(initialBoard)
     const [isGameFinished, setGameFinished] = useState(null)
     const [isFlagClicked, setIsFlagClicked] = useState(false)
     const [markedBombs, setMarkedBombs] = useState(0)
+    const [dificult, setDificult] = useState(0)
 
     const handleCellClick = (i, j) => {
         if (isGameFinished) return
@@ -35,6 +40,9 @@ function Board() {
 
         else cellCopy.isRevealed = true
 
+        if (boardCopy[i][j].bombsAside === 0 && !isFlagClicked)
+            clearCells(boardCopy, i, j)
+
         boardCopy[i][j] = cellCopy
 
         setBoard(boardCopy)
@@ -47,7 +55,7 @@ function Board() {
     }
 
     const handleResetClick = () => {
-        const newBoard = generateBoard(columns, rows, bombs)
+        const newBoard = generateBoard(dificultLevels[dificult].columns, dificultLevels[dificult].rows, dificultLevels[dificult].bombs)
 
         setBoard(newBoard)
         setGameFinished(null)
@@ -69,19 +77,37 @@ function Board() {
         }
     }
 
+    const handleDificultClick = (level) => {
+        setDificult(level)
+
+        const newBoard = generateBoard(dificultLevels[level].columns, dificultLevels[level].rows, dificultLevels[level].bombs)
+
+        setBoard(newBoard)
+        setGameFinished(false)
+        setMarkedBombs(0)
+    }
+
     return (
         <div>
+            <div>
+                Choose dificulty
+                <button onClick={() => handleDificultClick(0)} >Easy</button>
+                <button onClick={() => handleDificultClick(1)}>Medium</button>
+                <button onClick={() => handleDificultClick(2)}>Hard</button>
+            </div>
             <div className="board-buttons">
-                <button onClick={() => setIsFlagClicked(true)}>🚩</button>
-                <button onClick={() => setIsFlagClicked(false)}>🔍</button>
-                <span>Bombs revealed: {markedBombs} / {bombs}</span>
-                <button disabled={markedBombs !== bombs || isGameFinished} onClick={finishGameHandler}>Finish game</button>
+                <button className={`select-marker-button ${isFlagClicked && 'selected-button'}`} onClick={() => setIsFlagClicked(true)}>🚩</button>
+                <button className={`select-marker-button ${!isFlagClicked && 'selected-button'}`} onClick={() => setIsFlagClicked(false)}>🔍</button>
+                <span>Bombs revealed: {markedBombs} / {dificultLevels[dificult].bombs}</span>
+                <button disabled={markedBombs !== dificultLevels[dificult].bombs || isGameFinished} onClick={finishGameHandler}>Finish game</button>
             </div>
             <section
-                className='board'
+                className={`board ${isFlagClicked && 'flag-cursor'}`}
                 style={{
-                    gridTemplateColumns: `repeat(${columns},1fr)`,
-                    gridTemplateRows: `repeat(${rows},1fr)`
+                    gridTemplateColumns: `repeat(${dificultLevels[dificult].columns},1fr)`,
+                    gridTemplateRows: `repeat(${dificultLevels[dificult].rows},1fr)`,
+                    width: 30 * dificultLevels[dificult].columns + 'px',
+                    height: 30 * dificultLevels[dificult].rows + 'px'
                 }}
             >
                 {board.map((row, i) => row.map((cell, j) => (

staff/joseramon-rodriguez/shapes/minesweeper/src/logic/clearCells.js

@@ -0,0 +1,148 @@
+function clearCells(board, i, j) {
+    if (board[i][j - 1]) {
+        const cellCopy = { ...board[i][j - 1] }
+
+        if (cellCopy.bombsAside === 0 && !cellCopy.isRevealed) {
+            cellCopy.isRevealed = true
+
+            board[i][j - 1] = cellCopy
+
+            clearCells(board, i, j - 1)
+        }
+
+        else {
+            cellCopy.isRevealed = true
+
+            board[i][j - 1] = cellCopy
+        }
+    }
+
+    if (board[i][j + 1]) {
+        const cellCopy = { ...board[i][j + 1] }
+
+        if (cellCopy.bombsAside === 0 && !cellCopy.isRevealed) {
+            cellCopy.isRevealed = true
+
+            board[i][j + 1] = cellCopy
+
+            clearCells(board, i, j + 1)
+        }
+
+        else {
+            cellCopy.isRevealed = true
+
+            board[i][j + 1] = cellCopy
+        }
+    }
+
+    if (board[i - 1]?.[j]) {
+        const cellCopy = { ...board[i - 1][j] }
+
+        if (cellCopy.bombsAside === 0 && !cellCopy.isRevealed) {
+            cellCopy.isRevealed = true
+
+            board[i - 1][j] = cellCopy
+
+            clearCells(board, i - 1, j)
+        }
+
+        else {
+            cellCopy.isRevealed = true
+
+            board[i - 1][j] = cellCopy
+        }
+    }
+
+    if (board[i + 1]?.[j]) {
+        const cellCopy = { ...board[i + 1][j] }
+
+        if (cellCopy.bombsAside === 0 && !cellCopy.isRevealed) {
+            cellCopy.isRevealed = true
+
+            board[i + 1][j] = cellCopy
+
+            clearCells(board, i + 1, j)
+        }
+
+        else {
+            cellCopy.isRevealed = true
+
+            board[i + 1][j] = cellCopy
+        }
+    }
+
+    if (board[i - 1]?.[j - 1]) {
+        const cellCopy = { ...board[i - 1][j - 1] }
+
+        if (cellCopy.bombsAside === 0 && !cellCopy.isRevealed) {
+            cellCopy.isRevealed = true
+
+            board[i - 1][j - 1] = cellCopy
+
+            clearCells(board, i - 1, j - 1)
+        }
+
+        else {
+            cellCopy.isRevealed = true
+
+            board[i - 1][j - 1] = cellCopy
+        }
+    }
+
+    if (board[i - 1]?.[j + 1]) {
+        const cellCopy = { ...board[i - 1][j + 1] }
+
+        if (cellCopy.bombsAside === 0 && !cellCopy.isRevealed) {
+            cellCopy.isRevealed = true
+
+            board[i - 1][j + 1] = cellCopy
+
+            clearCells(board, i - 1, j + 1)
+        }
+
+        else {
+            cellCopy.isRevealed = true
+
+            board[i - 1][j + 1] = cellCopy
+        }
+    }
+
+    if (board[i + 1]?.[j - 1]) {
+        const cellCopy = { ...board[i + 1][j - 1] }
+
+        if (cellCopy.bombsAside === 0 && !cellCopy.isRevealed) {
+            cellCopy.isRevealed = true
+
+            board[i + 1][j - 1] = cellCopy
+
+
+            clearCells(board, i + 1, j - 1)
+        }
+
+        else {
+            cellCopy.isRevealed = true
+
+            board[i + 1][j - 1] = cellCopy
+        }
+    }
+
+    if (board[i + 1]?.[j + 1]) {
+        const cellCopy = { ...board[i + 1][j + 1] }
+
+        if (cellCopy.bombsAside === 0 && !cellCopy.isRevealed) {
+            cellCopy.isRevealed = true
+
+            board[i + 1][j + 1] = cellCopy
+
+            clearCells(board, i + 1, j + 1)
+        }
+
+        else {
+            cellCopy.isRevealed = true
+
+            board[i + 1][j + 1] = cellCopy
+        }
+    }
+}
+
+export { clearCells }

staff/joseramon-rodriguez/shapes/minesweeper/src/logic/generateBoard.js

@@ -8,8 +8,8 @@ function generateBoard(columns, rows, bombs) {
     for (let i = 0; i < bombs; i++) {
         const index = Math.floor(Math.random() * cellsQuantity - 1)
 
-        const indexI = Math.floor(index / 8)
-        const indexJ = index % 8
+        const indexI = Math.floor(index / rows)
+        const indexJ = index % columns
 
         if (indexes.some((index => index.i === indexI && index.j === indexJ)))
             i--