/Rock-Paper-Scissors-APP

Rock Paper Scissor Game App Using React.jS

Primary LanguageJavaScript

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

Refer to the image below:


rock paper scissors output

Design Files

Click to view

Set Up Instructions

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

Completion Instructions

Functionality to be added

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
    rules image

    • 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

  • When the result is YOU WON, then the score should be incremented by one

  • When the result is IT IS DRAW, then there shouldn't be any change in the score

  • When the result is YOU LOSE, then the score should be decremented by one

  • When the PLAY AGAIN button is clicked, then the Playing View should be displayed

    • Quick Tips

    Click to view

    • 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

    Click to view
    • 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

    Image URLs
    Colors
    Hex: #ffffff
    Hex: #223a5f
    Font-families
    • 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.