Code Monkey home page Code Monkey logo

memory-match-react's Introduction

Memory Match Game React

Basic memory match game using ReactJS

How can I help?

See our Contributing Guide!

Installation

  1. Fork this repo

  2. Clone your forked copy of this repo

    git clone https://github.com/[Your Username]/memory-match-react.git

  3. Change directory into the newly cloned repo

    cd memory-match-react

  4. Install dependencies

    npm install

    or

    yarn install

  5. Start dev server

    npm start

    or

    yarn start

  6. Open a browser and navigate to localhost:3000 You should see the Memory Match Game page.

NOTE For Ubuntu and other linux distros. credit to @fllprbt for bugfix.

apt install libpng-dev

Bundle For Deployment

  1. Run webpack to bundle files

    npm run bundle

    or

    yarn bundle

NOTE: After bundling you can not directly run your app locally. You must run your app from the root directory of a server.

License

memory-match-react is licensed under the ISC License.

memory-match-react's People

Contributors

3daddict avatar alexius08 avatar arda971 avatar bennycarlsson avatar ctahirih avatar daguilar94 avatar devdigression avatar klauskpm avatar kzack123 avatar mateoguzmana avatar notmorgsmccauley avatar pandaa880 avatar renatosiqueira avatar robinhurtado avatar sakethramanujam avatar sunilsj99 avatar vansosnin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

memory-match-react's Issues

Highscores Button/Feature

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.

Missing dependency

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.

Create a Stats Area with Gameplay Info

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

Make a responsive Flexbox Layout - SideNav with Header and Footer Sections

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

Modify the Layout and Cards to be fully responsive to screen sizes

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.

Refactor Card Component

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.

Set up Jest

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

Create linter command

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.

flipping third card issue

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; } });

Number of attempts is shown twice

Describe the bug
Number of attempts is shown twice.

Expected behavior
Please remove the

0 - Attempts

that is outside of the gameStats container.

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.