Paper, Ruthie Newman

src/App.js

@@ -3,8 +3,9 @@ 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 = [];
@@ -27,15 +28,30 @@ 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, setPlayerState] = 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 squareId = (id) => {
+      setPlayerState(!currentPlayer);
+      const player = currentPlayer ? PLAYER_1 : PLAYER_2;
+
+      squares.forEach(row=>{
+        row.forEach(square => {
+          if (square.id === id) {
+            if(square.value === '')
+              if (player === PLAYER_1) {
+                console.log(PLAYER_1)
+                square.value = 'x'
+              }else{
+                console.log(PLAYER_2)
+                square.value = 'o'
+              }
+          }else if(square.value != ''){
+            checkForWinner()
+          }
+        })
+      })   
+    }
 
   const checkForWinner = () => {
     // Complete in Wave 3
@@ -47,6 +63,34 @@ const App = () => {
     //    3 squares in each column match
     // 3. Go across each diagonal to see if 
     //    all three squares have the same value.
+
+    //possible approach to calculating squares
+
+    // const options = [
+    //   [0,1,2],
+    //   [3,4,5],
+    //   [6,7,8],
+    //   [0,3,6],
+    //   [1,4,7],
+    //   [2,5,8],
+    //   [6,4,2],
+    //   [0,4,8]
+    // ]
+
+    // squares.forEach(row=>{
+    //   row.forEach(square=>{
+    //     for(let i = 0; i < options.length; i++) {
+    //       const [a, b, c] = options[i];
+    //       console.log(a)
+    //       if (square[a].value && square[a].value === square[b].value && square[a] === square[c]) {
+    //         console.log(square[a])
+    //         return square[a]
+    //       }
+    //     }
+
+    //   })
+    // })
+
 
   }
 
@@ -62,7 +106,7 @@ const App = () => {
         <button>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback = {squareId}/>
       </main>
     </div>
   );

src/components/Board.js

@@ -5,19 +5,24 @@ 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 flatList = []
+  console.log(squares)
+  squares.forEach(row=>{
+    row.forEach(square =>{
+      flatList.push(square)
+    })
+  });
+
+  const squareComponents = flatList.map(data => <Square id={data.id} value={data.value} onClickCallback={onClickCallback} ></Square>)
+  return squareComponents
 }
 
 const Board = ({ squares, onClickCallback }) => {
   const squareList = generateSquareComponents(squares, onClickCallback);
   console.log(squareList);
-  return <div className="grid" >
-    {squareList}
-  </div>
+  return <div className="grid">{squareList}</div>
 }
 
 Board.propTypes = {

src/components/Square.js

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