Live site

• Context
• UX
  • User stories
  • Wireframes
  • Theme
• Features
  • Site wide
  • Still to implement
• Technologies Used
• Testing
  • Automated
  • User stories
  • Manual
  • Responsiveness
  • Unresolved issues
  • Known bugs
• Deployment
• Credits

Rock Paper Scissors Lizard Spock is a game based on the Big Bang Theory (TV Show). The game lets users play either an original game or the more complicated one.

The site is presented in a minimalist but effective way, providing all the information the user would ever need. Users can find out more about the game, instructions on how to play, game settings by using different modal buttons depending on the users needs. The site was designed desktop first.

For ease of reference, the means by which a user's expectations have been met are summarised in the tables below:

The wireframes were successfully converted into a live functioning website across all devices.

The full suite of wireframes for desktop, tablet and mobile devices, plus a sitemap, can be accessed here.

A clean, clear and simple aesthetic has been implemented.

The Coolors website has been use to generate the palette. There were 4 colors used mainly across the website and they are as follows:

Only one font has been used, that is Montserrat. It has been used across all site and it suits the color pallete well.

1. Navbar

• Navbar has 4 buttons which lets user change the game and adjust volume, restart the game, instructions on how to play and what is the game about.
• All buttons except restart have modals to give user better experience.
• It also has hover over color change.

2. Game Settings

• It features two game options. 'Easy' for playing the classic rock paper scissors and 'Hard' for playing the expansion version which adds Lizard and Spock.
• It gives user the ability to change the volume of sounds that are being played when one of game buttons have been pressed.
• User is able to close the modal by either pressing the 'x' button or outside of the box.

3. Restart Button

• Button to restarts the game current on going game or when the game is over.
• Designed for only work when at least on game has been chosen.

4. How to play

• Modal button that gives user instructions on how to play and win the game.
• User is able to close the modal by either pressing the 'x' button or outside of the box.

5. About

• Brief description of where the expansion version of the game came from.
• User is able to close the modal by either pressing the 'x' button or outside of the box.

6. Select Difficulty

• A notice for user to select the game difficulty.
• This message hides itself after any difficulty has been chosen.

7. Easy/Hard Game

• Both game difficulties contain the same scoring and result messages.
• Scores have been divided into separate for user and computer.
• There are two versions of results depending if it is win/lose or draw.
• Easy game has 3 buttons, Rock, Paper and Scissors while the hard game has another two being Lizard and Spock.

8. Easy/Hard Game Guide

• A container that reminds user of what each option defeats another by text and an image.

• Two player function on one device.

  The ability to play the game with your friend.

• Online multiplayer with lobbies.

  The ability to see rooms with players wiating for a match.

• HTML
• CSS
• JavaScript

• GitHub - Version control and deployment
• GitPod - IDE used to code the site
• Balsamiq - Wireframe creation app

• Font Awesome - Icon used for menu in footer
• Google Fonts - PT Sans and Antic Slab fonts
• Coolors - Generate color pallette.

• Stack Overflow
• W3 Schools
• Am I Responsive? - Generate responsive image.
• Google Images - All images resources.

• Chrome DevTools - Ran an audit using lighthouse on all possible options for both desktop and mobile.

Summary and Scores:

• All reports have accessibility scores lowered due to Background and foreground colors do not have a sufficient contrast ratio.. This goes towards the nav buttons.
• Getting Eliminate render-blocking resources. which slows down the page tiny bit.

• W3C - HTML - No errors or warnings detected - PASS

• W3C - CSS - No errors or warnings detected - PASS

• JShint - JavaScript - 26 warnings regarding let, const or moz and that functions can be confusing

• CSS Lint - CSS lint found 6 errors and 25 warnings. - PASS

  • The errors are only in the root section with colors. Parsing error expecting RBRACE at every line. It is an issue with CSS Lint.

To be able to play classic as well as expansion game which is the 'lizard and spock'.

To test the first user story I have opened the page and pressed the game button. When the modal showed up I have tested both 'Easy' and 'Hard' modes to see if everything loads as expected. Tested if all the game buttons output the correct choice.

To be able to see my score.

To test this user story I played both 'Easy' and 'Hard' games. Each press of the game button depending on win, lose or draw should adjust the score. I have checked if all scores are being adjusted accordingly.

A clean, consistent interface which will not confuse users.

I have decided to use Coolors for the theme colors. All buttons were designed to be easy and readable.

To be able to play the game on any device.

This user story was tested by me on desktop and phone device. I have tested other devices by using Chrome DevTools. I have made media queries to make sure all devices could be bug free.

The following cases were carried out across all site, both desktop and mobile to ensure that the site is functioning as expected: ALL PASSED

1. Nav bar

• Check that each button except restart opens the correct modals.
• Check if hover color change works as expected.

2. Game Settings

• Check if easy or hard button will run the correct game.
• Check if easy or hard button will automatically close the modal after pressing the buttons.
• Check if the volume slider will adjust the volume the sounds that each button outputs as well as the win/lose sound.

3. Restart Button

• Check that the button does not work untill at least one difficulty has been chosen.
• Check if the last played game restarts.
• Check if the scores gets reset to 0.

4. Modals

• Check that the modals can be closed with the 'x' button as well as outside the box.
• Check if everything aligns correctly across different devices.

5. Scores

• Check that the score increments when player/computer wins the round.
• Check that the scores does not increment when its draw.
• Check if score resets to 0 when either the game ends or the restart button has been pressed.
• Check that the game buttons disappear when game has been finished.

6. Game Buttons

• Check if when button has been pressed, the right option has been chosen.

7. Results Message

• Check that each message outputs the right color depending on the round result.

8. Guides

• Check if the right guides are being shown underneath the game container depending on difficulty.
• Check if everything fits the container across all screen sizes.

The site has been designed with a mobile and tablet browsing in mind. It has been tested through all stages of development using Chrome DevTools. Media queries have been created to make sure all information and images will be responsive.

Following issues emerged but has been addressed and solved

• Scores font was too big for smaller screen devices.
  • This has been solved by reducing the font size for anything under 974pxs.
• The guides images were too big.
  • This has been solved by reducing the image width to 90% of original size.
• The modals container was getting too small.
  • For anything under 650pxs the modal container gets slightly bigger.

Tested on the following:

• Chrome
• Microsoft Edge
• Safari

Tested with Chrome DevTools using profiles for:

• BlackBerry Z30
• Galaxy Note 3
• Galaxy Note II
• Galaxy S3
• Moto G4
• Nexus 7
• iPad Mini
• iPhone 4
• Galaxy S5
• Pixel 2
• Pixel 2 XL
• iPhone 5 SE
• iPhone 6/7/8
• iPhone 6/7/8 Plus
• iPhone X
• iPad
• iPad Pro
• Surface Pro
• Nest Hub
• Nest Hub Max
• Mobile S
• Mobile M
• Mobile L
• Tablet
• Laptop
• Laptop L

Real world testing on:

• iPhone 13
• iPhone XR
• Windows

• None.

• None at present,

There is just one branch of this project and the deployed version of this site is the most current version in the repository.

To deploy this page to GitHub Pages from its GitHub repository the following steps were taken:

• Log into GitHub and locate the repository.
• At the top find and press the settings option
• On the left side you will see multiple options. Find the option called Pages and click on it.
• Under Source select the branch main, make sure that root has also been selected and then press Save.
• The site is now published. It may take a while for it to be available though.
• The site URL is just above the Source section visible over green background.

To make a clone, or Fork this repository follow the steps below.

• Log into your GitHub account and find the relevant repository you want to fork.
• Click on Fork on the top right of the page.
• You will find the exact live copy of the repository in your own Github account.

To clone the repository on your device follow the steps below.

• Log into your GitHub account and find the relevant repository you would like to clone.
• Click the Code button next to Add file above the main branch.
• To clone the repository using HTTPS, under clone with HTTPS, copy the link.
• Open the terminal in your IDE.
• Access the directory where you want the clone to be.
• In your IDE's terminal type git clone https://github.com/erykslezak/CIPP2.git and press Enter.
• You now have a local clone.

• Stack Overflow - Many issues I have googled brought me there as other coders were in similar situations.
• Stack OverFlow - Where I took the code from to create modals. It has been modified. Also been mentioned inside html,css and js files.
• Stack OverFlow - Very handy function on hiding/showing divs. Also been mentioned inside js file.
• W3 Schools - Best resource when it comes to attributes etc. Used it many times and without it I would be more confused.
• Github - README Layout
• Mentor - I wanna thank my mentor Spencer for all his input regarding my code and being my second pair of eyes.
• Google - Ammm yes.

• BigBangTheory Fandom - Used for the About modal.
• The sounds were taking from the two following websites.
  • Barbneal
  • Zapsplat