React JS Game | styled-components | Framer Motion

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! 😃