Skip to content

Latest commit

 

History

History
418 lines (265 loc) · 23 KB

README.md

File metadata and controls

418 lines (265 loc) · 23 KB
Raw

Milestone Project 2.

Popping Logo

Image of on different devices

Live Project

Click me for live link.

Repository

Click me for the project repository.

Table of Contents

Contents

User Experience

User Stories

Users

  • As a player, I want the website to load quickly and provide a enjoyable experience.
Feature Action Expected Result Actual Result
Website Load Player opens the website The website loads quickly with no issues Works as expected
  • As a player, I want to be able to visualize the contents of - Demo - so i can understand and interact with the game.
Feature Action Expected Result Actual Result
Demo Button Clicks demo button Play button disappears, a video demonstration shows with controls available Works as expected
  • As a player, I want to have different levels to choose from and be able to select which I want to play.
Feature Action Expected Result Actual Result
Level selected Choose difficulty level Game starts according to level selected Works as expected
  • As a player, I want to be able to check my progress, the correct and incorrect answers ans score during the game.
Feature Action Expected Result Actual Result
Game Page Game start - Mid Game - End Game Clear progress indication throughout the game Works as expected
  • As a player, I want to be able to easily navigate back to the home page after completing the quiz.
Feature Action Expected Result Actual Result
Game ended Game quiz completion A congratulation message, along with the player score a play again button and a home button Works as expected

Business Owner

  • I want to be able to receive feedback from players regarding any issues, or comments about the game.

Future Features

  • Include a timer, increasing the game interactivity and hopefully excitement, with scoring based on their speed.

  • I hope to implement a multiplayer scoreboard, along with players nicknames + pictures or icons.

  • Create a system of goals, where they may earn some sort of badges | inspiring messages or even a new item, icon they can use in game.

Design

Overview

The website consists of three pages home-page, level-page, game-page. The pages are structured in an easy-to-navigate with simple buttons indicating their function allowing visitors to quickly understand the game. The demo button provides a video showing a little demonstration of what the game is and how to play, the play button takes the player, to the levels page with three levels to choose from (easy, medium, hard), upon the player level selection, to the game.

Color Scheme

Bubbles

  • The website uses a palette of colors generated using the Coolors website. It uses a simple color scheme of Persian-pink and rose , Cherry-blossom and Amethyst with pops of dark-blue and red, along with the primary color.

Typography

Google Fonts was used for the following fonts:

  • Bruno Ace Sc : was used for the logo.
  • Ubuntu: was used for the headings, paragraphs and small texts.
  • Sans-serif: used as the fallback font.

Wireframes

wireframes

Features

All Pages Features

Home-Page

  • This page shows an welcome message to the game, along with two button options: A Demo button and a Play button on a vibrant red. On the background, as an overlay it displays different bubbles from random colors.

Home-Page

Demo-Page Play Button Logo
The Demo button once clicked, hides the play button and adds a video demonstration of how to play the game as well as navigate the page. The Play button once clicked will take the user to the Levels page Takes the user to the home page when clicked

Levels-Page

  • This page requests the user to select a game difficulty level. Displaying a container with three buttons, easy, medium, hard, each representing a game level. The page also displays a home and a sound button, in case the player wants to return to the home-page, or simply toggle the sound off.

Levels-Page

Home-btn Sound-btn Easy - Medium - Hard buttons
Takes the player back the the previews page(Home-Page). Pause or play the sound Takes the player to the next page (game page, according to the difficulty level chosen)

The levels page also contains a footer containing social links and a feedback button which will open a modal allowing the player to send me an email message.

Footer Modal
Footer Modal

Game-Page

  • This page also contains the logo, home-btn, sound-btn and footer, the same as levels-page, with the same functionalities. However, now provides a start btn which will start the game, displaying a scoreboard at the top, composed with a questions number indication, a correct and incorrect answers, and a score. Following those it displays the questions, choosing them at random. On the game-area the user it's presented with four buttons, four choices, choosing the right one will display a "correct" sound and a "incorrect" sound for thw wrong answer. incrementing the question indices as well as the score...
Start-btn Options-btns Correct and Incorrect answers
Upon clicking the btn a loading git is displayed to show interactivity, then displays scoreboard along with questions and the options-btn Each as four different choices, being them 4. clicking on the right on will increment the question number as well as correctAnswers Depending on the choice it will activate a different sound conformed

Before game start: Game-Page

After game start: Game-Page

Game-End-Page

  • This page shows a congratulations message to the user along the the total score, and asks for a feedback.

Game-End-Page

404-Page

  • This page shows Error 404 in case there's been some error pulling the questions. And asks the user to go back to the home-page by clicking the button in order to try again.

404-Page

Known Bugs

The only bugs detected were css ones, as there were some contents overflowing, but those were handled on the moment.

Technologies Used

Languages Used

Frameworks Libraries and Programs

  • Google Fonts

    • Two fonts are imported from google fonts.

  • Font awesome

    • I used icons from font awesome on buttons.

  • Git

    • Git was used as a version control in the terminal.

  • Github

    • Github was used to create and store the project repository.

  • Gitpod

    • Gitpod was used to create my files and where I wrote the code.

  • Google Chrome Dev Tools

    • Google Chrome's Dev Tools were used while building the project to test responsiveness and for debugging.

  • Am I Responsive?

    • To show the website image on a range of devices.

  • Lucid

    • Figma was used to help create the initial idea for the project.

  • Image Resizer

    • Image Resizer was used to resize the images, as well as change it's format.

  • TinyPNG

    • TinyPNG was used to compress images, making it smaller to help with loading speed.

  • Coolors

    • Coolors was used to help generate the color palettes used on the project.

  • Pexels

    • Pexels was used to obtain images used on the project.

  • tenor

    • tenor was used to obtain the gif used on the project.

  • FreeConverter

    • FreeConverter was used to convert the sound used on the project to mp3.

  • Microsoft Bing

    • Microsoft Bing was used to obtain some images used on the project.

  • This were the programs i used for testing:

  • WC3 Validator - HTML and CSS files

  • JSHint - JavaScript files

  • Lighthouse - To test the web page, performance, accessibility, best practices and SEO.

Deployment

Github Pages was used to deploy the live website. The instructions to achieve this are below:

  1. Log in (or sign up) to Github.
  2. Find the repository for this project, Bubbles.
  3. Click on the Settings link.
  4. Click on the Pages link in the left hand side navigation bar.
  5. In the Source section, choose main from the drop down select branch menu. Select docs/ from the drop down select folder menu.
  6. Click Save. The live website site is now deployed at the URL showed at the top by Github pages.

How to Fork

Forks are used to propose changes to someone else's project or to use someone else's project as a starting point for your own idea. By forking the 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. To fork the Popping repository:

  1. Log in (or sign up) to Github.
  2. Go to the repository for this project, Bubbles.
  3. Click the Fork button in the top right corner.
  4. You should now have a copy of the original repository in your GitHub account.

How to Clone

To clone the Popping repository:

  1. Log in (or sign up) to GitHub.
  2. Go to the repository for this project, Bubbles.
  3. Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
  4. Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
  5. Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.

Testing

W3C Validator

  • Initial Testing
Overlay-Home-Page Levels Game 404-Page End-Game-Page Style.css
Home-Page Levels Game-Page 404-Page End-Game-Page Css
* Warning about using aria-label on div * Unnecessary use of type attribute for script javascript, and aria-labelledby for empty content * Duplicated ids and empty heading 'h2' * No issues found * No issues found * No issues found
  • Final Testing
Overlay-Home-Page Levels Game 404-Page End-Game-Page Style.css
Home-Page Levels Game-Page 404-Page End-Game-Page Css
* No issues found * No issues found * Warning empty heading, but i want and need that heading to be empty, as i will be adding extra code through game.js * No issues found * No issues found * No issues found

JShint

Script.js Email.js Game.js
Script test Email test Game.js test
* Warning: 2 undefined variables -$- and innerwidth . It kept saying that the jquery symbol was undefined, I did search as to why that could be but couldn't find any reason. * Warnings: 2 undefined variables -$- and emailjs, and 1 unused sendEmail, but sendEmail is link on the html page. * Warning 1 undefined varial the jquery dollar symbol

Lighthouse

Initial Testing:

Overlay-Home-Page Levels Game 404-Page End-Game-Page
Home-Page Levels Game-Page 404-Page End-game
* No main issues.Just the fact that I have some extensions that seem to be affecting the SEO. - Final test to be on a incognito mode, to see if the issue continues. * Extensions issues * Extensions issues * Extensions issues error displayong the performance as it shows this

Final Testing:

Overlay-Home-Page Levels Game 404-Page End-Game-Page
Home-Page Levels Game-Page 404-Page End-Game-Page
* On the img above it worked, but most of times doesn't work like this, or this * same error for the late testings, as i dont't understand because the intial testings worked error * Initial test ok but last test error * Initial test ok but last test error * Initial and last test error

Full Testing

To fully test my website I performed the following testings using a number of browsers (Chrome, Edge, Firefox, Opera).

  • All pages:
Feature Test Performed Expected Result Pass/Fail
The Sites Logo Clicking on the logo link directs the user back to the home page Home page loads Pass
Links Clicking the on the buttons and social links on the footer should direct the user to the desired location User directed to a next page, or a new page, or sound off/on Pass
Custom cursor The cursor displays when hovering over clickable content Bubble cursor displays Pass
Hover button effect Hovering over btns and links or logo The logo when hovered changes the color. The btn display extra borders when hovering over. Level buttons change colors and home and sound btns display a blue border Pass
  • Home Page:
Feature Test Performed Expected Result Pass/Fail
Demo Button Clicked demo btn Play btn disappears and displays a container with a video. The demo btn text turns to close. Pass
Close Button Clicked close btn Play btn shows back again and hides container with video demo Pass
Play Button Clicked play btn User is directed to Levels page Pass
  • Levels Page:
Feature Test Performed Expected Result Pass/Fail
Logo Button Clicked Logo Clicking on the logo link directs the user back to the home page Home page loads
Home Button Clicked home btn Clicking on the logo link directs the user back to the home page Home page loads
Easy Button Clicked level easy btn User is directed to Game page on easy difficulty mode, questions color green. Pass
Medium Button Clicked medium btn User is directed to Game page on medium difficulty mode, questions color yellow. Pass
Hard Button Clicked hard btn User is directed to Game page on hard difficulty mode, questions color red Pass
Sound Button Clicked sound btn User can toggle between sound on or off, displaying the sound on icon or sound off Pass
Feedback Button Clicked feedback/message btn Modal opens up that allows the user to fill in a form with, name, email, and a message, that can then be submitted, via the submit btn to send a message Pass
  • Game Page:
Feature Test Performed Expected Result Pass/Fail
Logo Button Clicked Logo Clicking on the logo link directs the user back to the home page Home page loads
Home Button Clicked home btn Clicking on the logo link directs the user back to the home page Home page loads
Start Button Clicked start btn Game starts, displays the scoreboard, along with the questions. Start button hides Pass
Gameplay Clicked start btn Questions displays, user answers correctly and the score, along with the correct answers will increase, score by 10, correct answers by 1, as well as the question counter, until 10. If answered incorrectly incorrect answers will the increment by 1. On a total of 10 questions game ends. Pass
Sound Button Clicked sound btn User can toggle between sound on or off, displaying the sound on icon or sound off Pass
Feedback Button Clicked feedback/message btn Modal opens up that allows the user to fill in a form with, name, email, and a message, that can then be submitted, via the submit btn to send a message Pass
  • End-Game Page:
Feature Test Performed Expected Result Pass/Fail
Logo Clicked logo The user is directed to the home page Pass
Home Button Clicked home btn User is directed to home page Pass
Feedback Button Clicked feedback/message btn Modal opens up that allows the user to fill in a form with, name, email, and a message, that can then be submitted, via the submit btn to send a message Pass
Play Again btn Clicked play again The user is taken back to the Levels page where it can select the difficulty level it requires ans play again Pass
  • 404 Page:
Feature Test Performed Expected Result Pass/Fail
Logo Clicked logo The user is directed to the home page (to try again, that will probably fix the issue) Pass
Home Button Clicked home btn User is directed to home page Pass
Feedback Button Clicked feedback/message btn Modal opens up that allows the user to fill in a form with, name, email, and a message, that can then be submitted, via the submit btn to send a message Pass

Credits

Content

Code

  • Home Page Overlay Bubbles: Youtube // code used on overlay - home page then created a random color function and applied to it to make more colorful.

  • Fetch data from Json file: Youtube // video used to help me understand and how to pull the json file array to my javascript. Then did i little search on how to convert it to JQuery as i used it to code .

  • Logo Gradient: Youtube - code used on site logo // a hover animation that I found interesting to add, but code: background-clip: text; wasn't working. did i little search and found out why. None compatible with the browser. this one worked thought: -webkit-background-clip: text;

  • Email.js: Code Institute emailJs walkthrough project

Please note this is a personal project. This website is purely for the sake of the developer's portfolio and not for public consumption.

Thank You, for getting this far!

Esmael Pinho 2023