Rock - Paper -Scissors - Lizard - Spock

Milestone Portfolio Project 2 - JavaScript Essentials - Code Institute Full Stack Developer Diploma.

Introduction
Design Goals
Design Features
User Story
Wireframes
Testing
Deployment
Previous Iterations and Bugs
Future Aspirations
Tools used and Coding Inspiration

INTRODUCTION.

This web application has been developed in order to apply the topics covered within the recent Javascript essential course work as part of the Code Institute Full Stack Software Developer diploma. The website represents a Rock Paper Scissors Lizard Spock game based on the premise presented in the popular TV series, 'The Big Bang Theory'. This game pits the user against the computer in a game of chance. To view the full website please use the clickable link via the heading at the top of this page or alternatively, click on the following link to access the site: Rock Paper Scissors Lizard Spock

Return to table of contents

DESIGN GOALS.

The brief was to create an interactive application that presents users with an enjoyable game of chance. The principle features included are a game that employs a pattern matching functionality with a limited number of tries before the game is completed. The score must be tracked and it must provide the facility to play against 'the computer'. In addition a competitive element has been added with colourful and entertaining visual and audio cues to engage the users interest. There is also a contact page for users to submit suggestions or feedback.

Return to table of contents

DESIGN FEATURES.

Header Bar.

This is a simple header displaying the title of the game.

Footer.

The footer has been designed to be informative and simple in it's presentation. It should not detract from the main page content yet provide relevant and helpful information for the user to engage with when required. The links to social media icons are clearly displayed. The icons are animated when the cursor is hovered above to clearly indicate which icon is being engaged by the user. Each link opens the relevant page in a separate tab.

Page Design.

The page design has been specifically created to portray a clean, fun and engaging experience for the user. The page content is presented in a clear and accessible fashion for the user to understand.
Main Page.

Below the navbar is the main game play area. This has the scoreboard clearly defined at the top of the page and the player feedback section immediately below. The game icons are laid out beneath that and they are animated to clearly show the user which one they are engaging with. The rules and how to play the game are in the box below giving the user clear instructions on how to play. This is finished off with a clickable animated icon which enables the user to get in touch with feedback or suggestions.

There are two alternatives to the game screen when the game is either won or lost. The dialogue boxes are coloured appropriately depending on the scenario and the text is either celebratory or comiseratory.

WIN SCREEN

LOSE SCREEN

CONTACT PAGE

This page is clear and simple to use. The design continues with the engaging and fun concepts as used on the main game play page. The page footer has had a link to the home page added for navigation purposes. The button under the form submits the form details.

MESSAGE CONFIRMATION PAGE

This page is clear and simple to use. The design continues with the engaging and fun concepts as used on the main game play page. The information confirms that the user message has been sent and provides a link to return to the main page to continue playing the game.

COLOUR PALETTE.

The colour palette is purposefully simple and clean. It consists of the following six colour choices:

These colours provide a high level of contrast for users with impaired vison, as confirmed in the testing section below. They also add to the overall goal of creating a clear, engaging and fun design ethos. The colors were chosen in conjunction with the background image to present a smooth, related connection across the application. This helps provide consistency to the overall aesthetic flow of the user experience.

Font.
The font used for the page is Amatic SC. It is a simple but effective hand drawn webfont. It was initially designed by Vernon Adams, and concieved of to be used freely across the internet. It features both Latin and Hebrew alphabets. The Latin was initially designed by Vernon Adams. The Hebrew was designed by Ben Nathan, who also revised the Latin design. Thomas Jockin respaced and kerned the whole font.

Return to table of contents

USER STORY.

For the purposes of this story, our 'First time' user will be called 'Bob'. Bob likes playing games of chance.

Bob has looked up the site because he wants to have a go at beating the computer playing the famous game from the tv show 'Big Bang Theory'. Bob has navigated to the home page and is immediately presented with a clean and clear, easy to understand game interface. Bob reads the game play instructions and starts clicking on his chosen game icons. When Bob wins a game of ten rounds he gets a cheery and uplifting text box congratulating him on his win accompanied by a brief winning sound. This encourages Bob to play again.
When Bob loses a game of ten rounds he is presented with a comiseratory text box accompanied by a losing sound and encouraged to play again to see if he can win.
Each time a game is won or lost the game automatically resets after a brief pause.
Bob has some feedback for the game deisgners and clicks on the message icon clearly defined on the game page. He is taken to the message screen. Here Bob is unable to submit his message until he has fully completed all of the fields. This is clearly indicated in a concise and helpful manner. Bob easily fills out the prerequisite information and submits the form. He is immediately informed that his message has been received and provided with a clickable icon that takes Bob back to the game play screen to continue playing.

Returning Users.
The game is designed to be simple and fun in order to encourage users to come back and try their luck as many times as they want.

Return to table of contents

WIREFRAMES.

For the site pages the wireframe preliminary layout designs can be seen below. These were created using Balsamiq:

Main Page

Contact Page

Message Sent Page

Return to table of contents

TESTING.

HTML Testing

The following test results were achieved for the page using the W3C Markup Validation Service

CSS Testing

The following test results were achieved for the page using the W3C CSS Validation Service

Chrome Dev Tools - Lighthouse - Testing

The Chrome dev tool - Lighthouse - Tests the overall performance, Accessibility, Web Development best practices and SEO. The following results were confirmed:

Responsiveness Testing

The following sites were used to test the web applications responsiveness: Am I Responsive and Media Genesis Responsive Design Checker

The 'Am I responsive generator' result image has been used at the start of this readme file. Please see the image at the top for the results. This page focuses on the following image viewport sizes - Desktop 1600x992px scaled down to scale(0.3181) Laptop 1280x802px scaled down to scale(0.277) Tablet 768x1024px scaled down to scale(0.219) Mobile 320x480px scaled down to scale(0.219). The site results indicate good performance on all viewport sizes.

The Media Genesis page gives the option to test the page on several different viewport screen sizes from Desktop 24 inch 1920 x 1200px resolution all the way down to the mobile viewport size of 320 x 480px. The site performed very well on all viewport size options.

Contrast/ Accessibility Testing

The Wave Accessibilty testing tool was used to check to test the page contrast and accessibilty of the application.

The colour contrast was AAA rated.

JavaScript Testing

JS Hint was used to check the quality and functionality of the JavaScript code. No significant issues were recorded and the rest of the feedback was directed at tidying up the syntax.

User Testing

Friends and family were the resource used to extensively test the usability of the web application. All page links and button functionality were tested including ascertaining that all social media links opened in separate tabs and that all icon play buttons were correctly configured and provided the correct feedback to the user, as indicated. The page was also subjected to the peer code review slack channel through Code Institute to be stringently put through it's paces.

Return to table of contents

DEPLOYMENT.

The most recent iteration of the WebLife application has been deployed via Github pages. The following instructions clarify the process.

Log in to GitHub, access the specific GitHub Repository - Rock Paper Scissors Lizard Spock (Hover over this link for the complete repository url)
Click on the 'Settings' icon in the menu below the repository title.
Click on the Pages option in the settings page menu on the left hand side of the screen.
Click on the dropdown button "None" and select 'Master' or 'Main' Branch".
This will cause the page to automatically refresh and a link to the fully deployed site will be displayed towards the top of the page. There may be a brief delay during this process to accomodate Github as it prepares the application for deployment.

Should you wish to 'Fork' or 'Clone' the repository please follow these instructions:

Forking the Repository
Forking enables a third party to create a copy of the repository in order to view and/or make changes without affecting the original.

Log in to GitHub, access the specific GitHub Repository - Rock Paper Scissors Lizard Spock
Towards the top right of the repository page, underneath the user icon you will find and click the "Fork" Button.
You will now have successfully created a copy of the original repository within your GitHub account.

Cloning the Repository
Follow these instructions to create a clone of the repository within your local development environment to make it easier to fix merge conflicts, add or remove files, and push larger commits.

Log in to GitHub, access the specific GitHub Repository - Rock Paper Scissors Lizard Spock
Above the file list on the repository page locate and click the 'Code' button (beside the 'Add file' button)
Copy the provided link depending on your desired option for either 'HTTPS', 'SSH key' or 'GitHub CLI.
Open Git Bash and change the current working directory to the location where you want the cloned directory to be made.
Type git clone, and then paste the specific URL you copied in Step 3.

Return to table of contents

BUGS.

Apart from the usual spelling mistakes and formatting to tidy up, a number of bugs were identified during the testing phase and updated. This site was built from a responsive persepctive from the start (learned from project 1). The main bugs encountered were in the javascript. There was an issue when the sound files would not play when the game was completed. This was resolved by changing the relative path information to get the files to respond. Also, getting the win function to work took some slack help from the code institute channel to solve. Eventually calling the correct functions was the solution to resolving that bug.

I discussion with my mentor I was also challenged to improve the qquality of the codein the script file. I was encouraged to implement arrow functions and also rewrite the changToText function as an object instead using a long chain of IF statements. I also had to reduce duplicated code from within a function to simplify and reduce the amount of code. These challenges were good fun and definitley made me think harder about the code being written.

There will undoubtedly be other issues that I am currently unaware of that will be spotted by wiser heads. It has been a very rewarding process despite the very steep learning curve.

Return to table of contents

FUTURE ASPIRATIONS.

I would eventually like to add functionality for keeping a high score tally of multiple game winners with the number of games won in a row. This would provide additional incentive for users to keep playing.

Return to table of contents

TOOLS USED AND CODING INSPIRATION.

The following tools, pages and tutorials were invaluable in helping me complete this project:

Return to table of contents

code-institute-submissions / rock-paper-scissors-lizard-spock---portfolio-project-2---javascript-essentials Goto Github PK