add minesweeper to shapes, fix tic-tac-toe b00tc4mp#200

J0s3rra · Apr 4, 2024 · 9aae436 · 9aae436
1 parent 6791306
commit 9aae436
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 9 deletions.
diff --git a/staff/joseramon-rodriguez/shapes/minesweeper/App.jsx b/staff/joseramon-rodriguez/shapes/minesweeper/App.jsx
@@ -0,0 +1,33 @@
+function App() {
+    const matrix = new Array(8)
+
+    for (let i = 0; i < matrix.length; i++) {
+        const cell = {
+            isBomb: false,
+            isClicked: false,
+            bombAside: 0,
+        }
+
+        matrix[i] = new Array(8).fill(cell)
+    }
+
+    const [board, setBoard] = React.useState(matrix)
+
+    return <>
+        <header>Mine Sweeper</header>
+        <main>
+            <div className="board" style={{
+                gridTemplate: `repeat(${matrix.length},1fr) / repeat(${matrix.length},1fr) `
+            }}
+            >
+                {board.map((row, i) => row.map((cell, j) => <div key={`${i}-${j}`} className={cell.isClicked ? 'clicked-cell' : 'no-clicked-cell'}>
+                    <button className="cell-button" onClick={() => handleCellClick(i, j)}></button>
+                </div>
+                )).flat(Infinity)}
+            </div>
+
+        </main>
+        <footer></footer>
+    </>
+
+}
diff --git a/staff/joseramon-rodriguez/shapes/minesweeper/index.css b/staff/joseramon-rodriguez/shapes/minesweeper/index.css
@@ -0,0 +1,15 @@
+.board {
+    display: grid;
+    border: 2px solid black;
+    width: 400px;
+    height: 400px;
+    gap: 1px;
+}
+
+.clicked-cell {
+    background-color: transparent;
+}
+
+.no-clicked-cell {
+    background-color: gray;
+}
diff --git a/staff/joseramon-rodriguez/shapes/minesweeper/index.html b/staff/joseramon-rodriguez/shapes/minesweeper/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mine sweeper</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+
+<body>
+    <div id="root"></div>
+    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.24.3/babel.min.js"
+        integrity="sha512-ew/qzOMK7mnWiZ395TTbZ+YVD6e7dOROUcXXzSjyxPmL9oNf5gp8DJp46uarrTKch5aUhR/NS8qtCh6hnaTMCw=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <script src="App.jsx" type="text/babel"></script>
+    <script src="index.jsx" type="text/babel"></script>
+
+</body>
+
+</html>
diff --git a/staff/joseramon-rodriguez/shapes/minesweeper/index.jsx b/staff/joseramon-rodriguez/shapes/minesweeper/index.jsx
@@ -0,0 +1,3 @@
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+
+root.render(<App />)
diff --git a/staff/joseramon-rodriguez/shapes/tic-tac-toe/index.jsx b/staff/joseramon-rodriguez/shapes/tic-tac-toe/index.jsx
@@ -18,24 +18,24 @@ function App() {
 
     function play(row, column) {
         console.log('click')
-        //TODO FIX BOARD STATE -> ASK
+
         const prevBoard = board
 
-        const board = []
+        const newBoard = []
         for (let i = 0; i < prevBoard.length; i++)
-            board[i] = new Array(prevBoard[0].length).fill(0)
+            newBoard[i] = new Array(prevBoard[0].length).fill(0)
 
         for (const i in prevBoard)
             for (const j in prevBoard[i])
-                board[i][j] = prevBoard[i][j]
+                newBoard[i][j] = prevBoard[i][j]
 
         if (turn % 2 === 0)
-            board[row][column] = 1
+            newBoard[row][column] = 1
         else
-            board[row][column] = 2
+            newBoard[row][column] = 2
 
-        setBoard(board)
-        setTurn(turn++)
+        setBoard(newBoard)
+        setTurn(turn + 1)
     }
 
     return <>
@@ -45,7 +45,7 @@ function App() {
                 gridTemplateColumns: `repeat(${board.length}, 1fr)`,
                 gridTemplateRows: `repeat(${board.length}, 1fr)`
             }}>
-                {board.map((row, i) => row.map((column, j) => <div className="cell" onClick={() => play(i, j)}>{getCellChar(board[i][j])}</div>)).flat(Infinity)}
+                {board.map((row, i) => row.map((column, j) => <div key={`${i}-${j}`} className="cell" onClick={() => play(i, j)}>{getCellChar(board[i][j])}</div>)).flat(Infinity)}
             </section>
         </main>
         <footer></footer>