update minesweeper b00tc4mp#200

J0s3rra · Apr 10, 2024 · 8492de3 · 8492de3
1 parent 644912d
commit 8492de3
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 27 deletions.
diff --git a/staff/joseramon-rodriguez/shapes/minesweeper/src/App.css b/staff/joseramon-rodriguez/shapes/minesweeper/src/App.css
@@ -1,13 +1,5 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
 .board {
   display: grid;
-  margin: 10%;
   border: 2px solid black;
   width: 400px;
   height: 400px;
@@ -16,7 +8,7 @@
 }
 
 .clicked-cell {
-  background-color: brown;
+  background-color: rgba(30, 144, 255, 0.3);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -25,6 +17,22 @@
 .cell-button {
   width: 100%;
   height: 100%;
-  background-color: brown;
+  background-color: dodgerblue;
   box-shadow: inset gray 0px 0px 60px -12px;
+}
+
+.board-buttons {
+  width: 400px;
+  display: flex;
+  justify-content: 'center';
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.flag-cursor {
+  cursor: url('./assets/red-flag.png'), auto !important;
+}
+
+.pointer-cursor {
+  cursor: pointer;
 }
diff --git a/staff/joseramon-rodriguez/shapes/minesweeper/src/assets/red-flag.png b/staff/joseramon-rodriguez/shapes/minesweeper/src/assets/red-flag.png
diff --git a/staff/joseramon-rodriguez/shapes/minesweeper/src/components/Board.jsx b/staff/joseramon-rodriguez/shapes/minesweeper/src/components/Board.jsx
@@ -10,54 +10,92 @@ const initialBoard = generateBoard(columns, rows, bombs)
 
 function Board() {
     const [board, setBoard] = useState(initialBoard)
-    const [gameState, setGameState] = useState(null)
+    const [isGameFinished, setGameFinished] = useState(null)
+    const [isFlagClicked, setIsFlagClicked] = useState(false)
+    const [markedBombs, setMarkedBombs] = useState(0)
 
     const handleCellClick = (i, j) => {
-        if (gameState === 'loose') return
+        if (isGameFinished) return
 
         const boardCopy = [...board].map(row => [...row])
 
         const cellCopy = { ...boardCopy[i][j] }
 
-        cellCopy.isClicked = true
+        if (isFlagClicked) {
+            setMarkedBombs(markedBombs + 1)
+
+            cellCopy.isMarked = true
+        }
+
+        else if (cellCopy.isMarked) {
+            cellCopy.isMarked = false
+
+            setMarkedBombs(markedBombs - 1)
+        }
+
+        else cellCopy.isRevealed = true
 
         boardCopy[i][j] = cellCopy
 
         setBoard(boardCopy)
 
-        if (cellCopy.isBomb) {
+        if (cellCopy.isBomb && cellCopy.isRevealed) {
             setTimeout(() => alert('explotaste'), 20)
 
-            setGameState('loose')
+            setGameFinished(true)
         }
     }
 
     const handleResetClick = () => {
-        const newBoard = generateBoard(columns, rows)
+        const newBoard = generateBoard(columns, rows, bombs)
 
         setBoard(newBoard)
-        setGameState(null)
+        setGameFinished(null)
+        setMarkedBombs(0)
+    }
+
+    const finishGameHandler = () => {
+        const isGameWinned = !board.some(row => row.some(cell => cell.isBomb && !cell.isMarked))
+
+        if (isGameWinned) {
+            setGameFinished(true)
+
+            alert('ganaste!')
+        }
+        else {
+            setGameFinished(true)
+
+            alert('perdiste!')
+        }
     }
 
     return (
         <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>
+            </div>
             <section
-                className="board"
+                className='board'
                 style={{
                     gridTemplateColumns: `repeat(${columns},1fr)`,
                     gridTemplateRows: `repeat(${rows},1fr)`
                 }}
             >
                 {board.map((row, i) => row.map((cell, j) => (
                     <Cell
+                        isGameFinished={isGameFinished}
+                        isFlagClicked={isFlagClicked}
                         onCellClick={handleCellClick}
                         coords={{ i, j }}
                         key={`${i}-${j}`}
                         cell={cell}
                     />)
                 )).flat()}
             </section>
-            {gameState === 'loose' && <button onClick={handleResetClick}>Reset</button>}
+            {<button onClick={handleResetClick}>Reset</button>}
         </div>
     )
 }

diff --git a/staff/joseramon-rodriguez/shapes/minesweeper/src/components/Cell.jsx b/staff/joseramon-rodriguez/shapes/minesweeper/src/components/Cell.jsx
@@ -1,17 +1,23 @@
 function Cell(props) {
-    const { cell, coords, onCellClick } = props
+    const { cell, coords, isFlagClicked, isGameFinished, onCellClick } = props
 
-    if (cell.isClicked) {
+    if (cell.isRevealed || isGameFinished) {
         return (
-            <div className="clicked-cell">
-                {cell.isBomb ? 'Boom' : cell.bombsAside}
+            <div className={`clicked-cell ${isFlagClicked ? 'flag-cursor' : 'pointer-cursor'}`}>
+                {cell.isBomb && cell.isMarked && <span>💥 🚩</span>}
+                {!cell.isBomb && cell.isMarked && <span>{cell.bombsAside}🚩</span>}
+                {cell.isBomb && !cell.isMarked && '💥'}
+                {!cell.isBomb && !cell.isMarked && cell.bombsAside}
             </div>
         )
     }
     else {
         return (
-            <div className="no-clicked-cell">
-                <button onClick={() => onCellClick(coords.i, coords.j)} className="cell-button" />
+            <div>
+                <button
+                    onClick={() => onCellClick(coords.i, coords.j)}
+                    className={`cell-button ${isFlagClicked ? 'flag-cursor' : 'pointer-cursor'}`} >
+                    {cell.isMarked && '🚩'} </button>
             </div>
         )
     }

diff --git a/staff/joseramon-rodriguez/shapes/minesweeper/src/logic/generateBoard.js b/staff/joseramon-rodriguez/shapes/minesweeper/src/logic/generateBoard.js
@@ -38,8 +38,8 @@ function generateBoard(columns, rows, bombs) {
 
             if (board[i]?.[j - 1]?.isBomb) bombsAside++
             if (board[i]?.[j + 1]?.isBomb) bombsAside++
-            if (board[i - 1]?.[j]?.isBomb) bombsAside++
-            if (board[i + 1]?.[j]?.isBomb) bombsAside++
+            if (board[i - 1]?.[j].isBomb) bombsAside++
+            if (board[i + 1]?.[j].isBomb) bombsAside++
             if (board[i - 1]?.[j - 1]?.isBomb) bombsAside++
             if (board[i - 1]?.[j + 1]?.isBomb) bombsAside++
             if (board[i + 1]?.[j - 1]?.isBomb) bombsAside++