Design comparison
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
- @rfilenkoPosted over 4 years ago
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@georgehobbsPosted over 4 years ago@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 - @sgoyal2402Posted over 4 years ago
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
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