Rock Paper Scissors Lizard Spock

Interactive Frontend Development Milestone Project Two

My second Milestone Project will be an Interactive rock, paper, scissors, Lizard, Spock game inspired by the game played on The Big Bang Theory.

Follow this Link for the live site.

User Experience (UX)

This website is designed to be an interactive Rock Paper Scissors game with the addition of Lizard and Spock, where the user plays against the computer and can track their scores.

User Stories

User Story 1

As a user I want to play Rock Paper Scissors.

Acceptance Criteria

• The user should be able to select Rock, Paper or Scissors.
• The user should be able to see the outcome of their selection.
• The user should be able to see the outcome of the computers selection.
• The user should be able to reset the game by pressing the reset button and starting a new game.

Description:

once the user picks rock paper or scissors the large text area to the right will show what the user picked and what the computer picked.

The smaller text area will show if the user wins, loses or draws. This text area will also change colour green for a win, red for a loss and amber for a draw.

Pressing the reset button will reset the scoreboard and start a new game.

User Story 2

As a user I want to know how to play the game.

Acceptance Criteria

• The instructions should be clear and easy to understand.
• The instructions should be available through the instructions button.
• Instructions should be accessible at any time.
• All interactive parts of the website should be clearly labeled.

Description:

To see the instructions at any point press the button labeled instructions and a pop will appear showing the instructions.

User Story 3

As a user I want to know what my score is.

Acceptance Criteria

• As the user selects rock, paper or scissors the larger text area will show what they have picked.
• Once the user has made a selection the same text area will show what the computer picked.
• The smaller text area below will show the results of the current game. Win, Lose or Draw.
• The smaller text area will change colour depending on the results. Green for win, amber for draw and red for a lose.
• The Win, Draw or Lose score boards above adjust to show the current scores.

Description:

The three score boards near the top will keep track of the pervious scores and will be updated as the game is played.

User Story 4

As a user I may wish to play the game with a light theme or a light theme.

Acceptance Criteria

• The Night/Day switch should be easily identified.
• Switching the Night/Day switch should seamlessly switch the theme for the whole site.
• Instructions on the Night/Day switch should be in the pop up instructions along with how to play the game.
• Switching themes should not affect things like the scores or how the game is played.

Description:

Selecting the Night/Day switch will allow the user to change themes from a light theme, if they are playing in the daytime, or a dark theme if they are playing the knight time.

User Story 5

As a user I may wish to find out more about the person who made the game and any other projects they may be working on.

Acceptance Criteria

• The GitHub button will open a new window taking the user to the games GitHub project page.
• The social media bar at the bottom will take the user to the authors various social media pages.
• Clicking on a social media link will open a new window so as to not lose or reset the score of the current game.

Description:

The user may wish to know more about the current project, how it was developed, what technologies used, where the developer found needed to develope the game and any problems the developer had during development

The user may also wish to contact or follow the developer on one or many of his social media platform's.

Technologies

The Technologies used in this project are listed bellow.

• Bootstrap 4
• HTML5
• CSS3
• Font Awesome
• Google Fonts
• GitHub for version control
• Gitpod
• Wireframesketcher
• sweetalert2
• Libreoffice

Design

Inspiration for the game came from The Big Bang Theory. In the episode The Lizard-Spock Expansion Sheldon, Raj and Leonard are arguing about what to watch on TV, Raj suggests rock, paper, scissors. Sheldon says there is too much chance of a tie, and suggests Rock Paper Scissors Lizard Spock.

Wireframes

The Wireframes were created using wireframesketcher a powerful desktop wire framing tool.

Desktop

Desktop with annotation's

Mobile view

The final results may differ slightly from the wireframes.

Logic flow diagram

The following Logic flow diagrams show the steps taken to test each of the conditions that would give either a win, lose or draw result.

User picks Rock.

User picks Paper.

User picks Scissors.

User picks Lizard.

User picks Spock.

Testing

For testing documentation please refer to the Testing markdown

Deployment

GitHub Pages

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
   - Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
3. Scroll down the Settings page until you locate the "GitHub Pages" Section.
4. Under "Source", click the dropdown called "None" and select "Master Branch".
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site Link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub Repository you make a copy of the original repository on your GitHub account to view and/or make changes without affecting the original repository by using the following steps...

1. Log in to GitHub and locate the 1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.
   $ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
7. Press Enter. Your local clone will be created.
   $ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

Credits & Acknowledgements

I would like to thank the following.

• Excellence Ilesanmi for his support and advice through this project.
• Code Institute for this excellent course.
• Bootstrap, W3Schools, freecodecamp and css-tricks for all the example code.
• Coolors for the colours and theme ideas.
• Sweet alert 2 for the instructions popup.
• Pete R. at onextrapixel for the HAL9000 logo.
• Freeformatter.comFree Online Tool for validating and beautifying HTML and CSS.
• The Big Bang Theory where the inspiration for the game came from.
• And my partner for her near infinite tolerance of me obsessing over my code.