diff --git a/staff/joseramon-rodriguez/shapes/minesweeper/App.jsx b/staff/joseramon-rodriguez/shapes/minesweeper/App.jsx new file mode 100644 index 000000000..04a1e4324 --- /dev/null +++ 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 <> +
Mine Sweeper
+
+
+ {board.map((row, i) => row.map((cell, j) =>
+ +
+ )).flat(Infinity)} +
+ +
+ + + +} \ No newline at end of file diff --git a/staff/joseramon-rodriguez/shapes/minesweeper/index.css b/staff/joseramon-rodriguez/shapes/minesweeper/index.css new file mode 100644 index 000000000..140607ba5 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/staff/joseramon-rodriguez/shapes/minesweeper/index.html b/staff/joseramon-rodriguez/shapes/minesweeper/index.html new file mode 100644 index 000000000..a83d8bdb0 --- /dev/null +++ b/staff/joseramon-rodriguez/shapes/minesweeper/index.html @@ -0,0 +1,25 @@ + + + + + + + Mine sweeper + + + + +
+ + + + + + + + + + + \ No newline at end of file diff --git a/staff/joseramon-rodriguez/shapes/minesweeper/index.jsx b/staff/joseramon-rodriguez/shapes/minesweeper/index.jsx new file mode 100644 index 000000000..07b35ce7e --- /dev/null +++ b/staff/joseramon-rodriguez/shapes/minesweeper/index.jsx @@ -0,0 +1,3 @@ +const root = ReactDOM.createRoot(document.querySelector('#root')) + +root.render() \ No newline at end of file diff --git a/staff/joseramon-rodriguez/shapes/tic-tac-toe/index.jsx b/staff/joseramon-rodriguez/shapes/tic-tac-toe/index.jsx index 42eba7f3d..179ff0b05 100644 --- 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) =>
play(i, j)}>{getCellChar(board[i][j])}
)).flat(Infinity)} + {board.map((row, i) => row.map((column, j) =>
play(i, j)}>{getCellChar(board[i][j])}
)).flat(Infinity)}