Rock, Paper, Scissors

Rock, Paper, Scissors game made with Gatsby for a challenge by Frontend Mentor.

Demo

Check out the demo! - https://rpsls-app.netlify.app/

Technologies

• Gatsby: 2.23.12,
• React v16.12.0
• React Hooks
• Framer Motion
• Styled Components
• Local Storage
• Husky & lint-staged

Features

Users are 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
• Play Rock, Paper, Scissors, Lizard, Spock against the computer

Rules

If the player wins, they gain 1 point. If the computer wins, the player loses one point.

Original (Rock, Paper, Scissors)

• Paper beats Rock
• Rock beats Scissors
• Scissors beats Paper

Advanced (Rock, Paper, Scissors, Lizard, Spock)

• Scissors beats Paper
• Paper beats Rock
• Rock beats Lizard
• Lizard beats Spock
• Spock beats Scissors
• Scissors beats Lizard
• Paper beats Spock
• Rock beats Scissors
• Lizard beats Paper
• Spock beats Rock

Not sure what Rock, Paper, Scissors, Lizard, Spock is? Check out this clip from The Big Bang Theory.

Credits and sources

This is a challenge by www.frontendmentor.io. I got all of the icons and designs from the website. I tried my best to get as close as possible to the designs.