Fire - Gessica && Earth - Jasmine

.gitignore

@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 .eslintcache
 
+package-lock.json

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 = [];
@@ -30,14 +30,63 @@ 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 [player, setPlayer] = useState(PLAYER_1)
+  const [winner, setWinner] = useState(null)
+
 
+  const onClickCallback = (updatedSquare) => {
+    const squareList = [];
+    if (winner === null) {
+      squares.forEach((row, i) => {
+        squareList.push([]);
+        row.forEach(square => {
+          if (square.id === updatedSquare.id && square.value === '') {
+            squareList[i].push(updatedSquare); 
+            if (player === PLAYER_1) {
+              setPlayer(PLAYER_2);
+            } else if (player === PLAYER_2) {
+              setPlayer(PLAYER_1);
+            }
+          } else {
+            squareList[i].push(square);
+          }
+        })
+      })
+      setSquares(squareList);
+
+      checkForWinner(squareList);
+    }
+
+  };
+
   // 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 = () => {
+  const checkForWinner = (squares) => {
+    const flattenarray = [].concat(...squares);
+
+    const lines = [
+      [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 < lines.length; i++) {
+      const [a, b, c] = lines[i];
+      if (flattenarray[a].value && flattenarray[a].value === flattenarray[b].value && flattenarray[a].value === flattenarray[c].value) {
+        setWinner(flattenarray[a].value);
+        return true;
+      }
+    }
+    return null;
     // Complete in Wave 3
     // You will need to:
     // 1. Go accross each row to see if 
@@ -52,17 +101,20 @@ const App = () => {
 
   const resetGame = () => {
     // Complete in Wave 4
+    setPlayer(PLAYER_1);
+    setWinner(null);
+    setSquares(generateSquares());
   }
 
   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 is ${player}`}</h2>
+        <button onClick={resetGame}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={onClickCallback} player={player}/>
       </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

@@ -4,17 +4,30 @@ import Square from './Square';
 import PropTypes from 'prop-types';
 
 
-const generateSquareComponents = (squares, onClickCallback) => {
+const generateSquareComponents = (squares, onClickCallback, player) => {
   // Complete this for Wave 1
   // squares is a 2D Array, but 
   //  you need to return a 1D array
   //  of square components
 
+const flattenarray = squares.flat()
+
+const squareComponents = flattenarray.map((square) => 
+  <Square 
+    id={square.id} 
+    value={square.value}
+    onClickCallback={onClickCallback}
+    key={square.id}
+    player={player} />
+
+)
+
+return squareComponents;
 }
 
-const Board = ({ squares, onClickCallback }) => {
-  const squareList = generateSquareComponents(squares, onClickCallback);
-  console.log(squareList);
+const Board = ({ squares, onClickCallback, player }) => {
+  const squareList = generateSquareComponents(squares, onClickCallback, player);
+  // console.log(squareList);
   return <div className="grid" >
     {squareList}
   </div>

src/components/Board.test.js

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

src/components/Square.js

@@ -7,18 +7,28 @@ const Square = (props) => {
   // For Wave 1 enable this 
   //  Component to alert a parent 
   //  component when it's clicked on.
+  const onPlayClick = () => {
+    const updatedSquare = {
+      id: props.id,
+      value: props.player
+    };
+    // if (props.value === '') {
+      props.onClickCallback(updatedSquare)
+    // };
+  };
 
-  return <button
-    className="square"
-  >
-    {props.value}
-  </button>
+  return (
+    <button className="square" onClick={onPlayClick}>
+      {props.value}
+    </button>
+  )
 }
 
 Square.propTypes = {
   value: PropTypes.string.isRequired,
   onClickCallback: PropTypes.func.isRequired,
   id: PropTypes.number.isRequired,
+  player: PropTypes.string
 };
 
 export default Square

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();
   });
-});
+});