Pine - Alma and Ainur

README.md

@@ -81,7 +81,7 @@ We can run `yarn install` multiple times safely, but we only need to do this onc
 
 The file `package.json` contains details about our project, the scripts available, and the dependencies needed. We can inspect this file when we are curious about the details of our dependencies.
 
-6. Follow the directions in the "Getting Started" section.
+6. Follow the directions in the "Getting Started" section.w
 
 7. Follow the directions in the "Project Requirements" section.
 

src/App.js

@@ -3,8 +3,8 @@ 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 = [];
@@ -21,6 +21,7 @@ const generateSquares = () => {
       currentId += 1;
     }
   }
+  console.log(squares);
 
   return squares;
 };
@@ -30,23 +31,111 @@ const App = () => {
   // empty value and unique ids.
   const [squares, setSquares] = useState(generateSquares());
 
+  const [currentSquare, setCurrentSquare] = useState(false);
+
   // Wave 2
+  const changeTheSquare = (id) => {
+    let newSquares = [];
+    for (let row = 0; row < 3; row += 1) {
+      newSquares.push([]);
+      for (let col = 0; col < 3; col += 1) {
+        if (id === squares[row][col].id) {
+          if (!squares[row][col].value) {
+            if (!currentSquare) {
+              squares[row][col].value = PLAYER_1;
+            } else {
+              squares[row][col].value = PLAYER_2;
+            }
+            setCurrentSquare(!currentSquare);
+          }
+        }
+        newSquares[row].push(squares[row][col]);
+      }
+    }
+    setSquares(newSquares);
+  };
+
   // 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 = () => {
-    // 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.
+    //check rows
+    for (let row = 0; row < 3; row += 1) {
+      let countX = 0;
+      let countO = 0;
+      for (let col = 0; col < 3; col += 1) {
+        if (squares[row][col] === 'X') {
+          countX += 1;
+        } else if (squares[row][col] === 'O') {
+          countO += 1;
+        }
+        if (countX === 3) {
+          return 'X';
+        }
+        if (countO === 3) {
+          return 'O';
+        }
+      }
+    }
+    //check columns
+    for (let row = 0; row < 3; row += 1) {
+      let countX = 0;
+      let countO = 0;
+      for (let col = 0; col < 3; col += 1) {
+        if (squares[col][row] === 'X') {
+          countX += 1;
+        } else if (squares[col][row] === 'O') {
+          countO += 1;
+        }
+        if (countX === 3) {
+          return 'X';
+        }
+        if (countO === 3) {
+          return 'O';
+        }
+      }
+    }
+    //Check dioganals
+    if (squares[0][0] == 'X' && squares[1][1] == 'X' && squares[2][2] == 'X') {
+      return 'X';
+    }
+    if (squares[0][0] == 'O' && squares[1][1] == 'O' && squares[2][2] == 'O') {
+      return 'O';
+    }
+    // check other diagonal
+    if (squares[2][0] == 'X' && squares[1][1] == 'X' && squares[0][2] == 'X') {
+      return 'X';
+    }
+    if (squares[2][0] == 'O' && squares[1][1] == 'O' && squares[0][2] == 'O') {
+      return 'O';
+    }
+
+    // check for a tie
+    let count = 0;
+    for (let row = 0; row < 3; row += 1) {
+      for (let col = 0; col < 3; col += 1) {
+        if (squares[row][col] == 'X' || squares[row][col] == 'O') {
+          count += 1;
+        }
+      }
+    }
+    if (count != 9) {
+      return ' ';
+    }
+    return 'Tie';
   };
 
+  // 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.
+
   const resetGame = () => {
     // Complete in Wave 4
   };
@@ -59,7 +148,7 @@ const App = () => {
         <button>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={changeTheSquare} />
       </main>
     </div>
   );