Spruce: Kelemen - Tic Tac Toe Digital starter

.eslintrc.json

@@ -11,9 +11,7 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:jsx-a11y/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:jest/recommended",
-    "plugin:testing-library/react"
+    "plugin:react-hooks/recommended"
   ],
   "parserOptions": {
     "ecmaFeatures": {

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.css

@@ -14,3 +14,10 @@
   margin-bottom: 2em;
 }
 
+.green {
+  color: rgb(199, 238, 199);
+}
+
+.red {
+  color: rgb(187, 133, 133);
+}

src/App.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import './App.css';
-
+import Login from './components/Login';
 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 = [];
@@ -26,40 +26,120 @@ const generateSquares = () => {
 };
 
 const App = () => {
-  // This starts state off as a 2D array of JS objects with
-  // empty value and unique ids.
+  // useState
   const [squares, setSquares] = useState(generateSquares());
+  const [player, setPlayer] = useState(PLAYER_1);
+
+  const onClickCallback = (id) => {
+    if (winner) {
+      return;
+    }
 
-  // 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
+    let madeMove = false;
+    const newState = squares.map((row) =>
+      row.map((pos) => {
+        if (pos.id !== id) {
+          return pos;
+        }
+        if (pos.value !== '') {
+          return pos;
+        }
+        madeMove = true;
+        return { ...pos, value: player };
+      })
+    );
+
+    if (madeMove) {
+      setSquares(newState);
+      setPlayer(player === PLAYER_1 ? PLAYER_2 : PLAYER_1);
+    }
+  };
 
   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;
+    }
+    // Check Top-Left to bottom-right diagonal
+    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;
+    }
+
+    // Check Top-right to bottom-left diagonal
+    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 nameColor = player === PLAYER_1 ? 'green' : 'red';
+
+  // const playersList = () => (
+  //   <div>
+  //     <h5>Players: {player1Name} vs. {player2Name}</h5>
+  //   </
+  //   div>
+  // );
+
+  {
+    /* const addPlayerNames = (newPlayers) => {
+    newPlayersList(() => (
+      userName1: userName1,
+      userName2: userName2,  
+    ));
+    setFormFields(newPlayers);
+  }; */
+  }
+
+  const winner = checkForWinner();
+  const getStatus = () => {
+    if (winner) {
+      return `Winner is ${winner}`;
+    }
+    return `It is now ${player}'s turn`;
   };
 
   const resetGame = () => {
-    // Complete in Wave 4
+    setSquares(generateSquares());
+    setPlayer(PLAYER_1);
   };
 
+  // ========= App rendered ===========
+
   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>
+        <Login />
+        <h2 className={nameColor}>{getStatus()}</h2>
+
+        <button onClick={() => resetGame()}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={onClickCallback} />
       </main>
     </div>
   );