Fire & Water @ Pauline Chane - Hanh Solo

src/App.js

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 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,39 +29,80 @@ 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 [currentSquare, setCurrentSquare] = useState(false); // false = X 
+
+  const updateSquare = (id) => {
+
+    let newSquares = []; 
 
-  // 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
+    for (let row = 0; row < 3; row += 1) {
+      newSquares.push([]); // 
+      for (let col = 0; col < 3; col += 1) {
+        if (id === squares[row][col].id) {
+          if (!squares[row][col].value) {
+            if (!currentSquare) {
+              squares[row][col].value = PLAYER_1; 
+            } else { 
+              squares[row][col].value = PLAYER_2; 
+            }
+            setCurrentSquare(!currentSquare);
+          }
+        } 
+        newSquares[row].push(squares[row][col])
+      }
+    }
+
+    setSquares(newSquares);
+  }
 
 
   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 WINNING_INDEX = [
+      [[0, 0], [0, 1], [0, 2]], 
+      [[1, 0], [1, 1], [1, 2]],
+      [[2, 0], [2, 1], [2, 2]],
+      [[0, 0], [1, 0], [2, 0]],
+      [[0, 1], [1, 1], [2, 1]],
+      [[0, 2], [1, 2], [2, 2]],
+      [[0, 0], [1, 1], [2, 2]],
+      [[0, 2], [1, 1], [2, 0]]
+    ];
+
+    let hasBlank = false; // if the square is blank or not
+
+    for (const winSet of WINNING_INDEX) {
+
+      const currentRow = []
+      for (const winPos of winSet) {
+        const [x, y] = winPos;
+        if(!squares[x][y].value){
+          hasBlank = true; // we don't need to check for blank after since we check it here already
+        }
+        currentRow.push(squares[x][y].value);  
+      }
+      if(currentRow[0] && (currentRow[0] === currentRow[1] && currentRow[1] === currentRow[2] && currentRow[0])){ // ['x', 'o', 'x']
+        return currentRow[0] === 'x' ? 'x' : 'o';
+      }
+    }
+
+    return hasBlank ? '' : 'TIED';
 
   }
 
   const resetGame = () => {
-    // Complete in Wave 4
+    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 is {!checkForWinner() ? 'IN-PROGRESS' : checkForWinner()}</h2>
+        <button onClick = {resetGame}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={checkForWinner() ? () => {} : updateSquare}/> 
       </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,11 +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
-
+  let squareGrid = []; 
+  for (let row = 0; row < 3; row += 1) {
+    for (let col = 0; col < 3; col += 1) {
+      const currentSquare = 
+      <Square
+        id={squares[row][col].id}
+        value={squares[row][col].value}
+        key={squares[row][col].id}
+        onClickCallback={onClickCallback}
+      />
+      squareGrid.push(currentSquare); 
+    }
+  }
+
+  return squareGrid; 
 }
 
 const Board = ({ squares, onClickCallback }) => {

src/components/Square.js

@@ -4,12 +4,14 @@ 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 updatedSquare = () => {
+    props.onClickCallback(props.id); // id is id we passed in for the square component 
+  };
 
   return <button
     className="square"
+    onClick = {updatedSquare}
   >
     {props.value}
   </button>

src/components/Square.test.js

@@ -8,15 +8,15 @@ 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();
   });