Fin P3Ch7 - Bien comprendre setState

src/App.js

@@ -9,9 +9,15 @@ import HallOfFame, { FAKE_HOF } from './HallOfFame'
 
 const SIDE = 6
 const SYMBOLS = '😀🎉💖🎩🐶🐱🦄🐬🌍🌛🌞💫🍎🍌🍓🍐🍟🍿'
+const VISUAL_PAUSE_MSECS = 750
 
 class App extends Component {
-  cards = this.generateCards()
+  state = {
+    cards: this.generateCards(),
+    currentPair: [],
+    guesses: 0,
+    matchedCardIndices: [],
+  }
 
   generateCards() {
     const result = []
@@ -24,19 +30,61 @@ class App extends Component {
     return shuffle(result)
   }
 
-  handleCardClick(card) {
-    console.log(card, 'clicked')
+  getFeedbackForCard(index) {
+    const { currentPair, matchedCardIndices } = this.state
+    const indexMatched = matchedCardIndices.includes(index)
+
+    if (currentPair.length < 2) {
+      return indexMatched || index === currentPair[0] ? 'visible' : 'hidden'
+    }
+
+    if (currentPair.includes(index)) {
+      return indexMatched ? 'justMatched' : 'justMismatched'
+    }
+
+    return indexMatched ? 'visible' : 'hidden'
+  }
+
+  // Arrow fx for binding
+  handleCardClick = index => {
+    const { currentPair } = this.state
+
+    if (currentPair.length === 2) {
+      return
+    }
+
+    if (currentPair.length === 0) {
+      this.setState({ currentPair: [index] })
+      return
+    }
+
+    this.handleNewPairClosedBy(index)
+  }
+
+  handleNewPairClosedBy(index) {
+    const { cards, currentPair, guesses, matchedCardIndices } = this.state
+
+    const newPair = [currentPair[0], index]
+    const newGuesses = guesses + 1
+    const matched = cards[newPair[0]] === cards[newPair[1]]
+    this.setState({ currentPair: newPair, guesses: newGuesses })
+    if (matched) {
+      this.setState({ matchedCardIndices: [...matchedCardIndices, ...newPair] })
+    }
+    setTimeout(() => this.setState({ currentPair: [] }), VISUAL_PAUSE_MSECS)
   }
 
   render() {
-    const won = new Date().getSeconds() % 2 === 0
+    const { cards, guesses, matchedCardIndices } = this.state
+    const won = matchedCardIndices.length === cards.length
     return (
       <div className="memory">
-        <GuessCount guesses={0} />
-        {this.cards.map((card, index) => (
+        <GuessCount guesses={guesses} />
+        {cards.map((card, index) => (
           <Card
             card={card}
-            feedback="visible"
+            feedback={this.getFeedbackForCard(index)}
+            index={index}
             key={index}
             onClick={this.handleCardClick}
           />

src/Card.js

@@ -5,8 +5,8 @@ import './Card.css'
 
 const HIDDEN_SYMBOL = '❓'
 
-const Card = ({ card, feedback, onClick }) => (
-  <div className={`card ${feedback}`} onClick={() => onClick(card)}>
+const Card = ({ card, feedback, index, onClick }) => (
+  <div className={`card ${feedback}`} onClick={() => onClick(index)}>
     <span className="symbol">
       {feedback === 'hidden' ? HIDDEN_SYMBOL : card}
     </span>
@@ -21,6 +21,7 @@ Card.propTypes = {
     'justMismatched',
     'visible',
   ]).isRequired,
+  index: PropTypes.number.isRequired,
   onClick: PropTypes.func.isRequired,
 }