tyclaire

src/App.js

@@ -26,43 +26,70 @@ 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 [currentPlayer, setPlayer] = useState('');
+  const switchPlayer = () => {
+    currentPlayer === PLAYER_1 ? setPlayer(PLAYER_2) : setPlayer(PLAYER_1);
+  }
+
+  const onClickCallback = (clickedSquare) => {
+    const newSquares = [];
+    if (winner !== '') {
+      return;
+    } else {
+      squares.forEach((row) => {
+        const newRow = [];
+        row.forEach((square) => {
+          if (square.value === '') {
+            if (square.id === clickedSquare) {
+              switchPlayer();
+              square.value = currentPlayer;
+            }
+          }
+          newRow.push(square);
+        });
+        newSquares.push(newRow);
+      });
+      winnerIs(); 
+      setSquares(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
-
-
-  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 winnerIs = () => {
+    for (let row of squares) {
+      if (row[0].value === row[1].value && row[0].value) {
+        return row[0].value;
+      }
+    }
+      if (squares[0][0].value === squares[1][1].value && squares[1][1].value === squares[0][2].value) {
+        return squares[1][1].value
+      }
 
-  }
+      for (let i=0; i<3; i++) {
+        for (let j=0; j<3; j++) {
+          return null
+        }
+      }
+      return 'Tie!'
+    }
 
   const resetGame = () => {
-    // Complete in Wave 4
+    setSquares(generateSquares());
+    winnerIs(null);
+    setPlayer(PLAYER_1);
   }
 
+  const winner = winnerIs();
+
   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>The winner is ... {winner} </h2>
+        <button onClick={resetGame}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={onClickCallback}/>
       </main>
     </div>
   );

src/components/Board.js

@@ -5,12 +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
-
-}
+  const flattenedSquares = [];
+  squares.forEach((row) => {
+    row.forEach((square) => {
+      flattenedSquares.push(
+        <Square
+        key={square.id}
+        id={square.id}
+        value={square.value}
+        onClickCallback={onClickCallback}
+        />
+      );
+    });
+  });
+  return flattenedSquares;
+};
 
 const Board = ({ squares, onClickCallback }) => {
   const squareList = generateSquareComponents(squares, onClickCallback);

src/components/Square.js

@@ -4,16 +4,17 @@ 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 clickedSquare = () => {
+    props.onClickCallback(props.id);
+  };
 
   return <button
     className="square"
+    onClick={clickedSquare}
   >
     {props.value}
   </button>
-}
+};
 
 Square.propTypes = {
   value: PropTypes.string.isRequired,