Fin P3Ch5 - Garantie this

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "lodash.shuffle": "^4.2.0",
+    "prop-types": "^15.6.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-scripts": "1.0.14"

src/App.js

@@ -1,12 +1,32 @@
 import React, { Component } from 'react'
+import shuffle from 'lodash.shuffle'
+
 import './App.css'
 
 import Card from './Card'
 import GuessCount from './GuessCount'
+import HallOfFame, { FAKE_HOF } from './HallOfFame'
+
+const SIDE = 6
+const SYMBOLS = '😀🎉💖🎩🐶🐱🦄🐬🌍🌛🌞💫🍎🍌🍓🍐🍟🍿'
 
 class App extends Component {
-  handleCardClick(card) {
-    console.log(card, 'clicked')
+  cards = this.generateCards()
+
+  generateCards() {
+    const result = []
+    const size = SIDE * SIDE
+    const candidates = shuffle(SYMBOLS)
+    while (result.length < size) {
+      const card = candidates.pop()
+      result.push(card, card)
+    }
+    return shuffle(result)
+  }
+
+  // Arrow fx for binding
+  handleCardClick = card => {
+    console.log(card, this)
   }
 
   render() {
@@ -14,17 +34,15 @@ class App extends Component {
     return (
       <div className="memory">
         <GuessCount guesses={0} />
-        <Card card="😀" feedback="hidden" onClick={this.handleCardClick} />
-        <Card card="🎉" feedback="justMatched" onClick={this.handleCardClick} />
-        <Card
-          card="💖"
-          feedback="justMismatched"
-          onClick={this.handleCardClick}
-        />
-        <Card card="🎩" feedback="visible" onClick={this.handleCardClick} />
-        <Card card="🐶" feedback="hidden" onClick={this.handleCardClick} />
-        <Card card="🐱" feedback="justMatched" onClick={this.handleCardClick} />
-        {won && <p>GAGNÉ !</p>}
+        {this.cards.map((card, index) => (
+          <Card
+            card={card}
+            feedback="visible"
+            key={index}
+            onClick={this.handleCardClick}
+          />
+        ))}
+        {won && <HallOfFame entries={FAKE_HOF} />}
       </div>
     )
   }

src/Card.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 
 import './Card.css'
@@ -12,4 +13,15 @@ const Card = ({ card, feedback, onClick }) => (
   </div>
 )
 
+Card.propTypes = {
+  card: PropTypes.string.isRequired,
+  feedback: PropTypes.oneOf([
+    'hidden',
+    'justMatched',
+    'justMismatched',
+    'visible',
+  ]).isRequired,
+  onClick: PropTypes.func.isRequired,
+}
+
 export default Card

src/GuessCount.js

@@ -1,7 +1,12 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 
 import './GuessCount.css'
 
 const GuessCount = ({ guesses }) => <div className="guesses">{guesses}</div>
 
+GuessCount.propTypes = {
+  guesses: PropTypes.number.isRequired,
+}
+
 export default GuessCount

src/HallOfFame.css

@@ -0,0 +1,14 @@
+.hallOfFame {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.hallOfFame .date,
+.hallOfFame .guesses {
+  width: 20%;
+  text-align: center;
+}
+
+.hallOfFame tr:nth-child(even) {
+  background: #eee;
+}

src/HallOfFame.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import './HallOfFame.css'
+
+const HallOfFame = ({ entries }) => (
+  <table className="hallOfFame">
+    <tbody>
+      {entries.map(({ date, guesses, id, player }) => (
+        <tr key={id}>
+          <td className="date">{date}</td>
+          <td className="guesses">{guesses}</td>
+          <td className="player">{player}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+)
+
+HallOfFame.propTypes = {
+  entries: PropTypes.arrayOf(
+    PropTypes.shape({
+      date: PropTypes.string.isRequired,
+      guesses: PropTypes.number.isRequired,
+      id: PropTypes.number.isRequired,
+      player: PropTypes.string.isRequired,
+    })
+  ).isRequired,
+}
+
+export default HallOfFame
+
+// == Internal helpers ==============================================
+
+export const FAKE_HOF = [
+  { id: 3, guesses: 18, date: '10/10/2017', player: 'Jane' },
+  { id: 2, guesses: 23, date: '11/10/2017', player: 'Kevin' },
+  { id: 1, guesses: 31, date: '06/10/2017', player: 'Louisa' },
+  { id: 0, guesses: 48, date: '14/10/2017', player: 'Marc' },
+]