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.
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.
-
Adults
-
Children
-
Client Goals
- Provide an online that test and improve:
- motor skills
- accuracy
- concentration
- hand and eye coordination
- Provide an online that test and improve:
-
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
- Choose the settings
-
Return Visitor Goals
- Improve scores
-
Frequent Visitor Goals
- Compete with other players
Wireframes were created for the site with Figma.
Wireframe for mobile and desktop
Game page for mobile and desktop
Start page - mobile and desktop
Instructions modal for mobile and desktop
Instructions modal - mobile and desktop
Settings modal for mobile and desktop
Settings modal - 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
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:
The colour palette was altered to improve accessibility and increase contrast.
Accessibility tested using the Adobe's Accessibility Tools.
Results and contrast improvements suggestions:
Dark purple & Pale blue
Settings modal - mobile and desktop
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.
Bangers and Oswald Fonts were chosen from Google Fonts. Fonts were selected to represent fun, playful, clear and easy to read.
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
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:
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.
- 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.
- 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:
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
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
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.
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.
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.
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.
- Add random username generator
- Change the scoreboard to a leaderboard
- Vary speeds with more settings variables
- Implement more animation
- Be more precise, differentiate between double click and first clicks
- Use SVG hills for marmots to pop up from behind
- Add missed hits
- Use of semantic HTML
- Use of ARIA
- Use of alt attributes
- Use Adobe Color to check colour contrast
- HTML5
- CSS3
- JavaScript
- 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
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.
GitHub Pages was used to deploy the site remotely.
github-pages_deployment.mov
Screencast of deployment
-
Go to the repository
-
Click the Settings tab
-
Click on Pages in the left-hand menu, under code and automation
Screenshot of how to get the Pages section -
Under Build and deployment > Source, ensure Deploy from a branch is selected
Screenshot of source option -
Under Build and deployment > Branch, select the main branch
Screenshot of branch option -
Click save
-
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
To contribute or check the code yourself, you can:
- fork the repository
- clone the repository
- To fork, go the repository
- Click on the Fork button in the top left corner of the page.
- Fill in the form with either keep the name or create a new name for the repository
- To clone on the repository
- Click on the Code button above the repository files.
- A drop-down will appear and choose either
:
- HTTP
- SSH
- GitHub CLI
- Go to your terminal and decide where you want to clone the files.
- Use the copy/paste button and copy it into your terminal
- You also have the option to download a ZIP file of the code
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
Testing implemented from User stories
| Client goal | Implementation | Tested | Successful |
|---|---|---|---|
| Provide an online that test and improve: motor skills, accuracy, concentration, hand and eye coordination | Yes | Yes |
| First Time Visitor Goals | Implementation | Tested | Successful |
|---|---|---|---|
| Choose the settings | Settings available for to choose between dark and light, easy and difficult | Yes | Yes |
| Read the game instructions | Instructions provided in a modal. | Yes | Yes |
| Play the game | Start game play, by clicking button. Also users can exit with the exit button on the top right | Yes | Yes |
| Beat previous score | Check scoreboard to beat score. | Yes | Yes |
| Return Visitor Goals | Implementation | Tested | Successful |
|---|---|---|---|
| Improve scores | Return to game to see the scoreboard again (stored in localStorage) | Yes | Yes |
| Frequent Visitor Goals | Implementation | Tested | Successful |
|---|---|---|---|
| Other players can add a username | Compare scores in scoreboard | Yes | Yes |
| Bug / Errors | Where / Location site | Browser | Device | Remarks | Mode (light / dark) | Fixed | Solution |
|---|---|---|---|---|---|---|---|
| Left clicking on first instruction page | Instructions | Firefox | PC | When clicking left arrow once on first page, user has to right click twice to get to second page. clicking left arrow twice, clicking right arrow three times to get to second page etc. | No | Specific device or browser issue. Not able to replicate. | |
| Hitting the marmot | Play | Firefox | PC | When holding left mouse button down upon whacking marmot, user drags marmot image away | Yes | Set "draggable" attribute | |
| Top left marmot | Play | Firefox | PC | Body of top left marmot looks cut off. Only head is visible | No | Not a big issue, so not taken as a priority | |
| Refreshing page | Play | Firefox | PC | When refreshing page, game cannot be reset. Previous player name is saved and game cannot be restarted | Yes | Remove function of setting marmot holes on resize. | |
| Dark Mode | Settings | Firefox | PC | Changing to dark mode does not work | Yes | Fix settings error | |
| Difficulty | Settings | Firefox | PC | Changing difficulty does not work | Yes | Fix settings error | |
| See the marmot | Instructions | Chrome | Xiaomi 9 SE | The line "See the marmot" is cut off / not visible | Yes | Make written instructions hidden in mobile | |
| Whack the marmot | Instructions | Chrome | Xiaomi 9 SE | "Marmot" is cut off | Yes | Make written instructions hidden in mobile | |
| How many marmots can you whack | Instructions | Chrome | Xiaomi 9 SE | "Marmots can you whack" is cut off | Yes | Make written instructions hidden in mobile | |
| Dark Mode | Settings | Chrome | Xiaomi 9 SE | Changing to dark mode does not work | Yes | Fix settings error | |
| Difficulty | Settings | Chrome | Xiaomi 9 SE | Changing difficulty does not work | Yes | Fix settings error | |
| Buttons | Settings | Chrome | Xiaomi 9 SE | Black buttons move too far to the right when clicking them | Yes | Change container size on modal | |
| Marmots overlay | Home | Chrome | Xiaomi 9 SE | In some cases the 6 marmots are displayed all over the menu screen. no clue why or how | Yes | Remove function to redraw marmot holes on resize. | |
| Game start | Play | Chrome | Xiaomi 9 SE | Upon game start user has to scroll down a bit. Basically as long as the top line with the URL is high | Yes | Add overflow hidden | |
| Top left marmot | Play | Chrome | Xiaomi 9 SE | Same as above. no neck, no body | No | Not a big issue, so not taken as a priority | |
| Multiple hits | Play | Chrome | Xiaomi 9 SE | It is possible to repeatedly hit the active marmot more than once. Kill count stacks | Yes | Add removeEventListener after score is increased | |
| Marmot hits | Play | Chrome | Xiaomi 9 SE | In some cases the animation upon hit does not show. Kill count still counts | No | The bug seems related to custom cursor as not recognising click event. | |
| Marmot stays up | Play | Chrome | Xiaomi 9 SE | In some cases the marmot that has been hit stays up / comes back up. If this occurs all subsequent hits do not show the animation | No | To be solved at a later date, not a priority | |
| Marmot goes down fast | Play | Chrome | Xiaomi 9 SE | In some cases when user misses marmot it disappears quicker than usual | No | To be solved at a later date, not a priority | |
| Waking the marmots | Load Screen | Firefox | PC | Load Screen message shows only super briefly | No | Set timeout for this to increase loading page time. |
All unsolved bugs are fixes are noted as issues on the repository. Issues are to be found here.
Additional notes from initial submission of project:
| Criterion | Remarks | Fixed | Solution |
|---|---|---|---|
| LO1 1.8 | Difficulty in performing user actions ideally because of inconsistent JS Code | Yes | Tidy Classes. Move the instantiation of classes in playGame.js file. Check logic in classes and fixed issues. |
| LO6 6.2 | User is able to enter invalid or empty data in forms; lack of defensive design | Yes | Add validation message when user enters a name that is less than 4 characters long. |
| LO6 6.3 | Website is not fully functional and doesn't match expected project requirements from the README | Yes | Cleaned the files. Tidied up the classes files. Checked logic in each file. Validated in JSHint. |
| LO6 6.4 | Console error present | Yes | Corrected bad mapping to image file for bullseye. Add clearInterval when exited game during game play. |
| Merit 1.1 | Error when timer runs out. | Yes | Add clearInterval when exited game during game play. |
| Merit 1.3 | Console error on timer | Yes | Add clearInterval when exited game during game play. |
| Merit 6.1 | Error when timer runs out. | Yes | Add clearInterval when exited game during game play. |
Game
Game page in dark mode
- 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
- Value Error: with invalid
type (
- Error found in the assets/css/abstracts/container.css file:
- Use JSHint Version 2.13.6
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
A list of references used for the site:
- JavaScript Modules
- From "Learn JavaScript by Building 7 Games - Full Course"
- Code with Ania Kubów
- Free Code Camp
- Eloquent Javascript
- Web Dev Simplified
- Wes Bos
The content was short and to the point, and was created by myself.
Wireframe
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.
- Rohit Sharma for his feedback and his advice regarding Classes.
- Class Slack Channel, with special thanks to Ger Tobin.