Whack-A-Marmot

View the live project here.

The application was a great exercise in organising my files and keeping different concerns separate. The use of modules, allowed me to set variables and strings in the constructor.

The reasoning behind this was to prevent string errors, and keep code DRY.

Table of contents

• User Experience

  • Intended Audience
  • User Stories

• Design

  • Wireframes
  • Colour Scheme
  • Typography
  • Imagery

• Features

  • Features of the game
  • Future Implementations
  • Accessibility

• Technologies Used

  • Languages Used
  • Frameworks, Libraries & Programs Used

• Remote & Local Development

  • Remote Deployment
  • Local Deployment
    • How to Fork
    • How to Clone

• Testing

• Credits

  • Code Used
  • Content
  • Media
  • Acknowledgments

User Experience (UX)

The site was designed and developed mobile first.

Marmots in the spring up in the Swiss Alps were the inspiration for this game. The idea was to provide a colourful, visually appealing and stimulating game The colours were chosen to represent spring.

Intended Audience

• Adults

• Children

• User stories

• Client Goals

  • Provide an online that test and improve:
    • motor skills
    • accuracy
    • concentration
    • hand and eye coordination

• First Time Visitor Goals

  • Choose the settings
    • dark or light mode
    • easy or hard play mode
  • Read the game instructions
  • Play the game
  • Beat your previous score

• Return Visitor Goals

  • Improve scores

• Frequent Visitor Goals

  • Compete with other players

Design

Wireframes

Wireframes were created for the site with Figma.

Wireframe for mobile and desktop

To see the full wireframe, view it here.

An additional note regarding the original images for the wireframe.

The initial plan was to use SVG hills. The SVG paths were calculated, a percentage of the length was taken to get the x and y coordinates. Calculation of slope was considered for each marmot angle. This was not feasible at this time, due to SVG paths not resizing to viewport.

This is to be added as a future implementation.

The website consists of the following:

• Start page
• Play page
• A 404 page
• Instructions modal
• Settings modal
• Scoreboard

Colour Scheme

The colour scheme was created using Adobe Color, creating a theme from an image. The colours should emphasise the outdoors and the freshness of spring, which is when the marmots in Switzerland come out of hibernation.

Created colour palette using:

• Adobe Color

Accessibility Concerns

The colour palette was altered to improve accessibility and increase contrast.

Accessibility tested using the Adobe's Accessibility Tools.

Results and contrast improvements suggestions:

Feedback from lighthouse testing raised an issue with accessibility and colour contrast. As a result, the red colour was changed on the button with white font.

Typography

Bangers and Oswald Fonts were chosen from Google Fonts. Fonts were selected to represent fun, playful, clear and easy to read.

References for typography:

When thinking about typography, the type had to suit responsively as well. The fonts had to be also readable on mobile View.

Using Utopia, clamps for fonts and spaces were created. This minimised errors, stopping the fonts from getting bigger at a certain view width and height, or too small, dependent on device view ports.

• min(), max(), and clamp(): three logical CSS functions to use today
• Modern Fluid Typography Using CSS Clamp
• RFS
• Utopia - Responsive font and space sizing

Imagery

Images are located on all pages. At the top of the page, under the navigation, is the header image. All pages have the same thematic layout, and the layout should be consistent on all pages, including the home page.

All images used were downloaded from:

• Adobe Stock

Images match the theme of spring and outdoorsy.

To increase the speed of the website., all images were compressed. Also, I added the lazy-loading attribute to images showing below the fold.

References for images

• An image format for the Web
• A Guide to Responsive Images with Ready-to-Use Templates
  • A copy of the files to create .webp extension images are to be found here.

Icons were used for social links and buttons. The icons used on the site were taken from:

• Font Awesome

Features

Details of each feature are listed under General Features on Each Page.

The website consists of the following features:

• Game page
• Play page
• A 404 page
• Instructions modal
• Settings modal

Start page

The start page consists of the following sections.

• Title
• Three buttons
  • Play
  • Instructions
  • Settings

Play page

The play page consists of the following:

• Image banner at the top of the page
• Multiple images, title and text, alternatively reversing the order

Modals for Instructions & Settings

The instructions modal differs slightly from the settings modal, as it contains:

• A carousel
  • Slider for each page of the instructions

Features of the game

Game

Screenshot of the game view for mobile

Screenshot of the game view for desktop

The game size and the number of marmot holes are dependent on the device size. The game is not suitable to be played on a mobile device in landscape.

Instructions Modal

Screenshot of the instructions modal for mobile

Screenshot of the instructions modal for desktop

The idea was to make the instructions modal not too wordy. I wanted to emphasise the fun of the game, keeping everything simple.

Settings Modal

Screenshot of the settings modal for mobile

Screenshot of the settings modal for desktop

To continue with the theme of fun and simple, the settings also had to echo this.

Scoreboard

Screenshot of the scoreboard for mobile

Screenshot of the scoreboard for desktop

The list could be longer, but wanted the keep only 5 results on the board, as this would ensure that the user would not need to scroll. A note has been added to the Future Implementation, as if the list were to remain short, it should show the top five scores.

Future Implementations

1. Add random username generator
2. Change the scoreboard to a leaderboard
3. Vary speeds with more settings variables
4. Implement more animation
5. Be more precise, differentiate between double click and first clicks
6. Use SVG hills for marmots to pop up from behind
7. Add missed hits

Accessibility

• Use of semantic HTML
• Use of ARIA
• Use of alt attributes
• Use Adobe Color to check colour contrast

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript

Frameworks, Libraries and Programs Used

• Google Fonts
  • Google Fonts was used to import the font to the style.css, which is used on all pages throughout the project.
• Font Awesome
  • Font Awesome was used on all necessary pages throughout the website to add icons for aesthetic and UX purposes.
• Git
  • Git was used for version control by utilising the Gitpod terminal to commit to Git and push to GitHub.
• GitHub
  • GitHub was used to store the project's code after being pushed from Git.
• Gitpod
• Coolors
• Adobe Color
• Adobe Stock
• Adobe Illustrator
• Figma
• Inkscape
• GIMP
• Devtool
  • Firefox
  • Chrome

Remote and Local Deployment

Git was used for version control. Version control was done locally and remotely. For remote version control, GitHub was used. Regular commits were made after each file change.

Remote deployment

GitHub Pages was used to deploy the site remotely.

Screencast of deployment

1. Go to the repository

2. Click the Settings tab

3. Click on Pages in the left-hand menu, under code and automation Screenshot of how to get the Pages section

4. Under Build and deployment > Source, ensure Deploy from a branch is selected Screenshot of source option

5. Under Build and deployment > Branch, select the main branch Screenshot of branch option

6. Click save

7. It may take more than a few minutes, but when the page has been created, you will see the following success message Screenshot of success message

Local Deployment

To contribute or check the code yourself, you can:

• fork the repository
• clone the repository

How to Fork

1. To fork, go the repository
2. Click on the Fork button in the top left corner of the page.
3. Fill in the form with either keep the name or create a new name for the repository

How to Clone

1. To clone on the repository
2. Click on the Code button above the repository files.
3. A drop-down will appear and choose either :
   • HTTP
   • SSH
   • GitHub CLI
4. Go to your terminal and decide where you want to clone the files.
5. Use the copy/paste button and copy it into your terminal
6. You also have the option to download a ZIP file of the code

Testing

The devices selected were:

• Ubuntu
  • Firefox 108 on Ubuntu 22.04.1 LTS
  • Chromium Version 109.0.5414.119 on Ubuntu 22.04.1 LTS
• Mac
  • Safari 16 on macOS Ventura
  • Chrome on macOS Ventura
• Android
  • Chrome Mi Max 3
  • Chrome Xiaomi Mi 9SE

User experience

Testing implemented from User stories

Client Goals Testing

First-Time Visitor Goals

Return Visitor Goals

Frequent Visitor Goals

Bugs and fixes

Not solved

All unsolved bugs are fixes are noted as issues on the repository. Issues are to be found here.

Lighthouse

Validator Testing

• Use W3C Markup Validation Service to validate all HTML pages
• Use W3C CSS Validation Service to validate all stylesheets
  • Error found in the assets/css/abstracts/container.css file:
    • Value Error: with invalid type (width: min(100% - var(--container-padding), var(--container-max-width));) caused from related to the following issue:
    • Please add support for CSS variables ("custom properties"), a widely supported and crucial feature
• Use JSHint Version 2.13.6

Credits

Code Used

All code is also referenced as a comment in stylesheets.

• How to build a modal with JavaScript
• JavaScript Debounce
• Generating number, min and max
• Capitalising first letter
• Horizontal Slide show
• Containers
• Image with text overlay

References & Resources

A list of references used for the site:

• JavaScript Modules
• From "Learn JavaScript by Building 7 Games - Full Course"
  • Code-a-long-sample
• Code with Ania Kubów
• Free Code Camp
• Eloquent Javascript
• Web Dev Simplified
• Wes Bos

Content

The content was short and to the point, and was created by myself.

Media

Acknowledgements

This part of the journey was a tough but immensely rewarding one, and I would like to give a big thanks to my partner, Stefan Tschudi for rallying me, keeping me going with endless cups of tea. Acknowledgements also go to those who took the time to provide great insights and advice

• Rahul Lakhanpal - for keeping me focussed.
• Class Slack Channel, with special thanks to Ger Tobin.