ROCK PAPER SCISSORS LIZARD SPOCK

You can find the live link here: RPS LIZARD SPOCK

An extended version of the classic rock-paper-scissors game: The Big Bang Theory edition. Extention includes Lizard and Spock choices. The user plays against the computer, which randomly selects his choices. Whoever reaches 10 first wins the game.

As this project was developed during the Russian aggression against Ukraine, the colours of the Ukrainian flag have been chosen as a sign of support. On the homepage there's a Click me link that leads to a support page with some details and useful links to support Ukraine and not the developer of the website.

The game has a simple interface, it's intuitive and easy to use. The support page conveys a short but effective message.

Content

• About the game
• User Experience
• Features
• Technologies used
• Testing
• Deployment
• Credits
• Extra

About the game

• The rules:

  • Pick one of the five hand signals and the computer will randomly make his choice from the same five hand signals.
  • 1 point is assigned to the winner. The one who gets to 10 first, wins the match.
  • If the two players make the same object, it's a tie. Play again to determine the winner.
  • Remember who wins:
    • Scissors cuts paper.
    • Paper covers rock.
    • Rock crushes lizard.
    • Lizard poisons Spock.
    • Spock smashes scissors.
    • Scissors decapitates lizard.
    • Lizard eats paper.
    • Paper disproves Spock.
    • Spock vaporizes rock.
    • Rock crushes scissors.
  • The rules are explained by Sheldon from "The Big Bang Theory" in a video and by WikiHow.

• Trivia about the game:

  • Sam Kass and Karen Bryla invented the game Rock, Paper, Scissors, Lizard, Spock as an extension of the world’s most famous hand game.
  • The first known mention of the game dates back to the time of the Chinese Han dynasty (206 BCE – 220 CE). Source: Wikipedia.
  • Robots from the University of Tokyo may have a 100% winning rate, but your computer doesn't. Watch the video.
  • Bacterias like to play this game too.
  • Play two rounds and you have (p/(p+q))2 chanches to win! Let's play!

User Experience (UX)

• User stories

  • First-time Visitor Goals

    1. As a First-time visitor, I want to play a simple and intuitive game.
    2. As a First-time visitor, I want to learn more about the project and its developer.
    3. As a First-time first-time visitor with an impairment, I want to be able to read all the text by myself or with a screen reader and find colours that are not misleading.

  • Returning Visitor Goals

    1. As a returning visitor, I want to find the same game but with less bugs.
    2. As a returning visitor with a disability, I want to find the same or even better accessibility than before.

• Wireframes

The site is designed with an intuitive layout, it is accessible, easy to browse, with the absolutely necessary information and less invasive images. Balsamiq was used to put "ideas on paper".

Home page: Desktop / Mobile

Support page: Desktop / Mobile

• Design

  • Colours
    • The three main colours used are a shade of white, yellow and blue. Yellow and blue were chosen as a tribute to the Ukrainian, which was ravaged by war at the time this project was created. White was chosen to achieve an optimal contrast ratio between the background and the text.
  • Typography
    • The font "Smooch Sans" from Google Fonts was chosen for its modern, captivating and playful style.
  • Images
    • The svg files for user and computer choice are clear, simple and display optimally on all screens.

Features

• Responsive on all device sizes. How it looks like on iPhone 12: Home page / Support page

• Accessible for users with hearing and visual impairments.

• Interactive elements.

• Note:
  • Given the recreative/social purpose of the project, links to the developer's social media were not deemed necessary.
  • Given the size of the project, a .xml sitemap was not deemed necessary.

Existing Features - Home page

• Header

  • The Header contains the name of the game (Rock Paper Scissors Lizard Spock), the challenge (Who gets to 10 first?) and the link to the 'Support' page, called by the message "Psst! Click me". The header bar is fixed to the top, the page is not scrollable and intended to fit the viewheight. The header's text is white on a blue background.

• Main section

  • The main section contains the score area, the game area split in two (user's and computer's) and the reset button.

• Scores area

  • The 'Scores area' is split in three equally sized section. In this area is tracked the user's score on the left and the computer's on the right. In the middle a message with the result of the game ("You won! or "Computer won!") and of the match as soon as 10 points are reached by one of the two opponents ("You won the match!", "Computer won the match!");

• Game area

  • The 'Game area' is split in two: the user's choices are presented on the left and highlighted in blue on hover. Computer's choices are on the right but initially are not visible.
  • The game starts with the user clicking on one of the five icons. The click will generate a random number associated with the computer's choice. The computer choiche will ve visible for 1.5 seconds. The winner of the game is calculated based on the game's rules, the winner is announced by a temporary message appearing between the two scoreboards. One point is assigned to the winner and visible on the respective scoreboard.

• Reset area

  • The 'Reset area' section presents a minimalistic 'Reset' button, consistent in style with the rest of the page's objects.
  • The game can be restarted by the user at any point clicking the reset button but it's automatically reset once one of the two opponents reaches 10 points.

• The Footer

  • The 'Footer' shows the name of the developer and the year the project was created. The text is black on a yellow background.
  • The footer sticks to the bottom.

• Other features
  • The website has an apple-touch-icon to make the page stand out from other bookmarks, with a representation of an atom: a tribute to "The Big Bang Theory" TV series.
  • The same symbol was chosen to make the home page easy to find among the many open tabs.
  • The website has two hands embracing a hearth with Ukranian colors favicon to make the support page easy to find among the many opens tabs and to spread a support message in favor of the Ukraninan people.
  • The website has a "Google site verification" to verify the website's ownership as shown here.
  • The site has keywords and a description of appropriate length to give the user a brief impression of the site on the browser results page.

Existing Features - Support page

• Header

  • The Header is minimalistic, matches the color of the home page and the size of the footer. It has one home icon and the label 'Home' on the top left area. The label has been added for a better accessibility.

• Main section

  • The main section contains the developer's message to the user and a link to support Ukraine. The message is brief, simple but effective. The link, styled as a button, matches the Ukranian flag on default and on hover.

• The Footer

  • The 'Footer' shows the name of the developer and the year the project was created. The text is black on a yellow background.
  • The footer sticks to the bottom.

Features to implement

• Add privacy policy and copyright information.
• Get the website a domain name.
• Add choices and levels to increase complexity. If users will like the project and ask for further development, here are some ideas. And a visual schema of the potential Expansion

Technologies used

Languages used

• HTML5
• CSS3
• JavaScript

Frameworks, Libraries & Programs Used

• Google Fonts:
  • Google Fonts were used to import the 'Smooch Sans' font into the HTML pages (home and suppor).
• Font Awesome:
  • Font Awesome was used for the home icon of the 'support page' header.
• Gitpod
  • Gitpod Dashboard was used to write the code and its terminal to 'commit' to GitHub and 'push' to GitHub Pages.
• GitHub:
  • GitHub is used to store the projects code after being pushed from Git.
• Iconfinder
  • Favicons (.ico) and apple touch icons (.png) are from Iconfinder.
• Balsamiq:
  • Balsamiq was used to create the wireframe before the deployment process began.

Testing

General Testing

The website's features were thoroughly tested using some well-known free web testers. Both pages (home page and support page) were tested.

• Web Responsive

  • The responsive feature has been tested using Chrome DevTools and an online Web Design checker from Media Genesis. Here is the result of the Home page and here is the result of the Support page. The website's layout has been tested on a range of different screen sizes, from small 320x480 screens (e.g. Apple iPhone 3) to widescreen 24" and their landscape view providing a good user experience.
  • The website has passed the Google mobile-friendly test.

• Accessibility

  • Colours: All colours checked with WebAim have an optimal contrast ratio(6.32:1 (blue/white), 4.91:1(blue/yellow), 14.97:1 (yellow/black))
  • Reduced motion: All animations are disabled when "Show animation in Windows" is disabled from settings in Win10.
  • Colour blindness: Colour-blind webpage filters have been taken into account with Toptal e.g. Here is how the website looks like for users affected by Tritanopia
  • Screen Reader: Texts, links and images' 'alt text' were read with the Google Chrome extension Screen Reader (version 53.0.2784.13).
  • Presbiopia: All fonts are 'sans serif' and have a sufficient size so that the text can be easily read without glasses.
  • General Accessibility: has been tested with satisfactory results on:
    1. Google Light House (mobile and desktop version).
    2. Power Mapper - Home page and Power Mapper - support page showing minor issues.
    3. Wave - Home and Support pages.

• Browser Compatibility

  • The website's pages were tested with Power Mapper presenting issues with IE11 regarding CSS3 properties. Such choices were deemed necessary for a better user experience and devices compatibility.

• SEO

  • The website's Home page was tested on Seobility and similar results were obtained on the Support page..
  • Tests ran with Google Light House (mobile and desktop version) on both pages obtained a SEO score of 100%.

• Performances

  • The website was tested on Power Mapper.
  • The general performance was evaluated by GTMetrix.

Bugs and Future developments

• Fixed bugs

• • Description : The message showing the result of the game and the image corresponding to the computer choiche are set to disappear after 1.5s.
  • Bug: If the user selects another choiche before timeout, two (or more) computer choices will be visible at the same time.
  • Fix: The events are handled with JQuery. on click of the user on another choiche, previous computer's choiche disappears.

• • Description: On mouse :hover user's choiches are coloured in blue. Default setting is black.
  • Bug: :hover property is not available on touch screen. Once clicked, the user choiches do not go back to their default style.
  • Fix: The events are handled with JQuery. on click of the user on another choiche, previous user's choiche is back to default.

• Unfixed bugs

  • Webiste performance analysis show a considerable loss of usability on IE 11 because some of CSS3 properties are not supported. In particular grid layout and viewport units, used extensively in the project, are not supported as showned by CanIUse.
    Note: The issue has not yet been fixed as Microsoft will soon be phasing out IE 11 as stated here.
  • On iOS, a quick series of "taps" isn't handled well and may result in loss of information (e.g. winning message and computer selection) and animations (e.g. user selection). The bug is shown here.
  • In addition, the problems mentioned above can sometimes occur even on slower "taps".

• Future developments

  • Improve mobile experience with better handling of touch events and better rendition of the :hover property.
  • Add more "playful events" (e.g. make it more clear when one of the two player wins, add "easter egg", music).
  • Fix or improve other issues highlighted by user.

Testing User Stories from User Experience (UX) Section

First Time Visitor Goals

• As a First-time visitor, I want to play a simple and intuitive game.

  • The layout is simple, the icons are intuitive, all essential information are displayed.

• As a First-time visitor, I want to learn more about the project and its developer.

  • The 'Click me' button lands to a page where it's explained why and how the user can support the developer.

• As a First-time first-time visitor with an impairment, I want to be able to read all the text by myself or with a screen reader and find colours that are not misleading, and find animations disabled if so set.

  • Colours contrast with the background and are colour blindness friendly as information is still clear regardless of visual impairment.
  • Font sizes are sufficiently large by default and therefore easy to read.
  • All text, labels and images are readable with the Chrome Screen Reader extension.
  • Animations are disabled when the user sets the "prefer reduced motion" option.

Returning Visitor Goals

• As a returning visitor, I want to find the same game but with less bugs.

  • The first version of this website was deployed on March 2022, the developer strives to work on the webiste and improve its usability.

• As a returning visitor with a disability, I want to find the same or even better accessibility than before.

  • Accessibility will be kept up to date in accordance with the latest guidelines and users' feedback.

Validator Testing

• HTML
  • No errors were returned when running the official W3C validator.
• CSS
  • No errors were found when running the official (Jigsaw) validator.
• JavaScript
  • The code passed through JSHint with no significant issues.

Deployment

GitHub Pages

• A video showing how a similar repository was deployed is available here.
• The site has been deployed on GitHub pages. The steps to deploy and publish the repository are as follows:
  • Create a new repository:
    • Click on "New" button (top-right of the page).
    • Select the "Owner" (your account for instance).
    • Chose a Repository name. Note: The name must be unique among all the user's repositories and words must be separated by hypen.
    • The repository will be "public" by default. Note: a "private" repository can't be hosted on GitHub pages.
    • Click on "Create Repository".
    • The page will refresh and the Repository is successfully created.
  • Host repository on GitHub Pages:
    • Click on "Settings" (top-right of the page).
    • Click on "Pages" (menu on the left).
    • Select branch > main from the "Source" section. (or any other if present).
    • Click on "Save", the page will refresh and the site, now hosted on GitHub Pages is ready to be published.
    • After a few minutes, the ribbon will turn green and the site is reachable at an address similar to your-username/.github.io/your-repository-name/.
    • Develop the project, commit, push and the changes will be visible on the page within a few minutes.

Forking the Repository

• By forking this GitHub Repository you make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository. The steps to fork the repository are as follows:
  • Locate the GitHub Repository of this project and log into your GitHub account.
  • Click on the "Fork" button, on the top right of the page, just above the "Settings".
  • Decide where to fork the repository (your account for instance)
  • You now have a copy of the original repository in your GitHub account.

Making a local clone

• Cloning a repository pulls down a full copy of all the repository data that GitHub.com has at that point in time, including all versions of every file and folder for the project. The steps to clone a repository are as follows:
  • Locate the GitHub Repository of this project and log into your GitHub account.
  • Click on the "Code" button, on the top right of the page, next to the green "Gitpod" button.
  • Chose one of the available options: Clone with HTTPS, Open with Git Hub desktop, Download ZIP.
  • To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
  • Open Git Bash. How to download and install.
  • Chose the location where you want the repository to be created.
  • Type:

  $ git clone https://github.com/microsoft/RockPaperScissorsLizardSpock.git
  

  • Press Enter, the following lines will appear and your repository is now created.

  $ git clone https://github.com/cla-cif/RPS-Lizard-Spock.git
  Cloning into 'RPS-Lizard-Spock'...
  remote: Enumerating objects: 614, done.
  remote: Counting objects: 100% (614/614), done.
  remote: Compressing objects: 100% (450/450), done.
  remote: Total 614 (delta 338), reused 352 (delta 143), pack-reused 0
  Receiving objects: 100% (614/614), 6.50 MiB | 1.77 MiB/s, done.
  Resolving deltas: 100% (338/338), done.
  

  • Click Here for a more detailed explaination.

You can find the live link to the site here: RPS Lizard Spock

Credits

Code

• All content written by developer Claudia Cifaldi - cla-cif on GitHub.
• The template used for this project belongs to CodeInstitute - GitHub and website.

Content and Media

• The icons were taken from the developer JLChamberlain on GitHub.
• A fully functioning project was studied from FreeCodeCamp's tutorials.
• The icon in the Support page's header was taken from Font Awesome.
• Fonts from Google Fonts.
• The game was originally created by Sam Kass and Karen Bryla.

Extra

Links to people we like.

• GitHub supporting Ukraine.
• GitHub repository by iimetra.
• GitHub repository by AndrewStetsenko.

Link to top