Rock, Paper, Scissors - React/Redux/MUI

This is a solution to the Rock, Paper, Scissors challenge on Frontend Mentor.

Table of contents

• Overview

  • The challenge

  • Screenshot

  • Links

• My process

  • Built with

  • What I learned

  • Continued development

  • Useful resources

• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the game depending on their device's screen size

• Play Rock, Paper, Scissors against the computer

• Maintain the state of the score after refreshing the browser (optional)

• Bonus: Play Rock, Paper, Scissors, Lizard, Spock against the computer (optional)

  • Bonus still in progress

Screenshot

Links

• Solution URL: https://github.com/jpal91/rps-react

• Live Site URL: https://rps-react-ebon.vercel.app/

My process

Built with

• React - JS library

• React-Redux - State management for React Apps

• Material UI - For styles, CSS

What I learned

The vast majority of time on this application was spent figuring out how to get the main game page to look the way it does in the template. Ultimately, I ended up pulling the svgs from the Figma app for the actual graphics, but I styled them individually to get them in the right place on the screen.

localStorage

This was the first app (and first time) I used localStorage for keeping state after a refresh. It was fairly straightforward but there were a few things that tripped me up. Mainly that localStorage does not seem to keep data in it's original form (ie number) and instead converts them to a string. This took me quite a while to figure out, but it now works.

I set up two useEffect hooks, one on mount and one that monitors changes in score:

useEffect(() => {

	if (!localStorage.getItem('score') || localStorage.getItem('score') === '0'){
		return
	}
	let  num = Number(localStorage.getItem('score'))
	userScore(num)
}, [])

  

useEffect(() => {

	localStorage.setItem('score', score)

}, [score])

The first sets the score in the app (via redux) to equal the score in localStorage (if available).

The second updates the localStorage score whenever there is a change in score.

Animation

This was also the first app I used vanilla CSS animations on and it worked out quite well. I needed to utilize Material UI/Emotion's keyframes tool to set everything up properly and convert what I wanted into vanilla CSS -

const  fade = keyframes`
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
`

Then I used MUI's SX prop to add inline CSS for the components/elements I wanted to apply animation to -

animation: `${fade} 3s ease-in 3s 1 normal forwards`

It took me a while to figure this out but ended up looking amazing, so I'm very satisfied.

Continued development

Every project I've done so far has taken me a little farther into CSS and styling. I have learned quite a bit in the last few weeks just because of these exercises. I'm far from perfect, and really CSS is what I end up spending most of my time on figuring out.

With that being said, I learned a lot this round regarding position: 'absolute' and how to use that to get elements exactly where I want them. This was incredibly helpful, but I still have a lot to learn here. I'm hoping I can utilize this a little more efficiently as I progress instead of leaning on Flexbox/Grid so heavily.

I have not 100% finished this project yet because the bonus is not completed, will be working on that in the coming weeks.

Useful resources

• Creating Glow Effects with CSS - Great article that helped me get the initial info I needed to figure out the glow animations and how to complete them properly.

• Material-UI Image - Image component I found for MUI. Works fairly well, but does require some getting used to.

• Emotion Keyframes - Explained how to use Keyframes with Emotion/React.

Author

• Website - Coming soon...

• Frontend Mentor - @jpal91

• GitHub- https://github.com/jpal91/