From 74adf8158a97138aee487229001a293e62a74fe9 Mon Sep 17 00:00:00 2001 From: Ruthie Newman Date: Thu, 24 Jun 2021 18:54:25 -0700 Subject: [PATCH 1/2] Adds functionality to generateSquareComponents function, add handleClick function to Square component, adds function to mark board with appropriate symbol in response to click. --- src/App.js | 41 +++++++++++++++++++++++++++++++++++++--- src/components/Board.js | 22 ++++++++++++++++++--- src/components/Square.js | 18 +++++++++++++----- 3 files changed, 70 insertions(+), 11 deletions(-) diff --git a/src/App.js b/src/App.js index 6005602b..e3c76064 100644 --- a/src/App.js +++ b/src/App.js @@ -3,8 +3,9 @@ import './App.css'; 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 = []; @@ -30,12 +31,45 @@ const App = () => { // This starts state off as a 2D array of JS objects with // empty value and unique ids. const [squares, setSquares] = useState(generateSquares()); + const [currentPlayer, setPlayerState] = useState(PLAYER_1); //or is the state X? + + //if current is player1 then change to player2; // 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 + + + // onClick={() => { + // nextSquares[i] = isXNext ? "X" : "O"; + // setSquares(nextSquares); + + // }} + + const squareId = (id) => { + // console.log(id); + // console.log(currentPlayer) + setPlayerState(!currentPlayer); + const player = currentPlayer ? PLAYER_1 : PLAYER_2; + + squares.forEach(row=>{ + row.forEach(square => { + if (square.id === id) { + if (player === PLAYER_1) { + console.log(PLAYER_1) + square.value = 'x' + + }else{ + console.log(PLAYER_2) + square.value = 'o' + } + } + }) + }) + + } const checkForWinner = () => { // Complete in Wave 3 @@ -62,7 +96,8 @@ const App = () => {
- + + {/* Passing squares as props to Board */}
); diff --git a/src/components/Board.js b/src/components/Board.js index 3add7e88..ecd5591d 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -10,14 +10,30 @@ const generateSquareComponents = (squares, onClickCallback) => { // you need to return a 1D array // of square components + //first iterate through squares and append to a list(flatten) + const flatList = [] + console.log(squares) + squares.forEach(row=>{ + row.forEach(square =>{ + flatList.push(square) + }) + }); + console.log(flatList) + + //then give each square as an argument to Square component + const squareComponents = flatList.map(data => ) + return squareComponents } +// return ( +// //
    • +// ); +// }); + const Board = ({ squares, onClickCallback }) => { const squareList = generateSquareComponents(squares, onClickCallback); console.log(squareList); - return
    - {squareList} -
    + return
    {squareList}
    } Board.propTypes = { diff --git a/src/components/Square.js b/src/components/Square.js index d0ebce48..63d1e7bd 100644 --- a/src/components/Square.js +++ b/src/components/Square.js @@ -8,11 +8,19 @@ const Square = (props) => { // Component to alert a parent // component when it's clicked on. - return + //options for accessing? + // const {id, value, onClickCallback} = props; + //Square = ({id, value, onClickCallback}) => { + + //which button has been clicked? props.id is the square clicked + + //event handler? if square button is clicked then generate event(x or) + + const handleClick = () => { + props.onClickCallback(props.id) + } + + return } Square.propTypes = { From f1f8075415ea3f75cb604d3e97be2bf0d91606b7 Mon Sep 17 00:00:00 2001 From: Ruthie Newman Date: Thu, 24 Jun 2021 20:50:32 -0700 Subject: [PATCH 2/2] Adds functionality to Board.js component. --- src/App.js | 71 ++++++++++++++++++++++------------------ src/components/Board.js | 13 +------- src/components/Square.js | 11 ------- 3 files changed, 41 insertions(+), 54 deletions(-) diff --git a/src/App.js b/src/App.js index e3c76064..6f0d3b2b 100644 --- a/src/App.js +++ b/src/App.js @@ -28,47 +28,29 @@ const generateSquares = () => { const App = () => { - // This starts state off as a 2D array of JS objects with - // empty value and unique ids. const [squares, setSquares] = useState(generateSquares()); - const [currentPlayer, setPlayerState] = useState(PLAYER_1); //or is the state X? - - //if current is player1 then change to player2; - - // 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 - - - // onClick={() => { - // nextSquares[i] = isXNext ? "X" : "O"; - // setSquares(nextSquares); - - // }} - + const [currentPlayer, setPlayerState] = useState(PLAYER_1); const squareId = (id) => { - // console.log(id); - // console.log(currentPlayer) setPlayerState(!currentPlayer); const player = currentPlayer ? PLAYER_1 : PLAYER_2; squares.forEach(row=>{ row.forEach(square => { if (square.id === id) { - if (player === PLAYER_1) { - console.log(PLAYER_1) - square.value = 'x' - - }else{ - console.log(PLAYER_2) - square.value = 'o' - } + if(square.value === '') + if (player === PLAYER_1) { + console.log(PLAYER_1) + square.value = 'x' + }else{ + console.log(PLAYER_2) + square.value = 'o' + } + }else if(square.value != ''){ + checkForWinner() } }) - }) - + }) } const checkForWinner = () => { @@ -81,6 +63,34 @@ const App = () => { // 3 squares in each column match // 3. Go across each diagonal to see if // all three squares have the same value. + + //possible approach to calculating squares + + // const options = [ + // [0,1,2], + // [3,4,5], + // [6,7,8], + // [0,3,6], + // [1,4,7], + // [2,5,8], + // [6,4,2], + // [0,4,8] + // ] + + // squares.forEach(row=>{ + // row.forEach(square=>{ + // for(let i = 0; i < options.length; i++) { + // const [a, b, c] = options[i]; + // console.log(a) + // if (square[a].value && square[a].value === square[b].value && square[a] === square[c]) { + // console.log(square[a]) + // return square[a] + // } + // } + + // }) + // }) + } @@ -97,7 +107,6 @@ const App = () => {
    - {/* Passing squares as props to Board */}
    ); diff --git a/src/components/Board.js b/src/components/Board.js index ecd5591d..7e37706f 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -5,12 +5,8 @@ import PropTypes from 'prop-types'; const generateSquareComponents = (squares, onClickCallback) => { - // Complete this for Wave 1 - // squares is a 2D Array, but - // you need to return a 1D array - // of square components - //first iterate through squares and append to a list(flatten) + const flatList = [] console.log(squares) squares.forEach(row=>{ @@ -18,18 +14,11 @@ const generateSquareComponents = (squares, onClickCallback) => { flatList.push(square) }) }); - console.log(flatList) - //then give each square as an argument to Square component const squareComponents = flatList.map(data => ) return squareComponents } -// return ( -// //
    • -// ); -// }); - const Board = ({ squares, onClickCallback }) => { const squareList = generateSquareComponents(squares, onClickCallback); console.log(squareList); diff --git a/src/components/Square.js b/src/components/Square.js index 63d1e7bd..df31dbb5 100644 --- a/src/components/Square.js +++ b/src/components/Square.js @@ -4,17 +4,6 @@ import PropTypes from 'prop-types'; import './Square.css' const Square = (props) => { - // For Wave 1 enable this - // Component to alert a parent - // component when it's clicked on. - - //options for accessing? - // const {id, value, onClickCallback} = props; - //Square = ({id, value, onClickCallback}) => { - - //which button has been clicked? props.id is the square clicked - - //event handler? if square button is clicked then generate event(x or) const handleClick = () => { props.onClickCallback(props.id)