From 93633eb16e22fb6b1d56d717c6fc1fdfbf4707f1 Mon Sep 17 00:00:00 2001 From: Haben Date: Wed, 15 Apr 2020 17:14:12 -0700 Subject: [PATCH 1/6] updated Board component --- src/components/Board.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/Board.js b/src/components/Board.js index 484198fe..ddf896f6 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -5,8 +5,22 @@ import PropTypes from 'prop-types'; const generateSquareComponents = (squares, onClickCallback) => { - // Complete this for Wave 1 + const squareComponents = squares.map((row) => { + return row.map(({id, value}) => { + return ( + + + ); + }); +}); +return squareComponents; } const Board = ({ squares, onClickCallback }) => { From d93e9728faca5c35f7f21971eedd0620983d6090 Mon Sep 17 00:00:00 2001 From: Haben Date: Sun, 19 Apr 2020 16:01:01 -0700 Subject: [PATCH 2/6] added wave 2 --- src/App.js | 50 +++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 47 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index c6f16fc4..a3bf5573 100644 --- a/src/App.js +++ b/src/App.js @@ -27,16 +27,60 @@ const generateSquares = () => { const App = () => { + const [player, setPlayer] = useState('player_1') + // // After the player moves. + // setPlayer(nextPlayer) + const [squares, setSquares] = useState(generateSquares()); - // Wave 2 + // Wave 2 // You will need to create a method to change the square // When it is clicked on. // Then pass it into the squares as a callback + const onClickCallback = (squareId) => { + //console.log("something") + let gameValue = ""; + if (player === 'player_1') { + gameValue = 'x' + } else if (player === 'player_2') { + gameValue = 'O' + } + + const newSquares = []; + squares.forEach(row => { + const newRow = []; + row.forEach(square => { + if (square.id === squareId) { + //update the square + const newSquare = { + id: square.id, + value: gameValue + } + newRow.push(newSquare) + + } else { + newRow.push(square) + } + // ... + }); + newSquares.push(newRow); + }); + setSquares(newSquares) + let nextPlayer = ""; + if (player === 'player_1') { + nextPlayer = 'player_2' + } + else if (player === 'player_2') { + nextPlayer = 'player_1' + } + setPlayer(nextPlayer); + + } - const checkForWinner = () => { + const checkForWinner = () => { // Complete in Wave 3 + } @@ -52,7 +96,7 @@ const App = () => {
- +
); From bb1cfc42165cca14d0b440d9e5a0ca1fc2415e25 Mon Sep 17 00:00:00 2001 From: Haben Date: Sun, 19 Apr 2020 16:01:41 -0700 Subject: [PATCH 3/6] added player to board a s prop --- src/components/Board.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index ddf896f6..78bfc58e 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -4,7 +4,7 @@ import Square from './Square'; import PropTypes from 'prop-types'; -const generateSquareComponents = (squares, onClickCallback) => { +const generateSquareComponents = (squares, onClickCallback, player) => { const squareComponents = squares.map((row) => { return row.map(({id, value}) => { @@ -13,6 +13,7 @@ const generateSquareComponents = (squares, onClickCallback) => { id={id} value={value} onClickCallback={onClickCallback} + player={player} key={id} /> @@ -23,8 +24,8 @@ const generateSquareComponents = (squares, onClickCallback) => { return squareComponents; } -const Board = ({ squares, onClickCallback }) => { - const squareList = generateSquareComponents(squares, onClickCallback); +const Board = ({ squares, onClickCallback, player }) => { + const squareList = generateSquareComponents(squares, onClickCallback, player); console.log(squareList); return
{squareList} @@ -36,11 +37,12 @@ Board.propTypes = { PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.number.isRequired, - value: PropTypes.string.isRequired + value: PropTypes.string.isRequired, }) ) ), onClickCallback: PropTypes.func.isRequired, + player: PropTypes.string.isRequired }; export default Board; From e9684178d5c5dbf2a97f4f31e0d53369b667bad0 Mon Sep 17 00:00:00 2001 From: Haben Date: Mon, 20 Apr 2020 10:20:46 -0700 Subject: [PATCH 4/6] added wave 3 --- src/components/Square.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Square.js b/src/components/Square.js index 71f46b8c..bf945414 100644 --- a/src/components/Square.js +++ b/src/components/Square.js @@ -7,9 +7,11 @@ const Square = (props) => { // For Wave 1 enable this // Component to alert a parent // component when it's clicked on. + return From a7f3e91fb49bcc6680beb2db29ed1e17c2e07ca6 Mon Sep 17 00:00:00 2001 From: Haben Date: Mon, 20 Apr 2020 15:14:47 -0700 Subject: [PATCH 5/6] added wave 4 --- src/App.js | 131 ++++++++++++++++++++++++---------------- src/components/Board.js | 5 +- 2 files changed, 81 insertions(+), 55 deletions(-) diff --git a/src/App.js b/src/App.js index a3bf5573..94f8def0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,10 @@ -import React, { useState } from 'react'; -import './App.css'; +import React, { useState } from "react"; +import "./App.css"; -import Board from './components/Board'; +import Board from "./components/Board"; -const PLAYER_1 = 'X'; -const PLAYER_2 = 'O'; +const PLAYER_1 = "X"; +const PLAYER_2 = "O"; const generateSquares = () => { const squares = []; @@ -16,90 +16,117 @@ const generateSquares = () => { for (let col = 0; col < 3; col += 1) { squares[row].push({ id: currentId, - value: '', + value: "", }); currentId += 1; } } - return squares; -} +}; const App = () => { - - const [player, setPlayer] = useState('player_1') - // // After the player moves. - // setPlayer(nextPlayer) - + const [player, setPlayer] = useState("player_1"); const [squares, setSquares] = useState(generateSquares()); + const [winner, setWinner] = useState(null); - // Wave 2 - // You will need to create a method to change the square - // When it is clicked on. - // Then pass it into the squares as a callback + // wave 2 + // changes the square when it is clicked on. + // Then pass it into the squares as a callback const onClickCallback = (squareId) => { - //console.log("something") - let gameValue = ""; - if (player === 'player_1') { - gameValue = 'x' - } else if (player === 'player_2') { - gameValue = 'O' + if (winner !== null) { + return; + } + + let gameValue = ""; + if (player === "player_1") { + gameValue = PLAYER_1; + } else if (player === "player_2") { + gameValue = PLAYER_2; } const newSquares = []; - squares.forEach(row => { + squares.forEach((row) => { const newRow = []; - row.forEach(square => { + row.forEach((square) => { if (square.id === squareId) { - //update the square + //updates the square const newSquare = { id: square.id, - value: gameValue - } - newRow.push(newSquare) - + value: gameValue, + }; + newRow.push(newSquare); } else { - newRow.push(square) + newRow.push(square); } - // ... }); newSquares.push(newRow); }); - setSquares(newSquares) + + checkForWinner(newSquares); + setSquares(newSquares); let nextPlayer = ""; - if (player === 'player_1') { - nextPlayer = 'player_2' - } - else if (player === 'player_2') { - nextPlayer = 'player_1' + if (player === "player_1") { + nextPlayer = "player_2"; + } else if (player === "player_2") { + nextPlayer = "player_1"; } setPlayer(nextPlayer); - - } - - const checkForWinner = () => { - // Complete in Wave 3 - - - } + }; + + // wave 3 + const checkForWinner = (squares) => { + const winningRows = [ + [squares[0][0], squares[0][1], squares[0][2]], + [squares[1][0], squares[1][1], squares[1][1]], + [squares[2][0], squares[2][1], squares[2][2]], + [squares[0][0], squares[1][0], squares[2][0]], + [squares[0][1], squares[1][1], squares[2][1]], + [squares[0][2], squares[1][2], squares[2][2]], + [squares[0][0], squares[1][1], squares[2][2]], + [squares[0][2], squares[1][1], squares[2][0]], + ]; + + for (let i = 0; i < winningRows.length; i++) { + const [a, b, c] = winningRows[i]; + console.log(a.value); + if (a.value && a.value === b.value && a.value === c.value) { + //return a.value; + if (a.value === PLAYER_1) { + setWinner("player_1"); + + } else if (a.value === PLAYER_2) { + setWinner("Player_2"); + // if (a.value === "o") setWinner("Player_2"); + } + } + } // otherwise + return null; + }; + // wave 4 const resetGame = () => { - // Complete in Wave 4 - } + setPlayer("player_1"); + setSquares(generateSquares()); + setWinner(null); + }; return (

React Tic Tac Toe

-

The winner is ... -- Fill in for wave 3

- +

The winner is {winner}

+
- +
); -} +}; export default App; diff --git a/src/components/Board.js b/src/components/Board.js index 78bfc58e..6dd4745b 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -15,8 +15,7 @@ const generateSquareComponents = (squares, onClickCallback, player) => { onClickCallback={onClickCallback} player={player} key={id} - - /> + /> ); }); @@ -26,7 +25,7 @@ return squareComponents; const Board = ({ squares, onClickCallback, player }) => { const squareList = generateSquareComponents(squares, onClickCallback, player); - console.log(squareList); + return
{squareList}
From f4e256c03729df9dfe5518a5ceef4514bda55519 Mon Sep 17 00:00:00 2001 From: Haben Date: Mon, 20 Apr 2020 15:22:49 -0700 Subject: [PATCH 6/6] everything working --- src/App.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 94f8def0..e3a6b55a 100644 --- a/src/App.js +++ b/src/App.js @@ -33,9 +33,12 @@ const App = () => { // changes the square when it is clicked on. // Then pass it into the squares as a callback const onClickCallback = (squareId) => { + console.log('clicked'); + console.log (winner); if (winner !== null) { return; } + console.log("no winner"); let gameValue = ""; if (player === "player_1") { @@ -78,7 +81,7 @@ const App = () => { const checkForWinner = (squares) => { const winningRows = [ [squares[0][0], squares[0][1], squares[0][2]], - [squares[1][0], squares[1][1], squares[1][1]], + [squares[1][0], squares[1][1], squares[1][2]], [squares[2][0], squares[2][1], squares[2][2]], [squares[0][0], squares[1][0], squares[2][0]], [squares[0][1], squares[1][1], squares[2][1]],