GabJimz · GabJimz · Apr 14, 2021 · Apr 14, 2021 · Apr 14, 2021
diff --git a/package.json b/package.json
@@ -2,9 +2,14 @@
   "name": "react",
   "version": "1.0.0",
   "description": "React example starter project",
-  "keywords": ["react", "starter"],
+  "keywords": [
+    "react",
+    "starter"
+  ],
   "main": "src/index.js",
   "dependencies": {
+    "lodash.shuffle": "4.2.0",
+    "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-scripts": "4.0.0"
@@ -19,5 +24,10 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
-  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
-}
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-	<meta name="theme-color" content="#000000">
-	<!--
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-	<!--
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -20,15 +22,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-	<title>React App</title>
-</head>
+    <title>React App</title>
+  </head>
 
-<body>
-	<noscript>
-		You need to enable JavaScript to run this app.
-	</noscript>
-	<div id="root"></div>
-	<!--
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -38,6 +40,5 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-</body>
-
-</html>
+  </body>
+</html>
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,7 @@
+.memory {
+  display: flex;
+  flex-wrap: wrap;
+  width: 350px;
+  margin: auto;
+  user-select: none;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,99 @@
-import "./styles.css";
-
-export default function App() {
-  return (
-    <div className="App">
-      <h1>Hello CodeSandbox</h1>
-      <h2>Start editing to see some magic happen!</h2>
-    </div>
-  );
+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 = "😀🎉💖🎩🐶🐱🦄🐬🌍🌛🌞💫🍎🍌🍓🍐🍟🍿";
+const VISUAL_PAUSE_MSECS = 750;
+
+class App extends Component {
+  state = {
+    cards: this.generateCards(),
+    currentPair: [],
+    guesses: 0,
+    matchedCardIndices: []
+  };
+
+  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);
+  }
+
+  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);
+  }
+
+  handleCardClick = (index) => {
+    const { currentPair } = this.state;
+
+    if (currentPair.length === 2) {
+      return;
+    }
+
+    if (currentPair.length === 0) {
+      this.setState({ currentPair: [index] });
+      return;
+    }
+
+    this.handleNewPairClosedBy(index);
+  };
+
+  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";
+  }
+
+  render() {
+    const { cards, guesses, matchedCardIndices } = this.state;
+    const won = matchedCardIndices.length === cards.length;
+    return (
+      <div className="memory">
+        <GuessCount guesses={guesses} />
+        {cards.map((card, index) => (
+          <Card
+            card={card}
+            feedback={this.getFeedbackForCard(index)}
+            index={index}
+            key={index}
+            onClick={this.handleCardClick}
+          />
+        ))}
+        {won && <HallOfFame entries={FAKE_HOF} />}
+      </div>
+    );
+  }
 }
+
+export default App;
diff --git a/src/Card.css b/src/Card.css
@@ -0,0 +1,28 @@
+.memory > .card {
+  font-size: 2em;
+  flex: 1 1 calc(100% / 6 - 0.4em);
+  outline: 0.08em solid rgb(0, 0, 0);
+  margin: 0.2em;
+  display: flex;
+  cursor: default;
+}
+
+.memory > .card.hidden {
+  background: rgb(90, 69, 69);
+}
+
+.memory > .card.justMatched,
+.memory > .card.justMismatched {
+  outline: 0.1em solid green;
+}
+.memory > .card.justMismatched {
+  outline-color: red;
+}
+
+.memory > .card.visible {
+  cursor: not-allowed;
+}
+
+.memory > .card > .symbol {
+  margin: auto;
+}
diff --git a/src/Card.js b/src/Card.js
@@ -0,0 +1,28 @@
+import React from "react";
+
+import "./Card.css";
+import PropTypes from "prop-types";
+
+const HIDDEN_SYMBOL = "❓";
+
+const Card = ({ card, feedback, index, onClick }) => (
+  <div className={`card ${feedback}`} onClick={() => onClick(index)}>
+    <span className="symbol">
+      {feedback === "hidden" ? HIDDEN_SYMBOL : card}
+    </span>
+  </div>
+);
+
+Card.propTypes = {
+  card: PropTypes.string.isRequired,
+  feedback: PropTypes.oneOf([
+    "hidden",
+    "justMatched",
+    "justMismatched",
+    "visible"
+  ]).isRequired,
+  index: PropTypes.number.isRequired,
+  onClick: PropTypes.func.isRequired
+};
+
+export default Card;
diff --git a/src/GuessCount.css b/src/GuessCount.css
@@ -0,0 +1,7 @@
+.memory > .guesses {
+  font-size: 1em;
+  width: calc(100% - 0.4em);
+  margin: 0.2em;
+  text-align: right;
+  font-family: Menlo, Monaco, Consolas, Inconsolata, "Courier New", monospace;
+}
diff --git a/src/GuessCount.js b/src/GuessCount.js
@@ -0,0 +1,12 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import "./GuessCount.css";
+
+const GuessCount = ({ guesses }) => <div className="guesses">{guesses}</div>;
+
+GuessCount.propTypes = {
+  guesses: PropTypes.number.isRequired
+};
+
+export default GuessCount;
diff --git a/src/HallOfFame.css b/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: rgb(0, 0, 0);
+}
diff --git a/src/HallOfFame.js b/src/HallOfFame.js
@@ -0,0 +1,40 @@
+import React from "react";
+
+import "./HallOfFame.css";
+import PropTypes from "prop-types";
+
+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" }
+];
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,6 @@
 import { StrictMode } from "react";
+import React from "react";
 import ReactDOM from "react-dom";
-
 import App from "./App";
 
 const rootElement = document.getElementById("root");