Fire - Aimee & Roshni

src/App.js

@@ -3,17 +3,17 @@ 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 = [];
 
   let currentId = 0;
 
-  for (let row = 0; row < 3; row += 1) {
+  for (let row = 0; row < 3; row ++) {
     squares.push([]);
-    for (let col = 0; col < 3; col += 1) {
+    for (let col = 0; col < 3; col ++) {
       squares[row].push({
         id: currentId,
         value: '',
@@ -27,45 +27,111 @@ 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 [turnNumber, setTurnNumber] = useState(0);
+  const [winner, setWinner] = useState('');
+  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 onClickCallback = (id) => {
+    if (winner === '') {
+    for (let row = 0; row < 3; row += 1) {
+      for (let col = 0; col < 3; col += 1) {
+        if (squares[row][col].id === id && squares[row][col].value === '') {
+          squares[row][col].value = player;
+          player === PLAYER_1? setPlayer(PLAYER_2) : setPlayer(PLAYER_1);
+          setTurnNumber(turnNumber + 1);
+        }
+      }
+    }
+    setSquares(squares);
 
+    if (turnNumber > 3) {
+      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
-    // 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 winCombos = [
+      [0, 1, 2],
+      [3, 4, 5],
+      [6, 7, 8],
+      [0, 3, 6],
+      [1, 4, 7],
+      [2, 5, 8],
+      [0, 4, 8],
+      [2, 4, 6]
+    ]
+
+    const [firstRow, secondRow, thirdRow] = squares; 
+    const board = [ ...firstRow, ...secondRow, ...thirdRow];
+    const xOPositions = [];
+
+    // board = ['','X','','O','','X','X','X' ]
+    for (let i = 0; i < winCombos.length; i++) {
+
+      const position1 = board[winCombos[i][0]];
+      const position2 = board[winCombos[i][1]];
+      const position3 = board[winCombos[i][2]]
+      xOPositions.push([position1, position2, position3]);;
+    }
+
+    for (let i = 0; i < xOPositions.length; i++) {
+      if (xOPositions[i][0].value === 'x' && xOPositions[i][1].value === 'x' && xOPositions[i][2].value === 'x') {
+        return PLAYER_1
+      }
+      else if (xOPositions[i][0].value === 'o' && xOPositions[i][1].value === 'o' && xOPositions[i][2].value === 'o') {
+        return PLAYER_2
+      }
+    }
+
+    return '';
 
   }
 
   const resetGame = () => {
-    // Complete in Wave 4
+    setSquares(generateSquares());
+    setTurnNumber(0);
+    setWinner('');
+    setPlayer(PLAYER_1); 
+  }
+
+  const onClick = () => {
+    resetGame()
   }
 
   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>
+      <h1>React Tic Tac Toe</h1>
+      { winner != '' &&
+      <h2>
+        Winner is {winner}
+      </h2>
+       }
+      {winner === '' && turnNumber === 9 && 
+      <h2>
+        TIE!
+      </h2> 
+      }
+      { winner === '' && turnNumber < 9 &&
+      <h2>
+        Current Player {player}
+      </h2>
+      } 
+      <button
+        onClick={onClick}
+        >Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board 
+        squares={squares} 
+        onClickCallback={onClickCallback}/>
       </main>
     </div>
   );
 }
 
 export default App;
+