Traditional Rock Paper Scissors game providing unlimited fun in simple format.

The Rock Paper Scissors game will provide to the user:

1. A fair competition based truly on random results
2. Way to pass time by playing a game of chance
3. Chance to try his/her luck

Visit the Deployed website here

• User Stories
• Existing Features
  • Navigation Bar and Footer
  • Landing Page
• Features Left To Implement
• Typography and Color Scheme
• Wireframes
• Technology
• Testing
  • Code Validation - HTML, CSS and JavaScript Validation
  • Test Cases
  • General Testing
  • Fixed Bugs
  • Not Fixed Bugs
  • Supported Screens, Browsers and Performance
  • Performance
• Deployment
• Credits

• As a user I want:
  • To easily understand the purpose of the website.
  • To be able to find out the rules of the game without using external resources.
  • To easily access the rules section and close it at any time.
  • To easily chose one of the options.
  • To be able to see the result of the round.
  • To be able to see the score.

There is one Home page including:

• Landing page
• Pop-up window explaining the rules of the game

Both Nav bar and footer are responsive to the size of the screen being used to read the website.

• Navigation Bar:
  • Nav bar holds abbreviation of the game's full name and a stylised button that brings up rules contained in a pop-up window.
• Footer:
  • Footer contains full name of the game and is used to give the site a better overall look.

• Game Area:
  • Holds the:
    • Score area - where the current score is kept
    • Chosen card area - where the user's and computers chosen cards are shown
    • Interactive text area - instructs user and provides feedback on choice made - win, lose or draw
    • Card area - holding 3 cards for the user to chose and play from

• Main Page
  • Add Lizard and Spock expansion.
  • Add reset button, so user can start game over directly from the page.

Simple, easy to use design

• Fonts:

  • Silkscreen - used as a base font for the site
  • Peralta - used for the pop-up rule window

• Color Scheme:

  • Primary color:

  

  • Secondary color:

  

  • Website Background color:

  

  • Additional colors:
    • Font color - Azure
    • Pop-up screen background color - Azure

• HTML5
• CSS
• JavaScript

• Balsamiq Wireframes
  • To create wireframe design outlay
• Google Fonts
  • To acquire 'Silkscreen' and 'Peralta' font to use on the site
• Clean css
  • CSS formatting tool
• Color Hex color codes
  • For choosing the colors for the whole site
• Font Awesome
  • For adding icons to Home and Mr. Pancake pages
• W3C Markup Validator
  • To validate the HTML code across all pages
• W3C CSS Validator
  • To validate the CSS
• JSHint
  • To validate the JavaScript
• Chrome DevTools
  • To review code and test it during the development process
• Am I Responsive? mock-up generator
  • To generate a mock-up image for the Readme file
• GitHub
  • To store the project and host the finished site
• GitPod
  • To use as a platform for coding
• Chrome Lighthouse extensions
  • For testing the performance of the site

Testing was carried out by project developer using every device at his disposal, getting project developers friends to test the functionality on their devices and developer tools like Chrome DevTools and Lighthouse extension.

• W3C Markup Validator
  • On the first try validator reported 1 warning :
    • Section without a h1 was used and was fixed by changing it to div instead

• W3C CSS Validator
  • On the first try validator reported 1 errors:
    • An incorrect padding-bottom value was used, as the line was not necessary, error was fixed by deleting it

• JSHint
  • On the first try JSHint reported 1 warning, but no errors:
    • Breaking dow a for loop into additional funcyion fixed this

• User Cases
• To easily understand the purpose of the website.
  • When the Landing page opens the whole content of the site is visible. The footer holds the full name of the game and the familiar symbols of "Rock Paper Scissors" are on display.

• To be able to find out the rules of the game without using external resources.
  • At the top right of the page is a clickable button that brings up a pop-up screen which explains the rules in written format and with a help of a diagram.

• To easily access the rules section and close it at any time.
  • The pop-up button is visible at all time, to be reached easily and when open the user can either click on the "x" in the top right corner of the pop-up or click anywhere outside the pop-up.

• To easily chose one of the options.
  • Three clickable cards holding the familiar "Rock Paper Scissors" symbols are easily visible under the dynamic text area.

• To be able to see the result of the round.
  • In the middle of the game area there are 2 cards that change respective to users choice and computers randomly generated result showing the results. additionally under the cards there is a dynamic text area informing of users choice and the result of the round.

• To be able to see the score.
  • Above the results area the user's and computers current score.

• Score Area text too big for screen
  • Text was going over screen boundaries for screen sizes with width below 350px - used @media to style it so text is contained.

• No bugs found

• Google Chrome
• Microsoft Edge
• Mozilla Firefox

• Samsung A52s
• Huawei P20 Pro
• Huawei P30 Mate
• iPhone 13 Pro
• iPhone 11
• Screen virtual compatibility tested using Google DevTools:
  • Min responsive screen size tested - 238px
  • Max responsive screen size tested - 2560px

• Performance tested using Chrome Lighthouse extension.
  • All areas over scored over 90.

• Via GitHub
  • Open a web browser
  • Go to address https://github.com/
  • Log in my GitHub account
  • On the left side a selection of recent repositories will be visible, click on "SkyForgerUK/Project_2_RPSSL"
  • Click on settings button
  • Click on "Pages" button
  • In "Branch" field click on "None" button and select "main" from drop down menu
  • Click "Save" button
  • Wait 1-4 minutes
  • Refresh page
  • A link at the top part of the screen will become available
  • Use this link to access the, now published, website

• Via GitPod
  • Open a web browser
  • Go to address https://github.com/SkyForgerUK/Project_2_RPSSL
  • Click on "Gitpod" button to launch the application
  • In TERMINAL section type in command "python3 -m http.server"
  • A popup window in the right bottom corner will appear
  • Click on "Open in Browser"
  • The website will open in a new tab

• All content created by the project developer, except of:
  • For JS code for modal pop-up button a video from YouTube user "Web Dev Simplified" was followed
• Fonts 'Silkscreen' and 'Peralta' where taken from Google Fonts
• For help with the code w3schools was used

• Rules image which was taken from Wikipedia
• The question mark image was taken from Pexels.com
• The 3 images used for choice cards were taken from GitHub user DavidSamir
• The 3 images used for Result area were taken from rockpaperscissors30a