2nd milestone project for CodeInstitute course. This is focused on HTML, CSS and JS. Subject of the project is based on the Ai Project from the Primate Research Institute in Kyoto.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Below you can see a few screenshots of the finished project.
Intro during first page visit:
Game page after intro:
History page without game history:
Game page after game is started:
Daily history with sample data:
Weekly history with sample data:
Monthly history with sample data:
- Bootstrap 4.6 - Used to assist responsiveness and streamline the positioning & styling of the site.
- Gitpod / Gitpod Chrome extension - Used to develop the site and push the project to Github.
- FontAwesome - Used to add icons for social media links.
- GitHub - Used to host the project during and after development.
- MockFlow - Used to set up the wireframes at the start of the dev cycle.
- favicon.io - Used to generate the favicon files.
- Chart.js - Used to create the charts for the history tab.
- Intro.js - Used to add an easily understandable introduction to the page.
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the GitHub Repository.
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- On the left hand side, click the "Pages" section.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- Click "Save".
- The page will automatically refresh.
- Locate the now published site link in the Green box on the top part of the page.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository.
- At the top right of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository.
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter. Your local clone will be created.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.
All wireframes are in a single file and can be found here.
- As a new user, I want to easily understand the purpose of the site.
- As a new user, I want to be able to easily navigate the site and access the content it provides.
- As a returning user, I want to easily return to where I left off previously.
- As a returning user, I want to easily check my progress so far.
- As a returning user, I want the possibility of accessing my previous data on new devices.
0.0.x Edits are reserved for minor unplanned edits.
0.x.0 Edits are reserved for planned milestones.
x.0.0 Edits are reserved for major milestones explained below.
0.1.0: Project inception: Files are created, basic file tree is in place, README and license are initialized.
0.2.0: Basic usage: Basic HTML and CSS are up and running on PC screens without major issues.
0.3.0: Basic responsiveness: Page is responsive for all screen sizes without major issues.
1.0.0: Basic javascript: Basic javascript is up and running, completing minimum goals of the project.
2.0.0: Save state: Added usage of local storage and save export.
3.0.0: More options: expansion on 2.0.0 by adding options on page themes.
See the open issues for a list of proposed features (and known issues).
See the closed issues for a list of the past issues.
Notable past issues:
- When testing the collision detection script initially, it would infinitely loop around 20-25% of the time due to incorrect variable manipulation turning integers into strings while checking overlap.
- While the initial plan was to use cookies to save data, I decided to move to local storage instead, at the suggestion of my mentor.
- Initial feedback from friends was heavily focused on needing an introduction/tutorial of the page, as the purpose/navigation wasn't easily figured out, requiring the unplanned use of Intro.js.
- As the historical data is stored as a string in local storage, converting it to specific days/months was easy, but sorting by week required a more complex solution of changing the string to a date object and then checking for specific weekdays.
- Importing data worked smoothly once I figured out how to copy variable data, but due to how I set up the function calls, if there was data saved locally for the current date, while also importing data for the current date, the data would be added together giving an incorrect result.
As I'm still learning about Github while working on these projects, the features I started using more recently are projects and releases.
During the initial planning phase, I had the idea of using cookies to keep track of past activity/records, and preferred theme, but my mentor suggested using localStorage instead.
As I had no backend information on either option, I went with the suggestion and started planning for it while working on the html & javascript.
At some point I got concerned about storage limitation so I ran some tests, and here are the results:
Based on the results, I can reasonably assume that if someone plays 1000 times, every single day, I can store upwards of 722 days of data.
Even after the exact syntax of the localStorage has changed, I would still estimate the browser would have roughly 500 days worth of space.
The initial plan was to use a canvas as a game area, however it quickly became clear that hooking event listeners to auto-generated objects would require a lot of effort, so I changed my focus to SVG instead.
As the first part of validation, I decided to validate the CSS files using jigsaw, as any potential errors would be quick and easy to fix.
Both CSS files came back clean without any errors.
style.css:
themes.css:
Moving on, I ran my html through the markup validator by opening my page and copying the html code, as some of it is applied by javascript.
I used the game code as a first test, which unfortunately returned the same code 4 times, along with a warning which can be seen below.
After fixing the aforementioned errors, All that was left was the warning, which didn't affect the page in its current state.
putting the history code through the validator gave the same result, as the core html is largely the same across both pages.
Game code:
History code:
Lastly, there's the javascript code. For this I used JSHint to validate the code.
After removing any mention of ES6 features, and letting JSHint assume jQuery was being used, I'm left with 24 warnings and 2 undefined variables.
The variables were actually native chartJS and introJS variables, so these can be ignored.
The most common issue was missing semicolons, which are fixed very easily.
This leaves me with 3 warnings: Redefining "history", a "for in" not being wrapped in an if statement, and a misleading line break.
Until now I was unaware "history" was a reserved word in javascript, but this is an easy fix: change all mentions of "history" to "hist".
Wrapping the for loop in an if statement seemed kind of pointless, so I instead replaced it with a forEach.
Lastly, I'm leaving the misleading line break in, since I broke the line in 2 on purpose, to prevent it from becoming too long.
You can see the result below.
- I want to easily understand the purpose of the site
In order to make sure the purpose of the site is clear when opening the page, A simple site introduction has been implemented that will automatically launch when the site is opened.
- I want to be able to easily navigate the site and access the content it provides
The site content is spread across 2 pages with very minimal navigational elements as a result.
All buttons have appropriate text content and have a clear purpose.
Every button has a size that makes it easy to both click on with a mouse, or tap with a finger in the case of a mobile device/touch screen functionality.
- I want to easily return to where I left off previously
At the end of every session, and at specific moments while navigating the site, current progress is saved in localstorage and is loaded again every time the site is opened.
- I want to easily check my progress so far
The site contains a history tab, where the previously achieved progress can be viewed in an easy to read format.
- I want the possibility of accessing my previous data on new devices
As the current progress is saved in the browser's local storage, progress is limited to only that specific browser, on that specific device.
In order to facilitate cross-platform and cross-browser progress, it is possible to extract the progress through the site's export function, and import it into the preferred device/browser.
As the functional testing section is quite expansive, it has been given its own file here.
As a few edits have been made to the javascript code during functional testing, it has been put through JSHint again, and no new errors have been added.
- Wave accessibility test
The first test using Wave pointed out the footer links were missing screen reader labels.
After Adding the aria-labels, the only issue is the built-in low contrast issue from introJS.
- Websiteplanet responsiveness test
The first test using website Planet made it clear how limited the responsiveness of the page is.
Further investigation showed that any screen with a width of less than 445 pixels would have issues with the buttons in the header.
After adding more responsiveness to the header, it is now responsive for screen widths of 359px and up.
At this point I tested the site on the most common web browsers:
Opera
Opera GX
Google Chrome
Microsoft Edge
Brave
Lastly, after all the modifications made to the code, I ran all HTML, CSS and javascript through another validation check, which they all passed.
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Project Link: https://github.com/lavadax/MS2-Monkey-Brain
- github.com/othneildrew: for providing the readme template.
- github.com/Code-Institute-Solutions: for filling in gaps in the readme template.
- github.com/lavadax: overall styling from first milestone project used as a template for current project.
- w3schools.com: for clarifying various concerns regarding html, css and javascript syntax.
- w3schools.com - svg: for instructions on how to use an SVG and draw on it.
- riptutorial.com: for showcasing SVG a bit more, and to fill in gaps of my knowledge after going through w3schools.
- stackoverflow.com - localstorage: for space limitations on localStorage.
- stackoverflow.com - js var clipboard: for the basis of the export function.
- dev.to/zigabrencic: for the localStorage check.
- jigsaw.w3.org: for validating css files.
- validator.w3.org: for validating html files.
- wave accessibility test: for accessibility testing.
- Website planet responsiveness test: for responsiveness testing.