From 02ea50a096adae3b102ac100c5574dbf735ff6d7 Mon Sep 17 00:00:00 2001 From: kate myer Date: Sun, 19 Apr 2020 16:07:40 -0700 Subject: [PATCH 01/10] wave 1 completed --- src/components/Board.js | 23 ++++++++++++++++++++++- src/components/Square.js | 6 ++---- 2 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/components/Board.js b/src/components/Board.js index 484198fe..af4bc6d7 100644 --- a/src/components/Board.js +++ b/src/components/Board.js @@ -3,10 +3,31 @@ import './Board.css'; import Square from './Square'; import PropTypes from 'prop-types'; - +// description: generate list of Square Components +// param squares : 2d array +// param onClickCallback : callback function +// returns listofsquares : list of Square Components const generateSquareComponents = (squares, onClickCallback) => { // Complete this for Wave 1 + //squares is a 2D array + //create an array + let listofsquares = [] + //populate rows by looping through rows based on squares.length + for (let row = 0; row < squares.length; row += 1) { + //populate colums by looping through columns based on squares + for (let col = 0; col < squares[0].length; col += 1) { + //push Square component coming from Square.js into listofsquares array + //Square comp needs id, value, and onClickCallback + //set Square components .proptypes bc Square.js requires this + let id=squares[row][col].id + let value=squares[row][col].value + listofsquares.push() + } + } + + //return + return listofsquares } const Board = ({ squares, onClickCallback }) => { diff --git a/src/components/Square.js b/src/components/Square.js index 71f46b8c..ab6acfb2 100644 --- a/src/components/Square.js +++ b/src/components/Square.js @@ -8,9 +8,7 @@ const Square = (props) => { // Component to alert a parent // component when it's clicked on. - return } @@ -21,4 +19,4 @@ Square.propTypes = { id: PropTypes.number.isRequired, }; -export default Square +export default Square \ No newline at end of file From a5b6d8c16d308f1f690e8f36b4bbd335fd45d6c9 Mon Sep 17 00:00:00 2001 From: kate myer Date: Sun, 19 Apr 2020 22:03:20 -0700 Subject: [PATCH 02/10] updated button component --- src/components/Square.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Square.js b/src/components/Square.js index ab6acfb2..9c3a87bc 100644 --- a/src/components/Square.js +++ b/src/components/Square.js @@ -1,5 +1,6 @@ import React from 'react'; -import PropTypes from 'prop-types'; +import PropTypes from 'prop-types'; + import './Square.css' @@ -7,12 +8,16 @@ const Square = (props) => { // For Wave 1 enable this // Component to alert a parent // component when it's clicked on. + - return } + + Square.propTypes = { value: PropTypes.string.isRequired, onClickCallback: PropTypes.func.isRequired, From f715fcf9c43af450118b405e7d643528da9ef7a3 Mon Sep 17 00:00:00 2001 From: kate myer Date: Sun, 19 Apr 2020 22:03:54 -0700 Subject: [PATCH 03/10] wave 2 completed --- src/App.js | 41 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index c6f16fc4..82a7e191 100644 --- a/src/App.js +++ b/src/App.js @@ -26,15 +26,49 @@ const generateSquares = () => { } const App = () => { - + //useState here when need to impact the UI and to re-render + //https://github.com/Ada-Developers-Academy/textbook-curriculum/blob/master/React/events.md const [squares, setSquares] = useState(generateSquares()); - + const [currentPlayer, setCurrentPlayer] = useState(PLAYER_1); // 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 = (id) => { + // id is the id of the square that is being updated + // find the id in squares + //id = 8 = squares[2][2].id + console.log(id) + + // https://stackoverflow.com/questions/42037369/how-to-edit-an-item-in-a-state-array + const copySquares = squares.slice() + for (let row = 0; row < copySquares.length; row += 1) { + for (let col = 0; col < copySquares[0].length; col += 1) { + let currentId=copySquares[row][col].id + //check if ids match + if (id === currentId) { + //check if value is not empty, prevent being overriden + if (copySquares[row][col].value !== '') return; + // update the value of the square to currentPlayer + copySquares[row][col].value = currentPlayer + // update squares = set and refresh page + setSquares(copySquares) + + // set to next player + if (currentPlayer===PLAYER_1) { + setCurrentPlayer(PLAYER_2) + } + else { + setCurrentPlayer(PLAYER_1) + } + return; + } + } + } + }; + const checkForWinner = () => { // Complete in Wave 3 @@ -49,10 +83,11 @@ const App = () => {

React Tic Tac Toe

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

+

{currentPlayer}

- +
); From 7f211868af1e2a4ab4e57b4411953239ae1a0cd2 Mon Sep 17 00:00:00 2001 From: kate myer Date: Sun, 19 Apr 2020 23:05:18 -0700 Subject: [PATCH 04/10] clarified function --- src/components/Square.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Square.js b/src/components/Square.js index 9c3a87bc..f100b95e 100644 --- a/src/components/Square.js +++ b/src/components/Square.js @@ -10,7 +10,7 @@ const Square = (props) => { // component when it's clicked on. - return From 1a20f4c5414907226a9be1a46b53bc0920af8ab3 Mon Sep 17 00:00:00 2001 From: kate myer Date: Sun, 19 Apr 2020 23:05:29 -0700 Subject: [PATCH 05/10] wave 4 --- src/App.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 82a7e191..bb31982c 100644 --- a/src/App.js +++ b/src/App.js @@ -30,6 +30,7 @@ const App = () => { //https://github.com/Ada-Developers-Academy/textbook-curriculum/blob/master/React/events.md const [squares, setSquares] = useState(generateSquares()); const [currentPlayer, setCurrentPlayer] = useState(PLAYER_1); + // Wave 2 // You will need to create a method to change the square // When it is clicked on. @@ -74,8 +75,12 @@ const App = () => { } - const resetGame = () => { - // Complete in Wave 4 + const onClickResetGame = () => { + // Complete in Wave 4: resetting all states + // reset setSquares to default generateSquares()); + setSquares(generateSquares()) + //reset setcurrentPlayer to default PLAYER_1 + setCurrentPlayer(PLAYER_1) } return ( @@ -83,8 +88,8 @@ const App = () => {

React Tic Tac Toe

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

-

{currentPlayer}

- +

current player {currentPlayer}

+
From 92fab3fd35ddcec42817f17e625ed4678768a332 Mon Sep 17 00:00:00 2001 From: kate myer Date: Sun, 19 Apr 2020 23:06:54 -0700 Subject: [PATCH 06/10] cleaned up code --- src/components/Square.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Square.js b/src/components/Square.js index f100b95e..46d0360c 100644 --- a/src/components/Square.js +++ b/src/components/Square.js @@ -12,7 +12,6 @@ const Square = (props) => { return } From d75935134d356dc2b771b10c54ffc0034843fc63 Mon Sep 17 00:00:00 2001 From: kate myer Date: Sun, 19 Apr 2020 23:13:29 -0700 Subject: [PATCH 07/10] optional wave deployed --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 92da3af2..fe3ac7ef 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "react-dom": "^16.13.1", "react-scripts": "3.4.1" }, - "homepage": "http://adagold.github.io/react-tic-tac-toe", + "homepage": "http://katemyer.github.io/react-tic-tac-toe", "scripts": { "start": "react-scripts start", "build": "react-scripts build", From 2a1d5de276ecfe270271c57ac43dcd838ee22659 Mon Sep 17 00:00:00 2001 From: kate myer Date: Mon, 20 Apr 2020 01:38:17 -0700 Subject: [PATCH 08/10] part of wave 3 --- src/App.js | 78 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 71 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index bb31982c..9011e520 100644 --- a/src/App.js +++ b/src/App.js @@ -30,19 +30,23 @@ const App = () => { //https://github.com/Ada-Developers-Academy/textbook-curriculum/blob/master/React/events.md const [squares, setSquares] = useState(generateSquares()); const [currentPlayer, setCurrentPlayer] = useState(PLAYER_1); - + const [currentWinner, setCurrentWinner] = 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 - const onClickCallback = (id) => { + //check if a winner is set + if (currentWinner !== null){ + //if there is a winner, break therefore do not update squares + return; + } // id is the id of the square that is being updated // find the id in squares //id = 8 = squares[2][2].id - console.log(id) - + //console.log(id) // https://stackoverflow.com/questions/42037369/how-to-edit-an-item-in-a-state-array const copySquares = squares.slice() for (let row = 0; row < copySquares.length; row += 1) { @@ -56,7 +60,10 @@ const App = () => { copySquares[row][col].value = currentPlayer // update squares = set and refresh page setSquares(copySquares) - + // after updating board, check for win + console.log(checkForWinner()) + //then check is board is filled + console.log(`is filled ${isSquaresFilled()}`) // set to next player if (currentPlayer===PLAYER_1) { setCurrentPlayer(PLAYER_2) @@ -72,23 +79,80 @@ const App = () => { const checkForWinner = () => { // Complete in Wave 3 + //check for row winners, example = 'ooo' + //loop through each row + let winner = null + for (let row = 0; row < squares.length; row += 1){ + //check if each column in this row equals one another + if (squares[row][0].value === squares[row][1].value && squares[row][0].value === squares[row][2].value && squares[row][0].value !== ''){ + //if true, winner based on value, ex: x + winner = squares[row][2].value; + //update squares = set and refresh page and checking for winner + setCurrentWinner(winner) + } + } + //check column winners + for (let col = 0; col < 3; col += 1) { + //check if each row in this colum equals one another + if(squares[0][col].value === squares[1][col].value && squares[0][col].value === squares[2][col].value && squares[0][col].value !== ''){ + //if true, winner based on value + winner = squares[0][col].value; + //update squares to set and refresh page to check for winner + setCurrentWinner(winner) + } + } + //check diagonal winner + if (squares[0][0].value === squares[1][1].value + && squares[2][2].value === squares[0][0].value + && squares[0][0].value !== ''){ + winner = squares[0][0].value; + setCurrentWinner(winner) + } + else if (squares[2][0].value === squares[1][1].value + && squares[0][2].value === squares[2][0].value + && squares[2][0].value !== ''){ + winner = squares[2][0].value; + setCurrentWinner(winner) + } + return winner } + + const isSquaresFilled = () => { + let isFilled = true; + //turn squares array from 2d to 1d:https://stackoverflow.com/questions/14824283/convert-a-2d-javascript-array-to-a-1d-array + let squaresflat = [].concat(...squares); + //loop through squares + squaresflat.forEach((item, index) => { + //console.log(item) //{id, value} + //console.log(index) //index + //check if value is not '' + if (item.value === ''){ + //if true, there is a value + return false; + } + }) + return isFilled + } + + const onClickResetGame = () => { // Complete in Wave 4: resetting all states // reset setSquares to default generateSquares()); setSquares(generateSquares()) //reset setcurrentPlayer to default PLAYER_1 setCurrentPlayer(PLAYER_1) + //reset currentWinner + setCurrentWinner(null) } return (

React Tic Tac Toe

-

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

-

current player {currentPlayer}

+

The winner is {currentWinner}

+

Current Player {currentPlayer}

From b7a98db5a77a98ac87aa2c1f375065d7f290ffe3 Mon Sep 17 00:00:00 2001 From: kate myer Date: Mon, 20 Apr 2020 10:02:51 -0700 Subject: [PATCH 09/10] completed wave 3 --- src/App.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index 9011e520..b0ea7b17 100644 --- a/src/App.js +++ b/src/App.js @@ -89,6 +89,8 @@ const App = () => { winner = squares[row][2].value; //update squares = set and refresh page and checking for winner setCurrentWinner(winner) + //stop evaluating other combinations, return winner + return winner } } //check column winners @@ -99,7 +101,7 @@ const App = () => { winner = squares[0][col].value; //update squares to set and refresh page to check for winner setCurrentWinner(winner) - + return winner } } //check diagonal winner @@ -108,12 +110,19 @@ const App = () => { && squares[0][0].value !== ''){ winner = squares[0][0].value; setCurrentWinner(winner) + return winner } else if (squares[2][0].value === squares[1][1].value && squares[0][2].value === squares[2][0].value && squares[2][0].value !== ''){ winner = squares[2][0].value; setCurrentWinner(winner) + return winner + } + //check ties + //if all squares are filled, there are no winners + if (isSquaresFilled() && winner === null) { + setCurrentWinner('no winner, tied') } return winner } @@ -124,15 +133,14 @@ const App = () => { //turn squares array from 2d to 1d:https://stackoverflow.com/questions/14824283/convert-a-2d-javascript-array-to-a-1d-array let squaresflat = [].concat(...squares); //loop through squares - squaresflat.forEach((item, index) => { - //console.log(item) //{id, value} - //console.log(index) //index - //check if value is not '' - if (item.value === ''){ + for (let i in squaresflat) { + let square = squaresflat[i]; + //check if value is '' + if (square.value === ''){ //if true, there is a value return false; } - }) + } return isFilled } From 6db0cb5aa2f8c84839a42a8284e1eed9413509ba Mon Sep 17 00:00:00 2001 From: katemyer <51521448+katemyer@users.noreply.github.com> Date: Wed, 22 Apr 2020 23:37:45 -0700 Subject: [PATCH 10/10] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5bc51b96..0be50707 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # React Tic Tac Toe - +deployed: https://katemyer.github.io/react-tic-tac-toe/ ## At A Glance - Individual [Stage 2 project](https://github.com/Ada-Developers-Academy/pedagogy/blob/master/classroom/rule-of-three.md#stage-2)