From 1627938de7a792cdfad0cd8bb5029905a1acbce1 Mon Sep 17 00:00:00 2001
From: Faezeh Ashtiani <faezeh.ashtiani@gmail.com>
Date: Fri, 17 Apr 2020 11:34:25 -0700
Subject: [PATCH 1/4] Finishes wave 1 and 2

---
 src/App.js               | 38 ++++++++++++++++++++++++++++++++++++--
 src/components/Board.js  | 18 ++++++++++++++++++
 src/components/Square.js |  3 ++-
 3 files changed, 56 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index c6f16fc4..27a9f80f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,16 +25,49 @@ const generateSquares = () => {
   return squares;
 }
 
+
 const App = () => {
+  
 
   const [squares, setSquares] = useState(generateSquares());
-
+  const [player, setPlayer] = 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) => {
+    // console.log(id) 
+    // When the user clicks first clicks on a square it should set the square's value to the proper x or o depending on the current player's turn.
+    
+    // find the square with id 
+    // put player on value 
+    const newSquares = [];
 
+    for (let row of squares) {
+      const newRow = [];
+      newSquares.push(newRow);
+      for (let col of row) {
+        const newCol = {...col}
+        if (newCol.id === id) {
+          if (newCol.value !== "") {
+            return;
+          }
+          newCol.value = player
+        };
+        newRow.push(newCol);
+      };
+    };
+    
+    setSquares(newSquares);
+    // set player again
+    const newPlayer = (player === PLAYER_1) ? PLAYER_2 : PLAYER_1
+    setPlayer(newPlayer);
+
+    // checkForWinner(newSquares);
+  }
 
+  // put in a param
   const checkForWinner = () => {
     // Complete in Wave 3
 
@@ -52,7 +85,8 @@ const App = () => {
         <button>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={onClickCallback} />
+        {/* {console.log(generateSquares())} */}
       </main>
     </div>
   );
diff --git a/src/components/Board.js b/src/components/Board.js
index 484198fe..27308ee5 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -4,9 +4,27 @@ import Square from './Square';
 import PropTypes from 'prop-types';
 
 
+
 const generateSquareComponents = (squares, onClickCallback) => {
   // Complete this for Wave 1
 
+  const squareBoxes = [];
+
+  for (let row of squares) {
+    for (let col of row) {
+      squareBoxes.push(
+        <Square 
+          id={col.id}
+          value={col.value}
+          onClickCallback={onClickCallback}
+          key={col.id}
+        />
+      );
+    };
+  };
+
+  return squareBoxes;
+
 }
 
 const Board = ({ squares, onClickCallback }) => {
diff --git a/src/components/Square.js b/src/components/Square.js
index 71f46b8c..a2744b45 100644
--- a/src/components/Square.js
+++ b/src/components/Square.js
@@ -7,8 +7,9 @@ const Square = (props) => {
   // For Wave 1 enable this 
   //  Component to alert a parent 
   //  component when it's clicked on.
+  const buttonClick = () => props.onClickCallback(props.id);
 
-  return <button
+  return <button onClick={buttonClick}
     className="square"
   >
     {props.value}

From 9a2efe8d973833d890ab1d3f98402d6468476c0d Mon Sep 17 00:00:00 2001
From: Faezeh Ashtiani <faezeh.ashtiani@gmail.com>
Date: Sun, 19 Apr 2020 22:44:05 -0700
Subject: [PATCH 2/4] passes wave 3

---
 src/App.js               | 45 +++++++++++++++++++++++++++++++++-------
 src/components/Square.js |  1 +
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/App.js b/src/App.js
index 27a9f80f..fa1cdad8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -31,6 +31,7 @@ const App = () => {
 
   const [squares, setSquares] = useState(generateSquares());
   const [player, setPlayer] = useState(PLAYER_1);
+  const [winner, setWinner] = useState("No one! it's a tie!!");
     
   // Wave 2
   // You will need to create a method to change the square 
@@ -38,7 +39,6 @@ const App = () => {
   //   Then pass it into the squares as a callback
   const onClickCallback = (id) => {
     // console.log(id) 
-    // When the user clicks first clicks on a square it should set the square's value to the proper x or o depending on the current player's turn.
     
     // find the square with id 
     // put player on value 
@@ -59,18 +59,49 @@ const App = () => {
       };
     };
     
+    // render new squares
     setSquares(newSquares);
+
+    // see if anyone has one
+    checkForWinner(newSquares);
+
     // set player again
     const newPlayer = (player === PLAYER_1) ? PLAYER_2 : PLAYER_1
     setPlayer(newPlayer);
-
-    // checkForWinner(newSquares);
   }
 
-  // put in a param
-  const checkForWinner = () => {
+  const checkForWinner = (squares) => {
     // Complete in Wave 3
+    const values = squares.flat().map((square) => square.value);
+    // console.log(values);
+    const threeX = ['X','X','X'];
+    const threeO = ['O','O','O'];
+
+    if (arrayEquals([values[0],values[1],values[2]], threeX) ||
+      arrayEquals([values[3],values[4],values[5]], threeX) ||
+      arrayEquals([values[6],values[7],values[8]], threeX) ||
+      arrayEquals([values[0],values[3],values[6]], threeX) ||
+      arrayEquals([values[1],values[4],values[7]], threeX) ||
+      arrayEquals([values[2],values[5],values[8]], threeX) ||
+      arrayEquals([values[0],values[4],values[8]], threeX) ||
+      arrayEquals([values[2],values[4],values[6]], threeX)) {
+        return setWinner("Player 1")
+    } else if (arrayEquals([values[0],values[1],values[2]], threeO) ||
+        arrayEquals([values[3],values[4],values[5]], threeO) ||
+        arrayEquals([values[6],values[7],values[8]], threeO) ||
+        arrayEquals([values[0],values[3],values[6]], threeO) ||
+        arrayEquals([values[1],values[4],values[7]], threeO) ||
+        arrayEquals([values[2],values[5],values[8]], threeO) ||
+        arrayEquals([values[0],values[4],values[8]], threeO) ||
+        arrayEquals([values[2],values[4],values[6]], threeO)) {
+        return setWinner("Player 2")
+    } else {
+        return setWinner("No one! it's a tie!!")
+    };
+  }
 
+  const arrayEquals = (one, two) => {
+    return JSON.stringify(one) === JSON.stringify(two);
   }
 
   const resetGame = () => {
@@ -81,8 +112,8 @@ const App = () => {
     <div className="App">
       <header className="App-header">
         <h1>React Tic Tac Toe</h1>
-        <h2>The winner is ... -- Fill in for wave 3 </h2>
-        <button>Reset Game</button>
+        <h2>The winner is {winner} </h2>
+        <button /*onClick={}*/>Reset Game</button>
       </header>
       <main>
         <Board squares={squares} onClickCallback={onClickCallback} />
diff --git a/src/components/Square.js b/src/components/Square.js
index a2744b45..ab64dcfe 100644
--- a/src/components/Square.js
+++ b/src/components/Square.js
@@ -20,6 +20,7 @@ Square.propTypes = {
   value: PropTypes.string.isRequired,
   onClickCallback: PropTypes.func.isRequired,
   id: PropTypes.number.isRequired,
+  // onUpdateStudent: PropTypes.func.isRequired,
 };
 
 export default Square

From e58167faaf6eee39d34730b3e2472fa9512c7caa Mon Sep 17 00:00:00 2001
From: Faezeh Ashtiani <faezeh.ashtiani@gmail.com>
Date: Mon, 20 Apr 2020 00:14:46 -0700
Subject: [PATCH 3/4] passes wave 4

---
 src/App.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index fa1cdad8..f4fb21c7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -50,7 +50,9 @@ const App = () => {
       for (let col of row) {
         const newCol = {...col}
         if (newCol.id === id) {
-          if (newCol.value !== "") {
+          if (newCol.value !== "" || 
+            winner === "Player 1" ||
+            winner === "Player 2") {
             return;
           }
           newCol.value = player
@@ -106,6 +108,8 @@ const App = () => {
 
   const resetGame = () => {
     // Complete in Wave 4
+    window.location.reload();
+    // found this on upmostly.com
   }
 
   return (
@@ -113,7 +117,7 @@ const App = () => {
       <header className="App-header">
         <h1>React Tic Tac Toe</h1>
         <h2>The winner is {winner} </h2>
-        <button /*onClick={}*/>Reset Game</button>
+        <button  onClick={resetGame}>Reset Game</button>
       </header>
       <main>
         <Board squares={squares} onClickCallback={onClickCallback} />

From 23a824233ab17c5ae65e1add6651add3a3c137f0 Mon Sep 17 00:00:00 2001
From: Faezeh Ashtiani <faezeh.ashtiani@gmail.com>
Date: Mon, 20 Apr 2020 00:16:44 -0700
Subject: [PATCH 4/4] cleaned up

---
 src/App.js               | 11 +----------
 src/components/Square.js |  1 -
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index f4fb21c7..34d87c72 100644
--- a/src/App.js
+++ b/src/App.js
@@ -38,10 +38,6 @@ const App = () => {
   //   When it is clicked on.
   //   Then pass it into the squares as a callback
   const onClickCallback = (id) => {
-    // console.log(id) 
-    
-    // find the square with id 
-    // put player on value 
     const newSquares = [];
 
     for (let row of squares) {
@@ -61,13 +57,9 @@ const App = () => {
       };
     };
     
-    // render new squares
     setSquares(newSquares);
-
-    // see if anyone has one
     checkForWinner(newSquares);
 
-    // set player again
     const newPlayer = (player === PLAYER_1) ? PLAYER_2 : PLAYER_1
     setPlayer(newPlayer);
   }
@@ -75,7 +67,7 @@ const App = () => {
   const checkForWinner = (squares) => {
     // Complete in Wave 3
     const values = squares.flat().map((square) => square.value);
-    // console.log(values);
+
     const threeX = ['X','X','X'];
     const threeO = ['O','O','O'];
 
@@ -121,7 +113,6 @@ const App = () => {
       </header>
       <main>
         <Board squares={squares} onClickCallback={onClickCallback} />
-        {/* {console.log(generateSquares())} */}
       </main>
     </div>
   );
diff --git a/src/components/Square.js b/src/components/Square.js
index ab64dcfe..a2744b45 100644
--- a/src/components/Square.js
+++ b/src/components/Square.js
@@ -20,7 +20,6 @@ Square.propTypes = {
   value: PropTypes.string.isRequired,
   onClickCallback: PropTypes.func.isRequired,
   id: PropTypes.number.isRequired,
-  // onUpdateStudent: PropTypes.func.isRequired,
 };
 
 export default Square