Fin P3Ch2 - PropTypes

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,9 +1,49 @@
 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 {
+  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)
+  }
+
+  handleCardClick(card) {
+    console.log(card, 'clicked')
+  }
+
   render() {
-    return <div className="memory" />
+    const won = new Date().getSeconds() % 2 === 0
+    return (
+      <div className="memory">
+        <GuessCount guesses={0} />
+        {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,9 +1,27 @@
+import PropTypes from 'prop-types'
 import React from 'react'
 
 import './Card.css'
 
 const HIDDEN_SYMBOL = '❓'
 
-const Card = () => <div className="card" />
+const Card = ({ card, feedback, onClick }) => (
+  <div className={`card ${feedback}`} onClick={() => onClick(card)}>
+    <span className="symbol">
+      {feedback === 'hidden' ? HIDDEN_SYMBOL : card}
+    </span>
+  </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 = () => <div className="guesses" />
+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' },
+]