Skip to content
Submitted 3 months ago

memory game with React

react, sass/scss, tailwind-css, typescript, vite
P
toshirokubota•1,340
@toshirokubota
A solution to the Memory game challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What challenges did you encounter, and how did you overcome them?

It took a while for me to come up with the 'state-machine" of the game. I did it in a ad-hoc way and I wonder if there is a simpler and cleaner way.

There was an issue with a grid layout with 3 items using tailwind. I had to handle this case (# of players being 3) separately.

As always, I had a hard time implementing responsive layout and designs that look exactly like the Figma design.

What specific areas of your project would you like help with?

Any feedbacks to improve the design/code is highly appreciated. Any comments/encouragements are also welcome!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Antoine•330
    @super7ramp

    Nice job!

    The game works well overall and looks similar to the Figma design 🙂

    Here are a few remarks on your solution. Hope you'll find them useful!

    Look and feel

    • Player has to click after the second tile has been opened for the game to continue: It would be more user-friendly if the game would continue after a small timeout 😉
    • When the modal menu is active, one may still click the tiles below, which is a bit confusing 🤔
    • Tile contents do not scale with their containers. It might be less fluid but simpler to scale both content and container at certain breakpoints using media queries.
    • Concerning your issue with the grid layout using Tailwind, I cannot say since I haven't tried Tailwind yet 🙄 In any case you may get back to implementing the grid by hand with e.g. grid-template-columns 👩‍🎨

    Code

    • Good job at identifying that the game logic may be implemented with a state machine 👍 You may simplify its implementation by using objects (see this example) or by using a dedicated library like XState.
    • You may consider extracting the logic from the MemoryGame component, e.g. to make it testable or just to simplify the component.
    • At last, I would try to avoid the useEffect hook if possible: All the game state changes are triggered by a simple user click so useEffect shouldn't be necessary, except for the timer cleanup ⏲

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord