FIRE - Alice D. and Tram

.gitignore

@@ -22,4 +22,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .eslintcache
-
+package-lock.json

src/App.js

@@ -29,40 +29,65 @@ 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 [squareList, setSquares] = useState(generateSquares());
+  const [playCount, setPlayCount] = useState(0)
+  const [winner, setWinner] = useState('')
 
-  // 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 callback = (updatedSquare) => {
+    const squares = [...squareList]
 
+    for (let j = 0; j < 3; j++) {
+      for (let i = 0; i < 3; i++) {
+        let currentSquare = squares[j][i]
+        if (currentSquare.id === updatedSquare.id) {
+          if (currentSquare.value !== '') { break; }
+          if (winner !== '') {break;}
+          playCount % 2 === 0 ? currentSquare.value = 'x' : currentSquare.value = 'o'
 
+          setPlayCount(playCount + 1)
+          checkForWinner()
+        }
+      }
+    }
+    setSquares(squares)
+}
+
   const checkForWinner = () => {
-    // Complete in Wave 3
-    // You will need to:
-    // 1. Go accross each row to see if 
-    //    3 squares in the same row match
-    //    i.e. same value
-    // 2. Go down each column to see if
-    //    3 squares in each column match
-    // 3. Go across each diagonal to see if 
-    //    all three squares have the same value.
+
+    const winningConditions = [
+      [squareList[0][0].value, squareList[0][1].value, squareList[0][2].value],
+      [squareList[1][0].value, squareList[1][1].value, squareList[1][2].value],
+      [squareList[2][0].value, squareList[2][1].value, squareList[2][2].value],
+      [squareList[0][0].value, squareList[1][0].value, squareList[2][0].value],
+      [squareList[0][1].value, squareList[1][1].value, squareList[2][1].value],
+      [squareList[0][2].value, squareList[1][2].value, squareList[2][2].value],
+      [squareList[0][0].value, squareList[1][1].value, squareList[2][2].value],
+      [squareList[0][2].value, squareList[1][1].value, squareList[2][0].value]
+    ]
 
+    for (let i = 0; i < winningConditions.length; i++) {
+      const [first, second, third] = winningConditions[i]
+      if (first === second && first === third && first !== ''){
+        setWinner(winningConditions[i][0])
+      }
+    }
   }
 
   const resetGame = () => {
-    // Complete in Wave 4
+    setSquares(generateSquares())
+    setWinner('')
+    setPlayCount(0)
   }
 
   return (
     <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>{(playCount === 9 && winner === '') ? 'It\'s a TIE!' : `Winner is ${winner}`} </h2>
+        <button onClick={resetGame}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squareList} onClickCallback={callback} />
       </main>
     </div>
   );

src/App.test.js

@@ -14,7 +14,7 @@ describe('App', () => {
     expect(buttons[buttonIndex].innerHTML).toEqual(expectedResult);
   }
 
-  describe.skip('Wave 2: clicking on squares and rendering App', () => {
+  describe('Wave 2: clicking on squares and rendering App', () => {
 
   test('App renders with a board of 9 empty buttons', () => {
     // Arrange-Act - Render the app
@@ -85,7 +85,7 @@ describe('App', () => {
 });
 
 
-  describe.skip('Wave 3:  Winner tests', () => {
+  describe('Wave 3:  Winner tests', () => {
     describe('Prints "Winner is x" when x wins', () => {
       test('that a winner will be identified when 3 Xs get in a row across the top', () => {
         // Arrange
@@ -364,7 +364,7 @@ describe('App', () => {
     });       
   });
 
-  describe.skip('Wave 4:  reset game button', () => {
+  describe('Wave 4:  reset game button', () => {
     test('App has a "Reset Game" button', () => {
       // Arrange-Act
       render(<App />);

src/components/Board.js

@@ -5,16 +5,21 @@ 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
+  const arrOneDimensional = [].concat(...squares);
 
+  const squareComponents = arrOneDimensional.map(square => 
+    <Square
+      key={square.id}
+      id={square.id}
+      value={square.value}
+      onClickCallback={onClickCallback}
+    />);
+  return squareComponents
 }
 
 const Board = ({ squares, onClickCallback }) => {
   const squareList = generateSquareComponents(squares, onClickCallback);
-  console.log(squareList);
+  // console.log(squareList);
   return <div className="grid" >
     {squareList}
   </div>

src/components/Square.js

@@ -4,12 +4,17 @@ 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.
+
+  const onButtonClick = () => {
+    const updatedSquare = {
+      id: props.id,
+    }
+    props.onClickCallback(updatedSquare);
+  }
 
   return <button
     className="square"
+    onClick={onButtonClick}
   >
     {props.value}
   </button>