Pine-Marjan, Megan, Roslyn

src/App.js

@@ -5,6 +5,8 @@ import Board from './components/Board';
 
 const PLAYER_1 = 'X';
 const PLAYER_2 = 'O';
+let TURN = true;
+
 
 const generateSquares = () => {
   const squares = [];
@@ -25,15 +27,38 @@ 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(TURN);
+  const [winner, setWinner] = useState('');
+  let string = 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 updateSquares = (id) => {
+    let newSquares = [];
+    let strVal = '';
+    strVal = turn==true? 'x':'o';
+    for (let row of squares){
+      let newRow = row.map((square)=>{
+        if ((square.id===id) && (!square.value)) {
+          square.value = strVal;
+          return square;
+          } 
+        return square;
+        });
+    newSquares.push(newRow);
+  }
+    let newTurn = !turn;
+    setTurn(newTurn);
+    setSquares(newSquares);
+    checkForWinner();
+  };
 
   const checkForWinner = () => {
     // Complete in Wave 3
@@ -45,21 +70,85 @@ const App = () => {
     //    3 squares in each column match
     // 3. Go across each diagonal to see if
     //    all three squares have the same value.
+
+    const winning = [ new Set([0,3,6]), new Set([1,4,7]), new Set([2,5,8]), new Set ([0,1,2]),
+    new Set([3,4,5]), new Set([6,7,8]),new Set([0,8,4]),new Set([2,4,6])];
+
+    let count = 0;
+
+    const xSet=new Set();
+    const oSet= new Set();
+      for(let row of squares){
+        for (let element of row){
+          // console.log('element=', element);
+          if (element.value === 'x'){
+            xSet.add(count);
+          } else if (element.value === 'o') {
+            oSet.add(count);
+          }
+          count ++;
+        }
+      }
+    const myX = [];
+
+    console.log('xSet', xSet);
+    console.log('oSet', oSet);
+
+    // Roslyn is done
+
+    for (let combo of winning){
+      if (isSuperset(xSet,combo)){
+        myX.push(combo);
+      }
+    }
+      // const myO=winning.filter((val)=>{
+      //   isSuperset(oSet,val);
+      // });
+    const myO = [];
+    for (let combo of winning){
+      if (isSuperset(oSet,combo)){
+        myO.push(combo);
+      }
+    }
+
+    console.log('myX', myX);
+    console.log('myO', myO);
+
+    if (myX.length > myO.length) {
+      string = 'x';
+    } else if (myO.length > myX.length){
+      string = 'o';
+    } else if ((oSet.size + xSet.size) === 9){
+      string = 'Tie';
+    } else {
+      string = '';
+    }
+    setWinner(string);
+    return string;
   };
 
-  const resetGame = () => {
-    // Complete in Wave 4
+  const isSuperset = (set, subset) => {
+    for (let elem of subset) {
+        if (!set.has(elem)) {
+            return false;
+        }
+    }
+    return true;
+};
+
+const resetGame = () => {
+    setSquares(generateSquares());
   };
 
   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 is {winner}</h2>
+        <button onClick={()=>{resetGame();}}>Reset Game</button>
       </header>
       <main>
-        <Board squares={squares} />
+        <Board squares={squares} onClickCallback={updateSquares}/>
       </main>
     </div>
   );

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

@@ -9,3 +9,4 @@ div.grid {
     display: grid;
     grid-template: repeat(3, 1fr) / repeat(3, 1fr);
 }
+

src/components/Board.js

@@ -9,16 +9,34 @@ const generateSquareComponents = (squares, onClickCallback) => {
   // squares is a 2D Array, but 
   //  you need to return a 1D array
   //  of square components
+  console.log('We are about to iterate through squares');
+  let oneD =[];
+  // let classVal='';
+  for (let row of squares){
+    for (let square of row) {
+      // if (square.value==='x'){
+      //   classVal='jasmine';
+      // }else if (square.value==='o'){
+      //   classVal='chris';
+      // }
+      oneD.push(<Square key={square.id} id={square.id} value={square.value} onClickCallback={onClickCallback} />);
+    }
+  }
+  return oneD;
 
-}
+};
 
 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(

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

@@ -9,4 +9,14 @@
   justify-content: center;
   align-items: center;
   margin: 2px;
-}
+}
+
+.jasmine {
+    background-image: url("https://ca.slack-edge.com/T024N8K3W8N-U029WFRD8HW-807f2572ed86-512");
+    Background-size: 200px 200px;
+}
+
+.chris {
+    background-image: url("https://ca.slack-edge.com/T024N8K3W8N-U0283SDM62H-f8f25fdaa3da-512");
+    Background-size: 200px 200px;
+}

src/components/Square.js

@@ -1,19 +1,27 @@
 import React 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.
+  let classVal='';
+
+  if (props.value==='x'){
+    classVal='jasmine';
+  }else if (props.value==='o'){
+    classVal='chris';
+  }
+  return (
+    <button className={`square ${classVal}`} onClick = {() => {props.onClickCallback(props.id);}}>
+      {props.value}
+    </button>
+    );
+};
+
 
-  return <button
-    className="square"
-  >
-    {props.value}
-  </button>
-}
 
 Square.propTypes = {
   value: PropTypes.string.isRequired,

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} />);