finished waves 1-3: rendered Board and Squares, added Click Funtional…

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 = [];
@@ -25,44 +25,101 @@ const generateSquares = () => {
   return squares;
 }
 
+const cellMap = [
+    {x: 0, y: 0},
+    {x: 1, y: 0},
+    {x: 2, y: 0},
+    {x: 0, y: 1},
+    {x: 1, y: 1},
+    {x: 2, y: 1},
+    {x: 0, y: 2},
+    {x: 1, y: 2},
+    {x: 2, y: 2}
+  ]
+
 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('')
   // 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 = (event) => {
+    const coordinates = cellMap[event.target.id]
+    if(squares[coordinates.y][coordinates.x].value!==''||winner!==''){
+    return
+    }
+    let updatedSquares=[...squares]
+    updatedSquares[coordinates.y][coordinates.x].value=currentPlayer
+    setSquares(updatedSquares)
+    setCurrentPlayer(currentPlayer===PLAYER_1? PLAYER_2: PLAYER_1)
+    setWinner(checkForWinner())
+
+  }
 
+
 
   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
+    for(let y = 0; y< 3; y++){
+      let player=squares[y][0].value
+      for(let x= 1; x<3; x++){
+      if(squares[y][x].value!==player){
+        player=''
+      }
+      }
+      if(player!==''){
+        return player
+      }
+    }
     // 2. Go down each column to see if
     //    3 squares in each column match
+    for(let x = 0; x<3; x++){
+      let player=squares[0][x].value
+      for(let y = 0; y<3; y++){
+        if(squares[y][x].value!==player){
+          player=''
+        }
+      }
+      if(player!==''){
+        return player
+      }
+    }
     // 3. Go across each diagonal to see if 
     //    all three squares have the same value.
-
+    if (squares[0][0].value===squares[1][1].value && squares[0][0].value === squares[2][2].value){
+      return squares[0][0].value
+    }
+    if (squares[0][2].value===squares[1][1].value && squares[0][2].value === squares[2][0].value){
+      return squares[0][2].value
+    }
+    return ''
   }
 
   const resetGame = () => {
     // Complete in Wave 4
+    setSquares(generateSquares())
+    setCurrentPlayer(PLAYER_1)
+    setWinner('')
   }
 
   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>
+        {winner!==''&&<h2> Winner is {winner} </h2>}
+        <button onClick={resetGame}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={onClickCallback} />
       </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

@@ -9,6 +9,8 @@ const generateSquareComponents = (squares, onClickCallback) => {
   // squares is a 2D Array, but 
   //  you need to return a 1D array
   //  of square components
+//turning an array of data into an array of elements means using .map()
+return squares.map(row=>row.map(square=><Square value={square.value} onClickCallback={onClickCallback} id={square.id}/>))
 
 }
 

src/components/Board.test.js

@@ -84,7 +84,7 @@ describe('Wave 1: Board', () => {
 });
 describe('Wave 2: Board', () => {
   describe('button click callbacks', () => {
-    test.skip('that the callback is called for the 1st button', () => {
+    test('that the callback is called for the 1st button', () => {
       // Arrange
       const callback = jest.fn();
       const { container } = render(<Board squares={SAMPLE_BOARD} onClickCallback={callback} />);
@@ -97,7 +97,7 @@ describe('Wave 2: Board', () => {
       expect(callback).toHaveBeenCalled();
     });
 
-    test.skip('that the callback is called for the last button', () => {
+    test('that the callback is called for the last button', () => {
       // Arrange
       const callback = jest.fn();
       const { container } = render(<Board squares={SAMPLE_BOARD} onClickCallback={callback} />);

src/components/Square.js

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

src/components/Square.test.js

@@ -8,22 +8,22 @@ describe('Wave 1: Square', () => {
   test('it renders with X given', () => {
     render(<Square value="X" id={1} onClickCallback={() => { }} />)
 
-    const button = screen.getByText("X");
+    const button = screen.getByText('X');
 
     expect(button).toBeInTheDocument();
   });
 
   test('it renders with O given', () => {
     render(<Square value="O" id={1} onClickCallback={() => { }} />)
 
-    const button = screen.getByText("O");
+    const button = screen.getByText('O');
 
     expect(button).toBeInTheDocument();
   });
 });
 
 describe('Wave 2: Square', () => {
-  test.skip('when clicked on it calls the callback function', async () => {
+  test('when clicked on it calls the callback function', async () => {
     const callback = jest.fn();
 
     render(<Square value="X" id={1} onClickCallback={callback} />);