Liv - Space

src/App.css

@@ -1,16 +1,17 @@
 .App {
   text-align: center;
+  background-color: pink;
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #faf6fa;
   min-height: 10vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: rgb(77, 4, 58);
   margin-bottom: 2em;
 }
 

src/App.js

@@ -26,36 +26,77 @@ const generateSquares = () => {
 }
 
 const App = () => {
-
   const [squares, setSquares] = useState(generateSquares());
+  const [xTurn, setxTurn] = useState(PLAYER_1);
+
+  const onClickCallback = (id) => {
+    if (checkForWinner() !== null) return;
+    const updatedSquares = [...squares];
 
-  // 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 i = 0; i < 3; i++){
+      for (let j = 0; j < 3; j++) {
+        let thisSquare = updatedSquares[i][j];  
+        if (thisSquare.id === id) {
+          if (thisSquare.value !== '') return;
+          thisSquare.value = xTurn? PLAYER_1 : PLAYER_2;
+          setxTurn(!xTurn);
+        }
+      }
+    }
 
+    console.log(checkForWinner());
+    setSquares(updatedSquares);
+
+  }
 
   const checkForWinner = () => {
-    // Complete in Wave 3
+    let square = squares.flat().map(square => ({id:square.id, value:square.value }))
+    const winningBoards = [
+      [0, 1, 2],
+      [3, 4, 5],
+      [6, 7, 8],
+      [0, 3, 6],
+      [1, 4, 7],
+      [2, 5, 8],
+      [0, 4, 8],
+      [2, 4, 6],
+    ];
 
+    for (let i = 0; i < winningBoards.length; i++) {
+      const [a, b, c] = winningBoards[i];
+      if (square[a].value && square[a].value === square[b].value && square[a].value === square[c].value) {
+        let player = "";
+        square[a].value === 'X' ? player = 'X\'s' : player = 'O"s';
+        return player;
+      }
+    }
+
+    if ( square.every((square) => square.value !== "")) {
+      return "CAT"
+    }
+    return null;
   }
 
   const resetGame = () => {
-    // Complete in Wave 4
+    setSquares(generateSquares());
+    setxTurn(true);
   }
 
   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 className="reset" onClick={resetGame} >Reset Game </button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares}
+        onClickCallback = {onClickCallback}
+        />
       </main>
     </div>
   );
+
 }
 
 export default App;

src/components/Board.css

@@ -2,9 +2,9 @@ div.grid {
     width: 600px;
     height: 600px;
     margin: 0 auto;
-    background-color: #34495e;
-    color: #fff;
-    border: 6px solid #2c3e50;
+    background-color: #e722dd;
+    color: rgb(19, 2, 2);
+    border: 6px solid #440244;
     border-radius: 10px;
     display: grid;
     grid-template: repeat(3, 1fr) / repeat(3, 1fr);

src/components/Board.js

@@ -5,16 +5,32 @@ import PropTypes from 'prop-types';
 
 
 const generateSquareComponents = (squares, onClickCallback) => {
-  // Complete this for Wave 1
+  const squaresArray = [];
 
+  squares.forEach((row) => {
+    row.forEach((square)=> {
+
+      squaresArray.push(
+        <Square
+          key={square.id}
+          id={square.id}
+          value={square.value}
+          onClickCallback={onClickCallback}
+        />
+      );
+    })
+  });
+
+  return squaresArray;
 }
 
 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.css

@@ -1,6 +1,6 @@
 .square
 {
-  border: 4px solid #2c3e50;
+  border: 4px solid #440244;
   border-radius: 2px;
   font-family: Helvetica;
   font-weight: bold;

src/components/Square.js

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