🌎 Schanen & 🌊 Kim

src/App.js

@@ -3,8 +3,8 @@ import './App.css';
 
 import Board from './components/Board';
 
-const PLAYER_1 = 'X';
-const PLAYER_2 = 'O';
+const PLAYER_1 = 'x';
+const PLAYER_2 = 'o';
 
 const generateSquares = () => {
   const squares = [];
@@ -21,7 +21,7 @@ const generateSquares = () => {
       currentId += 1;
     }
   }
-
+  // console.log(squares);
   return squares;
 }
 
@@ -30,14 +30,32 @@ 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 [currentPlayer, setCurrentPlayer] = useState(PLAYER_1);
+  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
+  const onClickCallback = (id) => {
+    const updatedSquares = [ [...squares[0]], [...squares[1]], [...squares[2]] ];
+
+    for (let row = 0; row < 3; row += 1) {
+      for (let col = 0; col < 3; col += 1) {
+        if (updatedSquares[row][col].id === id && updatedSquares[row][col].value === '' && !winner) {
+          updatedSquares[row][col] = { ...updatedSquares[row][col], value: currentPlayer };
+        } 
+      }
+    }
 
+    checkForWinner(updatedSquares);
+    setCurrentPlayer(currentPlayer === PLAYER_1 ? PLAYER_2 : PLAYER_1);
+    setSquares(updatedSquares);
+  }
 
-  const checkForWinner = () => {
+
+  const checkForWinner = (squares) => {
+    const squaresArray = [].concat(...squares);
     // Complete in Wave 3
     // You will need to:
     // 1. Go accross each row to see if 
@@ -47,22 +65,41 @@ const App = () => {
     //    3 squares in each column match
     // 3. Go across each diagonal to see if 
     //    all three squares have the same value.
-
+    const strikes = [
+      [0, 1, 2],
+      [3, 4, 5],
+      [6, 7, 8],
+      [0, 3, 6],
+      [1, 4, 7],
+      [2, 5, 8],
+      [0, 4, 8],
+      [2, 4, 6],
+    ];
+    for (let i = 0; i < strikes.length; i++) {
+      const [a, b, c] = strikes[i];
+      if (squaresArray[a].value && squaresArray[a].value === squaresArray[b].value && squaresArray[a].value === squaresArray[c].value) {
+        setWinner(squaresArray[a].value);
+        return true;
+      }    
+    }
+    return false;
   }
 
   const resetGame = () => {
-    // Complete in Wave 4
+    setCurrentPlayer(PLAYER_1);
+    setSquares(generateSquares());
+    setWinner(null);
   }
 
   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>{ winner ? `Winner is ${winner}` : `Current Player ${currentPlayer}` }</h2>
+        <button onClick={ resetGame }>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={ onClickCallback } />
       </main>
     </div>
   );

src/App.test.js

@@ -1,3 +1,4 @@
+/* eslint-disable jest/expect-expect */
 import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import App from './App';
@@ -14,7 +15,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 +86,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 +365,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

@@ -10,11 +10,19 @@ const generateSquareComponents = (squares, onClickCallback) => {
   //  you need to return a 1D array
   //  of square components
 
+  const squaresArray = [].concat(...squares);
+
+  return squaresArray.map(square => {
+    return (
+      <Square key={ square.id } id={ square.id } value={ square.value } onClickCallback={ onClickCallback } />
+    )
+  });
+
 }
 
 const Board = ({ squares, onClickCallback }) => {
   const squareList = generateSquareComponents(squares, onClickCallback);
-  console.log(squareList);
+  // console.log(squareList);
   return <div className="grid" >
     {squareList}
   </div>

src/components/Board.test.js

@@ -81,8 +81,53 @@ describe('Wave 1: Board', () => {
     const buttons = container.querySelectorAll('.grid button');
     expect(buttons.length).toEqual(9);
   });
-
+});
+describe('Wave 2: Board', () => {
   describe('button click callbacks', () => {
+    const SAMPLE_BOARD = [
+      [
+        {
+          value: 'X',
+          id: 0,
+        },
+        {
+          value: 'X',
+          id: 1,
+        },
+        {
+          value: 'O',
+          id: 2,
+        },
+      ],
+      [
+        {
+          value: 'X',
+          id: 3,
+        },
+        {
+          value: 'X',
+          id: 4,
+        },
+        {
+          value: 'O',
+          id: 5,
+        },
+      ],
+      [
+        {
+          value: 'O',
+          id: 6,
+        },
+        {
+          value: 'O',
+          id: 7,
+        },
+        {
+          value: 'X',
+          id: 8,
+        },
+      ],    
+    ];
     test('that the callback is called for the 1st button', () => {
       // Arrange
       const callback = jest.fn();

src/components/Square.js

@@ -10,6 +10,7 @@ const Square = (props) => {
 
   return <button
     className="square"
+    onClick={ () => { props.onClickCallback(props.id) } }
   >
     {props.value}
   </button>

src/components/Square.test.js

@@ -20,7 +20,9 @@ describe('Wave 1: Square', () => {
 
     expect(button).toBeInTheDocument();
   });
+});
 
+describe('Wave 2: Square', () => {
   test('when clicked on it calls the callback function', async () => {
     const callback = jest.fn();
 
@@ -33,4 +35,4 @@ describe('Wave 1: Square', () => {
     fireEvent.click(button);
     expect(callback).toHaveBeenCalled();
   });
-});
+});