Rock Paper Scissors Game Built Using React.js

In this project, let’s build a Rock Paper Scissors by applying the concepts we have learned till now.

Refer to the image below:

Design Files

• Extra Small (Size < 576px) and Small (Size >= 576px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) – Playing View
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) – Game Results View
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) – Game Rules View

Set Up Instructions

• Download dependencies by running npm install
• Start up the app using npm start

Completion Instructions

The app must have the following functionalities

• When you click on the Rules button, it should trigger a popup, and rules image should be displayed

• Initially, the score displayed should be 0

• The App is provided with choicesList. It consists of a list of choice objects with the following properties in each choice object

  Key	Data Type
  id	String
  imageUrl	String

• When any of the three buttons (i.e Rock, Paper, Scissors) is clicked, then the Game Results View should be displayed

• In the Game Results View, the opponent choice should be generated randomly among these three buttons (i.e Rock, Paper, Scissors)

• When the Rock button is clicked, then the rock image should be displayed as your choice in the Game Results View

• When the Paper button is clicked, then the paper image should be displayed as your choice in the Game Results View

• When the Scissors button is clicked, then the scissors image should be displayed as your choice in the Game Results View

  Game Rules

  Click to view the Game Rules

  
  

  • Game result based on choices

    • When your choice is paper and the opponent choice is rock, then the result will be YOU WON
    • When your choice is scissors and the opponent choice is rock, then the result will be YOU LOSE
    • When your choice is rock and the opponent choice is paper, then the result will be YOU LOSE
    • When your choice is scissors and the opponent choice is paper, then the result will be YOU WON
    • When your choice is rock and the opponent choice is scissors, then the result will be YOU WON
    • When your choice is paper and the opponent choice is scissors, then the result will be YOU LOSE
    • When your choice and the opponent choice match, then the result will be IT IS DRAW

Quick Tips

• You can use Math.random() function to get a random number (float value) in range 0 to less than 1 (0 <= randomNumber < 1)

  Math.random()
  

• You can use Math.floor() function that returns the largest integer less than or equal to a given number

  console.log(Math.floor(5.95)); // output: 5

Important Note

• You can use reactjs-popup for displaying the modal
• RiCloseLine icon from react icons can be used for the close button at React Popup

The following instructions are required for the tests to pass

• Styled Components should be used for styling purposes
• The Page should consist of three HTML button elements with data-testid attribute values as rockButton, scissorsButton and paperButton respectively
• In Game Results View, the page should consist of an HTML image element with alt as your choice and src as URL for your choice image
• In Game Results View, the page should consist of an HTML image element with alt as opponent choice and src as URL for opponent choice image
• Roboto should be applied as font-family for Score value

Resources

• https://assets.ccbp.in/frontend/react-js/rock-paper-scissor/rules-image.png alt should be rules

• Roboto
• Bree Serif

Things to Keep in Mind

• All components you implement should go in the src/components directory.
• Don’t change the component folder names as those are the files being imported into the tests.
• Do not remove the pre-filled code
• Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.