Build Rock, Paper and Scissors game in ReactJS

Hi there,

I was thinking to make something good which covers some react concepts as well as good styling(UI).

I found one challenge of creating Rock, Paper and scissors on Frontend Mentor. You can see it here.

Let's solve this challenge.

From this tutorial you will learn,
-- A new fast way to create react app
-- React Hooks
-- Modal (Best Practice)
-- Creating Countdown
-- Sass styling
-- Advanced Conditional Rendering
-- React-router functionalities

Now for the styling part it will be good if you watch the video format of this tutorial.

Let's start creating our app

In this tutorial I'm using parcel to create react app instead of create-react-app.

Go to this page createdev

In this page select react in Main library.
Select Sass in Styling.
and for linting choose whichever you are using.
then just write project name and download the project.

When you unzip this you will find whole folder structure.
so, after unzip do npm install so it will install all the libraries listed in the package.json file.

Also, we will need two more libraries so install,
npm install react-router-dom node-sass

Start your app by,
npm start

Parcel will build much faster then ordinary create-react-app.

Our project setup is done.

Create two folders in src.
one folder which is components and another scss to store scss files.

Our Component Folder will contain:-
|-- Header.js (The header part where we display score)
|-- Play.js (Provides 3 choices)
|-- Game.js (Display the Result)
|-- Footer.js (Footer contains Rules button)
|-- Modal.js (Display Rules)

Let's start with the App.js

First of all import all the components here except modal.

Line 9: This state myChoice is to store our choice.

Line 10: This state score is to store score.

Line 15: Call header component here and pass score as props so that we can display score in the header part.

Line 16 to 23: Here we have used Switch and Route from react-router-dom. Now using this,
when path is at "/" then we will render play component else
when path is at "/game" we will render game component.
Eventually when you set your choice we will change path from "/" to "/game"

Make sure to wrap your app component with BrowserRouter in index.js file.

Line 18: Play component will need setMyChoice method so pass it as props.

Line 32: Game component will need myChoice, score and setScore to decide the result.

Line 25: We have placed footer component.

Header Component

Deconstruct score from the props and just display score inside the h1 tag.

import React from "react";

const Header = ({ score }) => {
  return (
    <div className="header">
      <h1>Score: {score}</h1>
    </div>
  );
};

export default Header;

Play Component.

In this component we will provide three choices to choose from.
So create 3 Links.

Make sure you have imported Link from "react-router-dom" as in Line no 2.

Line no 11 to 17:
We have created Link and set it's path to="/game".
Now inside this link we have created one div, this div has special attribute which is data-id this attribute contains value like paper, rock or scissors.
Now onClick there is new method which is setChoice which sets the choice.

Line 5: This setChoice methods takes e as parameter and extracts value from data-id attribute and setMyChoice state.

So, when we set this choice the path will change from "/" to "/game", and our choice will be passed down to the game component.

Game Component

Let's create the game component.

Line 4: make sure to deconstruct all 3 ({ score, myChoice, setScore }) props.

Line 6: This house state will store the choice of house (or computer).

Line 7: playerWin state is to decide results which can be "win" "lose" or "draw".

Line 11 to 14: Now this newHousePick() method will select choices randomly from choices array. using Math.random()*3. and it will use setHouse() to set house state.

Line 15: we will use useEffect to call this newHousePik() method so that whenever game components loads it will select house choice from the beginning.

Line 19: This Result() function decides who wins.
Now for the conditions we all know how to play this game so you can read conditions easily.
if player wins then playerWin = "win" and score = score + 1.
if player loses then playerWin = "lose" and score = score - 1.
if player and house both chose same choice then playerWin = "draw"

Line 43: This useEffect calls Result() function. We will call this useEffect only when house has been chosen so put house at the input of useEffect.

Line 49: This display myChoice state. (our choice)

Line 50: Displays house choice.

Line 53, 54, 55:
These lines display result message using conditional rendering.
if player win then it will display you win.
if player lose then it will display you lose.
if game is draw then it will display Draw.

Line 57: This is Link which contains Play again button.
this button takes us back to path "/". and onClick it will reset the house state.

That's it whole logic part of our app is completed now you can start styling it.

If you want to create whole app same as provided in the frontend mentor challenge then do watch the video.
In the video you will learn new way to create Modal in react and also you'll learn to create and render countDown.

I don't want to write whole styling part because it will only make this article more big, So it's better to watch video for it or you can directly see the code in github.

You can find Full-Code repository from here.

Thanks For Reading and Supporting.😄

Feel free to visit my youtube channel:

@CodeBucks

Follow me on Twitter where I'm sharing lot's of useful resources!

@code.bucks 😉