wgil / memory-game Goto Github PK

The moment the user clicks the first card, the timer should starts.
The moment the user clicks the last card, the timer should stop.

Remember to show it in the Menu and at the end of the game.
Improve its styles.

Grid CSS is the key.
Fix Firefox styles.

The game cannot be played on iPhone

When you start the game on a mobile phone in portrait mode, you can see a screen indicating that you have to rotate your phone to be able to play the game.

Users have reported that opening the game on an Iphone, they just see a blank screen. 😟

To solve this issue, you first have to make a little research to know exactly which browsers are affected🧐. Currently, we are using the Screen.orientation property to detect the orientation device and the orientationchange event to hide/show the Game. You can find this logic in src/containers/Orientation.js.

I am not pretty sure how to approach this issue, probably we can create a polyfill or simply get rid of Screen.orientation and make use of resize and make it work in certain breakpoint Any suggestion would be appreciated. 🙏

• There cannot be more than two cards flipped at the same time.
• Two flipped cards should be paired if the first card's sibling_id match the other card's id.
• If cards are paired, delete them from the cards collection.
• If cards are not paired, set flipped to false.

Make the restart button works from the menu.

Add a CI to run the test suite on every pull request. It could be great opportunity to add the coverage to the project and a badge in the readme file.

On every played card, we should check if there still are more cards to play. We can create another piece of state to keep this count so we don't have to traverse the whole array cards every time and just compare both array lengths.

If there are no more cards to play: Show an end of game component with a message and a button to play the game again.

By the time, the Card component is using styled-component as well as styles on a separated stylesheet.

The goal of this task is to merge all styles of the Card on the Container styled-component definition inside that the Card.js component file.

Arrow keys should be used to move through the board and the space button should make the cards flip.

Add a style to the card when it gets focus.

Every time the game starts, the cards should be shuffled.

Add styles to the component and move it to the center of the screen, use grid-css to do this.

The screen should have instructions and a button to start the game.

Clicking a card should make it flip, animate it and update its flipped prop.

• Cards should scale a little bit on hover or suggest any other cool animation. [DONE]
• Improve the back background of the card. [DONE]
• Add a string color to the face front of every pair of cards. Use any cool colors to identify them. At the end of the release, we can decide which images to use. [DONE]
• Any other cool styling is valid. [DONE]

I think that deleting paired cards would make the others to move from its place, this should not happen.

Pass down the played state to the card at the bottom. If the card is already played, add a cool style to disappear it! Bonus point for animations :-)