juliana - Maple

.eslintrc.json

@@ -12,7 +12,6 @@
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
     "plugin:react-hooks/recommended",
-    "plugin:jest/recommended",
     "plugin:testing-library/react"
   ],
   "parserOptions": {

README.md

@@ -1,5 +1,12 @@
 # React Tic-Tac-Toe
 
+## Please Read First!
+
+The digital campus' version of Tic-Tac-Toe differs from the original in the following ways:
+- We will *not* be using `main` branch. Follow step 6 in the **One-Time Project Setup** to change branches.
+- Wave 1 has been completed for you; however, it would help you understand the flow of data by reviewing the code written for Wave 1.
+- Wave 3's `checkForWinner` function has been created for you; however, read through Wave 3 instructions to figure out how and where to use it.
+
 ## Skills Assessed
 
 - Following directions and reading comprehension
@@ -81,9 +88,15 @@ 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. We will not being using `main` branch. Make sure you are working from `digital-starter` by running:
+
+```bash
+$ git checkout digital-starter
+```
+
+7. Follow the directions in the "Getting Started" section.
 
-7. Follow the directions in the "Project Requirements" section.
+8. Follow the directions in the "Project Requirements" section.
 
 ## Project Development Workflow
 

package.json

@@ -21,8 +21,7 @@
   },
   "eslintConfig": {
     "extends": [
-      "react-app",
-      "react-app/jest"
+      "react-app"
     ]
   },
   "browserslist": {

src/App.js

@@ -3,66 +3,123 @@ 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 = [];
-
+  let row = 0;
+  let col = 0;
   let currentId = 0;
+  console.log(`row = ${ row }`);
 
-  for (let row = 0; row < 3; row += 1) {
+  while (row < 3) {
     squares.push([]);
-    for (let col = 0; col < 3; col += 1) {
+    while (col < 3) {
       squares[row].push({
         id: currentId,
         value: '',
       });
+      col += 1;
       currentId += 1;
     }
+    row += 1;
+    col = 0;
   }
 
   return squares;
-};
+}
 
 const App = () => {
-  // This starts state off as a 2D array of JS objects with
-  // empty value and unique ids.
-  const [squares, setSquares] = useState(generateSquares());
 
-  // 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 [squares, setSquares] = useState(generateSquares());
+  const [currentPlayer, setCurrentPlayer] = useState(PLAYER_1);
+  const [numSquaresFilled, setNumSquaresFilled] = useState(0);
+  const [winner, setWinner] = useState(null);
 
   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.
-  };
+    let i = 0;
 
+    // Check all the rows and columns for a winner
+    while (i < 3) {
+      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;
+      } 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;
+    }
+    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;
+    }
+
+    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;
+    }
+
+    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];
+        if (currentSquare.id === id) {
+          console.log(currentSquare);
+          if (currentSquare.value !== '') return;
+
+          found = true;
+          currentSquare.value = currentPlayer;
+          setNumSquaresFilled(numSquaresFilled + 1);
+          if (currentPlayer === PLAYER_1) {
+            setCurrentPlayer(PLAYER_2)
+          } else {
+            setCurrentPlayer(PLAYER_1);
+          }
+        }
+        col += 1;
+      }
+      row += 1;
+      col = 0;
+    }
+    setWinner(checkForWinner());
+    setSquares(newSquares);
+  }
   const resetGame = () => {
-    // Complete in Wave 4
-  };
+    setSquares(generateSquares());
+    setCurrentPlayer('x');
+    setNumSquaresFilled(0);
+    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>{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>
   );
-};
+}
+
+
 
 export default App;

src/components/Board.js

@@ -4,31 +4,34 @@ import Square from './Square';
 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
-
+const generateSquares = (squares, onClickCallback) => {
+  const singleArraySquares = [].concat(...squares);
+  console.log(squares);
+  console.log(singleArraySquares);
+  return singleArraySquares.map((square) => {
+    return <Square
+      value={square.value}
+      id={square.id}
+      onClickCallback={onClickCallback}
+      key={square.id}
+    />
+  });
 }
 
 const Board = ({ squares, onClickCallback }) => {
-  const squareList = generateSquareComponents(squares, onClickCallback);
+
+  const squareList = generateSquares(squares, onClickCallback);
   console.log(squareList);
   return <div className="grid" >
     {squareList}
   </div>
 }
 
 Board.propTypes = {
-  squares: PropTypes.arrayOf(
-    PropTypes.arrayOf(
-      PropTypes.shape({
-        id: PropTypes.number.isRequired,
-        value: PropTypes.string.isRequired
-      })
-    )
-  ),
+  squares: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    value: PropTypes.string.isRequired
+  }))),
   onClickCallback: PropTypes.func.isRequired,
 };
 

src/components/Square.js

@@ -4,12 +4,11 @@ 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)
 
   return <button
     className="square"
+    onClick={() => props.onClickCallback(props.id)}
   >
     {props.value}
   </button>
@@ -21,4 +20,4 @@ Square.propTypes = {
   id: PropTypes.number.isRequired,
 };
 
-export default Square;
+export default Square