From c9b33fe26941ee6548a1ff93b21e4c2fd2204f21 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 17 Apr 2020 16:42:58 -0700 Subject: [PATCH 1/9] completed generateSquareComponents for Board --- src/components/Board.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 484198fe..d128adfc 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -2,13 +2,24 @@ import React from 'react'; import './Board.css'; import Square from './Square'; import PropTypes from 'prop-types'; +import _ from 'lodash'; const generateSquareComponents = (squares, onClickCallback) => { - // Complete this for Wave 1 - + // generate array of square components + // flatten 2D array to 1D + // then can iterate over each square with Square component + const squares1DArray = _.flatten(squares); + return squares1DArray.map((square) => { + return + }); } +// const Board = (props) => -- same as line below + const Board = ({ squares, onClickCallback }) => { const squareList = generateSquareComponents(squares, onClickCallback); console.log(squareList); From b6f5edb3294b31c8dc5ac32cff3e1abebc9d4e1b Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Fri, 17 Apr 2020 16:45:43 -0700 Subject: [PATCH 2/9] added value prop for generating squares --- src/components/Board.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Board.js b/src/components/Board.js index d128adfc..f2da2bac 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -13,6 +13,7 @@ const generateSquareComponents = (squares, onClickCallback) => { return squares1DArray.map((square) => { return }); From 3a07af70ea3066af6a4499f87feb85e6ec2d123a Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Sat, 18 Apr 2020 20:44:30 -0700 Subject: [PATCH 3/9] callback function linked throughout all components --- src/App.js | 31 ++++++++++++++++++++++++++++++- src/components/Board.js | 8 +++++--- src/components/Square.js | 15 +++++++++++++++ 3 files changed, 50 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index c6f16fc4..ee366e8c 100644 --- a/src/App.js +++ b/src/App.js @@ -25,6 +25,8 @@ const generateSquares = () => { return squares; } + + const App = () => { const [squares, setSquares] = useState(generateSquares()); @@ -33,6 +35,30 @@ const App = () => { // 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 + // callback function that will update the squares that will be + // passed to the board which will then be passed to squares + + + // add x and o on board + // use setSquares to change the board + // need to switch back and forth between two players + // display whose turn it is + const updateSquare = (updatedSquare) => { + // holds new copy of squares + + console.log("Callback function test") + const squaresNew = []; + + squares.forEach ( (square) => { + if (square.id === updatedSquare.id) { + squaresNew.push(updatedSquare); + } else { + squaresNew.push(square); + } + }); + + setSquares(squaresNew); + } const checkForWinner = () => { @@ -52,7 +78,10 @@ const App = () => {
- +
); diff --git a/src/components/Board.js b/src/components/Board.js index f2da2bac..6ab13be9 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -8,13 +8,15 @@ import _ from 'lodash'; const generateSquareComponents = (squares, onClickCallback) => { // generate array of square components // flatten 2D array to 1D + // methods to flatten a 2D array to 1D array: https://stackoverflow.com/questions/14824283/convert-a-2d-javascript-array-to-a-1d-array // then can iterate over each square with Square component const squares1DArray = _.flatten(squares); return squares1DArray.map((square) => { return }); } diff --git a/src/components/Square.js b/src/components/Square.js index 71f46b8c..221cf713 100644 --- a/src/components/Square.js +++ b/src/components/Square.js @@ -8,8 +8,23 @@ const Square = (props) => { // Component to alert a parent // component when it's clicked on. + // need something to handle the click + // passed on from button + const handleClick = () => + { + const updatedSquare = { + id: props.id, + value: props.value, + key: props.id, + onClickCallback: props.onClickCallback + } + + props.onClickCallback(updatedSquare); + }; + return From f78691589fbf1c18fef0c8d2a42f82901dd9af86 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Sun, 19 Apr 2020 15:49:49 -0700 Subject: [PATCH 4/9] square value when clicked, alternates b/w X and O --- src/App.js | 33 +++++++++++++++++++++++---------- src/components/Board.js | 1 - src/components/Square.js | 17 +++-------------- 3 files changed, 26 insertions(+), 25 deletions(-) diff --git a/src/App.js b/src/App.js index ee366e8c..a92125ca 100644 --- a/src/App.js +++ b/src/App.js @@ -30,6 +30,7 @@ const generateSquares = () => { const App = () => { const [squares, setSquares] = useState(generateSquares()); + const [player1Turn, setplayer1Turn] = useState(true); // Wave 2 // You will need to create a method to change the square @@ -43,20 +44,32 @@ const App = () => { // use setSquares to change the board // need to switch back and forth between two players // display whose turn it is - const updateSquare = (updatedSquare) => { - // holds new copy of squares + console.log(squares); + const updateSquare = (id) => { + // holds new copy of squares using spread "..." operator + const squaresNew = [...squares]; - console.log("Callback function test") - const squaresNew = []; + // need to iterate through 2D array + // 2 loops, first go through rows + // then within each row go through each column - squares.forEach ( (square) => { - if (square.id === updatedSquare.id) { - squaresNew.push(updatedSquare); - } else { - squaresNew.push(square); + for (let i = 0; i < 3; i++){ + for (var j = 0; j < 3; j++){ + let currentSquare = squaresNew[i][j]; + if (currentSquare.id === id) { + console.log(currentSquare); + + // square already filled in, exit loop + if (currentSquare.value !== '') return; + + currentSquare.value = player1Turn? PLAYER_1: PLAYER_2; + + setplayer1Turn(!player1Turn); + } } - }); + } + // update board setSquares(squaresNew); } diff --git a/src/components/Board.js b/src/components/Board.js index 6ab13be9..a9fb5eaf 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -25,7 +25,6 @@ const generateSquareComponents = (squares, onClickCallback) => { const Board = ({ squares, onClickCallback }) => { const squareList = generateSquareComponents(squares, onClickCallback); - console.log(squareList); return
{squareList}
diff --git a/src/components/Square.js b/src/components/Square.js index 221cf713..1e9f08fb 100644 --- a/src/components/Square.js +++ b/src/components/Square.js @@ -3,30 +3,19 @@ import PropTypes from 'prop-types'; import './Square.css' -const Square = (props) => { +const Square = ({value, id, onClickCallback}) => { // For Wave 1 enable this // Component to alert a parent // component when it's clicked on. // need something to handle the click // passed on from button - const handleClick = () => - { - const updatedSquare = { - id: props.id, - value: props.value, - key: props.id, - onClickCallback: props.onClickCallback - } - - props.onClickCallback(updatedSquare); - }; return } From eefcd38298ea9cd189a7e994d01939ded417b495 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Sun, 19 Apr 2020 19:00:36 -0700 Subject: [PATCH 5/9] reset game function completed --- src/App.js | 44 ++++++++++++++++++++++++++++++++++---------- 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/src/App.js b/src/App.js index a92125ca..711e729c 100644 --- a/src/App.js +++ b/src/App.js @@ -31,6 +31,7 @@ const App = () => { const [squares, setSquares] = useState(generateSquares()); const [player1Turn, setplayer1Turn] = useState(true); + const [winner, setWinner] = useState(null); // Wave 2 // You will need to create a method to change the square @@ -44,7 +45,6 @@ const App = () => { // use setSquares to change the board // need to switch back and forth between two players // display whose turn it is - console.log(squares); const updateSquare = (id) => { // holds new copy of squares using spread "..." operator const squaresNew = [...squares]; @@ -57,38 +57,62 @@ const App = () => { for (var j = 0; j < 3; j++){ let currentSquare = squaresNew[i][j]; if (currentSquare.id === id) { + + // if square already filled in, exit loop console.log(currentSquare); - - // square already filled in, exit loop + console.log(currentSquare.value); if (currentSquare.value !== '') return; - + currentSquare.value = player1Turn? PLAYER_1: PLAYER_2; - + setplayer1Turn(!player1Turn); } } } // update board + console.log(checkForWinner()); + setWinner(checkForWinner()); setSquares(squaresNew); } const checkForWinner = () => { - // Complete in Wave 3 - + // get all possible combos of winning solutions + const winningSolutions = [ + [squares[0][0].value, squares[0][1].value, squares[0][2].value], + [squares[1][0].value, squares[1][1].value, squares[1][2].value], + [squares[2][0].value, squares[2][1].value, squares[2][0].value], + [squares[0][0].value, squares[1][0].value, squares[2][0].value], + [squares[0][1].value, squares[1][1].value, squares[2][1].value], + [squares[0][2].value, squares[1][2].value, squares[2][2].value], + [squares[0][0].value, squares[1][1].value, squares[2][2].value], + [squares[0][2].value, squares[1][1].value, squares[2][0].value] + ] + + for (let i = 0; i < 8; i++) { + // destructuring each winning solution + const [first, second, third] = winningSolutions[i]; + if (squares[first] && (squares[first] === squares[second]) && (squares[first] === squares[third])) { + return squares[first]; + } + } + return null; } const resetGame = () => { - // Complete in Wave 4 + setSquares(generateSquares()); + setplayer1Turn(true); + setWinner(null); } return (

React Tic Tac Toe

-

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

- +

Current player: {player1Turn? 'Player 1 - X': 'Player 2 - O'}

+

The winner is {`${ winner }`} -- Fill in for wave 3

+
Date: Sun, 19 Apr 2020 19:49:15 -0700 Subject: [PATCH 6/9] checkForWinner logic so winner can be declared --- src/App.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index 711e729c..94e61cea 100644 --- a/src/App.js +++ b/src/App.js @@ -47,6 +47,7 @@ const App = () => { // display whose turn it is const updateSquare = (id) => { // holds new copy of squares using spread "..." operator + if (winner) return; const squaresNew = [...squares]; // need to iterate through 2D array @@ -59,8 +60,6 @@ const App = () => { if (currentSquare.id === id) { // if square already filled in, exit loop - console.log(currentSquare); - console.log(currentSquare.value); if (currentSquare.value !== '') return; currentSquare.value = player1Turn? PLAYER_1: PLAYER_2; @@ -93,10 +92,11 @@ const App = () => { for (let i = 0; i < 8; i++) { // destructuring each winning solution const [first, second, third] = winningSolutions[i]; - if (squares[first] && (squares[first] === squares[second]) && (squares[first] === squares[third])) { - return squares[first]; + if (first && first === second && first === third) { + return first; } } + return null; } @@ -110,8 +110,8 @@ const App = () => {

React Tic Tac Toe

-

Current player: {player1Turn? 'Player 1 - X': 'Player 2 - O'}

-

The winner is {`${ winner }`} -- Fill in for wave 3

+ +

{winner? `The winner is ${ winner === 'X'? 'Player 1' : 'Player 2' }!` : player1Turn? 'Player 1 - X': 'Player 2 - O'}

From 6c34df3c2dda5faf3d2cdd867d28b6c20fb2b243 Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Sun, 19 Apr 2020 20:54:54 -0700 Subject: [PATCH 7/9] completed logic of tie for checkForWinner --- src/App.js | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 94e61cea..910830b8 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,5 @@ import React, { useState } from 'react'; import './App.css'; - import Board from './components/Board'; const PLAYER_1 = 'X'; @@ -47,7 +46,7 @@ const App = () => { // display whose turn it is const updateSquare = (id) => { // holds new copy of squares using spread "..." operator - if (winner) return; + if (winner !== null) return; const squaresNew = [...squares]; // need to iterate through 2D array @@ -63,7 +62,7 @@ const App = () => { if (currentSquare.value !== '') return; currentSquare.value = player1Turn? PLAYER_1: PLAYER_2; - + setplayer1Turn(!player1Turn); } } @@ -81,7 +80,7 @@ const App = () => { const winningSolutions = [ [squares[0][0].value, squares[0][1].value, squares[0][2].value], [squares[1][0].value, squares[1][1].value, squares[1][2].value], - [squares[2][0].value, squares[2][1].value, squares[2][0].value], + [squares[2][0].value, squares[2][1].value, squares[2][2].value], [squares[0][0].value, squares[1][0].value, squares[2][0].value], [squares[0][1].value, squares[1][1].value, squares[2][1].value], [squares[0][2].value, squares[1][2].value, squares[2][2].value], @@ -93,11 +92,21 @@ const App = () => { // destructuring each winning solution const [first, second, third] = winningSolutions[i]; if (first && first === second && first === third) { - return first; + // return first; + let player = ""; + first === 'X'? player = 'Player 1' : player = 'Player 2'; + return player; + } + } + + for (let i = 0; i < 3; i ++) { + const [first, second, third] = winningSolutions[i]; + if (first === "" || second === "" || third === "") { + return null; } } - return null; + return 'no one, it\'s a tie'; } const resetGame = () => { @@ -110,8 +119,7 @@ const App = () => {

React Tic Tac Toe

- -

{winner? `The winner is ${ winner === 'X'? 'Player 1' : 'Player 2' }!` : player1Turn? 'Player 1 - X': 'Player 2 - O'}

+

{winner? `The winner is ${ winner }!` : player1Turn? 'Player 1 - X': 'Player 2 - O'}

From c3ad5f17110f566ba2988c72c9293e1af9d6fe1d Mon Sep 17 00:00:00 2001 From: dnguye2 Date: Sun, 19 Apr 2020 20:58:27 -0700 Subject: [PATCH 8/9] cleaned out unneccessary comments and fixed indent --- src/App.js | 25 +++++-------------------- src/components/Board.js | 5 +---- src/components/Square.js | 9 +-------- 3 files changed, 7 insertions(+), 32 deletions(-) diff --git a/src/App.js b/src/App.js index 910830b8..86e11e69 100644 --- a/src/App.js +++ b/src/App.js @@ -32,27 +32,10 @@ const App = () => { const [player1Turn, setplayer1Turn] = useState(true); 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 - // callback function that will update the squares that will be - // passed to the board which will then be passed to squares - - - // add x and o on board - // use setSquares to change the board - // need to switch back and forth between two players - // display whose turn it is const updateSquare = (id) => { - // holds new copy of squares using spread "..." operator if (winner !== null) return; const squaresNew = [...squares]; - // need to iterate through 2D array - // 2 loops, first go through rows - // then within each row go through each column - for (let i = 0; i < 3; i++){ for (var j = 0; j < 3; j++){ let currentSquare = squaresNew[i][j]; @@ -61,14 +44,13 @@ const App = () => { // if square already filled in, exit loop if (currentSquare.value !== '') return; - currentSquare.value = player1Turn? PLAYER_1: PLAYER_2; + currentSquare.value = player1Turn? PLAYER_1 : PLAYER_2; setplayer1Turn(!player1Turn); } } } - // update board console.log(checkForWinner()); setWinner(checkForWinner()); setSquares(squaresNew); @@ -91,14 +73,16 @@ const App = () => { for (let i = 0; i < 8; i++) { // destructuring each winning solution const [first, second, third] = winningSolutions[i]; + if (first && first === second && first === third) { - // return first; + // assignment of winner based off X or O let player = ""; first === 'X'? player = 'Player 1' : player = 'Player 2'; return player; } } + // handling continuing the game for (let i = 0; i < 3; i ++) { const [first, second, third] = winningSolutions[i]; if (first === "" || second === "" || third === "") { @@ -106,6 +90,7 @@ const App = () => { } } + // when all squares are filled return 'no one, it\'s a tie'; } diff --git a/src/components/Board.js b/src/components/Board.js index a9fb5eaf..512fc683 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -8,8 +8,7 @@ import _ from 'lodash'; const generateSquareComponents = (squares, onClickCallback) => { // generate array of square components // flatten 2D array to 1D - // methods to flatten a 2D array to 1D array: https://stackoverflow.com/questions/14824283/convert-a-2d-javascript-array-to-a-1d-array - // then can iterate over each square with Square component + const squares1DArray = _.flatten(squares); return squares1DArray.map((square) => { return { }); } -// const Board = (props) => -- same as line below - const Board = ({ squares, onClickCallback }) => { const squareList = generateSquareComponents(squares, onClickCallback); return
diff --git a/src/components/Square.js b/src/components/Square.js index 1e9f08fb..609eeeb0 100644 --- a/src/components/Square.js +++ b/src/components/Square.js @@ -3,14 +3,7 @@ import PropTypes from 'prop-types'; import './Square.css' -const Square = ({value, id, onClickCallback}) => { - // For Wave 1 enable this - // Component to alert a parent - // component when it's clicked on. - - // need something to handle the click - // passed on from button - +const Square = ({value, id, onClickCallback}) => { return