Frontend Mentor - Rock, Paper, Scissors solution

This is a solution to the Rock, Paper, Scissors challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• 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)

Rules

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

Original

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

Screenshot

Links

Live Site: click here

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• TypeScript - for Type Consistency
• Vite Js - module bundler and build tool
• tailwindCSS - For styles
• Framer Motion - For Animation

What I learned

• One thing i'm proud of doing this project is: i was able to figure out how to use the React Context API with TypeScript

export const GameContext = createContext<GameContextType>({} as GameContextType)

• Managing and modifying various states across the entire application

• Logic for the Game or AI found in the gameLogic File GamePlayLogic

Author

• Frontend Mentor - @headbwoi
• Twitter - @headbwoi_1