Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Rock Paper Scissors Spock Lizard - RPS Game

AdrianH• 190

@Adrian-py

Desktop design screenshot for the Rock, Paper, Scissors game coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback on the code is appreciated, especially on the quality of the react code and how to make the code cleaner. Thank you!

Community feedback

@gabrielteresczuk

Posted

Hello ! 😊 Its a beautiful project, viewing it i learned about, motion div that i wont know already. I find a little visual problem in 375px resolution, the win/lose div, si not centered, is like flex-ended, no more to add. Great work, and keep up !

Hola! 😊 Es un hermoso proyecto, viendolo aprendi acerca de "motion div", que no conocia hasta ahora. Encontre un pequeño problema visual en 375px, que el div de win/lose, no esta centrado, sino que parece que se esta marginado con flex-end, nada mas que agregar. Buen trabajo y sigue asi!

Marked as helpful

1

AdrianH• 190

@Adrian-py

Posted

@gabrielteresczuk Hey there, thank you for the feedback! Regarding the issue that you brought up, the win/lose div not centering is because I centered it in Framer Motion and not CSS. Because of this, to see the proper UI for mobile you would need to refresh every time you want to change the resolution. But, I do want to look into how to make it better in the future. Thank you!

1
David• 8,000

@DavidMorgade

Posted

Hello and congrats on finishing the hard-mode challenge!

1 - The code looks good for me, but instead of handling state and passing it as props, I think is better in this case to use react context Api, it will land you the same result but you wont have to pass the state from props, in this case isn't that much needed, but for future projects where you have a lot of components (or if you divide your components of this projects in more components), passing the state on props is a pain in the ass, and with the useContext hook it will be 100% easier!.

2 - The only thing I would change from the app, is the time between transitions, it's taking too much time to see if I'm winning or loosing, I would probably cut half the time between transitions to make a better user experience.

Apart from that your project looks great and you did the hard challenge, good job!

Hope my feedback helps you!

Marked as helpful

1

AdrianH• 190

@Adrian-py

Posted

@DavidMorgade Hey there David! Thank you for the feedback 😀, I am looking into improving in terms of being more knowledgeable in React hooks and other techniques. In terms of the time between transitions, at first, I felt it was enough, but looking at it again I could see why it might be irritating to wait 😄. But overall, thank you for the feedback and I will look into useContext for future projects. Thanks!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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