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 in React

George Hobbs• 310

@georgehobbs

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


I enjoyed this challenge. My solution makes nice use of timings to render elements on the 'Result' page in order, but I stumbled into one main issue:

Updating the score doesn't happen until the 'Play Again' button is hit. This is because I couldn't figure out a way to update state and rerender the scoreboard component (to reflect the new score) without also re-rendering the main component. My solution is such that whenever the main component is rendered, a new random weapon is chosen for the house. I looked into ComponentShouldUpdate() and React.memo but ultimately didn't implement them.

Also had a few minor issues with styling on mobile, but fixed these (for the most part) using the Bootstrap grid 'order' classes. The main styling feature I bypassed was the 'depth' of the circles - I think this can be handled via box-shadow css.

Any feedback welcome.

Community feedback

Roman Filenko• 3,335

@rfilenko

Posted

Hey, George, I've looked into your code - to update score you need to:

  • in App.js delete setScore here: function newGame(result) { setSelection(''); // setScore(score + result); }
  • in Results.js, pass all needed props and update score with useeEffect like so: useEffect(() => { props.setScore(props.score + result); }, [result])

This way score will be updated in Scoreboard as well. Also consider refactoring a bit your js code.

Cheers, Roman

0

George Hobbs• 310

@georgehobbs

Posted

@rfilenko Thanks. I fixed it by ensuring the Result component re-rendered with the same weapon for the house (by adding state for the compWeapon in App.js). Works better now.

0
Suryansh Goyal• 335

@sgoyal2402

Posted

Hey your project works great on pc but on mobile after playing once the play again doesn't work at all.

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