FireRPS

An online multiplayer Rock-Paper-Scissors game built with Firebase, React.js, and Redux.js

Table of Contents

• View Live Site
• Developer
• About this project

View Live Site

https://semlak.github.io/rock-paper-scissors-firebase-react-redux/

Developer

FireRPS was solely developed by Joseph Semlak.

About this project

You can play an online Rock-Paper-Scissors match against another real online player. You can #, view available players, choose another online user to play against, and actually play the match (first to win 3 games).

• Technologies Used
• How It Works

• Start Locally

Technologies Used

• Frontend

  • React.js/Redux.js
  • JavaScript
  • Bootstrap/react-strap
  • HTML
  • CSS

• Backend

  • Firebase Real-time database
    • Google and Github OAuth authentication via Firebase

• Testing

  • Jest/Mocha

How It Works

1. Create Profile

• Click the "Log In/#" button in far right of the top Navbar A modal should open that allows login/registration via email/password or Github/Google #.

  • Register by selecting the registration tab and providing displayName/email/password details.

  • Register/# with Github or Google OAuth service.

  • For the registration form:

    • This is just a demonstration app, and you do not have to provide real information
    • Password: 6 characters or greater
    • Email: must be a valid-looking address, but does not have to be real.

  • For the Google/Github OAuth

    • These services are implemented through Firebase and are reasonably secure.
    • Some of your personal information is provided from the providers, such as display name, photo, email, whether the email is verified, etc ...
      • Only your display name and phote image is used in the App.
      • The information received is not used for any purposes other than authentication and displaying your name and profile image in this application.

2. Opponent Selection: Select another online player to play game

You are shown a list of players currently online. Note that since this is just a demo application, you might be the only one available.

• You can create a second user to try out the game, using another fake email in a separate browsing session (such as incognito in Chrome). Only the online players who are not currently in a game should be selectable. Select an available player to start a game.
• The game is automatically started; the other player is not asked whether to accept the match, but they can chose to end the match rather than play.

3. Begin Game Play

• You and the other player are both provided with the options of playing Rock, Paper, or Scissors.
  • If you play first, your opponent will be notified that you are waiting, but does not see what you played.
  • If your opponent plays first, you will be notified but will not see what your opponent played.
• Once both of you make your play, the application determines the round winner, and the scores and round number are updated on screen.
• You just continue the match with the same procedures until one of the players wins 3 rounds.

4. End Game

• Right now, the match ends fairly unceremoniously. You are just told whether you won or lost.
• The match screen will remain visible until one of the players hits the "End Match" button, at which point the application will return to the opponent selection screen.

5. In-Game Chat (to be implemented)

Start Locally

This section will walk you through some of the steps to set up this application to run locally on your computer.

If you just want to try out the game, you have to set up this project locally; you can just View the Live Site.

1. Clone the repository Start by cloning this project to a local directory on your computer. Run the following commands

git clone git@github.com:semlak/rock-paper-scissors-firebase-react-redux.git
#  or via HTTPS
git clone https://github.com/semlak/rock-paper-scissors-firebase-react-redux.git

Change into the directory

cd rock-paper-scissors-firebase-react-redux
# or whatever project directory you picked

2. If not already installed, install Node.js.
   If you don't already have node installed you can install the latest version here

3. Install yarn
   Yarn is a package manager used to install the dependencies and start the application locally. It is recommended that you install using your operating package manager. However, you can install yarn with npm run the following command:

npm install -g yarn

4. (Optional) Install firebase-tools globally. Used if you want to deploy to a firebase-hosted site.

yarn global add firebase-tools
# OR
npm i -g firebase-tools

5. Install dependencies

yarn install # or npm install
# since project was developed with yarn, the yarn.lock controls the versions of all dependencies,
# and so is more likely to result in a stable installation than npm install.

6. Start your development server
   During development, you have a React Development Server that watches your files for changes and automatically reloads the application in the browser. To Run:

yarn start

Your browser should automatically open and run on http://localhost:3000.