Scissors - Araceli

src/App.js

@@ -1,11 +1,13 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import './App.css';
 
 import Board from './components/Board';
+import Square from './components/Square';
 
 const PLAYER_1 = 'X';
 const PLAYER_2 = 'O';
 
+
 const generateSquares = () => {
   const squares = [];
 
@@ -27,45 +29,105 @@ 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 [player, setPlayer] = useState(PLAYER_1);
+  // const [result, setResult] = useState({winner: 'none', state: 'none'})
+
+
+  // useEffect(() => {
+  //   checkForWinner();
+  // }, [squares]);
+
+  // useEffect(() => {
+  //   if (result.state != 'none') {
+  //     alert(`Game Finished! Winning Player: ${result.winner}`);
+  //   }
+  // }, [result]);
+
+  const changePlayers = () => {
+    if (player === PLAYER_1) {
+      setPlayer(PLAYER_2)
+    } else {
+      setPlayer(PLAYER_1)
+    }
+  };
+
+  const markSquares = (squareId) => {
 
-  // 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
+    for (let row = 0; row < 3; row +=1) {
+      for (let col = 0; col < 3; col += 1) {
+        if (squares[row][col].id===squareId && squares[row][col].value=='') {
+          squares[row][col].value=player; 
+        };
+      };
+    };
+    setSquares(squares);
+    changePlayers();
+    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.
 
-  }
+    // columns 
+    for (let index = 0; index < 3; index++) {
+        if (squares[0][index].value===squares[1][index].value && 
+          squares[1][index].value===squares[2][index].value &&
+          squares[0][index].value!=='') {
+            alert(`Game Finished! Winning Player: ${player}`);
+            resetGame();
+        };
+    };
+
+    // rows 
+    for (let index = 0; index < 3; index++) {
+      if (squares[index][0].value===squares[index][1].value && 
+        squares[index][1].value===squares[index][2].value &&
+        squares[index][0].value!=='') {
+          alert(`Game Finished! Winning Player: ${player}`);
+          resetGame();
+      };
+    };
+
+    // diagonals 
+    if (squares[0][0].value===squares[1][1].value && 
+      squares[1][1].value===squares[2][2].value &&
+      squares[0][0].value!=='') {
+        alert(`Game Finished! Winning Player: ${player}`);
+        resetGame();
+    };
+
+    if (squares[0][2].value===squares[1][1].value && 
+      squares[1][1].value===squares[2][0].value &&
+      squares[0][2].value!=='') {
+        alert(`Game Finished! Winning Player: ${player}`);
+        resetGame();
+    };
+
+    // check if tie
+    // possibly try to use a counter?
+
+  };
+
 
   const resetGame = () => {
-    // Complete in Wave 4
-  }
+    setSquares(generateSquares());
+    setPlayer(PLAYER_1);
+  };
 
   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... {checkForWinner} </h2>
+        <button onClick={resetGame}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={markSquares} />
       </main>
     </div>
   );
-}
+};
 
 export default App;

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

src/components/Board.css

@@ -2,7 +2,7 @@ div.grid {
     width: 600px;
     height: 600px;
     margin: 0 auto;
-    background-color: #34495e;
+    background-color: #634783;
     color: #fff;
     border: 6px solid #2c3e50;
     border-radius: 10px;

src/components/Board.js

@@ -10,15 +10,30 @@ const generateSquareComponents = (squares, onClickCallback) => {
   //  you need to return a 1D array
   //  of square components
 
-}
+
+  // displays 9 square objects on the board 
+  let squaresOnBoard = []
+  for (let i = 0; i < squares.length; i++) {
+    squaresOnBoard = squaresOnBoard.concat(squares[i])
+  }
+
+  return squaresOnBoard.map((square) => {
+    return <Square
+      key={square.id}
+      id={square.id}
+      value={square.value}
+      onClickCallback={onClickCallback}
+    />
+  })
+};
 
 const Board = ({ squares, onClickCallback }) => {
   const squareList = generateSquareComponents(squares, onClickCallback);
   console.log(squareList);
   return <div className="grid" >
     {squareList}
   </div>
-}
+};
 
 Board.propTypes = {
   squares: PropTypes.arrayOf(

src/components/Square.css

@@ -1,6 +1,6 @@
 .square
 {
-  border: 4px solid #2c3e50;
+  border: 4px solid #000000;
   border-radius: 2px;
   font-family: Helvetica;
   font-weight: bold;
@@ -9,4 +9,5 @@
   justify-content: center;
   align-items: center;
   margin: 2px;
+  cursor: pointer;
 }

src/components/Square.js

@@ -3,17 +3,25 @@ import PropTypes from 'prop-types';
 
 import './Square.css'
 
+// responsible for rendering squares on tic tac toe board - buttons 
+
 const Square = (props) => {
   // For Wave 1 enable this 
   //  Component to alert a parent 
   //  component when it's clicked on.
 
-  return <button
+  const handleClick = () => {
+    props.onClickCallback(props.id);
+  }
+
+  return <button 
     className="square"
-  >
+    onClick={handleClick}> 
     {props.value}
-  </button>
-}
+    </button>
+};
+
+
 
 Square.propTypes = {
   value: PropTypes.string.isRequired,