Paperr--AndreaPalacios

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,51 +21,121 @@ const generateSquares = () => {
       currentId += 1;
     }
   }
-
+  
   return squares;
 }
 
+/*initial State 3 rows
+[[{id: 0, value: ""}, {id: 1, value: ""}, {id: 2, value: ""}], 
+[{id: 3, value: ""}, {id: 4, value: ""}, {id: 5, value: ""}], 
+[{id: 6, value: ""}, {id: 7, value: ""}, {id: 8, value: ""}]] */
+
 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 [player, setPlayer]= useState(PLAYER_1);
+  const [status, setStatus] = useState('Let\'s play');
+  const [winner, setWinner] = useState(null);
+  const [turnCount, setTurnCount]=useState(0)
 
-  // 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 updateSquares=(id)=>{
+    if (winner !== null) return;
+
+    const newSquares = [...squares];
+    let selectedSquare = newSquares.flat().find( newSquare =>newSquare.id ===id);
+
+    if (selectedSquare.value !== '') return;
+      selectedSquare.value = player;
 
+    setSquares(newSquares);
+    updateTurn();
+    updateStatus(); 
+  };
 
-  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.
+
+  const checkForWinner = () => {{
+    // vertical cases
+    for (let i = 0; i < 3; i++) {
+      if (squares[0][i].value === squares[1][i].value &&
+        squares[1][i].value === squares[2][i].value &&
+        squares[0][i].value !== '') {
+          return squares[0][i].value
+        }
+    }
+
+    // horizontal cases
+    for (let i = 0; i < 3; i++) {
+      if (squares[i][0].value === squares[i][1].value &&
+        squares[i][1].value === squares[i][2].value &&
+        squares[i][0].value !== '') {
+          return squares[i][0].value
+        }
+    }
 
+    // diagonal cases
+    if (squares[0][0].value === squares[1][1].value &&
+      squares[1][1].value === squares[2][2].value &&
+      squares[0][0].value !== '') {
+        return squares[0][0].value
+      }
+    if (squares[0][2].value === squares[1][1].value &&
+      squares[1][1].value === squares[2][0].value &&
+      squares[0][2].value !== '') {
+        return squares[0][2].value
+      }
   }
+  return null;
+  };
+
+  /*update turn is working*/
+  const updateTurn = ()=> {
+    if (player === PLAYER_1) {
+      setPlayer(PLAYER_2);
+      setTurnCount(turnCount+1);
+    } else if (player === PLAYER_2) {
+      setPlayer(PLAYER_1);
+      setTurnCount(turnCount + 1);
+      }
+    };
 
+
+  const updateStatus= () => {
+    const winner = (checkForWinner())
+    if (winner === null && turnCount === 8) {
+      setStatus('Oh no...It\'s a tie!')
+    }
+    else if (winner === null) {
+      setStatus(`Current Player is ${player}`)
+      }
+    else if (winner === 'x' || winner === 'o') {
+      setStatus(`Winner is ${winner}`)
+      }
+    return winner
+    }
+
+  /*reset Game is passing*/
   const resetGame = () => {
-    // Complete in Wave 4
+    setSquares(generateSquares());
+    setPlayer(PLAYER_1);
+    setStatus('Let\'s Play!');
+    setWinner(null);
+    setTurnCount(0)
   }
 
   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>{status}</h2>
+        <button onClick={resetGame}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={updateSquares} />
       </main>
     </div>
   );
 }
 
 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
@@ -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.js

@@ -3,18 +3,28 @@ import './Board.css';
 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 generateSquareComponents = (squares, onClickCallback) => {
+  let squareComponents = squares.reduce( (accum,curVal) =>{
+    return accum.concat(curVal);
+  })
+  return squareComponents.map((square)=>{
+    return <Square 
+                  value= {square.value}
+                    id = {square.id} 
+                    key={square.id} 
+                    onClickCallback={onClickCallback} />
+
+  });
+};
+
 
 const Board = ({ squares, onClickCallback }) => {
   const squareList = generateSquareComponents(squares, onClickCallback);
-  console.log(squareList);
   return <div className="grid" >
     {squareList}
   </div>

src/components/Board.test.js

@@ -3,54 +3,52 @@ import '@testing-library/jest-dom/extend-expect';
 import Board from './Board';
 import { render, screen, fireEvent} from '@testing-library/react'
 
-
+const SAMPLE_BOARD = [
+  [
+    {
+      value: 'X',
+      id: 0,
+    },
+    {
+      value: 'X',
+      id: 1,
+    },
+    {
+      value: 'O',
+      id: 2,
+    },
+  ],
+  [
+    {
+      value: 'X',
+      id: 3,
+    },
+    {
+      value: 'X',
+      id: 4,
+    },
+    {
+      value: 'O',
+      id: 5,
+    },
+  ],
+  [
+    {
+      value: 'O',
+      id: 6,
+    },
+    {
+      value: 'O',
+      id: 7,
+    },
+    {
+      value: 'X',
+      id: 8,
+    },
+  ],    
+];
 describe('Wave 1: Board', () => {
   // Sample input to the Board component
-  const SAMPLE_BOARD = [
-    [
-      {
-        value: 'X',
-        id: 0,
-      },
-      {
-        value: 'X',
-        id: 1,
-      },
-      {
-        value: 'O',
-        id: 2,
-      },
-    ],
-    [
-      {
-        value: 'X',
-        id: 3,
-      },
-      {
-        value: 'X',
-        id: 4,
-      },
-      {
-        value: 'O',
-        id: 5,
-      },
-    ],
-    [
-      {
-        value: 'O',
-        id: 6,
-      },
-      {
-        value: 'O',
-        id: 7,
-      },
-      {
-        value: 'X',
-        id: 8,
-      },
-    ],    
-  ];
-
   test('that board will render with the proper number of Xs and Os', () => {
     // Act
     render(<Board squares={SAMPLE_BOARD} onClickCallback={() => { }} />);
@@ -84,7 +82,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 +95,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.js

@@ -3,15 +3,12 @@ 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.
+const Square = ({id,value, onClickCallback}) => {
 
   return <button
-    className="square"
-  >
-    {props.value}
+    className="square" 
+    onClick ={()=> onClickCallback(id)}>
+    {value}
   </button>
 }
 

src/components/Square.test.js

@@ -23,7 +23,7 @@ describe('Wave 1: Square', () => {
 });
 
 describe('Wave 2: Square', () => {
-  test.skip('when clicked on it calls the callback function', async () => {
+  test('when clicked on it calls the callback function', async () => {
     const callback = jest.fn();
 
     render(<Square value="X" id={1} onClickCallback={callback} />);