From 8d8cec6a9ea4922133b8131eb1a89b4cfe6678af Mon Sep 17 00:00:00 2001
From: Karen Garcia <karen.garcia@nexscreen.com>
Date: Thu, 3 Oct 2019 15:48:47 -0600
Subject: [PATCH 1/7] changed to functional component, was able to render items
 and got the state to update properly once clicked. After you find two that
 don't match it crashes. Will look into more. Once I get it to functional
 component will be able to help with other code as I feel more comfortable
 with functional compoenents rather than classes

---
 src/components/app.js | 636 +++++++++++++++++++++++++++++-------------
 1 file changed, 442 insertions(+), 194 deletions(-)

diff --git a/src/components/app.js b/src/components/app.js
index 7316040..248eafb 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -1,4 +1,5 @@
-import React, { Component } from "react";
+// import React, { Component } from "react";
+import React, { useState } from 'react';
 import "../assets/css/app.css";
 import Card from "./card";
 import HighScoreList from "./highscorelist"
@@ -14,248 +15,495 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 library.add(faHeart, faSpa, faAnchor, faCube, faDice, faBicycle, faLeaf);
 
-class App extends Component {
-  constructor(props) {
-    super(props);
-
-    this.cardsToPopulate = [
-      "heart",
-      "anchor",
-      "cube",
-      "leaf",
-      "dice",
-      "bicycle",
-      "heart",
-      "anchor",
-      "cube",
-      "leaf",
-      "dice",
-      "bicycle"
-    ];
-    this.cards = [...this.cardsToPopulate];
-
-    this.state = {
-      cardRevealStates: new Array(this.cards.length).fill(false),
-      numberOfAttempts: 0,
-      numberOfClicks: 0,
-      gamesPlayed: 1,
-      accuracy: 0,
-      highScores: []
-    };
-    // console.log(this.state.cardRevealStates);
-
-    this.handleClick = this.handleClick.bind(this);
-    this.startNewGame = this.startNewGame.bind(this);
-    this.addNumberOfClicks = this.addNumberOfClicks.bind(this);
-    this._addHighScore = this._addHighScore.bind(this);
-  }
-
 
-  _addHighScore() {
-    this.setState({
-      highScores: [...this.state.highScores, this.state.numberOfAttempts].sort()
-    })
-    this.startNewGame()
-  }
-
-  render() {
-    const { numberOfAttempts, gamesPlayed, accuracy } = this.state;
-    return (
-      <div className="App">
-        <div className="col-1">
-          <div className="links">
-            <a href="#">Game</a>
-            <a href="#">Contributors</a>
-          </div>
-        </div>
-        <div className="col-2">
-          <p id="gameStats">
-            <span className="stat">Games Played: {gamesPlayed}</span>
-            <span className="stat">Attempts: {numberOfAttempts}</span>
-            <span className="stat">Accuracy: {accuracy}%</span>
-          </p>
-          
-          <div className="gamecomplete">
-            <p id="gc" />
-          </div>
-
-          <div id="gameArea">{this.renderCards()}</div>
-          <div id="buttondiv">
-            <button
-              className="randomize-btn"
-              onClick={() => this.randomizeCards(this.cards)}
-            >
-              Randomize
-            </button>
-            <button className="startGame-btn" onClick={this.startNewGame}>
-              Start New Game
-            </button>
-            <button className="startGame-btn" onClick={this._addHighScore} disabled={this.state.cardRevealStates.length}>
-              Add High Score
-            </button>
-          </div>
-        </div>
-        <HighScoreList className="col-3" scores={this.state.highScores} />
-      </div>
-    );
-  }
+const App = ()=>{
+  const cardsToPopulate= [
+    "heart",
+    "anchor",
+    "cube",
+    "leaf",
+    "dice",
+    "bicycle",
+    "heart",
+    "anchor",
+    "cube",
+    "leaf",
+    "dice",
+    "bicycle"
+  ];
+    
+  let cards = [...cardsToPopulate];
+  
+  // const [cards, setCards] = useState(cardsToPopulate);
+  // const [cardRevealStates, setCardRevealStates] = useState(new Array(cards.length).fill(false));
+  // const [numberOfAttempts, setNumberOfAttempts] = useState(0);
+  // const [numberOfClicks, setNumberOfClicks] = useState(0);
+  // const [gamesPlayed, setGamesPlayed] = useState(1);
+  // const [accuracy, setAccuracy] = useState(0);
+  // const [highScores, setHighScores] = [];
 
+  const [state, setState] = useState({
+    cardRevealStates: new Array(cards.length).fill(false),
+    numberOfAttempts: 0,
+    numberOfClicks: 0,
+    gamesPlayed: 1,
+    accuracy: 0,
+    highScores: []
+  });
 
-  hideCards(onSetState = () => {}) {
+  const _addHighScore =()=> {
+    setState({
+      highScores: [...state.highScores, state.numberOfAttempts].sort()
+    });
+    startNewGame();
+  };
+  
+  const hideCards =(onSetState = () => {})=> {
     setTimeout(() => {
-      this.setState(
+      setState(
         {
-          cardRevealStates: new Array(this.cards.length).fill(false)
+          cardRevealStates: new Array(cards.length).fill(false)
         },
         onSetState()
       );
     }, 500);
   }
-  removeMatches(match) {
-    this.hideCards(() => {
-      this.cards = this.removeMatchedCardsFromList(match);
+
+  const removeMatches = (match)=> {
+    hideCards(() => {
+      cards = removeMatchedCardsFromList(match);
     });
   }
 
-  isMatch(cardsArr) {
+  const isMatch =(cardsArr)=> {
     return cardsArr.every((val, i, arr) => val === arr[0]);
   }
 
-  getRevealedCards() {
-    return this.cards.filter((_, i) => this.state.cardRevealStates[i]);
+  const getRevealedCards = () => {
+    return cards.filter((_, i) => state.cardRevealStates[i]);
   }
 
-  removeMatchedCardsFromList(match) {
-    return this.cards.filter(card => card !== match);
+  const removeMatchedCardsFromList =(match) => {
+    return cards.filter(card => card !== match);
   }
 
-  addNumberOfAttempts() {
-    this.setState(prevState => ({
+  const addNumberOfAttempts = () => {
+    setState(prevState => ({
       numberOfAttempts: prevState.numberOfAttempts + 1
     }));
   }
 
-  checkForMatch() {
-    const revealedCards = this.getRevealedCards();
+  const checkForMatch = () => {
+    const revealedCards = getRevealedCards();
     if (revealedCards.length === 2) {
-      if (this.isMatch(revealedCards)) {
-        this.removeMatches(revealedCards[0]);
+      if (isMatch(revealedCards)) {
+        removeMatches(revealedCards[0]);
       }
-      this.hideCards(() => {
-        this.updateAccuracy();
+        hideCards(() => {
+        updateAccuracy();
       });
     }
-    if (this.cards.length == 0) {
+    if (cards.length == 0) {
       document.getElementById("gc").innerHTML =
-        "Game Complete in " + this.state.numberOfAttempts + "   Attempts";
+        "Game Complete in " + state.numberOfAttempts + "   Attempts";
       document.getElementById("buttondiv").style.display = "none";
-      //   console.log(
-      //     "Game Complete in" + this.state.numberOfAttempts + "attempts"
-      //   );
     }
   }
 
-  handleClick(index) {
-    const newRevealStates = this.state.cardRevealStates;
-    newRevealStates[index] = true;
-    //cards actively flipped counter 
-    let cardsFlipped = 0;
-    
-    //adds how many active cards flipped there are
-    newRevealStates.forEach(function(el) {
-      if (el === true) {
-        cardsFlipped++;
+    const handleClick = (index) => {
+      console.log({index});
+      const newRevealStates = state.cardRevealStates;
+      
+      newRevealStates[index] = true;
+      console.log({newRevealStates});
+      //cards actively flipped counter 
+      let cardsFlipped = 0;
+      
+      //adds how many active cards flipped there are
+      newRevealStates.forEach(function(el) {
+        if (el === true) {
+          cardsFlipped++;
+        } else {
+          return;
+        }
+      });
+
+      //checks if only two cards are flipped
+      if (cardsFlipped < 3) {
+        //if only 2 are flipped it continues on
+        setState({
+          ...state,
+          cardRevealStates: newRevealStates
+        });
+
+        checkForMatch();
+
+        addNumberOfClicks();
       } else {
+        //if more then two are it returns and doesn't let you flip another
         return;
       }
-    });
+    }
 
-    //checks if only two cards are flipped
-    if (cardsFlipped < 3) {
-      //if only 2 are flipped it continues on
-      this.setState({
-        cardRevealStates: newRevealStates
+    const addNumberOfClicks = () => {
+      const { numberOfClicks } = state;
+      const clicks = numberOfClicks + 1;
+      const attempts = Math.floor(clicks / 2);
+      setState({
+        ...state,
+        numberOfClicks: clicks,
+        numberOfAttempts: attempts
       });
+    }
+  
+    const updateAccuracy = () => {
+      const { numberOfClicks } = state;
+      const clicks = numberOfClicks + 1;
+      const attempts = Math.floor(clicks / 2);
+      const originalCardsLength = cardsToPopulate.length;
+      const currentCardsLength = cards.length;
+      const revealedCards = Math.ceil(
+        (originalCardsLength - currentCardsLength) / 2
+      );
+      const accuracy = Math.floor(
+        revealedCards ? (revealedCards / attempts) * 100 : 0
+      );
+  
+      setState({
+        accuracy: accuracy
+      });
+    }
 
-      this.checkForMatch();
-
-      this.addNumberOfClicks();
-    } else {
-      //if more then two are it returns and doesn't let you flip another
-      return;
+    const randomizeCards =(cards) => {
+      var currentIndex = cards.length,
+        temporaryValue,
+        randomIndex;
+  
+      while (0 !== currentIndex) {
+        randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex -= 1;
+  
+        temporaryValue = cards[currentIndex];
+        cards[currentIndex] = cards[randomIndex];
+        cards[randomIndex] = temporaryValue;
+      }
+  
+      renderCards(cards);
+    }
+  
+    const renderCards = () => {
+      console.log(`I am here ${cards}`);
+      return cards.map((icon, index) => (
+        <Card
+          key={`${icon}-${index}`}
+          clickCallback={handleClick}
+          index={index}
+          icon={icon}
+          display={state.cardRevealStates[index]}
+        />
+      ));
     }
+  
+    const startNewGame = () => {
+      const { gamesPlayed } = state;
+      cards = [...cardsToPopulate];
+      setState({
+        cardRevealStates: new Array(cards.length).fill(false),
+        gamesPlayed: gamesPlayed + 1,
+        accuracy: 0,
+        numberOfAttempts: 0,
+        numberOfClicks: 0
+      });
+    }
+  
+  const {numberOfAttempts, gamesPlayed, accuracy} = state;
+  console.log({state});
+  return (
+    <div className="App">
+      <div className="col-1">
+        <div className="links">
+          <a href="#">Game</a>
+          <a href="#">Contributors</a>
+        </div>
+      </div>
+      <div className="col-2">
+        <p id="gameStats">
+          <span className="stat">Games Played: {gamesPlayed}</span>
+          <span className="stat">Attempts: {numberOfAttempts}</span>
+          <span className="stat">Accuracy: {accuracy}%</span>
+        </p>
+        
+        <div className="gamecomplete">
+          <p id="gc" />
+        </div>
 
+        <div id="gameArea">{renderCards()}</div>
+        <div id="buttondiv">
+          <button
+            className="randomize-btn"
+            onClick={() => randomizeCards(cards)}
+          >
+            Randomize
+          </button>
+          <button className="startGame-btn" onClick={startNewGame}>
+            Start New Game
+          </button>
+          <button className="startGame-btn" onClick={_addHighScore} disabled={state.cardRevealStates.length}>
+            Add High Score
+          </button>
+        </div>
+      </div>
+      <HighScoreList className="col-3" scores={state.highScores} />
+    </div>
+  );
     
-  }
+}
 
-  addNumberOfClicks() {
-    const { numberOfClicks } = this.state;
-    const clicks = numberOfClicks + 1;
-    const attempts = Math.floor(clicks / 2);
-    this.setState({
-      numberOfClicks: clicks,
-      numberOfAttempts: attempts
-    });
-  }
 
-  updateAccuracy() {
-    const { numberOfClicks } = this.state;
-    const clicks = numberOfClicks + 1;
-    const attempts = Math.floor(clicks / 2);
-    const originalCardsLength = this.cardsToPopulate.length;
-    const currentCardsLength = this.cards.length;
-    const revealedCards = Math.ceil(
-      (originalCardsLength - currentCardsLength) / 2
-    );
-    const accuracy = Math.floor(
-      revealedCards ? (revealedCards / attempts) * 100 : 0
-    );
-
-    this.setState({
-      accuracy: accuracy
-    });
-  }
+// class App extends Component {
+//   constructor(props) {
+//     super(props);
 
-  randomizeCards(cards) {
-    var currentIndex = cards.length,
-      temporaryValue,
-      randomIndex;
+//     this.cardsToPopulate = [
+//       "heart",
+//       "anchor",
+//       "cube",
+//       "leaf",
+//       "dice",
+//       "bicycle",
+//       "heart",
+//       "anchor",
+//       "cube",
+//       "leaf",
+//       "dice",
+//       "bicycle"
+//     ];
+//     this.cards = [...this.cardsToPopulate];
 
-    while (0 !== currentIndex) {
-      randomIndex = Math.floor(Math.random() * currentIndex);
-      currentIndex -= 1;
+//     this.state = {
+//       cardRevealStates: new Array(this.cards.length).fill(false),
+//       numberOfAttempts: 0,
+//       numberOfClicks: 0,
+//       gamesPlayed: 1,
+//       accuracy: 0,
+//       highScores: []
+//     };
+//     console.log(this.state.cardRevealStates);
+    
 
-      temporaryValue = cards[currentIndex];
-      cards[currentIndex] = cards[randomIndex];
-      cards[randomIndex] = temporaryValue;
-    }
+//     this.handleClick = this.handleClick.bind(this);
+//     this.startNewGame = this.startNewGame.bind(this);
+//     this.addNumberOfClicks = this.addNumberOfClicks.bind(this);
+//     this._addHighScore = this._addHighScore.bind(this);
+//   }
 
-    this.renderCards(cards);
-  }
 
-  renderCards() {
-    return this.cards.map((icon, index) => (
-      <Card
-        key={`${icon}-${index}`}
-        clickCallback={this.handleClick}
-        index={index}
-        icon={icon}
-        display={this.state.cardRevealStates[index]}
-      />
-    ));
-  }
+//   _addHighScore() {
+//     this.setState({
+//       highScores: [...this.state.highScores, this.state.numberOfAttempts].sort()
+//     })
+//     this.startNewGame()
+//   }
 
-  startNewGame() {
-    const { gamesPlayed } = this.state;
-    this.cards = [...this.cardsToPopulate];
-    this.setState({
-      cardRevealStates: new Array(this.cards.length).fill(false),
-      gamesPlayed: gamesPlayed + 1,
-      accuracy: 0,
-      numberOfAttempts: 0,
-      numberOfClicks: 0
-    });
-  }
-}
+//   render() {
+//     const { numberOfAttempts, gamesPlayed, accuracy } = this.state;
+//     return (
+//       <div className="App">
+//         <div className="col-1">
+//           <div className="links">
+//             <a href="#">Game</a>
+//             <a href="#">Contributors</a>
+//           </div>
+//         </div>
+//         <div className="col-2">
+//           <p id="gameStats">
+//             <span className="stat">Games Played: {gamesPlayed}</span>
+//             <span className="stat">Attempts: {numberOfAttempts}</span>
+//             <span className="stat">Accuracy: {accuracy}%</span>
+//           </p>
+          
+//           <div className="gamecomplete">
+//             <p id="gc" />
+//           </div>
+
+//           <div id="gameArea">{this.renderCards()}</div>
+//           <div id="buttondiv">
+//             <button
+//               className="randomize-btn"
+//               onClick={() => this.randomizeCards(this.cards)}
+//             >
+//               Randomize
+//             </button>
+//             <button className="startGame-btn" onClick={this.startNewGame}>
+//               Start New Game
+//             </button>
+//             <button className="startGame-btn" onClick={this._addHighScore} disabled={this.state.cardRevealStates.length}>
+//               Add High Score
+//             </button>
+//           </div>
+//         </div>
+//         <HighScoreList className="col-3" scores={this.state.highScores} />
+//       </div>
+//     );
+//   }
+
+
+//   hideCards(onSetState = () => {}) {
+//     setTimeout(() => {
+//       this.setState(
+//         {
+//           cardRevealStates: new Array(this.cards.length).fill(false)
+//         },
+//         onSetState()
+//       );
+//     }, 500);
+//   }
+//   removeMatches(match) {
+//     this.hideCards(() => {
+//       this.cards = this.removeMatchedCardsFromList(match);
+//     });
+//   }
+
+//   isMatch(cardsArr) {
+//     return cardsArr.every((val, i, arr) => val === arr[0]);
+//   }
+
+//   getRevealedCards() {
+//     return this.cards.filter((_, i) => this.state.cardRevealStates[i]);
+//   }
+
+//   removeMatchedCardsFromList(match) {
+//     return this.cards.filter(card => card !== match);
+//   }
+
+//   addNumberOfAttempts() {
+//     this.setState(prevState => ({
+//       numberOfAttempts: prevState.numberOfAttempts + 1
+//     }));
+//   }
+
+//   checkForMatch() {
+//     const revealedCards = this.getRevealedCards();
+//     if (revealedCards.length === 2) {
+//       if (this.isMatch(revealedCards)) {
+//         this.removeMatches(revealedCards[0]);
+//       }
+//       this.hideCards(() => {
+//         this.updateAccuracy();
+//       });
+//     }
+//     if (this.cards.length == 0) {
+//       document.getElementById("gc").innerHTML =
+//         "Game Complete in " + this.state.numberOfAttempts + "   Attempts";
+//       document.getElementById("buttondiv").style.display = "none";
+//       //   console.log(
+//       //     "Game Complete in" + this.state.numberOfAttempts + "attempts"
+//       //   );
+//     }
+//   }
+
+//   handleClick(index) {
+//     const newRevealStates = this.state.cardRevealStates;
+//     newRevealStates[index] = true;
+//     //cards actively flipped counter 
+//     let cardsFlipped = 0;
+    
+//     //adds how many active cards flipped there are
+//     newRevealStates.forEach(function(el) {
+//       if (el === true) {
+//         cardsFlipped++;
+//       } else {
+//         return;
+//       }
+//     });
+
+//     //checks if only two cards are flipped
+//     if (cardsFlipped < 3) {
+//       //if only 2 are flipped it continues on
+//       this.setState({
+//         cardRevealStates: newRevealStates
+//       });
+
+//       this.checkForMatch();
+
+//       this.addNumberOfClicks();
+//     } else {
+//       //if more then two are it returns and doesn't let you flip another
+//       return;
+//     }
+
+    
+//   }
+
+//   addNumberOfClicks() {
+//     const { numberOfClicks } = this.state;
+//     const clicks = numberOfClicks + 1;
+//     const attempts = Math.floor(clicks / 2);
+//     this.setState({
+//       numberOfClicks: clicks,
+//       numberOfAttempts: attempts
+//     });
+//   }
+
+//   updateAccuracy() {
+//     const { numberOfClicks } = this.state;
+//     const clicks = numberOfClicks + 1;
+//     const attempts = Math.floor(clicks / 2);
+//     const originalCardsLength = this.cardsToPopulate.length;
+//     const currentCardsLength = this.cards.length;
+//     const revealedCards = Math.ceil(
+//       (originalCardsLength - currentCardsLength) / 2
+//     );
+//     const accuracy = Math.floor(
+//       revealedCards ? (revealedCards / attempts) * 100 : 0
+//     );
+
+//     this.setState({
+//       accuracy: accuracy
+//     });
+//   }
+
+//   randomizeCards(cards) {
+//     var currentIndex = cards.length,
+//       temporaryValue,
+//       randomIndex;
+
+//     while (0 !== currentIndex) {
+//       randomIndex = Math.floor(Math.random() * currentIndex);
+//       currentIndex -= 1;
+
+//       temporaryValue = cards[currentIndex];
+//       cards[currentIndex] = cards[randomIndex];
+//       cards[randomIndex] = temporaryValue;
+//     }
+
+//     this.renderCards(cards);
+//   }
+
+//   renderCards() {
+//     return this.cards.map((icon, index) => (
+//       <Card
+//         key={`${icon}-${index}`}
+//         clickCallback={this.handleClick}
+//         index={index}
+//         icon={icon}
+//         display={this.state.cardRevealStates[index]}
+//       />
+//     ));
+//   }
+
+//   startNewGame() {
+//     const { gamesPlayed } = this.state;
+//     this.cards = [...this.cardsToPopulate];
+//     this.setState({
+//       cardRevealStates: new Array(this.cards.length).fill(false),
+//       gamesPlayed: gamesPlayed + 1,
+//       accuracy: 0,
+//       numberOfAttempts: 0,
+//       numberOfClicks: 0
+//     });
+//     console.log(this.cards);
+//   }
+// }
 
 export default App;
\ No newline at end of file

From a442ccc3369414f408855b01b30aacb36f43ea01 Mon Sep 17 00:00:00 2001
From: Karen Garcia <karen.garcia@nexscreen.com>
Date: Thu, 3 Oct 2019 15:53:41 -0600
Subject: [PATCH 2/7] got it to work, had to add ...state as the setState was
 changing the state to remove other items. Now start new game is having
 issues.

---
 src/components/app.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/app.js b/src/components/app.js
index 248eafb..482dc39 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -53,6 +53,7 @@ const App = ()=>{
 
   const _addHighScore =()=> {
     setState({
+      ...state,
       highScores: [...state.highScores, state.numberOfAttempts].sort()
     });
     startNewGame();
@@ -62,6 +63,7 @@ const App = ()=>{
     setTimeout(() => {
       setState(
         {
+          ...state,
           cardRevealStates: new Array(cards.length).fill(false)
         },
         onSetState()
@@ -89,6 +91,7 @@ const App = ()=>{
 
   const addNumberOfAttempts = () => {
     setState(prevState => ({
+      ...state,
       numberOfAttempts: prevState.numberOfAttempts + 1
     }));
   }
@@ -170,6 +173,7 @@ const App = ()=>{
       );
   
       setState({
+        ...state,
         accuracy: accuracy
       });
     }

From 9701f2455c01adc8e980724610d9cc8f59ccefab Mon Sep 17 00:00:00 2001
From: Karen Garcia <karen.garcia@nexscreen.com>
Date: Fri, 4 Oct 2019 10:30:48 -0600
Subject: [PATCH 3/7] got cards to change. Moved cards to a state of cardDeck
 rather than a let statement

---
 src/components/app.js | 59 +++++++++++++++++++++++++++++--------------
 1 file changed, 40 insertions(+), 19 deletions(-)

diff --git a/src/components/app.js b/src/components/app.js
index 482dc39..d3ebbbb 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -33,6 +33,7 @@ const App = ()=>{
   ];
     
   let cards = [...cardsToPopulate];
+  console.log(`cards are now right ${cardDeck}`);
   
   // const [cards, setCards] = useState(cardsToPopulate);
   // const [cardRevealStates, setCardRevealStates] = useState(new Array(cards.length).fill(false));
@@ -41,9 +42,9 @@ const App = ()=>{
   // const [gamesPlayed, setGamesPlayed] = useState(1);
   // const [accuracy, setAccuracy] = useState(0);
   // const [highScores, setHighScores] = [];
-
+  const [cardDeck, setCardDeck] = useState(cardsToPopulate);
   const [state, setState] = useState({
-    cardRevealStates: new Array(cards.length).fill(false),
+    cardRevealStates: new Array(cardDeck.length).fill(false),
     numberOfAttempts: 0,
     numberOfClicks: 0,
     gamesPlayed: 1,
@@ -56,6 +57,7 @@ const App = ()=>{
       ...state,
       highScores: [...state.highScores, state.numberOfAttempts].sort()
     });
+    // console.log(`checking here ${state.cardRevealStates.length}`);
     startNewGame();
   };
   
@@ -64,7 +66,7 @@ const App = ()=>{
       setState(
         {
           ...state,
-          cardRevealStates: new Array(cards.length).fill(false)
+          cardRevealStates: new Array(cardDeck.length).fill(false)
         },
         onSetState()
       );
@@ -72,9 +74,15 @@ const App = ()=>{
   }
 
   const removeMatches = (match)=> {
+    // console.log(`matched cards are ${match}`)
     hideCards(() => {
-      cards = removeMatchedCardsFromList(match);
+      // cards = ;
+      setCardDeck(removeMatchedCardsFromList(match));
     });
+    hideCards();
+    // cards = ["bicycle", "bicycle"];
+    // renderCards(cardDeck);
+    // console.log({cards});
   }
 
   const isMatch =(cardsArr)=> {
@@ -82,11 +90,19 @@ const App = ()=>{
   }
 
   const getRevealedCards = () => {
-    return cards.filter((_, i) => state.cardRevealStates[i]);
+    return cardDeck.filter((_, i) => state.cardRevealStates[i]);
   }
 
   const removeMatchedCardsFromList =(match) => {
-    return cards.filter(card => card !== match);
+    // const result = cards[0]
+    // console.log(`in removeMatched cards heart ${match} ${cards[0]===match}`);
+    const removedCards = cardDeck.filter(card => card !== match);
+    setState({
+      ...state,
+      cardRevealStates : removedCards
+    })
+    console.log({removedCards});
+    return removedCards;
   }
 
   const addNumberOfAttempts = () => {
@@ -98,15 +114,17 @@ const App = ()=>{
 
   const checkForMatch = () => {
     const revealedCards = getRevealedCards();
+    console.log({revealedCards});
     if (revealedCards.length === 2) {
       if (isMatch(revealedCards)) {
+        // console.log(`match!`);
         removeMatches(revealedCards[0]);
       }
         hideCards(() => {
         updateAccuracy();
       });
     }
-    if (cards.length == 0) {
+    if (cardDeck.length == 0) {
       document.getElementById("gc").innerHTML =
         "Game Complete in " + state.numberOfAttempts + "   Attempts";
       document.getElementById("buttondiv").style.display = "none";
@@ -114,10 +132,11 @@ const App = ()=>{
   }
 
     const handleClick = (index) => {
-      console.log({index});
+      // console.log({index});
       const newRevealStates = state.cardRevealStates;
       
       newRevealStates[index] = true;
+      
       console.log({newRevealStates});
       //cards actively flipped counter 
       let cardsFlipped = 0;
@@ -164,7 +183,7 @@ const App = ()=>{
       const clicks = numberOfClicks + 1;
       const attempts = Math.floor(clicks / 2);
       const originalCardsLength = cardsToPopulate.length;
-      const currentCardsLength = cards.length;
+      const currentCardsLength = cardDeck.length;
       const revealedCards = Math.ceil(
         (originalCardsLength - currentCardsLength) / 2
       );
@@ -187,17 +206,17 @@ const App = ()=>{
         randomIndex = Math.floor(Math.random() * currentIndex);
         currentIndex -= 1;
   
-        temporaryValue = cards[currentIndex];
-        cards[currentIndex] = cards[randomIndex];
-        cards[randomIndex] = temporaryValue;
+        temporaryValue = cardDeck[currentIndex];
+        cardDeck[currentIndex] = cardDeck[randomIndex];
+        cardDeck[randomIndex] = temporaryValue;
       }
-  
-      renderCards(cards);
+      console.log(`cards to be rerendered are ${cardDeck}`);
+      renderCards(cardDeck);
     }
   
     const renderCards = () => {
-      console.log(`I am here ${cards}`);
-      return cards.map((icon, index) => (
+      console.log(`I am here ${cardDeck}`);
+      return cardDeck.map((icon, index) => (
         <Card
           key={`${icon}-${index}`}
           clickCallback={handleClick}
@@ -210,14 +229,16 @@ const App = ()=>{
   
     const startNewGame = () => {
       const { gamesPlayed } = state;
-      cards = [...cardsToPopulate];
+      // cards = [...cardsToPopulate];
+      setCardDeck(cardsToPopulate);
       setState({
-        cardRevealStates: new Array(cards.length).fill(false),
+        cardRevealStates: new Array(cardDeck.length).fill(false),
         gamesPlayed: gamesPlayed + 1,
         accuracy: 0,
         numberOfAttempts: 0,
         numberOfClicks: 0
       });
+      console.log(`new state after startNewGame ${state}`);
     }
   
   const {numberOfAttempts, gamesPlayed, accuracy} = state;
@@ -245,7 +266,7 @@ const App = ()=>{
         <div id="buttondiv">
           <button
             className="randomize-btn"
-            onClick={() => randomizeCards(cards)}
+            onClick={() => randomizeCards(cardDeck)}
           >
             Randomize
           </button>

From 3d6bf8102205589ebd520966e28ecaad01a70e53 Mon Sep 17 00:00:00 2001
From: Karen Garcia <karen.garcia@nexscreen.com>
Date: Fri, 4 Oct 2019 11:46:40 -0600
Subject: [PATCH 4/7] having issues with highScores, causing issues to start
 new game. Think my formatting is off for the highscorelist

---
 src/components/app.js | 50 ++++++++++++++++++++++++++++++-------------
 1 file changed, 35 insertions(+), 15 deletions(-)

diff --git a/src/components/app.js b/src/components/app.js
index d3ebbbb..3c115ed 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -31,10 +31,7 @@ const App = ()=>{
     "dice",
     "bicycle"
   ];
-    
-  let cards = [...cardsToPopulate];
-  console.log(`cards are now right ${cardDeck}`);
-  
+     
   // const [cards, setCards] = useState(cardsToPopulate);
   // const [cardRevealStates, setCardRevealStates] = useState(new Array(cards.length).fill(false));
   // const [numberOfAttempts, setNumberOfAttempts] = useState(0);
@@ -49,17 +46,33 @@ const App = ()=>{
     numberOfClicks: 0,
     gamesPlayed: 1,
     accuracy: 0,
-    highScores: []
+    highScores: [5,20,25]
   });
 
+  let karenHighScore = [...state.highScores, ...state.numberOfAttempts];
+  let karenLength = karenHighScore.length;
+    console.log({karenHighScore}, {karenLength});
+
+    
   const _addHighScore =()=> {
     setState({
       ...state,
       highScores: [...state.highScores, state.numberOfAttempts].sort()
+
+
     });
-    // console.log(`checking here ${state.cardRevealStates.length}`);
+    
     startNewGame();
   };
+
+  const _karenAddHighScore = ()=>{
+    setState({
+      ...state,
+      highScores: [...state.highScores, state.numberOfAttempts].sort()
+
+    });
+    console.log({state});
+  }
   
   const hideCards =(onSetState = () => {})=> {
     setTimeout(() => {
@@ -115,17 +128,19 @@ const App = ()=>{
   const checkForMatch = () => {
     const revealedCards = getRevealedCards();
     console.log({revealedCards});
+    console.log(`revealedCards length ${revealedCards.length}`);
+    console.log(`cardDeck length == ${cardDeck.length}`);
     if (revealedCards.length === 2) {
       if (isMatch(revealedCards)) {
-        // console.log(`match!`);
         removeMatches(revealedCards[0]);
       }
         hideCards(() => {
         updateAccuracy();
       });
     }
-    if (cardDeck.length == 0) {
-      document.getElementById("gc").innerHTML =
+
+    if (cardDeck.length < 3) {
+       document.getElementById("gc").innerHTML =
         "Game Complete in " + state.numberOfAttempts + "   Attempts";
       document.getElementById("buttondiv").style.display = "none";
     }
@@ -215,7 +230,6 @@ const App = ()=>{
     }
   
     const renderCards = () => {
-      console.log(`I am here ${cardDeck}`);
       return cardDeck.map((icon, index) => (
         <Card
           key={`${icon}-${index}`}
@@ -230,15 +244,18 @@ const App = ()=>{
     const startNewGame = () => {
       const { gamesPlayed } = state;
       // cards = [...cardsToPopulate];
-      setCardDeck(cardsToPopulate);
+      
+      setCardDeck([...cardsToPopulate]);
+      console.log(`card deck after new game ${cardDeck}`);
+      console.log(`cardDeck after new game ${cardDeck.length} and ${typeof(cardDeck)}`);
       setState({
         cardRevealStates: new Array(cardDeck.length).fill(false),
-        gamesPlayed: gamesPlayed + 1,
-        accuracy: 0,
         numberOfAttempts: 0,
-        numberOfClicks: 0
+        numberOfClicks: 0,
+        gamesPlayed: gamesPlayed + 1,
+        accuracy: 0
       });
-      console.log(`new state after startNewGame ${state}`);
+      console.log({state});
     }
   
   const {numberOfAttempts, gamesPlayed, accuracy} = state;
@@ -276,6 +293,9 @@ const App = ()=>{
           <button className="startGame-btn" onClick={_addHighScore} disabled={state.cardRevealStates.length}>
             Add High Score
           </button>
+          <button className="startGame-btn" onClick={_karenAddHighScore}>
+            Karen Button
+          </button>
         </div>
       </div>
       <HighScoreList className="col-3" scores={state.highScores} />

From c251df33404f679214a07e8f4ba255187fb7ef8c Mon Sep 17 00:00:00 2001
From: Karen Garcia <karen.garcia@nexscreen.com>
Date: Fri, 4 Oct 2019 14:27:22 -0600
Subject: [PATCH 5/7] working on updateAccuracy, not working properly

---
 src/components/app.js | 368 +++++++-----------------------------------
 1 file changed, 61 insertions(+), 307 deletions(-)

diff --git a/src/components/app.js b/src/components/app.js
index 3c115ed..b50f8eb 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -31,71 +31,47 @@ const App = ()=>{
     "dice",
     "bicycle"
   ];
-     
-  // const [cards, setCards] = useState(cardsToPopulate);
-  // const [cardRevealStates, setCardRevealStates] = useState(new Array(cards.length).fill(false));
-  // const [numberOfAttempts, setNumberOfAttempts] = useState(0);
-  // const [numberOfClicks, setNumberOfClicks] = useState(0);
-  // const [gamesPlayed, setGamesPlayed] = useState(1);
-  // const [accuracy, setAccuracy] = useState(0);
-  // const [highScores, setHighScores] = [];
+
   const [cardDeck, setCardDeck] = useState(cardsToPopulate);
   const [state, setState] = useState({
     cardRevealStates: new Array(cardDeck.length).fill(false),
     numberOfAttempts: 0,
     numberOfClicks: 0,
-    gamesPlayed: 1,
-    accuracy: 0,
+    gamesPlayed: 0,
+    // accuracy: 0,
+    accuracy: 20,
     highScores: [5,20,25]
   });
 
-  let karenHighScore = [...state.highScores, ...state.numberOfAttempts];
-  let karenLength = karenHighScore.length;
-    console.log({karenHighScore}, {karenLength});
-
     
   const _addHighScore =()=> {
     setState({
       ...state,
       highScores: [...state.highScores, state.numberOfAttempts].sort()
-
-
     });
-    
     startNewGame();
   };
-
-  const _karenAddHighScore = ()=>{
-    setState({
-      ...state,
-      highScores: [...state.highScores, state.numberOfAttempts].sort()
-
-    });
-    console.log({state});
-  }
-  
+ 
   const hideCards =(onSetState = () => {})=> {
     setTimeout(() => {
       setState(
         {
           ...state,
-          cardRevealStates: new Array(cardDeck.length).fill(false)
+          cardRevealStates: new Array(cardDeck.length).fill(false),
+          numberOfAttempts: numberOfAttempts+1
         },
         onSetState()
       );
     }, 500);
+
   }
 
   const removeMatches = (match)=> {
     // console.log(`matched cards are ${match}`)
     hideCards(() => {
-      // cards = ;
       setCardDeck(removeMatchedCardsFromList(match));
     });
     hideCards();
-    // cards = ["bicycle", "bicycle"];
-    // renderCards(cardDeck);
-    // console.log({cards});
   }
 
   const isMatch =(cardsArr)=> {
@@ -118,26 +94,34 @@ const App = ()=>{
     return removedCards;
   }
 
-  const addNumberOfAttempts = () => {
-    setState(prevState => ({
-      ...state,
-      numberOfAttempts: prevState.numberOfAttempts + 1
-    }));
-  }
+  // const addNumberOfAttempts = () => {
+  //   setState(prevState => ({
+  //     ...state,
+  //     numberOfAttempts: prevState.numberOfAttempts + 1
+  //   }));
+  //   // setState({
+  //   //   ...state,
+  //   //   numberOfAttempts: numberOfAttempts + 1
+  //   // });
+  // }
 
   const checkForMatch = () => {
     const revealedCards = getRevealedCards();
-    console.log({revealedCards});
-    console.log(`revealedCards length ${revealedCards.length}`);
-    console.log(`cardDeck length == ${cardDeck.length}`);
+    // console.log({revealedCards});
+    // console.log(`revealedCards length ${revealedCards.length}`);
+    // console.log(`cardDeck length == ${cardDeck.length}`);
     if (revealedCards.length === 2) {
       if (isMatch(revealedCards)) {
         removeMatches(revealedCards[0]);
+        // updateAccuracy();
       }
-        hideCards(() => {
+      hideCards(() => {
+        console.log(`where I want to be`);
         updateAccuracy();
       });
+      
     }
+    addNumberOfClicks();
 
     if (cardDeck.length < 3) {
        document.getElementById("gc").innerHTML =
@@ -147,6 +131,8 @@ const App = ()=>{
   }
 
     const handleClick = (index) => {
+      // addNumberOfClicks();
+      // console.log(`state is ${state.numberOfClicks}`);
       // console.log({index});
       const newRevealStates = state.cardRevealStates;
       
@@ -175,7 +161,7 @@ const App = ()=>{
 
         checkForMatch();
 
-        addNumberOfClicks();
+        
       } else {
         //if more then two are it returns and doesn't let you flip another
         return;
@@ -185,31 +171,41 @@ const App = ()=>{
     const addNumberOfClicks = () => {
       const { numberOfClicks } = state;
       const clicks = numberOfClicks + 1;
-      const attempts = Math.floor(clicks / 2);
       setState({
         ...state,
         numberOfClicks: clicks,
-        numberOfAttempts: attempts
+        accuracy: accuracy+1
       });
     }
   
     const updateAccuracy = () => {
-      const { numberOfClicks } = state;
-      const clicks = numberOfClicks + 1;
-      const attempts = Math.floor(clicks / 2);
+      let fakeAccuracy = 45;
+      setState({
+        ...state,
+        accuracy : fakeAccuracy
+      });
+      console.log(`in accuracy`);
+      const { numberOfClicks, numberOfAttempts } = state;
+      // console.log({clicks});
+      // const attempts = Math.floor(numberOfClicks / 2);
+
       const originalCardsLength = cardsToPopulate.length;
       const currentCardsLength = cardDeck.length;
+      
+      // console.log({originalCardsLength});
+      // console.log({currentCardsLength});
       const revealedCards = Math.ceil(
         (originalCardsLength - currentCardsLength) / 2
       );
-      const accuracy = Math.floor(
-        revealedCards ? (revealedCards / attempts) * 100 : 0
+      const updateAccuracy = Math.floor(
+        revealedCards ? (revealedCards / numberOfAttempts) * 100 : 0
       );
-  
-      setState({
-        ...state,
-        accuracy: accuracy
-      });
+      console.log({updateAccuracy});
+      console.log(`accuracy is ${accuracy}`);
+
+
+
+      console.log({state});
     }
 
     const randomizeCards =(cards) => {
@@ -255,11 +251,10 @@ const App = ()=>{
         gamesPlayed: gamesPlayed + 1,
         accuracy: 0
       });
-      console.log({state});
     }
   
   const {numberOfAttempts, gamesPlayed, accuracy} = state;
-  console.log({state});
+
   return (
     <div className="App">
       <div className="col-1">
@@ -293,9 +288,15 @@ const App = ()=>{
           <button className="startGame-btn" onClick={_addHighScore} disabled={state.cardRevealStates.length}>
             Add High Score
           </button>
-          <button className="startGame-btn" onClick={_karenAddHighScore}>
-            Karen Button
-          </button>
+          <div>
+            Status
+            <ul>
+              <li>State Attempts {state.numberOfAttempts}</li>
+              <li>State Clicks {state.numberOfClicks}</li>
+              <li>State Accuracy {state.accuracy}</li>
+              <li>State CardsRevealed {state.cardRevealStates.length}</li>
+            </ul>
+          </div>
         </div>
       </div>
       <HighScoreList className="col-3" scores={state.highScores} />
@@ -304,251 +305,4 @@ const App = ()=>{
     
 }
 
-
-// class App extends Component {
-//   constructor(props) {
-//     super(props);
-
-//     this.cardsToPopulate = [
-//       "heart",
-//       "anchor",
-//       "cube",
-//       "leaf",
-//       "dice",
-//       "bicycle",
-//       "heart",
-//       "anchor",
-//       "cube",
-//       "leaf",
-//       "dice",
-//       "bicycle"
-//     ];
-//     this.cards = [...this.cardsToPopulate];
-
-//     this.state = {
-//       cardRevealStates: new Array(this.cards.length).fill(false),
-//       numberOfAttempts: 0,
-//       numberOfClicks: 0,
-//       gamesPlayed: 1,
-//       accuracy: 0,
-//       highScores: []
-//     };
-//     console.log(this.state.cardRevealStates);
-    
-
-//     this.handleClick = this.handleClick.bind(this);
-//     this.startNewGame = this.startNewGame.bind(this);
-//     this.addNumberOfClicks = this.addNumberOfClicks.bind(this);
-//     this._addHighScore = this._addHighScore.bind(this);
-//   }
-
-
-//   _addHighScore() {
-//     this.setState({
-//       highScores: [...this.state.highScores, this.state.numberOfAttempts].sort()
-//     })
-//     this.startNewGame()
-//   }
-
-//   render() {
-//     const { numberOfAttempts, gamesPlayed, accuracy } = this.state;
-//     return (
-//       <div className="App">
-//         <div className="col-1">
-//           <div className="links">
-//             <a href="#">Game</a>
-//             <a href="#">Contributors</a>
-//           </div>
-//         </div>
-//         <div className="col-2">
-//           <p id="gameStats">
-//             <span className="stat">Games Played: {gamesPlayed}</span>
-//             <span className="stat">Attempts: {numberOfAttempts}</span>
-//             <span className="stat">Accuracy: {accuracy}%</span>
-//           </p>
-          
-//           <div className="gamecomplete">
-//             <p id="gc" />
-//           </div>
-
-//           <div id="gameArea">{this.renderCards()}</div>
-//           <div id="buttondiv">
-//             <button
-//               className="randomize-btn"
-//               onClick={() => this.randomizeCards(this.cards)}
-//             >
-//               Randomize
-//             </button>
-//             <button className="startGame-btn" onClick={this.startNewGame}>
-//               Start New Game
-//             </button>
-//             <button className="startGame-btn" onClick={this._addHighScore} disabled={this.state.cardRevealStates.length}>
-//               Add High Score
-//             </button>
-//           </div>
-//         </div>
-//         <HighScoreList className="col-3" scores={this.state.highScores} />
-//       </div>
-//     );
-//   }
-
-
-//   hideCards(onSetState = () => {}) {
-//     setTimeout(() => {
-//       this.setState(
-//         {
-//           cardRevealStates: new Array(this.cards.length).fill(false)
-//         },
-//         onSetState()
-//       );
-//     }, 500);
-//   }
-//   removeMatches(match) {
-//     this.hideCards(() => {
-//       this.cards = this.removeMatchedCardsFromList(match);
-//     });
-//   }
-
-//   isMatch(cardsArr) {
-//     return cardsArr.every((val, i, arr) => val === arr[0]);
-//   }
-
-//   getRevealedCards() {
-//     return this.cards.filter((_, i) => this.state.cardRevealStates[i]);
-//   }
-
-//   removeMatchedCardsFromList(match) {
-//     return this.cards.filter(card => card !== match);
-//   }
-
-//   addNumberOfAttempts() {
-//     this.setState(prevState => ({
-//       numberOfAttempts: prevState.numberOfAttempts + 1
-//     }));
-//   }
-
-//   checkForMatch() {
-//     const revealedCards = this.getRevealedCards();
-//     if (revealedCards.length === 2) {
-//       if (this.isMatch(revealedCards)) {
-//         this.removeMatches(revealedCards[0]);
-//       }
-//       this.hideCards(() => {
-//         this.updateAccuracy();
-//       });
-//     }
-//     if (this.cards.length == 0) {
-//       document.getElementById("gc").innerHTML =
-//         "Game Complete in " + this.state.numberOfAttempts + "   Attempts";
-//       document.getElementById("buttondiv").style.display = "none";
-//       //   console.log(
-//       //     "Game Complete in" + this.state.numberOfAttempts + "attempts"
-//       //   );
-//     }
-//   }
-
-//   handleClick(index) {
-//     const newRevealStates = this.state.cardRevealStates;
-//     newRevealStates[index] = true;
-//     //cards actively flipped counter 
-//     let cardsFlipped = 0;
-    
-//     //adds how many active cards flipped there are
-//     newRevealStates.forEach(function(el) {
-//       if (el === true) {
-//         cardsFlipped++;
-//       } else {
-//         return;
-//       }
-//     });
-
-//     //checks if only two cards are flipped
-//     if (cardsFlipped < 3) {
-//       //if only 2 are flipped it continues on
-//       this.setState({
-//         cardRevealStates: newRevealStates
-//       });
-
-//       this.checkForMatch();
-
-//       this.addNumberOfClicks();
-//     } else {
-//       //if more then two are it returns and doesn't let you flip another
-//       return;
-//     }
-
-    
-//   }
-
-//   addNumberOfClicks() {
-//     const { numberOfClicks } = this.state;
-//     const clicks = numberOfClicks + 1;
-//     const attempts = Math.floor(clicks / 2);
-//     this.setState({
-//       numberOfClicks: clicks,
-//       numberOfAttempts: attempts
-//     });
-//   }
-
-//   updateAccuracy() {
-//     const { numberOfClicks } = this.state;
-//     const clicks = numberOfClicks + 1;
-//     const attempts = Math.floor(clicks / 2);
-//     const originalCardsLength = this.cardsToPopulate.length;
-//     const currentCardsLength = this.cards.length;
-//     const revealedCards = Math.ceil(
-//       (originalCardsLength - currentCardsLength) / 2
-//     );
-//     const accuracy = Math.floor(
-//       revealedCards ? (revealedCards / attempts) * 100 : 0
-//     );
-
-//     this.setState({
-//       accuracy: accuracy
-//     });
-//   }
-
-//   randomizeCards(cards) {
-//     var currentIndex = cards.length,
-//       temporaryValue,
-//       randomIndex;
-
-//     while (0 !== currentIndex) {
-//       randomIndex = Math.floor(Math.random() * currentIndex);
-//       currentIndex -= 1;
-
-//       temporaryValue = cards[currentIndex];
-//       cards[currentIndex] = cards[randomIndex];
-//       cards[randomIndex] = temporaryValue;
-//     }
-
-//     this.renderCards(cards);
-//   }
-
-//   renderCards() {
-//     return this.cards.map((icon, index) => (
-//       <Card
-//         key={`${icon}-${index}`}
-//         clickCallback={this.handleClick}
-//         index={index}
-//         icon={icon}
-//         display={this.state.cardRevealStates[index]}
-//       />
-//     ));
-//   }
-
-//   startNewGame() {
-//     const { gamesPlayed } = this.state;
-//     this.cards = [...this.cardsToPopulate];
-//     this.setState({
-//       cardRevealStates: new Array(this.cards.length).fill(false),
-//       gamesPlayed: gamesPlayed + 1,
-//       accuracy: 0,
-//       numberOfAttempts: 0,
-//       numberOfClicks: 0
-//     });
-//     console.log(this.cards);
-//   }
-// }
-
 export default App;
\ No newline at end of file

From 454334a0329469c7d0883c8e5bb4f9f21c6a7209 Mon Sep 17 00:00:00 2001
From: Karen Garcia <karen.garcia@nexscreen.com>
Date: Fri, 4 Oct 2019 15:33:53 -0600
Subject: [PATCH 6/7] able to add newGame right, was missing one item on state
 which was the issue. The count for clicks and revealed cards seems to be one
 off. Will work more on it

---
 src/components/app.js | 78 +++++++++++++++++++++----------------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/components/app.js b/src/components/app.js
index b50f8eb..97ef35f 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -38,8 +38,7 @@ const App = ()=>{
     numberOfAttempts: 0,
     numberOfClicks: 0,
     gamesPlayed: 0,
-    // accuracy: 0,
-    accuracy: 20,
+    accuracy: 0,
     highScores: [5,20,25]
   });
 
@@ -67,7 +66,6 @@ const App = ()=>{
   }
 
   const removeMatches = (match)=> {
-    // console.log(`matched cards are ${match}`)
     hideCards(() => {
       setCardDeck(removeMatchedCardsFromList(match));
     });
@@ -83,43 +81,25 @@ const App = ()=>{
   }
 
   const removeMatchedCardsFromList =(match) => {
-    // const result = cards[0]
-    // console.log(`in removeMatched cards heart ${match} ${cards[0]===match}`);
     const removedCards = cardDeck.filter(card => card !== match);
     setState({
       ...state,
       cardRevealStates : removedCards
     })
-    console.log({removedCards});
     return removedCards;
   }
 
-  // const addNumberOfAttempts = () => {
-  //   setState(prevState => ({
-  //     ...state,
-  //     numberOfAttempts: prevState.numberOfAttempts + 1
-  //   }));
-  //   // setState({
-  //   //   ...state,
-  //   //   numberOfAttempts: numberOfAttempts + 1
-  //   // });
-  // }
-
   const checkForMatch = () => {
     const revealedCards = getRevealedCards();
-    // console.log({revealedCards});
-    // console.log(`revealedCards length ${revealedCards.length}`);
-    // console.log(`cardDeck length == ${cardDeck.length}`);
+
     if (revealedCards.length === 2) {
       if (isMatch(revealedCards)) {
         removeMatches(revealedCards[0]);
-        // updateAccuracy();
       }
       hideCards(() => {
         console.log(`where I want to be`);
         updateAccuracy();
       });
-      
     }
     addNumberOfClicks();
 
@@ -127,13 +107,13 @@ const App = ()=>{
        document.getElementById("gc").innerHTML =
         "Game Complete in " + state.numberOfAttempts + "   Attempts";
       document.getElementById("buttondiv").style.display = "none";
+      if(cardDeck.length <1){
+        startNewGame();
+      }
     }
   }
 
     const handleClick = (index) => {
-      // addNumberOfClicks();
-      // console.log(`state is ${state.numberOfClicks}`);
-      // console.log({index});
       const newRevealStates = state.cardRevealStates;
       
       newRevealStates[index] = true;
@@ -171,19 +151,38 @@ const App = ()=>{
     const addNumberOfClicks = () => {
       const { numberOfClicks } = state;
       const clicks = numberOfClicks + 1;
-      setState({
-        ...state,
-        numberOfClicks: clicks,
-        accuracy: accuracy+1
-      });
+
+      ///accuracy
+      const {numberOfAttempts} = state;
+      const numPossibleCorrect = (cardsToPopulate.length-cardDeck.length)/2;
+      const userAttempts = numberOfAttempts;
+      const updateAccuracyRate = Math.floor((numPossibleCorrect/userAttempts)*100);
+
+
+      (numPossibleCorrect>=1) ? 
+        setState({
+          ...state,
+          numberOfClicks: clicks,
+          accuracy: updateAccuracyRate
+        })
+        : 
+        setState({
+          ...state,
+          numberOfClicks: clicks
+        });
+      console.log(`userAttempts are ${userAttempts} num possible is ${numPossibleCorrect}`);
+      console.log({updateAccuracyRate});
+
     }
   
+    //might not use item below 
     const updateAccuracy = () => {
-      let fakeAccuracy = 45;
-      setState({
-        ...state,
-        accuracy : fakeAccuracy
-      });
+
+      // let fakeAccuracy = 45;
+      // setState({
+      //   ...state,
+      //   accuracy : fakeAccuracy
+      // });
       console.log(`in accuracy`);
       const { numberOfClicks, numberOfAttempts } = state;
       // console.log({clicks});
@@ -239,18 +238,19 @@ const App = ()=>{
   
     const startNewGame = () => {
       const { gamesPlayed } = state;
-      // cards = [...cardsToPopulate];
-      
+     
       setCardDeck([...cardsToPopulate]);
-      console.log(`card deck after new game ${cardDeck}`);
-      console.log(`cardDeck after new game ${cardDeck.length} and ${typeof(cardDeck)}`);
+      // console.log(`card deck after new game ${cardDeck}`);
+      // console.log(`cardDeck after new game ${cardDeck.length} and ${typeof(cardDeck)}`);
       setState({
+        ...state,
         cardRevealStates: new Array(cardDeck.length).fill(false),
         numberOfAttempts: 0,
         numberOfClicks: 0,
         gamesPlayed: gamesPlayed + 1,
         accuracy: 0
       });
+
     }
   
   const {numberOfAttempts, gamesPlayed, accuracy} = state;

From 951bf267616cc43538ea4a42016196b6a80964f3 Mon Sep 17 00:00:00 2001
From: Karen Garcia <karen.garcia@nexscreen.com>
Date: Fri, 4 Oct 2019 15:48:03 -0600
Subject: [PATCH 7/7] still working on it

---
 src/components/app.js | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/app.js b/src/components/app.js
index 97ef35f..294f694 100644
--- a/src/components/app.js
+++ b/src/components/app.js
@@ -70,6 +70,7 @@ const App = ()=>{
       setCardDeck(removeMatchedCardsFromList(match));
     });
     hideCards();
+
   }
 
   const isMatch =(cardsArr)=> {
@@ -103,13 +104,13 @@ const App = ()=>{
     }
     addNumberOfClicks();
 
-    if (cardDeck.length < 3) {
+    if (cardDeck.length < 1) {
        document.getElementById("gc").innerHTML =
         "Game Complete in " + state.numberOfAttempts + "   Attempts";
-      document.getElementById("buttondiv").style.display = "none";
-      if(cardDeck.length <1){
-        startNewGame();
-      }
+      // document.getElementById("buttondiv").style.display = "none";
+      // if(cardDeck.length <1){
+      //   startNewGame();
+      // }
     }
   }
 
@@ -238,10 +239,7 @@ const App = ()=>{
   
     const startNewGame = () => {
       const { gamesPlayed } = state;
-     
       setCardDeck([...cardsToPopulate]);
-      // console.log(`card deck after new game ${cardDeck}`);
-      // console.log(`cardDeck after new game ${cardDeck.length} and ${typeof(cardDeck)}`);
       setState({
         ...state,
         cardRevealStates: new Array(cardDeck.length).fill(false),
@@ -250,7 +248,6 @@ const App = ()=>{
         gamesPlayed: gamesPlayed + 1,
         accuracy: 0
       });
-
     }
   
   const {numberOfAttempts, gamesPlayed, accuracy} = state;