Asya Spruciiiee

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

@@ -1,16 +1,17 @@
 .App {
   text-align: center;
+  background-image: url(https://i.gifer.com/5onc.gif);
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #ffc2cc;
+  background-image: url(https://i.gifer.com/5onc.gif);
   min-height: 10vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+  font-size: 28px;
+  color: #ffc2cc;
   margin-bottom: 2em;
 }
-

src/App.js

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import './App.css';
 
 import Board from './components/Board';
 
-const PLAYER_1 = 'X';
-const PLAYER_2 = 'O';
+const PLAYER1 = 'X';
+const PLAYER2 = 'O';
 
 const generateSquares = () => {
   const squares = [];
@@ -24,45 +24,114 @@ const generateSquares = () => {
 
   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());
+  const [turn, setTurn] = useState('X');
+  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
+  const toggleTurn = () => {  
+    if (turn === 'X'){
+      setTurn('O');
+    } else {
+      setTurn('X');
+    }
+  };
+
+
+  const onClickCallback = (id) => {
+    const newSquares = squares.map( (row) => {
+      row.map((square) => {
+        if (square.id === id && square.used !== true) {
+          const newValue = {value: turn,
+                            used: true};
+          let newSquare = Object.assign(square, newValue);
+         return newSquare;
+        }
+        return square;
+      });
+      return row;
+    });
+    setSquares(newSquares);
+    toggleTurn();
+    if (checkForWinner()) {
+      const newSquares = squares.map( (row) => {
+        row.map((square) => {
+          const newValue = {used: true};
+          let newSquare = Object.assign(square, newValue);
+          return newSquare;
+
+        });
+        return row;
+      });
+      setSquares(newSquares);
+      setWinner(checkForWinner());
+    }
 
+
+  };
+
   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;
+    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 resetGame = () => {
     // Complete in Wave 4
+    setSquares(generateSquares());
+    setTurn('X');
+    setWinner(null);
   };
 
+
+
   return (
-    <div className="App">
-      <header className="App-header">
+    <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>
+        {winner ?  <h2>Winner is: {winner}</h2> : <h2>Current Player {turn}</h2> }        
+        <button onClick={() =>resetGame()}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={onClickCallback}/>
       </main>
     </div>
   );
 };
 
-export default App;
+export default App;

src/App.test.js

@@ -14,7 +14,7 @@ describe('App', () => {
     expect(buttons[buttonIndex].innerHTML).toEqual(expectedResult);
   }
 
-  describe.skip('Wave 2: clicking on squares and rendering App', () => {
+  describe('Wave 2: clicking on squares and rendering App', () => {
 
   test('App renders with a board of 9 empty buttons', () => {
     // Arrange-Act - Render the app
@@ -85,7 +85,7 @@ describe('App', () => {
 });
 
 
-  describe.skip('Wave 3:  Winner tests', () => {
+  describe('Wave 3:  Winner tests', () => {
     describe('Prints "Winner is x" when x wins', () => {
       test('that a winner will be identified when 3 Xs get in a row across the top', () => {
         // Arrange
@@ -99,7 +99,7 @@ describe('App', () => {
         clickButtonAndVerifyResult(container, 1, 'x');
 
         // Assert
-        const winnerScreen = screen.queryByText('Winner is x')
+        const winnerScreen = screen.queryByText('Winner is x');
         expect(winnerScreen).not.toBeNull();
         expect(winnerScreen).toBeInTheDocument();
       });
@@ -364,7 +364,7 @@ describe('App', () => {
     });       
   });
 
-  describe.skip('Wave 4:  reset game button', () => {
+  describe('Wave 4:  reset game button', () => {
     test('App has a "Reset Game" button', () => {
       // Arrange-Act
       render(<App />);

src/components/Board.css

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

src/components/Board.js

@@ -3,29 +3,33 @@ import './Board.css';
 import Square from './Square';
 import PropTypes from 'prop-types';
 
-
+// 2d array to 1d array
 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 singleArraySquares = [].concat(...squares);
+  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);
   console.log(squareList);
-  return <div className="grid" >
-    {squareList}
-  </div>
-}
+  return <div className='grid'>{squareList}</div>;
+};
 
 Board.propTypes = {
   squares: PropTypes.arrayOf(
     PropTypes.arrayOf(
       PropTypes.shape({
         id: PropTypes.number.isRequired,
-        value: PropTypes.string.isRequired
+        value: PropTypes.string.isRequired,
       })
     )
   ),

src/components/Board.test.js

@@ -84,7 +84,7 @@ describe('Wave 1: Board', () => {
 });
 describe('Wave 2: Board', () => {
   describe('button click callbacks', () => {
-    test.skip('that the callback is called for the 1st button', () => {
+    test('that the callback is called for the 1st button', () => {
       // Arrange
       const callback = jest.fn();
       const { container } = render(<Board squares={SAMPLE_BOARD} onClickCallback={callback} />);
@@ -97,7 +97,7 @@ describe('Wave 2: Board', () => {
       expect(callback).toHaveBeenCalled();
     });
 
-    test.skip('that the callback is called for the last button', () => {
+    test('that the callback is called for the last button', () => {
       // Arrange
       const callback = jest.fn();
       const { container } = render(<Board squares={SAMPLE_BOARD} onClickCallback={callback} />);

src/components/Square.css

@@ -1,6 +1,5 @@
-.square
-{
-  border: 4px solid #2c3e50;
+.square {
+  border: 4px solid #ffc2cc;
   border-radius: 2px;
   font-family: Helvetica;
   font-weight: bold;
@@ -9,4 +8,4 @@
   justify-content: center;
   align-items: center;
   margin: 2px;
-}
+}

src/components/Square.js

@@ -1,19 +1,15 @@
-import React from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 
-import './Square.css'
+
+import './Square.css';
 
 const Square = (props) => {
   // For Wave 1 enable this 
   //  Component to alert a parent 
   //  component when it's clicked on.
-
-  return <button
-    className="square"
-  >
-    {props.value}
-  </button>
-}
+  return <button className='square' onClick={() => props.onClickCallback(props.id)}>{props.value}</button>;
+};
 
 Square.propTypes = {
   value: PropTypes.string.isRequired,