From e26713f9073f152f62e56e8e433a51d5e52e8b63 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Sun, 19 Apr 2020 04:55:31 -0700
Subject: [PATCH 01/14] console logs when a square is clicked

---
 src/App.js               |  5 +++++
 src/components/Board.js  | 12 ++++++++++++
 src/components/Square.js |  9 ++-------
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/App.js b/src/App.js
index c6f16fc4..ca5ecf11 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,10 +25,15 @@ const generateSquares = () => {
   return squares;
 }
 
+
 const App = () => {
 
   const [squares, setSquares] = useState(generateSquares());
 
+  const changeSquare = () => {
+
+  }
+
   // Wave 2
   // You will need to create a method to change the square 
   //   When it is clicked on.
diff --git a/src/components/Board.js b/src/components/Board.js
index 484198fe..6f4849b5 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -6,7 +6,19 @@ import PropTypes from 'prop-types';
 
 const generateSquareComponents = (squares, onClickCallback) => {
   // Complete this for Wave 1
+  const squareComponents = squares.map(row => row.map( square => <Square 
+    id={square.id}
+    value={square.value}
+    key={square.id}
+    onClickCallback={handleClick}/> ))
 
+  return squareComponents;
+
+
+}
+
+const handleClick = (id) => {
+  console.log(`${id} was clicked!`);
 }
 
 const Board = ({ squares, onClickCallback }) => {
diff --git a/src/components/Square.js b/src/components/Square.js
index 71f46b8c..1ff3f125 100644
--- a/src/components/Square.js
+++ b/src/components/Square.js
@@ -4,15 +4,10 @@ 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.
 
-  return <button
-    className="square"
-  >
+  return <button className="square" onClick={ () => props.onClickCallback(props.id)}>
     {props.value}
-  </button>
+    </button>
 }
 
 Square.propTypes = {

From b18b2580e46c09982de0c919ca790d804bc16c38 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Mon, 20 Apr 2020 00:46:33 -0700
Subject: [PATCH 02/14] reporting which square was clicked and its value

---
 src/App.js               | 23 +++++++++--------------
 src/components/Board.js  |  8 ++------
 src/components/Square.js |  2 +-
 3 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/App.js b/src/App.js
index ca5ecf11..8421519d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,17 +9,11 @@ const PLAYER_2 = 'O';
 const generateSquares = () => {
   const squares = [];
 
-  let currentId = 0;
-
-  for (let row = 0; row < 3; row += 1) {
-    squares.push([]);
-    for (let col = 0; col < 3; col += 1) {
-      squares[row].push({
-        id: currentId,
-        value: '',
-      });
-      currentId += 1;
-    }
+  for (let i = 0; i < 9; i++) {
+    squares.push({
+      id: i,
+      value: 'cat',
+    })
   }
 
   return squares;
@@ -30,8 +24,9 @@ const App = () => {
 
   const [squares, setSquares] = useState(generateSquares());
 
-  const changeSquare = () => {
-
+  const changeSquare = (i) => {
+    let num = i;
+    console.log(`CLICKED: Square #${i}, value of ${squares[i].value}`);
   }
 
   // Wave 2
@@ -57,7 +52,7 @@ const App = () => {
         <button>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={changeSquare} />
       </main>
     </div>
   );
diff --git a/src/components/Board.js b/src/components/Board.js
index 6f4849b5..fce0ae2d 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -6,21 +6,17 @@ import PropTypes from 'prop-types';
 
 const generateSquareComponents = (squares, onClickCallback) => {
   // Complete this for Wave 1
-  const squareComponents = squares.map(row => row.map( square => <Square 
+  const squareComponents = squares.map(square => <Square 
     id={square.id}
     value={square.value}
     key={square.id}
-    onClickCallback={handleClick}/> ))
+    onClickCallback={onClickCallback}/> )
 
   return squareComponents;
 
 
 }
 
-const handleClick = (id) => {
-  console.log(`${id} was clicked!`);
-}
-
 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 1ff3f125..39c450ee 100644
--- a/src/components/Square.js
+++ b/src/components/Square.js
@@ -5,7 +5,7 @@ import './Square.css'
 
 const Square = (props) => {
 
-  return <button className="square" onClick={ () => props.onClickCallback(props.id)}>
+  return <button className="square" onClick={ () => {props.onClickCallback(props.id)}}>
     {props.value}
     </button>
 }

From 690d07760712ba6d4664bee794a23b39ef36c757 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Mon, 20 Apr 2020 03:03:49 -0700
Subject: [PATCH 03/14] squares reflect new values

---
 src/App.js               | 44 ++++++++++++++++++++++++++++------------
 src/components/Board.js  |  8 +++-----
 src/components/Square.js |  2 +-
 3 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/src/App.js b/src/App.js
index 8421519d..60b79d66 100644
--- a/src/App.js
+++ b/src/App.js
@@ -12,32 +12,50 @@ const generateSquares = () => {
   for (let i = 0; i < 9; i++) {
     squares.push({
       id: i,
-      value: 'cat',
+      value: null,
     })
   }
-
   return squares;
 }
 
-
 const App = () => {
 
   const [squares, setSquares] = useState(generateSquares());
+  const [numSquaresFilled, setNumSquaresFilled] = useState(1);
+  const [winner, setWinner] = useState(null);
 
   const changeSquare = (i) => {
-    let num = i;
     console.log(`CLICKED: Square #${i}, value of ${squares[i].value}`);
+    if (squares[i].value || winner) return; //do nothing to filled squares or when winner exists
+    
+    setNumSquaresFilled(numSquaresFilled + 1);
+    let updatedSquares = [...squares];
+    numSquaresFilled % 2 === 0 ? updatedSquares[i].value = PLAYER_1 : updatedSquares[i].value = PLAYER_2
+    setSquares(updatedSquares);
+    if (numSquaresFilled > 4) {
+      console.log(`Placed ${numSquaresFilled} moves... checking for winner...`);
+      checkForWinner(i);
+    };
   }
 
-  // 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 checkForWinner = () => {
-    // Complete in Wave 3
-
+  const checkForWinner = (i) => {
+
+    const winConditions = [ //for input i, these are the corresponding indexes that must be filled
+      [ [1, 2], [4, 8], [3, 6] ],
+      [ [1, 3], [4, 7] ],
+      [ [0, 1], [4, 6], [5, 8] ],
+      [ [0, 6], [4, 5] ],
+      [ [0, 8], [1, 7], [2, 6], [3, 5] ],
+      [ [3, 4], [2, 8] ],
+      [ [0, 3], [2, 4], [7, 8] ],
+      [ [6, 8], [1, 4] ],
+      [ [0, 4], [6, 7], [2, 5 ] ],
+    ]
+
+    winConditions[i].forEach(condition => {
+      const [a, b] = condition
+      if ( squares[a].value === squares[b].value && squares[a].value === squares[i].value ) setWinner(squares[a].value);
+    });
   }
 
   const resetGame = () => {
diff --git a/src/components/Board.js b/src/components/Board.js
index fce0ae2d..2464d893 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -5,16 +5,14 @@ import PropTypes from 'prop-types';
 
 
 const generateSquareComponents = (squares, onClickCallback) => {
-  // Complete this for Wave 1
-  const squareComponents = squares.map(square => <Square 
+
+  const squareComponents = squares.map(square => <Square
+    key={square.id} 
     id={square.id}
     value={square.value}
-    key={square.id}
     onClickCallback={onClickCallback}/> )
 
   return squareComponents;
-
-
 }
 
 const Board = ({ squares, onClickCallback }) => {
diff --git a/src/components/Square.js b/src/components/Square.js
index 39c450ee..140475ca 100644
--- a/src/components/Square.js
+++ b/src/components/Square.js
@@ -11,7 +11,7 @@ const Square = (props) => {
 }
 
 Square.propTypes = {
-  value: PropTypes.string.isRequired,
+  value: PropTypes.string,
   onClickCallback: PropTypes.func.isRequired,
   id: PropTypes.number.isRequired,
 };

From 76f049d4b27e5ca7230ac203c30862442c368c78 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Mon, 20 Apr 2020 03:05:26 -0700
Subject: [PATCH 04/14] console logs winner

---
 src/App.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 60b79d66..7a986581 100644
--- a/src/App.js
+++ b/src/App.js
@@ -26,7 +26,10 @@ const App = () => {
 
   const changeSquare = (i) => {
     console.log(`CLICKED: Square #${i}, value of ${squares[i].value}`);
-    if (squares[i].value || winner) return; //do nothing to filled squares or when winner exists
+    if (squares[i].value || winner) {
+      console.log(`winner is ${winner}`);
+      return; //do nothing to filled squares or when winner exists
+    };
     
     setNumSquaresFilled(numSquaresFilled + 1);
     let updatedSquares = [...squares];

From c714c59e2bce3a3c4c7ae5b25f84ed13d7cacddb Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Mon, 20 Apr 2020 07:14:05 -0700
Subject: [PATCH 05/14] winner now tracked

---
 src/App.js                | 31 +++++++++++++++++--------------
 src/components/Board.js   |  1 +
 src/components/Square.css |  2 +-
 src/components/Square.js  |  1 +
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/App.js b/src/App.js
index 7a986581..fcbe6fa4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,22 +19,21 @@ const generateSquares = () => {
 }
 
 const App = () => {
-
+  const [winner, setWinner] = useState(null);
   const [squares, setSquares] = useState(generateSquares());
   const [numSquaresFilled, setNumSquaresFilled] = useState(1);
-  const [winner, setWinner] = useState(null);
 
   const changeSquare = (i) => {
-    console.log(`CLICKED: Square #${i}, value of ${squares[i].value}`);
-    if (squares[i].value || winner) {
-      console.log(`winner is ${winner}`);
-      return; //do nothing to filled squares or when winner exists
-    };
-    
+    console.log(`CLICKED: Square #${i}, value of ${squares[i].value}, winning is ${squares[i].winning}`);
+
+    if (squares[i].value || winner) return; //do nothing if square is already filled
+
     setNumSquaresFilled(numSquaresFilled + 1);
+
     let updatedSquares = [...squares];
     numSquaresFilled % 2 === 0 ? updatedSquares[i].value = PLAYER_1 : updatedSquares[i].value = PLAYER_2
     setSquares(updatedSquares);
+
     if (numSquaresFilled > 4) {
       console.log(`Placed ${numSquaresFilled} moves... checking for winner...`);
       checkForWinner(i);
@@ -43,7 +42,7 @@ const App = () => {
 
   const checkForWinner = (i) => {
 
-    const winConditions = [ //for input i, these are the corresponding indexes that must be filled
+    const winConditions = [ //for any given input square, these are the corresponding indexes that must be filled
       [ [1, 2], [4, 8], [3, 6] ],
       [ [1, 3], [4, 7] ],
       [ [0, 1], [4, 6], [5, 8] ],
@@ -55,12 +54,16 @@ const App = () => {
       [ [0, 4], [6, 7], [2, 5 ] ],
     ]
 
-    winConditions[i].forEach(condition => {
-      const [a, b] = condition
-      if ( squares[a].value === squares[b].value && squares[a].value === squares[i].value ) setWinner(squares[a].value);
-    });
+    for (let x = 0; x < winConditions[i].length; x++) {
+      const [a, b] = winConditions[i][x];
+      if ( squares[a].value === squares[b].value && squares[a].value === squares[i].value ) { 
+        setWinner(squares[a].value);
+      }
+    }
   }
 
+
+
   const resetGame = () => {
     // Complete in Wave 4
   }
@@ -69,7 +72,7 @@ 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>
+        <h2>The winner is ... {winner} </h2>
         <button>Reset Game</button>
       </header>
       <main>
diff --git a/src/components/Board.js b/src/components/Board.js
index 2464d893..020405ec 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -10,6 +10,7 @@ const generateSquareComponents = (squares, onClickCallback) => {
     key={square.id} 
     id={square.id}
     value={square.value}
+    winning={square.winning}
     onClickCallback={onClickCallback}/> )
 
   return squareComponents;
diff --git a/src/components/Square.css b/src/components/Square.css
index fac299e2..d57127c8 100644
--- a/src/components/Square.css
+++ b/src/components/Square.css
@@ -9,4 +9,4 @@
   justify-content: center;
   align-items: center;
   margin: 2px;
-}
\ No newline at end of file
+}
diff --git a/src/components/Square.js b/src/components/Square.js
index 140475ca..c73bec37 100644
--- a/src/components/Square.js
+++ b/src/components/Square.js
@@ -14,6 +14,7 @@ Square.propTypes = {
   value: PropTypes.string,
   onClickCallback: PropTypes.func.isRequired,
   id: PropTypes.number.isRequired,
+  winning: PropTypes.bool.isRequired,
 };
 
 export default Square

From 86b386946ba7fad53d96d22477f9cfcc7dd8fc0a Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Mon, 20 Apr 2020 07:22:08 -0700
Subject: [PATCH 06/14] displays winner

---
 src/App.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index fcbe6fa4..76b8da67 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,7 +21,7 @@ const generateSquares = () => {
 const App = () => {
   const [winner, setWinner] = useState(null);
   const [squares, setSquares] = useState(generateSquares());
-  const [numSquaresFilled, setNumSquaresFilled] = useState(1);
+  const [numSquaresFilled, setNumSquaresFilled] = useState(0);
 
   const changeSquare = (i) => {
     console.log(`CLICKED: Square #${i}, value of ${squares[i].value}, winning is ${squares[i].winning}`);
@@ -34,7 +34,7 @@ const App = () => {
     numSquaresFilled % 2 === 0 ? updatedSquares[i].value = PLAYER_1 : updatedSquares[i].value = PLAYER_2
     setSquares(updatedSquares);
 
-    if (numSquaresFilled > 4) {
+    if (numSquaresFilled > 3) {
       console.log(`Placed ${numSquaresFilled} moves... checking for winner...`);
       checkForWinner(i);
     };
@@ -72,7 +72,8 @@ const App = () => {
     <div className="App">
       <header className="App-header">
         <h1>React Tic Tac Toe</h1>
-        <h2>The winner is ... {winner} </h2>
+        <h2>{winner ? `Hooray, ${winner} won!` : `Player ${numSquaresFilled % 2 === 0 ? 'X' : 'O'} is up!`}</h2>
+       
         <button>Reset Game</button>
       </header>
       <main>

From 8b98647aa4088fab8254ce78cf065980aa1c61f4 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Mon, 20 Apr 2020 07:23:48 -0700
Subject: [PATCH 07/14] reset button working

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

diff --git a/src/App.js b/src/App.js
index 76b8da67..1f176e3c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -65,7 +65,9 @@ const App = () => {
 
 
   const resetGame = () => {
-    // Complete in Wave 4
+    setWinner(null);
+    setSquares(generateSquares());
+    setNumSquaresFilled(0);
   }
 
   return (
@@ -74,7 +76,7 @@ const App = () => {
         <h1>React Tic Tac Toe</h1>
         <h2>{winner ? `Hooray, ${winner} won!` : `Player ${numSquaresFilled % 2 === 0 ? 'X' : 'O'} is up!`}</h2>
        
-        <button>Reset Game</button>
+        <button onClick={resetGame}>Reset Game</button>
       </header>
       <main>
         <Board squares={squares} onClickCallback={changeSquare} />

From 3f69a5f410e95f8cb31d890df18734002ce6bd0d Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Mon, 20 Apr 2020 07:31:27 -0700
Subject: [PATCH 08/14] cleaned up spacing

---
 src/App.js               | 6 ++----
 src/components/Board.js  | 5 +----
 src/components/Square.js | 1 -
 3 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/App.js b/src/App.js
index 1f176e3c..8572bd46 100644
--- a/src/App.js
+++ b/src/App.js
@@ -24,7 +24,7 @@ const App = () => {
   const [numSquaresFilled, setNumSquaresFilled] = useState(0);
 
   const changeSquare = (i) => {
-    console.log(`CLICKED: Square #${i}, value of ${squares[i].value}, winning is ${squares[i].winning}`);
+    console.log(`CLICKED: Square #${i}, value of ${squares[i].value}`);
 
     if (squares[i].value || winner) return; //do nothing if square is already filled
 
@@ -44,7 +44,7 @@ const App = () => {
 
     const winConditions = [ //for any given input square, these are the corresponding indexes that must be filled
       [ [1, 2], [4, 8], [3, 6] ],
-      [ [1, 3], [4, 7] ],
+      [ [0, 2], [4, 7] ],
       [ [0, 1], [4, 6], [5, 8] ],
       [ [0, 6], [4, 5] ],
       [ [0, 8], [1, 7], [2, 6], [3, 5] ],
@@ -62,8 +62,6 @@ const App = () => {
     }
   }
 
-
-
   const resetGame = () => {
     setWinner(null);
     setSquares(generateSquares());
diff --git a/src/components/Board.js b/src/components/Board.js
index 020405ec..8499772d 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -3,7 +3,6 @@ import './Board.css';
 import Square from './Square';
 import PropTypes from 'prop-types';
 
-
 const generateSquareComponents = (squares, onClickCallback) => {
 
   const squareComponents = squares.map(square => <Square
@@ -26,12 +25,10 @@ const Board = ({ squares, onClickCallback }) => {
 
 Board.propTypes = {
   squares: PropTypes.arrayOf(
-    PropTypes.arrayOf(
       PropTypes.shape({
         id: PropTypes.number.isRequired,
-        value: PropTypes.string.isRequired
+        value: PropTypes.string
       })
-    )
   ),
   onClickCallback: PropTypes.func.isRequired,
 };
diff --git a/src/components/Square.js b/src/components/Square.js
index c73bec37..140475ca 100644
--- a/src/components/Square.js
+++ b/src/components/Square.js
@@ -14,7 +14,6 @@ Square.propTypes = {
   value: PropTypes.string,
   onClickCallback: PropTypes.func.isRequired,
   id: PropTypes.number.isRequired,
-  winning: PropTypes.bool.isRequired,
 };
 
 export default Square

From d62cac708fd08e87dd5995361311f86a5fec6282 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Mon, 20 Apr 2020 08:09:21 -0700
Subject: [PATCH 09/14] removed comments

---
 src/App.js              | 3 ---
 src/components/Board.js | 1 -
 2 files changed, 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 8572bd46..53bb710f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -24,8 +24,6 @@ const App = () => {
   const [numSquaresFilled, setNumSquaresFilled] = useState(0);
 
   const changeSquare = (i) => {
-    console.log(`CLICKED: Square #${i}, value of ${squares[i].value}`);
-
     if (squares[i].value || winner) return; //do nothing if square is already filled
 
     setNumSquaresFilled(numSquaresFilled + 1);
@@ -35,7 +33,6 @@ const App = () => {
     setSquares(updatedSquares);
 
     if (numSquaresFilled > 3) {
-      console.log(`Placed ${numSquaresFilled} moves... checking for winner...`);
       checkForWinner(i);
     };
   }
diff --git a/src/components/Board.js b/src/components/Board.js
index 8499772d..23e73957 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -9,7 +9,6 @@ const generateSquareComponents = (squares, onClickCallback) => {
     key={square.id} 
     id={square.id}
     value={square.value}
-    winning={square.winning}
     onClickCallback={onClickCallback}/> )
 
   return squareComponents;

From 8c838f73c099e6f62799e9726dfd03420e02981f Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Mon, 20 Apr 2020 13:05:39 -0700
Subject: [PATCH 10/14] winning row is colored

---
 src/components/Board.js   | 1 +
 src/components/Square.css | 4 ++++
 src/components/Square.js  | 2 +-
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Board.js b/src/components/Board.js
index 23e73957..88335480 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -9,6 +9,7 @@ const generateSquareComponents = (squares, onClickCallback) => {
     key={square.id} 
     id={square.id}
     value={square.value}
+    isWinner ={square.isWinner}
     onClickCallback={onClickCallback}/> )
 
   return squareComponents;
diff --git a/src/components/Square.css b/src/components/Square.css
index d57127c8..d839cb85 100644
--- a/src/components/Square.css
+++ b/src/components/Square.css
@@ -10,3 +10,7 @@
   align-items: center;
   margin: 2px;
 }
+
+.winner {
+  background-color: aquamarine;
+}
\ No newline at end of file
diff --git a/src/components/Square.js b/src/components/Square.js
index 140475ca..0679522e 100644
--- a/src/components/Square.js
+++ b/src/components/Square.js
@@ -5,7 +5,7 @@ import './Square.css'
 
 const Square = (props) => {
 
-  return <button className="square" onClick={ () => {props.onClickCallback(props.id)}}>
+  return <button className={`square ${props.isWinner ? "winner" : ""}`} onClick={ () => {props.onClickCallback(props.id)}}>
     {props.value}
     </button>
 }

From ce96d820f7addde792740d19b7d54dfdbef9d420 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Mon, 20 Apr 2020 13:06:04 -0700
Subject: [PATCH 11/14] tied board announced correctly

---
 src/App.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 53bb710f..af9e1c46 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,6 +13,7 @@ const generateSquares = () => {
     squares.push({
       id: i,
       value: null,
+      isWinner: false,
     })
   }
   return squares;
@@ -24,20 +25,23 @@ const App = () => {
   const [numSquaresFilled, setNumSquaresFilled] = useState(0);
 
   const changeSquare = (i) => {
+    console.log(`Square: ${squares[i].id}, winning: ${squares[i].isWinner}`)
     if (squares[i].value || winner) return; //do nothing if square is already filled
 
     setNumSquaresFilled(numSquaresFilled + 1);
 
     let updatedSquares = [...squares];
     numSquaresFilled % 2 === 0 ? updatedSquares[i].value = PLAYER_1 : updatedSquares[i].value = PLAYER_2
-    setSquares(updatedSquares);
 
     if (numSquaresFilled > 3) {
       checkForWinner(i);
     };
+
+    setSquares(updatedSquares);
   }
 
   const checkForWinner = (i) => {
+    
 
     const winConditions = [ //for any given input square, these are the corresponding indexes that must be filled
       [ [1, 2], [4, 8], [3, 6] ],
@@ -55,8 +59,13 @@ const App = () => {
       const [a, b] = winConditions[i][x];
       if ( squares[a].value === squares[b].value && squares[a].value === squares[i].value ) { 
         setWinner(squares[a].value);
+        let victory = [...winConditions[i][x], i]
+        victory.forEach( index => {
+          squares[index].isWinner = true;
+        });
       }
     }
+    if (numSquaresFilled === 8 && !(winner)) setWinner("nobody");
   }
 
   const resetGame = () => {

From 6c8b4cf2fb3cf7dd39bffdde2aced977cb4f57a3 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Mon, 20 Apr 2020 13:21:26 -0700
Subject: [PATCH 12/14] cleaned up spacing and comments

---
 src/App.js               | 8 +++-----
 src/components/Board.js  | 3 ++-
 src/components/Square.js | 1 +
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index af9e1c46..ec015a63 100644
--- a/src/App.js
+++ b/src/App.js
@@ -25,11 +25,10 @@ const App = () => {
   const [numSquaresFilled, setNumSquaresFilled] = useState(0);
 
   const changeSquare = (i) => {
-    console.log(`Square: ${squares[i].id}, winning: ${squares[i].isWinner}`)
+
     if (squares[i].value || winner) return; //do nothing if square is already filled
 
     setNumSquaresFilled(numSquaresFilled + 1);
-
     let updatedSquares = [...squares];
     numSquaresFilled % 2 === 0 ? updatedSquares[i].value = PLAYER_1 : updatedSquares[i].value = PLAYER_2
 
@@ -42,7 +41,6 @@ const App = () => {
 
   const checkForWinner = (i) => {
     
-
     const winConditions = [ //for any given input square, these are the corresponding indexes that must be filled
       [ [1, 2], [4, 8], [3, 6] ],
       [ [0, 2], [4, 7] ],
@@ -59,8 +57,8 @@ const App = () => {
       const [a, b] = winConditions[i][x];
       if ( squares[a].value === squares[b].value && squares[a].value === squares[i].value ) { 
         setWinner(squares[a].value);
-        let victory = [...winConditions[i][x], i]
-        victory.forEach( index => {
+        let winningSquares = [...winConditions[i][x], i]
+        winningSquares.forEach( index => {
           squares[index].isWinner = true;
         });
       }
diff --git a/src/components/Board.js b/src/components/Board.js
index 88335480..3211a52c 100644
--- a/src/components/Board.js
+++ b/src/components/Board.js
@@ -27,7 +27,8 @@ Board.propTypes = {
   squares: PropTypes.arrayOf(
       PropTypes.shape({
         id: PropTypes.number.isRequired,
-        value: PropTypes.string
+        value: PropTypes.string,
+        isWinner: PropTypes.bool.isRequired,
       })
   ),
   onClickCallback: PropTypes.func.isRequired,
diff --git a/src/components/Square.js b/src/components/Square.js
index 0679522e..70dc5dea 100644
--- a/src/components/Square.js
+++ b/src/components/Square.js
@@ -14,6 +14,7 @@ Square.propTypes = {
   value: PropTypes.string,
   onClickCallback: PropTypes.func.isRequired,
   id: PropTypes.number.isRequired,
+  isWinner: PropTypes.bool.isRequired,
 };
 
 export default Square

From 323fceb9a2110467e4ad908865a82f6344d5d1c2 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Mon, 20 Apr 2020 14:29:51 -0700
Subject: [PATCH 13/14] converted win conditions into immutable global variable

---
 src/App.js | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/App.js b/src/App.js
index ec015a63..4a32cbb6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,17 @@ import Board from './components/Board';
 
 const PLAYER_1 = 'X';
 const PLAYER_2 = 'O';
+const WIN_CONDITIONS = [ 
+  [ [1, 2], [4, 8], [3, 6] ],
+  [ [0, 2], [4, 7] ],
+  [ [0, 1], [4, 6], [5, 8] ],
+  [ [0, 6], [4, 5] ],
+  [ [0, 8], [1, 7], [2, 6], [3, 5] ],
+  [ [3, 4], [2, 8] ],
+  [ [0, 3], [2, 4], [7, 8] ],
+  [ [6, 8], [1, 4] ],
+  [ [0, 4], [6, 7], [2, 5 ] ],
+]
 
 const generateSquares = () => {
   const squares = [];
@@ -40,24 +51,11 @@ const App = () => {
   }
 
   const checkForWinner = (i) => {
-    
-    const winConditions = [ //for any given input square, these are the corresponding indexes that must be filled
-      [ [1, 2], [4, 8], [3, 6] ],
-      [ [0, 2], [4, 7] ],
-      [ [0, 1], [4, 6], [5, 8] ],
-      [ [0, 6], [4, 5] ],
-      [ [0, 8], [1, 7], [2, 6], [3, 5] ],
-      [ [3, 4], [2, 8] ],
-      [ [0, 3], [2, 4], [7, 8] ],
-      [ [6, 8], [1, 4] ],
-      [ [0, 4], [6, 7], [2, 5 ] ],
-    ]
-
-    for (let x = 0; x < winConditions[i].length; x++) {
-      const [a, b] = winConditions[i][x];
+    for (let x = 0; x < WIN_CONDITIONS[i].length; x++) {
+      const [a, b] = WIN_CONDITIONS[i][x];
       if ( squares[a].value === squares[b].value && squares[a].value === squares[i].value ) { 
         setWinner(squares[a].value);
-        let winningSquares = [...winConditions[i][x], i]
+        let winningSquares = [...WIN_CONDITIONS[i][x], i]
         winningSquares.forEach( index => {
           squares[index].isWinner = true;
         });

From c828637a62be27efb2c6f8e94e304ad115b15fa7 Mon Sep 17 00:00:00 2001
From: Angela Nguyen <angethuy@gmail.com>
Date: Mon, 20 Apr 2020 15:15:34 -0700
Subject: [PATCH 14/14] fixed bug where last square victories weren't being
 captured correctly

---
 src/App.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index 4a32cbb6..16239217 100644
--- a/src/App.js
+++ b/src/App.js
@@ -46,22 +46,22 @@ const App = () => {
     if (numSquaresFilled > 3) {
       checkForWinner(i);
     };
-
     setSquares(updatedSquares);
   }
 
   const checkForWinner = (i) => {
+    let found = false;
     for (let x = 0; x < WIN_CONDITIONS[i].length; x++) {
       const [a, b] = WIN_CONDITIONS[i][x];
       if ( squares[a].value === squares[b].value && squares[a].value === squares[i].value ) { 
         setWinner(squares[a].value);
-        let winningSquares = [...WIN_CONDITIONS[i][x], i]
-        winningSquares.forEach( index => {
+        found = true;
+        [...WIN_CONDITIONS[i][x], i].forEach( index => {
           squares[index].isWinner = true;
         });
-      }
+      } 
     }
-    if (numSquaresFilled === 8 && !(winner)) setWinner("nobody");
+    if (numSquaresFilled === 8 && !found ) setWinner("nobody");
   }
 
   const resetGame = () => {