Rock-Saharai Cante🐨

src/App.css

@@ -3,7 +3,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #e896e6;
   min-height: 10vh;
   display: flex;
   flex-direction: column;
@@ -14,3 +14,18 @@
   margin-bottom: 2em;
 }
 
+.App-header button{
+    padding:10px 15px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    border: .5px solid #fff;
+    border-radius: 10px 10px 10px 10px;
+    border-color: hotpink;
+    background-color:thistle;
+    font-family:"Lucida Console","Courier New",monospace;
+    font-weight:bold;
+}
+
+.App-header button:hover{
+  width:20%
+}

src/App.js

@@ -3,66 +3,128 @@ import './App.css';
 
 import Board from './components/Board';
 
-const PLAYER_1 = 'X';
-const PLAYER_2 = 'O';
+const PLAYER_1 = 'x';//change to lowercase or tests wont pass
+const PLAYER_2 = 'o';
 
 const generateSquares = () => {
   const squares = [];
 
   let currentId = 0;
 
   for (let row = 0; row < 3; row += 1) {
-    squares.push([]);
+    squares.push([]); //adding square to squares
     for (let col = 0; col < 3; col += 1) {
       squares[row].push({
         id: currentId,
         value: '',
-      });
+      }); //creating a 3x3 array; each square has an id and value
       currentId += 1;
     }
   }
 
-  return squares;
+  return squares; //board is constructed
 }
 
 const App = () => {
 
   // This starts state off as a 2D array of JS objects with
   // empty value and unique ids.
   const [squares, setSquares] = useState(generateSquares());
+  //Set initial state, to player 1's turn
+  const[currentPlayer,setCurrentPlayer]=useState(PLAYER_1);
+  //initial number of squares filled equals 0
+  const[numSquaresFilled,setNumSquaresFilled]=useState(0);
+  //intial winner is Null
+  const[winner,setWinner] = useState(null);
+
 
-  // 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
+//PSE code, check for winner
+//accessing value of squares on board through .value notation
+  const checkForWinner = () => {
 
+    let i=0;
+    while(i<3){
+      // rows match?
+      if (squares[i][0].value === squares[i][1].value &&
+        squares[i][2].value === squares[i][1].value &&
+        squares[i][0].value !== '') {
+        return squares[i][0].value;
+      //columns match?
+      } else if (squares[0][i].value === squares[1][i].value &&
+        squares[2][i].value === squares[1][i].value &&
+        squares[0][i].value !== '') {
+        return squares[0][i].value;
+      }
+      i += 1;
+    }
+    //Diagnol left to right
+    if (squares[0][0].value === squares[1][1].value &&
+      squares[2][2].value === squares[1][1].value &&
+      squares[1][1].value !== '') {
+      return squares[0][0].value;
+    }
+    //diagnol right to left
+    if (squares[0][2].value === squares[1][1].value &&
+      squares[2][0].value === squares[1][1].value &&
+      squares[1][1].value !== '') {
+      return squares[0][2].value;
+    }
 
-  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.
+    return null;
+    }
+
+  const updateSquares = (id) => {
+    if (winner !== null) return;
+
+    const newSquares = [...squares];
+    let row = 0;
+    let col = 0;
+    let found = false;
+
+    while (row < 3 && !found) {
+      while (col < 3 && !found) {
+        let currentSquare = newSquares[row][col];
+        //id of square matches the current square
+        if (currentSquare.id === id) {
+          console.log(currentSquare);
+          if (currentSquare.value !== '') return;
 
+          found = true;
+          currentSquare.value = currentPlayer;
+          setNumSquaresFilled(numSquaresFilled + 1);//one square behind
+          if (currentPlayer === PLAYER_1) {
+            setCurrentPlayer(PLAYER_2)
+          } else {
+            setCurrentPlayer(PLAYER_1);
+          }
+        }
+        col += 1;
+      }
+      row += 1;
+      col = 0;
+    }
+    setWinner(checkForWinner());
+    setSquares(newSquares); //updating square content
   }
 
   const resetGame = () => {
     // Complete in Wave 4
+    setSquares(generateSquares());//setting squares to intial empty board
+    setCurrentPlayer('x');
+    setNumSquaresFilled(0);
+    setWinner(null);
   }
-
+//if winner == null, then game continue
+//else winner is winner
   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>
+        <h1>🐨 Saharai's Tic Tac Toe 🐨</h1>
+        <h2>{winner === null ? `Current Player ${ currentPlayer }` : `Winner is ${ winner }`}</h2>
+        <button onClick={resetGame}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={updateSquares}/>
       </main>
     </div>
   );

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: #0f7deb;
+    color: rgb(193, 131, 232);
+    border: 6px solid #a1ccf7;
     border-radius: 10px;
     display: grid;
     grid-template: repeat(3, 1fr) / repeat(3, 1fr);

src/components/Board.js

@@ -5,11 +5,18 @@ 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
-
+  // Merge 2 arrays into one, shorthand spread to pass data as props
+  const singleArraySquares = [].concat(...squares);
+  console.log(squares);
+  console.log(singleArraySquares);
+  //using map convert each square item into items with Square attributes 
+  return singleArraySquares.map((square) => {
+    return <Square 
+    value={square.value} 
+    id={square.id} 
+    onClickCallback={onClickCallback} 
+    key={square.id} />
+  });
 }
 
 const Board = ({ squares, onClickCallback }) => {

src/components/Square.css

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

src/components/Square.js

@@ -4,16 +4,16 @@ 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.
-
+  console.log(props) 
+  //after clicking on a button, return prop value, accessed through prop id
   return <button
-    className="square"
-  >
+  className="square"
+  onClick={()=> 
+  props.onClickCallback(props.id)}>
     {props.value}
-  </button>
-}
+  </button>}
+
+
 
 Square.propTypes = {
   value: PropTypes.string.isRequired,