Master #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

guillaumepeoch wants to merge 17 commits into cours from master

package-lock.json

Large diffs are not rendered by default.

package.json

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -3,21 +3,34 @@
  
      "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"

        "react-scripts": "^1.0.17"

      },

      "scripts": {

        "start": "react-scripts start",

        "build": "react-scripts build",

        "test": "react-scripts test --env=jsdom",

        "test": "react-scripts test",

        "eject": "react-scripts eject"

      },

      "devDependencies": {

        "chai": "^4.1.2",

        "chai-enzyme": "^1.0.0-beta.0",

        "chai-jest-diff": "^1.0.1",

        "chai-jest-snapshot": "^2.0.0",

        "dirty-chai": "^2.0.1",

        "enzyme": "^3.2.0",

        "enzyme-adapter-react-16": "^1.1.0",

        "enzyme-to-json": "^3.2.2",

        "eslint-config-prettier": "^2.6.0",

        "eslint-config-react-app": "^2.0.1",

        "eslint-plugin-prettier": "^2.3.1",

        "prettier": "^1.7.4"

        "prettier": "^1.7.4",

        "react-test-renderer": "^16.2.0",

        "sinon": "^4.1.3",

        "sinon-chai": "^2.14.0"

      },

      "prettier": {

        "semi": false,

public/index.html

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,16 +1,17 @@
  
    <!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.

    @@ -19,14 +20,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>

      <body>

        <noscript>

          You need to enable JavaScript to run this app.

        </noscript>

        <div id="root"></div>

        <!--

      <title>React Memory</title>

    </head>

    <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.

    @@ -36,5 +38,6 @@
  
          To begin the development, run `npm start` or `yarn start`.

          To create a production bundle, use `npm run build` or `yarn build`.

        -->

      </body>

    </body>

    </html>

src/App.css

-Original file line number
+Diff line change
@@ -1,32 +1,7 @@
-    .App {
-      text-align: center;
-    }
-    .App-logo {
-      animation: App-logo-spin infinite 20s linear;
-      height: 80px;
-    }
-    .App-header {
-      background-color: #222;
-      height: 150px;
-      padding: 20px;
-      color: white;
-    }
-    .App-title {
-      font-size: 1.5em;
-    }
-    .App-intro {
-      font-size: large;
-    }
-    @keyframes App-logo-spin {
-      from {
-        transform: rotate(0deg);
-      }
-      to {
-        transform: rotate(360deg);
-      }
+    .memory {
+      display: flex;
+      flex-wrap: wrap;
+      width: 300px;
+      margin: auto;
+      user-select: none;
     }

src/App.js

-Original file line number
+Diff line change
@@ -1,16 +1,110 @@
     import React, { Component } from 'react'
-    import logo from './logo.svg'
+    import shuffle from 'lodash.shuffle'
     import './App.css'
+    import Card from './Card'
+    import GuessCount from './GuessCount'
+    import HallOfFame, { FAKE_HOF } from './HallOfFame'
+    import HighScoreInput from './HighScoreInput'
+    const SIDE = 6
+    export const SYMBOLS = '😀🎉💖🎩🐶🐱🦄🐬🌍🌛🌞💫🍎🍌🍓🍐🍟🍿'
+    const VISUAL_PAUSE_MSECS = 750
     class App extends Component {
+      state = {
+        cards: this.generateCards(),
+        currentPair: [],
+        guesses: 0,
+        hallOfFame: null,
+        matchedCardIndices: [],
+      }
+      // Arrow fx for binding
+      displayHallOfFame = hallOfFame => {
+        this.setState({ hallOfFame })
+      }
+      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)
+      }
+      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 { cards, guesses, hallOfFame, matchedCardIndices } = this.state
+        const won = matchedCardIndices.length === cards.length
         return (
-          <div className="App">
-            <header className="App-header">
-              <img src={logo} className="App-logo" alt="logo" />
-              <h1 className="App-title">Welcome to React</h1>
-            </header>
-            <p className="App-intro">React c’est cool !</p>
+          <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 ? (
+                <HallOfFame entries={hallOfFame} />
+              ) : (
+                <HighScoreInput
+                  guesses={guesses}
+                  onStored={this.displayHallOfFame}
+                />
+              ))}
           </div>
         )
       }
@@ Expand Down @@

src/App.spec.js

-Original file line number
+Diff line change
@@ -0,0 +1,37 @@
+    import { expect } from 'chai'
+    import React from 'react'
+    import { shallow } from 'enzyme'
+    import sinon from 'sinon'
+    import App, { SYMBOLS } from './App'
+    import GuessCount from './GuessCount'
+    describe('<App/>', () => {
+      it('renders without crashing', () => {
+        const wrapper = shallow(<App />)
+      })
+      it('contains a zero-guess counter', () => {
+        const wrapper = shallow(<App />)
+        expect(wrapper).to.contain(<GuessCount guesses={0} />)
+      })
+      it('has 36 cards', () => {
+        const wrapper = shallow(<App />)
+        expect(wrapper.find('Card')).to.have.length(36)
+      })
+      it('should match its reference snapshot', () => {
+        const mock = sinon
+          .stub(App.prototype, 'generateCards')
+          .returns([...SYMBOLS.repeat(2)])
+        try {
+          const wrapper = shallow(<App />)
+          expect(wrapper).to.matchSnapshot()
+        } finally {
+          mock.restore()
+        }
+      })
+    })

src/App.test.js

This file was deleted.

src/Card.css

-Original file line number
+Diff line change
@@ -0,0 +1,28 @@
+    .memory > .card {
+      font-size: 2em;
+      flex: 1 1 calc(100% / 6 - 0.4em);
+      outline: 0.08em solid silver;
+      margin: 0.2em;
+      display: flex;
+      cursor: default;
+    }
+    .memory > .card.hidden {
+      background: silver;
+    }
+    .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;
+    }

src/Card.js

-Original file line number
+Diff line change
@@ -0,0 +1,28 @@
+    import PropTypes from 'prop-types'
+    import React from 'react'
+    import './Card.css'
+    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

src/Card.spec.js

-Original file line number
+Diff line change
@@ -0,0 +1,27 @@
+    import { expect } from 'chai'
+    import React from 'react'
+    import { shallow } from 'enzyme'
+    import sinon from 'sinon'
+    import Card from './Card'
+    describe('<Card/>', () => {
+      it('should trigger its `onClick` prop when clicked', () => {
+        const onClick = sinon.spy()
+        const wrapper = shallow(
+          <Card card="😁" feedback="hidden" index={0} onClick={onClick} />
+        )
+        wrapper.simulate('click')
+        expect(onClick).to.have.been.calledWith(0)
+      })
+      it('should match its reference snapshot', () => {
+        const onClick = sinon.spy()
+        const wrapper = shallow(
+          <Card card="😁" feedback="hidden" index={0} onClick={onClick} />
+        )
+        expect(wrapper).to.matchSnapshot()
+      })
+    })

src/GuessCount.css

-Original file line number
+Diff line change
@@ -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;
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Master #1

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

Master #1

Are you sure you want to change the base?

Uh oh!

Master #1

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!