Time - Vera

src/App.css

@@ -3,14 +3,54 @@
 }
 
 .App-header {
-  background-color: #282c34;
   min-height: 10vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: teal;
   margin-bottom: 2em;
+
 }
 
+h2 {
+  margin-top: 0;
+}
+
+
+.reset {
+  position: relative;
+  background-color: gray;
+  border: none;
+  font-size: 22px;
+  color: #FFFFFF;
+  padding: 10px;
+  width: 200px;
+  text-align: center;
+  transition-duration: 0.4s;
+  text-decoration: none;
+  overflow: hidden;
+  cursor: pointer;
+  border-radius: 12px;
+}
+
+.reset:after {
+  content: "";
+  background: #f1f1f1;
+  display: block;
+  position: absolute;
+  padding-top: 300%;
+  padding-left: 350%;
+  margin-left: -20px !important;
+  margin-top: -120%;
+  opacity: 0;
+  transition: all 0.8s
+}
+
+.reset:active:after {
+  padding: 0;
+  margin: 0;
+  opacity: 1;
+  transition: 0s
+}

src/App.js

@@ -6,6 +6,18 @@ import Board from './components/Board';
 const PLAYER_1 = 'X';
 const PLAYER_2 = 'O';
 
+
+const WINNINGOPTIONS = [
+  [0, 1, 2],
+  [3, 4, 5],
+  [6, 7, 8],
+  [0, 3, 6],
+  [1, 4, 7],
+  [2, 5, 8],
+  [0, 4, 8],
+  [2, 4, 6]
+];
+
 const generateSquares = () => {
   const squares = [];
 
@@ -21,38 +33,98 @@ const generateSquares = () => {
       currentId += 1;
     }
   }
-
+ 
   return squares;
 }
 
 const App = () => {
 
   const [squares, setSquares] = useState(generateSquares());
-
+  const [itsPlayer1Turn, setPlayer1Turn] = useState(true);
+
   // 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
+  // When it is clicked on.
+  // Then pass it into the squares as a callback
+
 
+  const updateValue = (squareClickedId) => { // event handler
+
+    const squareList = [];
 
-  const checkForWinner = () => {
+    squares.forEach((row, i) => {
+      squareList.push([]);
+      row.forEach((square) => {
+        if (square.id === squareClickedId.id && square.value === "" && winner === null) {
+          // set the state to determine when is player1 or player2
+          squareClickedId.value = itsPlayer1Turn ? PLAYER_1 : PLAYER_2;
+
+          // Pass the turn to player2. 
+          setPlayer1Turn(!itsPlayer1Turn);
+
+          squareList[i].push(squareClickedId)
+        } else {
+          // Return a copy with clean square. 
+          squareList[i].push({...square})
+        }
+      });
+    });
+    setSquares(squareList);
+  }
+
+  // It returns a flat array with the current clicked values. 
+  const extractValuesFromSquares = ((setSquares) => {
+    const values = [];
+
+    setSquares.forEach((row) => {
+      row.forEach((square) => {
+        values.push(square.value)
+      });
+    });
+    return values;
+  });
+
+  const checkForWinner = (setSquares) => {
     // Complete in Wave 3
+    // Invoking the function to get a flat array with the values. 
+    const values = extractValuesFromSquares(setSquares);
 
+    for (let i in WINNINGOPTIONS) {
+      // Destructuring (Example winningOptions first Iteration[i] i=0 
+      // a = 0, b = 1 c = 2)
+      const [a, b, c] = WINNINGOPTIONS[i];
+      // Return the value of the winner
+      if (values[a] && values[a] === values[b] && values[a] === values[c]) {
+        // Return the value of the winner player. 
+        return values[a];
+      } else if (!values.includes('')) {
+        // Return false is there is tie.
+        return false;
+      }
+    }
+    // The game is runnig! 
+    return null;
   }
+
+  const winner = checkForWinner(squares);
 
-  const resetGame = () => {
-    // Complete in Wave 4
+  const resetGame = () => { // event handler
+    // Complete in Wave 4 
+    setSquares(generateSquares());
+    setPlayer1Turn(true);
   }
 
   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>
+        { winner === false ?  <h2>Tere is a tie </h2> : <h2>The winner is Player {winner}</h2>}
+        {/* Event listener */}
+        <button className="reset" onClick={resetGame} >Reset Game </button> 
       </header>
       <main>
-        <Board squares={squares} />
+         {/* Event listener onClickCallback */}
+        <Board squares={squares} onClickCallback={updateValue}/>
       </main>
     </div>
   );

src/components/Board.css

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

src/components/Board.js

@@ -4,11 +4,29 @@ import Square from './Square';
 import PropTypes from 'prop-types';
 
 
+// It returs and array with Square components with prop. 
 const generateSquareComponents = (squares, onClickCallback) => {
-  // Complete this for Wave 1
+  const squaresArray = [];
+  // Iteraring over the 2D array from the parent App. 
+  squares.forEach((row) => {
+    row.forEach((square)=> {
 
+      squaresArray.push(
+        <Square
+          key={square.id}
+          id={square.id}
+          value={square.value}
+          onClickCallback={onClickCallback}
+        />
+      );
+    })
+  });
+
+  // An array with square components. 
+  return squaresArray;
 }
 
+
 const Board = ({ squares, onClickCallback }) => {
   const squareList = generateSquareComponents(squares, onClickCallback);
   console.log(squareList);

src/components/Square.css

@@ -1,8 +1,9 @@
 .square
 {
-  border: 4px solid #2c3e50;
+  border: 4px solid lightcoral;
   border-radius: 2px;
   font-family: Helvetica;
+  color: teal;
   font-weight: bold;
   font-size: 8em;
   display: flex;

src/components/Square.js

@@ -3,16 +3,21 @@ import PropTypes from 'prop-types';
 
 import './Square.css'
 
-const Square = (props) => {
-  // For Wave 1 enable this 
-  //  Component to alert a parent 
+// Takes id, value and onclickCallback as a props. 
+const Square = ({id, value, onClickCallback}) => {
+  // For Wave 1 enable this.
+  //  Component to alert a parent.
   //  component when it's clicked on.
 
-  return <button
-    className="square"
-  >
-    {props.value}
-  </button>
+  const onSquareClick = () => {
+    onClickCallback({ id, value });
+  }
+
+  return (
+    <button onClick={onSquareClick} className="square">
+      {value}
+    </button>
+  )
 }
 
 Square.propTypes = {