Space - Diana

src/App.js

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import './App.css';
-
 import Board from './components/Board';
 
 const PLAYER_1 = 'X';
@@ -25,34 +24,99 @@ const generateSquares = () => {
   return squares;
 }
 
+
+
 const App = () => {
 
   const [squares, setSquares] = useState(generateSquares());
+  const [player1Turn, setplayer1Turn] = useState(true);
+  const [winner, setWinner] = useState(null);
+
+  const updateSquare = (id) => {
+    if (winner !== null) return;
+    const squaresNew = [...squares];
+
+    for (let i = 0; i < 3; i++){
+      for (var j = 0; j < 3; j++){
+        let currentSquare = squaresNew[i][j];  
+        if (currentSquare.id === id) {
+
+          // if square already filled in, exit loop
+          if (currentSquare.value !== '') return;
+
+          currentSquare.value = player1Turn? PLAYER_1 : PLAYER_2;
+
+          setplayer1Turn(!player1Turn);
+        }
+      }
+    }
 
-  // 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
+    console.log(checkForWinner());
+    setWinner(checkForWinner());
+    setSquares(squaresNew);
+  }
 
 
   const checkForWinner = () => {
-    // Complete in Wave 3
+    // get all possible combos of winning solutions
+    const winningSolutions = [
+      // rows
+      [squares[0][0].value, squares[0][1].value, squares[0][2].value],
+      [squares[1][0].value, squares[1][1].value, squares[1][2].value],
+      [squares[2][0].value, squares[2][1].value, squares[2][2].value],
+
+      // columns
+      [squares[0][0].value, squares[1][0].value, squares[2][0].value],
+      [squares[0][1].value, squares[1][1].value, squares[2][1].value],
+      [squares[0][2].value, squares[1][2].value, squares[2][2].value],
+
+      // diagonal
+      [squares[0][0].value, squares[1][1].value, squares[2][2].value],
+      [squares[0][2].value, squares[1][1].value, squares[2][0].value]
+    ]
+
+    for (let i = 0; i < 8; i++) {
+      // destructuring each winning solution
+      const [first, second, third] = winningSolutions[i];
+
+      if (first && first === second && first === third) {
+        // assignment of winner based off X or O
+        let player = "";
+        first === 'X'? player = 'Player 1' : player = 'Player 2';
+        return player;
+      }
+    }
+
+    // handling continuing the game
+    for (let i = 0; i < 3; i ++) {
+      const [first, second, third] = winningSolutions[i];
+      if (first === "" || second === "" || third === "") {
+        return null;
+      }
+    }
 
+    // when all squares are filled
+    return 'no one, it\'s a tie';
   }
 
   const resetGame = () => {
-    // Complete in Wave 4
+    setSquares(generateSquares());
+    setplayer1Turn(true);
+    setWinner(null);
   }
 
   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? `The winner is ${ winner }!` : player1Turn? 'Player 1 - X': 'Player 2 - O'}</h2>
+        <button onClick={resetGame}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board 
+          squares = {squares} 
+          onClickCallback = {updateSquare}
+        />
       </main>
     </div>
   );

src/components/Board.js

@@ -2,16 +2,26 @@ import React from 'react';
 import './Board.css';
 import Square from './Square';
 import PropTypes from 'prop-types';
+import _ from 'lodash';
 
 
 const generateSquareComponents = (squares, onClickCallback) => {
-  // Complete this for Wave 1
+  // generate array of square components
+  // flatten 2D array to 1D
 
+  const squares1DArray = _.flatten(squares);
+  return squares1DArray.map((square) => {
+    return <Square
+      id = {square.id}
+      value = {square.value}
+      key = {square.id}
+      onClickCallback = {onClickCallback}
+    />
+  });
 }
 
 const Board = ({ squares, onClickCallback }) => {
   const squareList = generateSquareComponents(squares, onClickCallback);
-  console.log(squareList);
   return <div className="grid" >
     {squareList}
   </div>

src/components/Square.js

@@ -3,15 +3,12 @@ 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 Square = ({value, id, onClickCallback}) => {  
   return <button
     className="square"
+    onClick={() => onClickCallback(id)}
   >
-    {props.value}
+    {value}
   </button>
 }