Denise & Li - Soil Classroom

src/App.js

@@ -3,12 +3,13 @@ import './App.css';
 
 import Board from './components/Board';
 
-const PLAYER_1 = 'X';
-const PLAYER_2 = 'O';
+const PLAYER_1 = 'x';
+const PLAYER_2 = 'o';
+let count = 0
+let winner = ''
 
 const generateSquares = () => {
   const squares = [];
-
   let currentId = 0;
 
   for (let row = 0; row < 3; row += 1) {
@@ -21,48 +22,72 @@ const generateSquares = () => {
       currentId += 1;
     }
   }
-
   return squares;
 }
 
 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);
 
   // 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 updateSquare = (updatedSquare) => {
+    const newSquares = [...squares]
 
+    for(let row of newSquares) {
+      for(let square of row) {
+        if (square.id === updatedSquare.id && square.value === '') {
+          count++
+          square.value = player;          
+        }
+      }
+    };
+
+    setPlayer(player === PLAYER_1 ? PLAYER_2 : PLAYER_1)
+    setSquares(newSquares);
+
+    if (count > 4) {
+    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
-    // 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 winPossibilities = [[0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6]]
+    let allSquares = squares.flat()
+
+    winPossibilities.forEach((possibility) => {
+      let rowOfThree = []
+      possibility.forEach((i) => {
+        rowOfThree.push(allSquares[i])
+      })
+      if (rowOfThree.every(obj => obj.value === 'x')) {
+        winner = PLAYER_1
+      } else if (rowOfThree.every(obj => obj.value === 'o')) {
+        winner = PLAYER_2
+      } else if (allSquares.every(obj => obj.value !== '')) {
+        winner = 'tie'
+      }
+    })
+      return winner;
   }
 
   const resetGame = () => {
     // Complete in Wave 4
+    setSquares(generateSquares());
+    setPlayer(PLAYER_1);
+    winner = '';
   }
 
   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={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

@@ -9,8 +9,22 @@ const generateSquareComponents = (squares, onClickCallback) => {
   // squares is a 2D Array, but 
   //  you need to return a 1D array
   //  of square components
+  const oneDArray = [];
+  for(let row of squares) {
+    for(let square of row) {
+      oneDArray.push(
+      <Square
+        key={square.id}  
+        id={square.id}
+        value={square.value}
+        onClickCallback={onClickCallback}
+      />)
+    }
+  }
 
+  return oneDArray;
 }
+
 
 const Board = ({ squares, onClickCallback }) => {
   const squareList = generateSquareComponents(squares, onClickCallback);

src/components/Square.js

@@ -8,8 +8,16 @@ const Square = (props) => {
   //  Component to alert a parent 
   //  component when it's clicked on.
 
+  const onPlayClick = () => {
+    const updatedSquare = {
+      id: props.id,
+    }
+    props.onClickCallback(updatedSquare);
+  }
+
   return <button
     className="square"
+    onClick={onPlayClick}
   >
     {props.value}
   </button>

src/index.js

@@ -6,7 +6,7 @@ import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <App key = {1}/>
   </React.StrictMode>,
   document.getElementById('root')
 );