Space - Katie

README.md

@@ -84,3 +84,4 @@ For an optional bit of fun try to use [github pages](https://github.com/gitname/
 
 Check out the [feedback template](feedback.md) which lists the items instructors will be looking for as they evaluate your project.
 
+# ktv-tic-tac-toe

src/App.css

@@ -3,7 +3,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #6da1e6;
   min-height: 10vh;
   display: flex;
   flex-direction: column;

src/App.js

@@ -16,43 +16,93 @@ const generateSquares = () => {
     for (let col = 0; col < 3; col += 1) {
       squares[row].push({
         id: currentId,
-        value: '',
+        value: "",
       });
       currentId += 1;
     }
   }
-
-  return squares;
+  return squares; // array of arrays
 }
 
 const App = () => {
 
   const [squares, setSquares] = useState(generateSquares());
+  const [currentPlayer, setPlayer] = useState(PLAYER_1);
+  const [winner, setWinner] = useState(null);
+
+
+  const onClickCallback = (clickedOnSquare) => {
+    const squaresNew =[]
+    squares.forEach( (squareArray) => {
+      const tempArray = []
+      squareArray.forEach( (square) => {
+        if(square.id === clickedOnSquare.id && square.value === "" && winner === null) {
+          clickedOnSquare.value = currentPlayer
+          tempArray.push(clickedOnSquare)
+          currentPlayer === PLAYER_1 ? setPlayer(PLAYER_2) : setPlayer(PLAYER_1)
+
+        }
+        else{
+          tempArray.push(square)
+        };
+
+      })
+      squaresNew.push(tempArray)
+    })
+    setSquares(squaresNew)
+    checkForWinner(squaresNew)
+  };
+
 
-  // 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 = (squaresArray) => {
 
+    // checking diagonals
+    if ( squaresArray[0][0].value === squaresArray[1][1].value && squaresArray[0][0].value === squaresArray[2][2].value && squaresArray[0][0].value !=="") {
+      setWinner(squaresArray[0][0].value)
+    } 
+    else if ( squaresArray[2][0].value === squaresArray[1][1].value && squaresArray[2][0].value === squaresArray[0][2].value && squaresArray[2][0].value !=="") {
+      setWinner(squaresArray[2][0].value)
+    } 
+
+    // checking verticals & horizontals
+    for(let i = 0; i < 3; i++) {
+       if ( squaresArray[0][i].value === squaresArray[1][i].value && squaresArray[0][i].value === squaresArray[2][i].value && squaresArray[0][i].value !=="" ) {
+        setWinner(squaresArray[0][i].value)
+       } 
+       else if ( squaresArray[i][0].value === squaresArray[i][1].value && squaresArray[i][0].value === squaresArray[i][2].value && squaresArray[i][0].value !=="" ) {
+        setWinner(squaresArray[i][0].value)
+       } 
+    }
 
-  const checkForWinner = () => {
-    // Complete in Wave 3
+    // checking for tie
+    let numFilledSquares = 0
 
+    squaresArray.forEach( (squaresRow) => {
+      let countPerRow = squaresRow.filter( square => {
+        return square.value !==""
+      })
+      numFilledSquares += countPerRow.length
+    })
+
+    if(numFilledSquares === 9) {
+      setWinner("Tie")
+    };
   }
 
   const resetGame = () => {
-    // Complete in Wave 4
+    setSquares(generateSquares())
+    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>The winner is <em>{winner}</em></h2>
+        <button onClick={resetGame}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={onClickCallback} />
       </main>
     </div>
   );

src/components/Board.css

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

src/components/Board.js

@@ -5,13 +5,26 @@ import PropTypes from 'prop-types';
 
 
 const generateSquareComponents = (squares, onClickCallback) => {
-  // Complete this for Wave 1
 
+  let squaresOnBoard = []
+  for(let row = 0; row<squares.length; row++){
+    for(let col = 0; col<squares[row].length; col++){
+      squaresOnBoard.push(
+      <Square 
+        onClickCallback={onClickCallback} 
+        id={squares[row][col].id} 
+        value={squares[row][col].value}
+        key={squares[row][col].id}
+      />
+      )
+    }
+  };
+
+  return squaresOnBoard
 }
 
 const Board = ({ squares, onClickCallback }) => {
   const squareList = generateSquareComponents(squares, onClickCallback);
-  console.log(squareList);
   return <div className="grid" >
     {squareList}
   </div>

src/components/Square.css

@@ -1,6 +1,8 @@
 .square
 {
-  border: 4px solid #2c3e50;
+  border: 4px solid #6ba2e0;
+  background-color: rgb(210, 229, 255);
+  color: #1c5197;
   border-radius: 2px;
   font-family: Helvetica;
   font-weight: bold;

src/components/Square.js

@@ -4,12 +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 onButtonClick = () => {
+    const updatedSquare = {
+        id: props.id,
+        value: "",
+      }
+    props.onClickCallback(updatedSquare);
+  };
 
   return <button
-    className="square"
+    className="square" onClick={onButtonClick}
   >
     {props.value}
   </button>