Link to the deployed site

• First time visitor Goals

  • As a first time visitor, I want to instantly understand the purpose of the site.
  • As a first time visitor, I want to be able to easily navigate through the site.
  • As a first time visitor, I want the game to be fun.

• Returning / Frequent user goals

  • As a returning / frequent user, I want to be able to come back and play again.

Rock Paper Scissors is a classic game and this site is made for everyone, to have fun!

• Create a username
• Scoretracking system
• Provide feedback to the user after input
• Provide feedback on the result of the game
• Easy to navigate
• Feel fun to be on the site through colour and interactivity

• The main colors i used were pink, yellow and light blue for the Font Awesome icons. I chose these "Pastel" inspired colours because i knew they would look nice with a text-shadow ( Neon) effect when hovered over them. I used Coolers to help me to generate this color pallette.

• The primary font used was Fuzzy Bubbles with a fallback of Garamond in case the fonnt isn't imported into the site correctly. Fuzzy Bubbles is an attractive, fun font.

• I chose to use font awesome icons instead of images in this site as i feel like icons are more suited to the nature of this game.

• Username is required to be able to use the Lets play button. If an no username is inputted by the user they will not be allowed to use the lets play button and be greeted with a red border around the text box showing their error.
  
• The Lets play button has a hover feature where it inverts its colours. When pressed , if a valid username has been entered this will take you to the game page.
  

• The colorful Rock, Paper and scissors icons on the bottom of the page have a hover effect which will display them as glowing neon icons. I found this great tutorial on CSS Tricks.
  

• The scoreboard updates live to the current score of the game as you play.
  

• When rock paper or scissors is selected, you get feedback on what the computer/robot has selected too. This happens in two forms, the computer's selected icon will light up for 2 seconds and turn off again. There will be a little written description of what you picked and what the computer picked and the result of that round.
  

• There is a home button on the top left corner of the header to take you back to the landing page. This also lightly glows as you hover over it staying consistent with the rest of the site.
  

• I have a fun cursor follower animation for the game page. It adds to the "game feel". I found this cool animation on CodePen.
  

• The Reset button along with the game result (you win / you lose) text shows up when either the user or the computer reaches 5.
  

• HTML5
• CSS3
• Javascript

• Bootstrap

  • Bootstrap was used to assist with the responsiveness and styling of the website.

• Hover.css

  • Hover was used multiple times throughout the site to add a fun feeling to the game and offer more site feedback to the user.

• Google Fonts

  • Google fonts was used on this site to import the font 'Fuzzy Bubbles'.

• Font Awesome

  • Font awesome was used on this site for the game icons and the home button.

• Git

  • Git was used for version control by utilizing the Gitpod terminal to commit to Git and push to Github.

• GitHub

  • Github is used to store project's code after being pushed from git.

• Balsamiq

  • Balsamiq was used to create my wireframes in the planning and design process.

• I used W3C Markup Validator to validate my html. It returned no errors.
  
  

• I used W3 Jigsaw to validate my Css. It returned no errors.
  

• I used JsHint to validate my Javascript. After fixing issues i am left with some "unused variables". I have consulted with my tutor and have decided it is best to leave the remaining ones in as i got bugs when i took these ones out. JsHint doesnt always recognise a variable being used. These were my only errors on JsHint.
  

• I used Lighthouse in developer tools to test my site. This was the result i got for both desktop and mobile
  

• I have tested the website on Google Chrome, Internet Explorer, Firefox, Safari and Edge.
• I have tested to make sure the websites navigation is working correctly.
• The website was tested on Iphone 8, X and 11 pro, Ipad, Macbook Air and Desktop PC and laptops by me.
• I used the developer tools on the browser to emulate different devices.
• I sent the site link to friends and asked them to test it out and play the game so they could let me know any issues they encountered, how the game felt to play and if navigation and ease of use was all okay. This allowed me to get first hand experience on devices which were not available to me.

1. As a first time visitor, I want to instantly understand the purpose of the site.

   • When first entering the site you instantly know that its a game by the big Lets PLay button. You are given instructions on how to play the game and you are made familiar with the game icons.

2. As a first time visitor, I want to be able to easily navigate through the site.

   • The site is easily navigated through. If a user presses the lets play button without entering a username they are subtly prompted to do so my means of adding a red margin around the username box.
   • When on the game page, if a user would like to return to the landing page to change their username, there is a Home icon on the top left corner of the screen.

3. As a first time visitor, I want the game to be fun.

   • I think there is a nostalgic feel to this game for everyone. It's not a strategic game but a game of chance, so you never know that the result is going to be! It is a fun game to play. Even to move your mouse around and hover over the icons is fun.

2. As a returning / frequent user, I want to be able to come back and play again.
   • This is an easy one to acheive as the site is live. I think for the returning user in the future there could be added levels of difficulty to the game.

• Duplicating the computer choice and scores after first reset. This was due to the fact that i was calling the getComputerChoice function again when i was resetting the game.
• My remove media query function didnt work for the user weapons. I did however get around this by stopping the scores rising when the scorelimit of 5 is reached. These weapons can still be clicked when the game is over but it wont have any effect on the games results.

The project was deployed to GitHub 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 "Settings" on the menu.
3. Scroll down the settings page until you see the "GitHub Pages" section.
4. Under "Source", click the dropdown menu called "None" and select "Master Branch".
5. The page wil automatically refresh.
6. Scroll back down through the page to locate the now published site link in the

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

1. Log into Github, locate the GitHub Repository.
2. Click on "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.
7. Press enter, your local clone will be created.

• I would like to add levels of difficulty. This would mean Easy is as the game is now. Hard would be adding in Lizard and Spock to the game. Another way i could make this game more difficult is analysing a users pattern of choices and getting the computer choice to counter that.

• I used Stack Overflow and W3 Schools was used throughout the project to help with syntax issues.
• All Code was written by the developer, Sean Tangney.

• Coolers Was used to select the colour scheme i used.
• Principles learned from Code Institute were used on this site.
• Scoreboard design was learned from a FreeCodeCamp Youtube Tutorial.
• Mouse animation was learned from Codepen.

• All icons used were from FontAwesome
• Font was taken from Google Fonts

1. Tutor support at Code Institute for their help and guidance.
2. My Mentor for continuous helpful feedback.