Create a Start Game button that when pressed will populate the cards on the dom in a random order each time.

Before you begin:

Confirm that you're working on this issue so I can add assigned label.

Use dev branch as a base for your PR.

Read the contribution guide for info how to setup project, run tests and use development version of packages.

Create a Stats Area that will eventually go in the side nav once that issue completed and is merged.
Stats Container

• Games Played - Show how many times the game is played
• Add a Start new Game button and function to re-populate the DOM with cards
• Number of Attempts - number of times the user has clicked on cards
• Accuracy (how many times they got it right / number of total clicks for the current game

Refactor Card component in order to have this component more readable and scalable.

The component is located at memory-match-react/src/components/card.js.

Make some cards to play the game to match font awesome icons. Lets start with 12 cards and 6 icons to match.

It is necessary to have a template when creating a PR

I had the following error running npm install:
✖ Error: pngquant failed to build, make sure that libpng-dev is installed.

For my system (debian 9) it was fixed by running:
apt install libpng-dev

This may also happen to Ubuntu and other linux distros. Please add it to the README.

The package-lock.json should not be in the repository. This should be add to the file .gitignore.

Describe the bug
Number of attempts is shown twice.

Expected behavior
Please remove the

0 - Attempts

Additional context
Great for first timers please create a PR to dev branch please ask for the task so it can be assigned to you

Adding an issue template it will make it easier for contributors to understand the need

Set up Jest in order to be able to test unit testing files in the project.

Make the game page fully responsive. Currently the cards are a fixed size with non-consistent margins.

Modify the game page to be responsive to all screen sizes.

• Cards should shrink and grow based on screen size. Margins should be equal T,R, B, L.
• Bottom buttons should not be covered by cards.
• Left and Right Side Navs should collapse on smaller screen widths.

Let's try to achieve this using pure css with Flexbox.

Additional context
Please ask for the task to be assigned the issue. Make all PR's to dev branch.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
newRevealStates.forEach(function(el) { if (el === true) { cardsFlipped++; } else { return; } });

Build a function to check if the cards match by pairs. If they match make them disappear from the screen. If they do not match make them flip back over.

Create a layout using pure css no frameworks.

Should be create the license in order to have the project open source.

Is your feature request related to a problem? Please describe.
The game is getting quite good with respect to UI/UX, and also the score. I feel that we add more intuition into it by giving a thought about adding HighScores 🌠 .

Describe the solution you'd like
There are two possible methods, but I prefer suggesting only one, let's say we are currently on a session 💻 ie., the server is started and we're playing a game. After the first gameplay, we can store the score and call it high score. For subsequent games that are played on this session, we check with the previous score and update if higher.

Describe alternatives you've considered
Using offline 📝 text file preferably a hidden one to save all scores and checking them.

So, let's see if we can get this done.

Before you begin:
Confirm that you're working on this issue so I can add assigned label.
Use dev branch as a base for your PR.
Read the contribution guide for info how to setup project, run tests and use development version of packages.

### Style enhancement - Responsive Layout

• Create a Flexbox Layout with Side Nav, Header and Footer Section
  -> You can use this as an exmaple: https://codepen.io/3daddict/pen/oaxbEw

• Place Game Stats in Header

• Place Buttons and create temp "#" nav links in Footer
  1. Game
  2. Contributers
  3. Randomize Button
  4. Start New Game Button

The project is currently using [email protected]. It would be nice to implement a npm command to check the code format.

The command should be npm run lint, and this should check the code format with the eslint library.