React JS Game | styled-components | Framer Motion

Solution retrospective
Hello, everyone!
This time, I decided to create something new: a simple game. Making it was fun, and I learned lots of stuff along the way, as always. Especially about the Framer Motion library! It turned out to be very useful.
Anyway, I still have a couple of questions for the community:
- Is there a way to get rid of flickering images? I bet they are constantly preloading every time I refresh the site. And the whole experience isn't user-friendly at all. 😔
- Should I avoid using nested styles in
styled-components
? And instead, try to create a separate Component for each element?
P.S. As regards the site functionality, I also added keyboard support:
- "1", "2", "3": "Paper", "Scissors", "Rock" respectively;
- "R": Show/Hide the rules popup;
- "Esc": Hide the rules popup;
- "Space"/"Enter": Play Again;
- "Y": reset the score (else it is saved in your local storage);
As always, I would highly appreciate any feedback! 😃
Please log in to post a comment
Log in with GitHubCommunity feedback
- @RayaneBengaoui
Hello Bonrey,
Really nice to see you completing another challenge ! 🙂
I think that you should avoid as much as possible nesting with Styled Components. While coding it might be quicker and simpler, but if the application scale or you decide to re-use components then you'll be happy to simply import them instead of copy pasting 😃.
Otherwise, your project is super clean ! Really like how smooth you've made your animations and all the little details such as the keyboard accessibility, the reset button or even the growing circles around the winner !
Have a nice day and happy coding ! 😃
- @Aderr0
Yeah it's really good, I'm currently learning React.js and I will improve myself with your code :D
- @Borub-ar
(sorry for my bad English). Hi, it's awesome!
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