Ren & Leah - Fire & Water

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 = [];
@@ -27,42 +27,80 @@ const generateSquares = () => {
 
 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 [squares, setSquares] = useState(generateSquares()); // squares is created here
+  const [player, setPlayer] = 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
+  // until the new render has occurred, the squares reported in onClickCallback are the same squares set up by the previous render
+  const onClickCallback = (id) => {
+    const updatedSquares = generateSquares();
 
+    if (winner !== '...') return; // Don't continue updating after winner is declared
+
+    for (let row = 0; row < 3; row += 1) {
+      for (let col = 0; col < 3; col += 1) {
+        if (updatedSquares[row][col].id === id && squares[row][col].value === '') {
+        updatedSquares[row][col].value = player;
+        setPlayer(player === PLAYER_1 ? PLAYER_2 : PLAYER_1);
+        }
+        else {
+          updatedSquares[row][col].value = squares[row][col].value
+        }
+      }
+    }
+
+    setSquares(updatedSquares);
+    checkForWinner(updatedSquares);
+  }
 
-  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 checkForWinner = (squares) => {
 
+    const flattenedArray = [].concat(...squares);
+
+    if (flattenedArray[0].value === flattenedArray[1].value && flattenedArray[1].value === flattenedArray[2].value && flattenedArray[0].value !== '') {
+      setWinner(flattenedArray[0].value);
+    }
+    else if (flattenedArray[3].value === flattenedArray[4].value && flattenedArray[4].value === flattenedArray[5].value && flattenedArray[3].value !== '') {
+      setWinner(flattenedArray[3].value);
+    }
+    else if (flattenedArray[6].value === flattenedArray[7].value && flattenedArray[7].value === flattenedArray[8].value && flattenedArray[6].value !== '') {
+      setWinner(flattenedArray[6].value);
+    }
+    else if (flattenedArray[0].value === flattenedArray[3].value && flattenedArray[3].value === flattenedArray[6].value && flattenedArray[0].value !== '') {
+      setWinner(flattenedArray[0].value);
+    }
+    else if (flattenedArray[1].value === flattenedArray[4].value && flattenedArray[4].value === flattenedArray[7].value && flattenedArray[1].value !== '') {
+      setWinner(flattenedArray[1].value);
+    }
+    else if (flattenedArray[2].value === flattenedArray[5].value && flattenedArray[5].value === flattenedArray[8].value && flattenedArray[2].value !== '') {
+      setWinner(flattenedArray[2].value);
+    }
+    else if (flattenedArray[0].value === flattenedArray[4].value && flattenedArray[4].value === flattenedArray[8].value && flattenedArray[0].value !== '') {
+      setWinner(flattenedArray[0].value);
+    }
+    else if (flattenedArray[2].value === flattenedArray[4].value && flattenedArray[4].value === flattenedArray[6].value && flattenedArray[2].value !== '') {
+      setWinner(flattenedArray[2].value);
+    }
   }
 
   const resetGame = () => {
-    // Complete in Wave 4
+    setPlayer(PLAYER_1);
+    setSquares(generateSquares());
+    setWinner(`...`);
   }
 
+  // squares is updated here. You could also call checkForWinner here right before rendering, passing squares instead of updatedSquares
   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 is {winner} </h2>
+        <button onClick={() => {resetGame()}}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={onClickCallback}/> 
+        {/* Prop name that is being passed down to board={the function that is defined above bc this is JS within JSX} */}
+        {/* Beginning of the chain reaction where we hand the updateSquare method in as a prop to Board */}
       </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

@@ -3,19 +3,24 @@ import './Board.css';
 import Square from './Square';
 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 flattenedArray = [].concat(...squares);
+
+  return (flattenedArray.map(props =>
+    <Square 
+      key={props.id}
+      id={props.id} 
+      value={props.value} 
+      onClickCallback={onClickCallback}
+    />
+  ));
 
 }
 
 const Board = ({ squares, onClickCallback }) => {
-  const squareList = generateSquareComponents(squares, onClickCallback);
-  console.log(squareList);
-  return <div className="grid" >
+  const squareList = generateSquareComponents(squares, onClickCallback); 
+  return <div className="grid" > {/* component functions always return JSX */}
     {squareList}
   </div>
 }

src/components/Board.test.js

@@ -81,6 +81,53 @@ describe('Wave 1: Board', () => {
     const buttons = container.querySelectorAll('.grid button');
     expect(buttons.length).toEqual(9);
   });
+});
+describe('Wave 2: Board', () => {
+  // Sample input to the Board component
+  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,
+      },
+    ],    
+  ];
 
   describe('button click callbacks', () => {
     test('that the callback is called for the 1st button', () => {

src/components/Square.js

@@ -3,13 +3,12 @@ import PropTypes from 'prop-types';
 
 import './Square.css'
 
+  // When you click, the event listener will go back to App.js
 const Square = (props) => {
-  // For Wave 1 enable this 
-  //  Component to alert a parent 
-  //  component when it's clicked on.
-
-  return <button
+  return <button 
     className="square"
+    onClick={() => {props.onClickCallback(props.id)}} // Event handler
+  // Callback function is called here on Square then cascades up    
   >
     {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();
   });
-});
+});