This is a colourful and interactive memory card game featuring fruit emojis.
🍋 🍒 🍐 🍊 🍑 🍓 🍎 🍌
- UX
- Features
- Technologies Used
- Testing
- Deployment
- Credits
The site has three pages, it contains a menu page, a game page and an info page. It's targeted at users of all ages and types.
- As a user of this game site, I want to be able to play a fun game and test my memory.
- As a user of this game site, I want the ability to change the colour theme of the game so it doesn't strain my eyes.
- As a user of this game site, I want the ability to select a difficulty level that suits me best.
- As a user of this game site, I want to be able to submit my high score to the leader board.
- As the site owner, I want to be able to play a fun game and test my memory.
This site is put together with HTML, using the bootstrap framework along with CSS. The game, Interactive elements and Top score leader board are done using JavaScript and jQuery. The leader board is connected to a Firebase real-time database.
The site appears as three pages to the user, technically it's really one page with three sections that collapse away when not needed using bootstrap's collapse component. The Game layout/structure is inspired by PROXX.
Page 1 - Homepage or Main Menu - Game title, Theme and Difficulty settings, Start button. This page links to Page 2 by the start button, and to page 3 by an info Icon button.
Page 2 - Game page - Card game page with timer, score, flips gauge and modals. This page links to Page 1 by a go back Icon button in the lower left-hand corner or an exit button on any of the modals.
Page 3 - How to play / Top Scores - Top scores are on display here. Here is some info on how to play the game and on how the score is calculated. This page links to Page 1 by an X out icon button in the upper right-hand corner.
8 card pairs - Fruit emojis used are 🍋 🍒 🍐 🍊 🍑 🍓 🍎 🍌
Wireframe
The game layout was sketched on pen and paper a few times first before it got prepared in balsamic.
Colours are vibrant and fun by default. Three colour theme options.
-
Colourful theme (default).
Text colour : #4e03e2 (Electric Violet or Ultra Marine)
The background is a CSS gradient image done with a combination of the colours below used on the fruit emojis.
#F82131 (strawberry ), #CFDE0A (lemon), #FC8440 (Orange), #FF9300 (Peach), #449C00 (Pear).
-
Light theme - Light background (#FFFFFF White), Dark text (#000000 Black).
-
Dark theme - Dark background (#000000 Black) , Light text (#FFFFFF White).
Font awesome is used for icons.
Graphics (cards, logo and favicon) used are created by Rudy de Souza, emojis used are sourced from joypixels.com
- "Jockey One" was used for Header (h1,h2 and h3) text elements
- "VT323" was used for all other text.
On slow connections, another font may be visible while the site is loading.
back to contents
- There are three difficulty levels
- There are three theme options
- The game stores your current highest score (Personal Best) in your browser, when you beat that score you can submit your new score to the leader board.
- There is a top 10 leader board of highest scores by all users. This uses the Firebase Realtime Database API, player names and scores are saved in this NoSQL database, the scoreboard is updated on the site in real-time.
- Local Storage API is used for storing and remembering the preferred difficulty level and theme setting when the user returns to the game.
- Game can be paused whilst playing by clicking on the go back icon button in the lower left-hand corner. Continue button resumes play.
- HTML
- CSS
- JavaScript
- Bootstrap
- JQuery
- Firebase
- Fonts : Google Fonts
- Icons : Fontawesome
- IDE: Visual Studio Code (VS Code).
- Version control: Git
- Wireframe: Balsamiq
- Browser Developer tools : Google Chrome for console.logging everything.
- Kanban planner : Github projects.
- Markdown editor: Typora was used when appropriate, VS code editor was used for most updates.
- File renaming utility: PowerRename from PowerToys on Windows 10
- Pomodoro timer : Tomato Clock
- Favicon creator : favicon.io
- Autoprefixer CSS : Autoprefixer
- Auto formatter for HTML, CSS and JS: webformatter
- px to rem convertor : nekoCalc
- JavaScript linter : jshint
- markdown linter : markdownlint extension on VS Code.
- markdown table of contents creator
- site preview tool
- Grammarly
back to contents
I tested the site as I went along, manually testing or using automated online testing tools. I focused on getting the site working on a small mobile phone screen first (iPhone 5 simulation on the Chrome Developer tools), and then subsequently all other screen sizes. In earlier versions of the code, the command console.log was used extensively to monitor if the JavaScript/JQuery was working correctly. I also set the countdown timer to 5 or 10 seconds to save time on testing the restart game functionality.
I used the JQuery commands below in the developer tools console to give myself some shortcuts while testing the game.
$(".card").addClass("visible") // this turns over all the playing cards
$("#modal-you-win-leaderboard").modal("show") // this triggers a high score modal to pop up
$("#modal-you-win-leaderboard").modal("hide") // this hides the you win leaderboard modal
localStorage.clear() // this clears the local storage completely
localStorage.setItem("topScore" , 0) // this resets your topScore to zeroI used the lighthouse tool for performance testing, no major issues found.
There is a generic modal which is displayed differently for three scenarios. Initially, this refactored DRY code had a design flaw in it, that lead to the continue button and restart game button being mixed up. Also, the restart button would make the game go faster (first flagged to me on the peer review channel on slack). This problem was only fully resolved when I made sure the event listeners were only running once and I added an extra button on the modal. So relevant modal buttons are only made visible when needed.
This problem was highlighted to me on the peer review channel on slack, on repeated play the timer would speed up. It would get so bad it was showing minus figures. I since put in a block to stop the timer from going less than zero just in case.
-
In the Firefox browser, some errors appear in the developer tool console in relation to JavaScript script imported from Google firebase. These can be safely ignored as it's a known issue within Google.
-
Site is not responsive landscape mode on mobile devices.
As part of this project, I learned how to use Firebase. I did have a problem getting the orderByChild query command working as I presumed this command ordered the data ascending or descending order. But it wasn't appearing to work. Eventually, I realised, it was working for querying or filtering the relevant data unsorted(Top 10 player scores on the leader board), just that I had to order the data dump myself in a separate process (array sort() method) for it to be sorted properly and then displayed in an ordered Top 10 fashion.
Initially, the input form for receiving players top scores was sending the scores as strings to the firebase database. This lead to a problem with sort ordering the scores in Firebase. I rectified this problem by using parseInt() on the string before it was submitted to the database, this way scores are stored as integers.
While learning and researching JavaScript, I did find it challenging at times when I was looking at super interesting JavaScript commands that turned out to be not compatible with the web browser alone and I would need to learn and use a JavaScript framework like p5 or nodeJS. I plan on researching more on JavaScript frameworks more before deciding which framework to learn next.
When clicking the back button while the game is running, the user is prompted to confirm if they want to Exit or Continue playing. A problem would happen if the timer ran out and the Game over modal appeared at the same time as the Are you sure? modal. To prevent this from happening, I added the ability to pause the timer automatically when the "Are you sure?" modal appears.
For version control, I used the UI on VS Code for making git commits, and command line for branches, Merging was done on the GitHub site. I used branches when I was working on new features or bundles of changes.
Page 1 - Homepage or Main Menu
- Theme and difficulty levels chosen are stored in the browser and are defaulting to values stored in the browser on return visits.
- When theme selection is changed, the appropriate colour theme is displayed.
- When the difficulty selection has changed then the appropriate level is used when playing the card game.
- For all clickable sections the mouse changes to a pointer on desktop viewing. Sections here is the dropdown menus, the Start button and Info Page Button.
- If Javascript is disabled on the browser an Error message appears.
- Page is responsive to screen width in portrait mode
- If you type a invalid webpage address, a 404 error page shows up.
Page 2 - Game page
-
Timer displays the correct time remaining as per difficulty level.
-
Total Score value increments with the appropriate score on the current play, it's also stored in the browser.
-
The Visitor's current highest score (Personal best) is stored in the browser.
-
No of flips value increases each time a card is flipped over.
-
For clickable sections, the desktop mouse changes to a pointer. Seen here on the back button and each playing card.
-
Page is responsive to screen width in portrait mode.
-
Cards are animating and displaying correctly.
-
4 modals are behaving as expected:
1. Game over - triggered when the time has run out. Visitor can Exit or Restart the game. Buttons functioning correctly.
2. Are you sure you want to EXIT? - triggered when the go back button is pressed. Visitor can Exit or Continue playing. The timer is pausing correctly when this modal appears. The timer resumes when the continue button is pressed. Buttons functioning correctly.
3. You Win! - triggered when the visitor completes the game but the score is not higher than the current high score stored in the browser. Visitor can Exit or Restart the game. Buttons functioning correctly.
4. Leader board modal - triggered when the visitor completes the game for the first time or beats a top score they achieved before in their current browser. Visitor can submit their name for the leader board, name cannot be blank. Also, they cannot submit more than once. Visitor can Exit or Restart the game. Buttons functioning correctly.
Page 3 - How to play / Top Scores
- Game instructions are on display.
- Contact details on display and clickable for queries or feedback.
- Top 10 user scores are showing in descending order.
- Scores are refreshing in real-time, dependency on uptime from Google FireBase.
- On the clickable sections the mouse changes to a pointer: The X out button on the top right-hand corner and the email address link.
- Page is responsive to screen width in portrait mode.
For this test, I got a list of 15 most common screen sizes and used http://responsivetesttool.com/ to check responsiveness for each screen size.
The results are below. 14 Passes and 1 Fail.
| Device category | Model | Size Px (%popularity) | Result |
|---|---|---|---|
| Desktop/Laptop | NA | 1366x768 (22.98%) | Pass |
| Desktop/Laptop | NA | 1920x1080 (20.7%) | Pass |
| Desktop/Laptop | NA | 1536x864 (7.92%) | Pass |
| Desktop/Laptop | NA | 1440x900 (7.23%) | Pass |
| Desktop/Laptop | NA | 1280x720 (4.46%) | Pass |
| Mobile Phone | Samsung Galaxy Note 4 | 360x640 (18.7%) | Pass |
| Mobile Phone | Apple iPhone 6 | 375x667 (7.34%) | Pass |
| Mobile Phone | Apple iPhone XR | 414x896 (6.76%) | Pass |
| Mobile Phone | Samsung Galaxy S8 | 360x780 (5.31%) | Pass |
| Mobile Phone | Apple iPhone X | 375x812 (5.01%) | Pass |
| Tablet | Apple iPad | 768x1024 (51.43%) | Pass |
| Tablet | unknown | 1280x800 (7.28%) | Pass |
| Tablet | Samsung Galaxy Tab | 800x1280 (5.26%) | Pass |
| Tablet | Google Nexus 7 | 601x962 (4.32%) | Pass |
| Tablet | unknown | 962x601 (2.99%) | Fail |
no errors. Resource: https://jigsaw.w3.org/css-validator/
no errors in index.html and 404.html . Resource: https://validator.w3.org/
no issues. results below. Resource: https://jshint.com/
Metrics
There are 47 functions in this file.
Function with the largest signature take 2 arguments, while the median is 0.
Largest function has 36 statements in it, while the median is 3.
The most complex function has a cyclomatic complexity value of 4 while the median is 1.I shared the project on the peer-review channel on slack, and also with friends/family. There were several problems highlighted to me which I have since fixed. Such as responsiveness to device screen width size and issues with timer.
I tested and improved accessibility with lighthouse and Firefox developer tools.
| Screen size\Browser | Chrome | Firefox | Edge |
|---|---|---|---|
| Android Mobile phone (Screen width 412px) xs | Pass | Pass | Pass |
| Android Tablet (Screen width 600px) sm | Pass | Pass | Pass |
| Windows laptop (Screen width 2560px) | Pass | Pass | Pass |
-
As a user of this game site, I want to be able to play a fun game and test my memory.
Game is fun to play and a great test of memory skills for the user.
-
As a user of this game site, I want the ability to change the colour theme of the game so it doesn't strain my eyes.
The user can choose one of three theme options. Theme setting is saved and set in the browser as default for return visits.
-
As a user of this game site, I want the ability to select a difficulty level that suits me best.
The user can choose one of three difficulty levels. This level setting is saved and set in the browser as default for return visits.
-
As a user of this game site, I want to be able to submit my high score to the leader board.
On achieving a high score the user can submit their name and have their name appear on the leader board.
-
As the site owner, I want to be able to play a fun game and test my memory.
Game is fun to play and a great test of memory skills for the owner.
back to contents
For easy deployment on GitHub pages, you will need a GitHub user account and possibly a Gitpod user account. If you wish to make changes to this repository, please follow the GitHub steps first.
GitHub is a code hosting platform for version control and collaboration. It's free to enrol for a user account and I would recommend you have one if you wish to deploy this repository and make changes.
When you have a GitHub account you can simply click on the Fork button on the top right corner. This will clone the Tutti-Frutti repository for your GitHub account, then you can make any changes you like.
The site can be edited easily on a Gitpod online workspace, you first register a free user account on http://gitpod.io/, then download the Gitpod extension on your preferred internet browser. On signing up you will be expected to have a GitHub user account.
Once you have the extension on your browser, a green Gitpod button will appear beside this repository in GitHub. For best results fork the repository in your personal account before you open it in Gitpod.
Once you have the completed site in your own repository, you can deploy it to GitHub pages by the following steps.
- On GitHub, go to the completed site's repository.
- Click on settings, on the settings page scroll down the GitHub Pages section.
- Under GitHub pages, Select the appropriate branch or folder the index.html is in.
- Click on save. A message should then appear advising the URL of your deployed site.
If you prefer working on the repository locally on your preferred Desktop IDE, you can clone the repository to your desktop by the following steps.
- Go to the Tutti Frutti github page.
- Above the list of files, click on the code button.
- To clone the repository using HTTPS, under "Clone with HTTPS", click the paste icon. To clone the repository using an SSH key, click Use SSH, then click the paste icon. To clone a repository using GitHub CLI, click Use GitHub CLI, then click the paste icon.
- Open your preferred Terminal interface.
- Change the current working directory to the location where you want the cloned directory.
- Type git clone, then paste the URL you copied earlier above.
- Press Enter to create your local clone.
more detailed instructions available here
You may wish to contribute to this website and have your contribution published, if so, you are welcome to follow these steps below.
- Go to the GitHub website and log in.
- Open https://github.com/kenwals/tutti-frutti
- In the top right-hand corner you will see a fork button, click on this Fork button.
- This will create a copy of the Tutti-Frutti repository in your Github account.
- Once you're finished making changes you can locate the New Pull Request button just above the file listing in the original repository (https://github.com/kenwals/tutti-frutti).
- If your pull request is approved, it will be merged into the master version of the Tutti-Frutti repository at a future date.
more detailed instructions available here
back to contents
Some of the customised code used for the card game in script.js and style.css is derived from a two-part YouTube video called "How to Code a Card Matching Game" published by Web Dev Simplified & PortEXE. Click on the links for the videos.
Graphics used are created by Artist and Graphic Designer Rudy de Souza
Local storage API handling was influenced by this page on MDN
Firebase real-time database code used was based on (and later customised) in the following YouTube videos
-
16.9: Array Functions: sort() - Topics of JavaScript/ES6 (Channel: The coding Train)
-
9.3: Firebase: Retrieving Data - Programming with Text (Channel: The coding Train)
-
9.2: Firebase: Saving Data - Programming with Text (Channel: The coding Train)
-
Firebase Database Querying 101 - The Firebase Database For SQL Developers #3 (Channel: FIREBASE )
-
Common SQL Queries converted for the Firebase Database - The Firebase Database For SQL Developers #4 (Channel: FIREBASE )
-
Connecting Firebase to a Contact Form (Channel: Traversy Media)
-
Aukje's MS02 preparation guide
Emojis used on playing cards are from Joypixels
-
Game layout/structure is inspired by PROXX , more interesting background info here.
-
My mentor Maranatha Ilesanmi.
-
My class tutor Simen Daehlin.
-
Various people at the code institute and on the code institute Slack channel.
-
Velo Coffee Roasters , Barry's Tea and the Radio stations Nova, RTE Gold, BBC2 and BBC6 .
back to contents