{"id":19972463,"url":"https://github.com/traveltimn/simon-game","last_synced_at":"2026-05-01T20:32:28.664Z","repository":{"id":43582554,"uuid":"220851435","full_name":"TravelTimN/simon-game","owner":"TravelTimN","description":"Simon Memory Game in JavaScript","archived":false,"fork":false,"pushed_at":"2025-06-20T10:25:35.000Z","size":525,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-29T14:46:46.752Z","etag":null,"topics":["css","jasmine","jasmine-jquery","javascript","memory-game","simon-game"],"latest_commit_sha":null,"homepage":"https://traveltimn.github.io/simon-game","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TravelTimN.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-11-10T21:07:25.000Z","updated_at":"2025-06-20T10:25:38.000Z","dependencies_parsed_at":"2022-09-04T07:51:58.766Z","dependency_job_id":null,"html_url":"https://github.com/TravelTimN/simon-game","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TravelTimN/simon-game","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TravelTimN%2Fsimon-game","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TravelTimN%2Fsimon-game/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TravelTimN%2Fsimon-game/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TravelTimN%2Fsimon-game/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TravelTimN","download_url":"https://codeload.github.com/TravelTimN/simon-game/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TravelTimN%2Fsimon-game/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32512662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","jasmine","jasmine-jquery","javascript","memory-game","simon-game"],"created_at":"2024-11-13T03:08:18.653Z","updated_at":"2026-05-01T20:32:28.649Z","avatar_url":"https://github.com/TravelTimN.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"10DEC2020 - Update branch from `master` to `main`.\r\n\r\n---\r\n\r\n![Simon Memory Game](assets/img/favicon.png?raw=true \"Simon Memory Game\")\r\n\r\n# [Simon Memory Game](https://traveltimn.github.io/simon-game)\r\n\r\n## Table of Contents\r\n1. [**UX**](#ux)\r\n    - [**User Stories**](#user-stories)\r\n    - [**Design**](#design)\r\n        - [**Framework**](#framework)\r\n        - [**Color Scheme**](#color-scheme)\r\n        - [**Icons**](#icons)\r\n        - [**Typography**](#typography)\r\n    - [**Wireframes**](#wireframes)\r\n\r\n2. [**Features**](#features)\r\n    - [**Existing Features**](#existing-features)\r\n    - [**Features Left to Implement**](#features-left-to-implement)\r\n\r\n3. [**Technologies Used**](#technologies-used)\r\n    - [**Front-End Technologies**](#front-end-technologies)\r\n    - [**Miscellaneous Technologies**](#miscellaneous-technologies)\r\n\r\n4. [**Testing**](#testing)\r\n    - [**Validators**](#validators)\r\n    - [**Compatibility**](#compatibility)\r\n    - [**Known Issues**](#known-issues)\r\n    - [**Automated Testing**](#automated-testing)\r\n\r\n5. [**Deployment**](#deployment)\r\n    - [**Local Deployment**](#local-deployment)\r\n    - [**Remote Deployment**](#remote-deployment)\r\n\r\n6. [**Credits**](#credits)\r\n    - [**Content**](#content)\r\n    - [**Media**](#media)\r\n    - [**Code**](#code)\r\n    - [**Acknowledgements**](#acknowledgements)\r\n\r\n---\r\n\r\n## UX\r\n\r\nThis project is an example project for the **Interactive Front-End** module of the [Code Institute](https://codeinstitute.net/) Full Stack Software Development course. The objective for this milestone project is to \"*build an interactive front-end site that should respond to users' actions, such as a data dashboard, a memory game, or use of an external API such as Google Maps*\".\r\n\r\n### User Stories\r\n\r\n\"**_As a user, I would like to_** _______________\"\r\n\r\n- :white_check_mark: read the instructions on how to play the game.\r\n- :white_check_mark: test my logical memory skills by matching a progressively difficult level of a series of colorful buttons.\r\n- :white_check_mark: play the game using either a mouse, the keyboard, or tapping on a touch screen.\r\n- :white_check_mark: play the game with both visual and audio effects from the buttons and sounds.\r\n- :white_check_mark: be notified when I've made a mistake from the sound of an error klaxon.\r\n- :white_check_mark: continue playing if I've made a mistake, but repeat the previous level a bit slower.\r\n- :white_check_mark: play the game in either standard mode, or strict mode (which ends the game immediately if I get one wrong answer).\r\n- :white_check_mark: restart the game at any point during my turn.\r\n- :white_check_mark: win the game after successfully matching 31 consecutive randomized colors.\r\n- :white_check_mark: hear the winning razz once I've completed all 31 levels successfully.\r\n\r\n### Design\r\n\r\nA standard layout that is fully responsive on mobile devices and larger screens has been utilized. The constant use of responsive CSS sizing elements such as `vw`, `vh`, `%`, and `calc()` helps to ensure the site responds to the appropriate user device.\r\n\r\n#### Framework\r\n\r\nThere was no need to utilize any particular frameworks or libraries for this project, such as the following:\r\n\r\n- Bootstrap / Materialize\r\n- CSS Grid / Flexbox\r\n- jQuery *(exception: jasmine-jquery only for tests)*\r\n\r\n#### Color Scheme\r\n\r\n- ![#008000](https://via.placeholder.com/15/008000/008000) green button\r\n- ![#FF0000](https://via.placeholder.com/15/FF0000/FF0000) red button\r\n- ![#FFFF00](https://via.placeholder.com/15/FFFF00/FFFF00) yellow button\r\n- ![#0000FF](https://via.placeholder.com/15/0000FF/0000FF) blue button\r\n\r\n\r\nAll of these colors are set at `:root` level within my [style.css](assets/css/style.css) file. This also allows me to reuse my colors as a `class` across the site, instead of having to assign the colors each and every time.\r\n\r\n#### Icons\r\n\r\n- [Font Awesome 5.12.1](https://fontawesome.com/)\r\n    - 2 *Font Awesome* icons were used, purely for social media icons on the Info Modal.\r\n        - [GitHub brand](https://fontawesome.com/icons/github-square?style=brands)\r\n        - [Linkedin brand](https://fontawesome.com/icons/linkedin?style=brands)\r\n\r\n#### Typography\r\n\r\n- 5 [Google Fonts](https://fonts.google.com/) were used across the site:\r\n    - [Original Surfer](https://fonts.google.com/specimen/Original+Surfer) : main body text.\r\n    - [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) : button letters (RGBY).\r\n    - [Quantico](https://fonts.google.com/specimen/Quantico) : counter and announcements.\r\n    - [Sarpanch](https://fonts.google.com/specimen/Sarpanch) : game logo text.\r\n    - [Luckiest Guy](https://fonts.google.com/specimen/Luckiest+Guy00) : all modal text.\r\n\r\n### Wireframes\r\n\r\nI built mockup concept wireframes using [Balsamiq Wireframes](https://balsamiq.com/).\r\n- Code Institute have provided all students with free access until the end of 2020.\r\n\r\nMy wireframes for this project can be found in the [**wireframes**](assets/wireframes/) folder.\r\n\r\n- [Wireframe](assets/wireframes/simon-wireframe.bmpr): original `Balsamiq.bmpr` file.\r\n- [Wireframe](assets/wireframes/simon-wireframe.png): visual representation for GitHub.\r\n\r\n![Wireframe](assets/wireframes/simon-wireframe.png/?raw=true)\r\n\r\n##### back to [top](#table-of-contents)\r\n\r\n---\r\n\r\n## Features\r\n\r\nIn accordance to the project brief, I have successfully implemented all of the *required* features, as well as a few additional features to improve user experience!\r\n\r\n### Existing Features\r\n\r\n**JavaScript Memory Game**:\r\n- Build a memory game using JavaScript to execute instructions to perform arithmetic, logic, controlling, and input/output operations to a user.\r\n\r\n**Progressive Difficulty**:\r\n- Players can progress through multiple levels if successfully matching Simon's moves each round. Levels get harder the further you manage to play.\r\n    - *Levels 1-5 are EASY*\r\n    - *Levels 6-13 are MEDIUM*\r\n    - *Levels 14-31 are HARD*\r\n\r\n**Strict Mode**:\r\n- To truly test their memory matching skills, players can choose to play in Strict Mode, but one wrong move will immediately end the game!\r\n\r\n**Restart Game**:\r\n- At any point during their turn, player's can opt to restart the game for a new randomized series of colors.\r\n\r\n**Player Timeout**:\r\n- If the player doesn't make a move within 5 seconds, a klaxon will sound to signify an error. This 5 second timer resets after each move. The level will repeat again at a slower playback speed only if *Strict Mode* is not active.\r\n\r\n**Automatic Console Shut-off**:\r\n- If the player does not interact with the game console for 45 consecutive seconds, the game console will automatically shut itself off. This 45 second timer does not apply when it is Simon's turn; this is to take in consideration when player's are at high levels and have made an error, Simon repeats the round at a slower speed, which nearly exhausts the entire 45 seconds of inactivity.\r\n\r\n**Winning Razz**:\r\n- If the player is successful enough to beat Simon's 31 levels, the traditional winning *'Razz'* will trigger. This is a combination of rapid pulses of the final color, mixed with a round of applause in order from Red, Yellow, Blue, Green on repeat, followed by the losing klaxon to signify the player has won the game!\r\n    - Winning Modal will display length of time it took to beat Simon.\r\n\r\n### Features Left to Implement\r\n\r\n**Leaderboard**:\r\n- Ideally, I'd like to implement a leaderboard of session users that have completed all 31 levels successfully, which can be displayed to anybody else.\r\n\r\n##### back to [top](#table-of-contents)\r\n\r\n---\r\n\r\n## Technologies Used\r\n\r\n### Front-End Technologies\r\n\r\n- ![HTML5](https://img.shields.io/static/v1?label=HTML\u0026message=5\u0026color=E34F26\u0026logo=html5\u0026logoColor=ffffff)\r\n    - [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5) - Used as the base for markup text.\r\n- ![CSS3](https://img.shields.io/static/v1?label=CSS\u0026message=3\u0026color=1572B6\u0026logo=css3\u0026logoColor=ffffff)\r\n    - [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3) - Used as the base for cascading styles.\r\n- ![JavaScript](https://img.shields.io/static/v1?label=JavaScript\u0026message=ES6\u0026color=F7DF1E\u0026logo=javascript\u0026logoColor=ffffff)\r\n    - [JavaScript ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript) - Used as the base for game interaction.\r\n- ![Jasmine](https://img.shields.io/static/v1?label=Jasmine\u0026message=3.5.0\u0026color=8A4182)\r\n    - [Jasmine](https://jasmine.github.io/) - Used for Test-Driven Development (TDD).\r\n- ![jasmine-jquery](https://img.shields.io/static/v1?label=jasmine-jquery\u0026message=2.1.1\u0026color=535B9F)\r\n    - [jasmine-jquery](https://www.npmjs.com/package/jasmine-jquery) - Used to simplify some of the automated Jasmine tests.\r\n\r\n### Miscellaneous Technologies\r\n\r\n- ![Visual Studio Code](https://img.shields.io/static/v1?label=VS%20Code\u0026message=1.42.1\u0026color=007ACC\u0026logo=visual%20studio%20code\u0026logoColor=ffffff)\r\n    - [VS Code](https://code.visualstudio.com/) - Used as my primary IDE for developing projects.\r\n- ![GitHub](https://img.shields.io/static/v1?label=GitHub\u0026message=TravelTimN\u0026color=181717\u0026logo=github\u0026logoColor=ffffff)\r\n    - [GitHub](https://github.com/) - Used as remote storage of my projects online.\r\n- ![Balsamiq Wireframes](https://img.shields.io/static/v1?label=Balsamiq\u0026message=3.5.17\u0026color=CC0200)\r\n    - [Balsamiq](https://balsamiq.com/) - Used to bring my wireframes to life.\r\n- ![Audacity](https://img.shields.io/static/v1?label=Audacity\u0026message=2.0.6\u0026color=0000C0)\r\n    - [Audacity](http://audacity.sourceforge.net/) - Used to record my own audio files.\r\n\r\n##### back to [top](#table-of-contents)\r\n\r\n---\r\n\r\n## Testing\r\n\r\nA thorough mix of automated and manual testing have gone into building the project. In addition to tests, I have validated all files against online validation sites, and checked compatibilities across various modern browsers and devices.\r\n\r\n### Validators\r\n\r\n**HTML**\r\n- [W3C HTML Validator](https://validator.w3.org)\r\n    - Document checking completed. No errors or warnings to show.\r\n\r\n**CSS**\r\n- [W3C CSS Validator](https://jigsaw.w3.org/css-validator/)\r\n    - The W3C Jigsaw validator does not yet recognize root variables, and therefore shows 110 **Parse** and **Value** **Errors**. These are used to set/use global CSS variables.\r\n        - `:root`\r\n        - `var(--foo)`\r\n    - I also received 2 **Warnings**:\r\n        - Imported style sheets are not checked in direct input and file upload modes.\r\n        - `-webkit-tap-highlight-color` is an unknown vendor extension.\r\n\r\n**JavaScript**\r\n- [JShint](https://jshint.com/)\r\n    - File: [script.js](assets/js/script.js)\r\n        - METRICS:\r\n            - There are **57** functions in this file.\r\n            - Function with the largest signature take **1** arguments, while the median is **0**.\r\n            - Largest function has **21** statements in it, while the median is **3**.\r\n            - The most complex function has a cyclomatic complexity value of **12** while the median is **1**.\r\n        - UNDEFINED VARIABLE:\r\n            - `KeyboardEvent`\r\n\r\n    - File: [simon-tests.js](testing/automated/specs/simon-tests.js)\r\n        - METRICS:\r\n            - There are **91** functions in this file.\r\n            - Function with the largest signature take **0** arguments, while the median is **0**.\r\n            - Largest function has **16** statements in it, while the median is **3**.\r\n            - The most complex function has a cyclomatic complexity value of **2** while the median is **1**.\r\n        - UNDEFINED VARIABLES:\r\n            - `describe`\r\n            - `beforeEach`\r\n            - `it`\r\n            - `expect`\r\n            - `spyOn`\r\n            - `jasmine`\r\n            - `method`\r\n            - `$`\r\n- [Esprima](https://esprima.org/demo/validate.html)\r\n    - Code is syntactically valid.\r\n\r\n### Compatibility\r\n\r\nFull details about compatibility tests can be found in my [testing folder](testing/), which includes results from Chrome's DevTools Audit report as well.\r\n\r\nTo ensure a broad range of users can successfully use the site, I tested it across the 6 major browsers in both desktop and mobile configuration.\r\n\r\n- **Chrome** (*v.80.0.3987.116*)\r\n- **Firefox** (*v.74.0b5* - *Developer Edition*)\r\n- **Edge** (*v.80.0.361.56*)\r\n- **Safari** (*v.12.1.2*)\r\n- **Opera** (*v.62.0.3331.99*)\r\n- **Internet Explorer** (*v.11.885.17134.0*)\r\n\r\nI have also created a testing matrix ([raw Excel file here](testing/manual/testing-simon-matrix.xlsx)).\r\n\r\n**Testing Matrix**\r\n\r\n![Testing Matrix](testing/manual/testing-simon-matrix.png?raw=true \"Testing Simon Matrix\")\r\n\r\n**Chrome's DevTools Audit Report**\r\n\r\n| Performance | Accessibility | Best Practices | SEO | PWA |\r\n| :---: | :---: | :---: | :---: | :---: |\r\n| 98% | 100% | 100% | 100% | - |\r\n\r\n![Chrome DevTools Audit Report](testing/manual/devtools-audit.png?raw=true \"Chrome Audit Report\")\r\n\r\n### Known Issues\r\n\r\n![GitHub closed issues](https://img.shields.io/github/issues-closed/traveltimn/simon-game)\r\n\r\nWhile passing my code through the online validators, I encountered one questionable issue. I opened an *Issue* on GitHub so I could revisit this problem and resolve it later.\r\n\r\n- [KeyboardEvent.keyCode depreciated](https://github.com/TravelTimN/simon-game/issues/1)\r\n    - This was fixed and pushed with [commit a6eab2a](https://github.com/TravelTimN/simon-game/commit/a6eab2aae265c7248225227dfaaf15050112a751).\r\n\r\n### Automated Testing\r\n\r\nI used [Jasmine 3.5.0](https://jasmine.github.io/) in conjunction with [jasmine-jquery 2.1.1](https://www.npmjs.com/package/jasmine-jquery) to build all automated tests (test-driven development). These tests can be found in the [testing/automated](testing/automated/) folder.\r\n\r\nThere are **59 tests** in my specs, all successfully passing, with **0 failures**.\r\n\r\n![Jasmine Spec Results](testing/automated/jasmine-spec-results.png?raw=true \"Jasmine Spec Results\")\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003eCLICK HERE\u003c/b\u003e to see tests on the \u003cb\u003ePower Button\u003c/b\u003e\u003c/summary\u003e\r\n\r\n- should exist\r\n- should be *'off'* by default\r\n- should not trigger Simon's turn *(if power=off)*\r\n- should trigger the **strictButton** to be *'false'* *(during power off)*\r\n- should call the `disablePlayer()` function *(during power off)*\r\n- should call the `disableStart()` function after 500ms *(during power off)*\r\n- should call the `disableStrict()` function after 500ms *(during power off)*\r\n- should call the `disableColors()` function after 500ms *(during power off)*\r\n- should clear the **gameSpeed interval** after 500ms *(during power off)*\r\n- should clear the **playerTimer timeout** after 500ms *(during power off)*\r\n- should trigger the **game console** to turn *'on'* if clicked\r\n- should call the `enableStart()` function *(during power on)*\r\n- should call the `enableStrict()` function *(during power on)*\r\n- should call the `inactiveGame()` function *(during power on)*\r\n- should turn the **Level Counter** *'on'* *(during power on)*\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003eCLICK HERE\u003c/b\u003e to see tests on the \u003cb\u003eStart Button\u003c/b\u003e\u003c/summary\u003e\r\n\r\n- should exist\r\n- should be *'disabled'* *(if power=off)*\r\n- should have a **default** cursor *(if power=off)*\r\n- should be *'enabled'* *(if power=on)*\r\n- should have a **pointer** cursor *(if power=on)*\r\n- should call the `enablePlay()` function if clicked\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003eCLICK HERE\u003c/b\u003e to see tests on the \u003cb\u003eStrict Button\u003c/b\u003e\u003c/summary\u003e\r\n\r\n- should exist\r\n- should be *'disabled'* *(if power=off)*\r\n- should have a **default** cursor *(if power=off)*\r\n- should be *'enabled'* *(if power=on)*\r\n- should have a **pointer** cursor *(if power=on)*\r\n- should end the game if *'enabled'* and player is **incorrect**\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003eCLICK HERE\u003c/b\u003e to see tests on the \u003cb\u003eLevel Counter\u003c/b\u003e\u003c/summary\u003e\r\n\r\n- should exist\r\n- should show **ON** when the game is powered *'on'*\r\n- should show **01** when the game *'starts'*\r\n- should show **NO** if a player is *'incorrect'*\r\n- should show **13** when a player reaches the *'fastest'* mode\r\n- should show **WIN** if a player completes all *'31 levels'*\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003eCLICK HERE\u003c/b\u003e to see tests on the \u003cb\u003eGreen Button\u003c/b\u003e\u003c/summary\u003e\r\n\r\n- should exist\r\n- should *not* be *'enabled'* if the `disablePlayer()` function is called\r\n- should call the `pushButton()` function if clicked during the `enablePlayer()` function\r\n- should have class **active** if the `enableColors()` function is called\r\n- should *not* have class **active** if the `disableColors()` function is called\r\n- should play the **greenAudio** audio file if player **isCorrect**\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003eCLICK HERE\u003c/b\u003e to see tests on the \u003cb\u003eRed Button\u003c/b\u003e\u003c/summary\u003e\r\n\r\n- should exist\r\n- should *not* be *'enabled'* if the `disablePlayer()` function is called\r\n- should call the `pushButton()` function if clicked during the `enablePlayer()` function\r\n- should have class **active** if the `enableColors()` function is called\r\n- should *not* have class **active** if the `disableColors()` function is called\r\n- should play the **redAudio** audio file if player **isCorrect**\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003eCLICK HERE\u003c/b\u003e to see tests on the \u003cb\u003eYellow Button\u003c/b\u003e\u003c/summary\u003e\r\n\r\n- should exist\r\n- should *not* be *'enabled'* if the `disablePlayer()` function is called\r\n- should call the `pushButton()` function if clicked during the `enablePlayer()` function\r\n- should have class **active** if the `enableColors()` function is called\r\n- should *not* have class **active** if the `disableColors()` function is called\r\n- should play the **yellowAudio** audio file if player **isCorrect**\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003eCLICK HERE\u003c/b\u003e to see tests on the \u003cb\u003eBlue Button\u003c/b\u003e\u003c/summary\u003e\r\n\r\n- should exist\r\n- should *not* be *'enabled'* if the `disablePlayer()` function is called\r\n- should call the `pushButton()` function if clicked during the `enablePlayer()` function\r\n- should have class **active** if the `enableColors()` function is called\r\n- should *not* have class **active** if the `disableColors()` function is called\r\n- should play the **blueAudio** audio file if player **isCorrect**\r\n\r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n\u003csummary\u003e\u003cb\u003eCLICK HERE\u003c/b\u003e to see tests on the \u003cb\u003e'Lose' audio file\u003c/b\u003e\u003c/summary\u003e\r\n\r\n- should exist\r\n- should play the **lose** audio file if player **is not correct**\r\n\r\n\u003c/details\u003e\r\n\r\n##### back to [top](#table-of-contents)\r\n\r\n---\r\n\r\n## Deployment\r\n\r\nMy [simon-game repository](https://github.com/TravelTimN/simon-game) was developed locally using **VS Code**, and all commits were pushed to **GitHub** using **Git**.\r\n\r\n### Local Deployment\r\n\r\nIn order to run this project locally on your own system, you will need the following installed (as a bare minimum):\r\n\r\n- [GIT](https://www.atlassian.com/git/tutorials/install-git) for cloning and version control.\r\n- [Microsoft Visual Studio Code](https://code.visualstudio.com) (or any suitable IDE) to develop your project.\r\n\r\nNext, to proceed with local deployment, you can...\r\n\r\nEITHER:\r\n- **Download** this GitHub repository\r\n    - by clicking the green \"*Clone or download*\" button above,\r\n    - select *Download Zip*,\r\n    - this will download the project as a zip-file (*remember to unzip it first*).\r\n\r\nOR:\r\n- **Clone** this GitHub repository\r\n    - by entering the following command into the Git CLI terminal:\r\n        - `git clone https://github.com/TravelTimN/simon-game.git`\r\n    - [Troubleshooting for **git cloning**](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository)\r\n\r\nCongratulations! Your project should be completely setup and ready for local development! :tada:\r\n\r\n### Remote Deployment\r\n\r\nThis site was deployed using [GitHub Pages](https://pages.github.com/) using the **main branch**.\r\n\r\nDeployed Site:\r\n- [https://traveltimn.github.io/simon-game](https://traveltimn.github.io/simon-game)\r\n\r\nOnce you have the project setup locally, you can proceed to deploy it remotely with the following steps:\r\n\r\n1. Navigate to your GitHub repository:\r\n    - `https://github.com/USERNAME/REPO`\r\n2. Click on the **Settings** tab at the top:\r\n    - `https://github.com/USERNAME/REPO/settings`\r\n3. Scroll down on that page to the **GitHub Pages** section.\r\n4. The first drop-down field should be **Source** with *None* preselected.\r\n5. Select **main branch** from the list.\r\n6. The page should refresh.\r\n7. Scroll back down to the **GitHub Pages** section.\r\n8. You should now have a deployed link:\r\n    - `https://USERNAME.github.io/REPO`\r\n\r\n**IMPORTANT NOTE**:\r\n- Please allow a few minutes to pass before opening your newly deployed link! Clicking this link too quickly may result in a failure to build the site, causing an Error 404 page instead.\r\n\r\nCongratulations! Your project should be deployed successfully on GitHub Pages! :tada:\r\n\r\n##### back to [top](#table-of-contents)\r\n\r\n---\r\n\r\n## Credits\r\n\r\n### Content\r\n\r\n- [WaitingForFriday](https://www.waitingforfriday.com/?p=586) - Reverse Engineering a Simon Game. I wanted to keep the game as real to the original as possible.\r\n- *\"[How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/)\"* by Chris Beams *(as recommended by Code Institute assessors)*.\r\n\r\n### Media\r\n\r\n- [Szynalski](https://www.szynalski.com/tone-generator/) - Online Tone Generator to create all sounds.\r\n- [marcgg](https://marcgg.com/blog/2016/11/01/javascript-audio) - Generate sounds programmatically with JavaScript.\r\n- [TinyPNG](https://tinypng.com/) - Online Image Compressor.\r\n- [Shields.io](https://shields.io) - Markdown badges for README.\r\n\r\nAll audio files were created by me. These files are not to be used without proper attribution, acknowledgment, and credit to this repository. You must specify that audio files were obtained from my repository, for example:\r\n\r\n\u003e \"*Audio files were obtained with approval from [https://github.com/TravelTimN/simon-game](https://github.com/TravelTimN/simon-game)*\"\r\n\r\nYou are, however, welcome to generate your own audio files using the same methods and tools that I used, but the use of my files should be attributed if you use them for your own project(s).\r\n\r\n### Code\r\n\r\n- [Jasmine QRG](https://github.com/TravelTimN/ci-ifd-lead/blob/main/week5-jasmine/jasmine.md) - My Quick Reference Guide as CI IFD_lead.\r\n- [Jasmine Cheatsheet](https://devhints.io/jasmine) - A helpful Jasmine cheatsheet.\r\n- [Jasmine 'setFixtures'](https://lostechies.com/derickbailey/2011/10/14/quick-hack-to-work-around-jasmine-jquery-fixture-limitations/) - How to use `setFixtures` in Jasmine.\r\n- [Jasmine 'spyOn'](https://stackoverflow.com/a/9511646) - How to use `spyOn` in Jasmine.\r\n- [Jasmine 'createSpy' + 'createSpyObj'](https://scriptverse.academy/tutorials/jasmine-createspy-createspyobj.html) - How to use `createSpy` and `createSpyObj` in Jasmine.\r\n- [Jasmine 'timeouts' + 'intervals'](https://stackoverflow.com/a/50883535) - How to use `set`||`clear` + `Timeout`||`Interval` in Jasmine.\r\n- [Jasmine 'timeouts' + 'intervals'](https://makandracards.com/makandra/32477-testing-settimeout-and-setinterval-with-jasmine) - How to use `set`||`clear` + `Timeout`||`Interval` in Jasmine.\r\n- [Jasmine 'addEventListener'](https://stackoverflow.com/a/32576013) - How to use `addEventListener` in Jasmine.\r\n- [Jasmine 'removeEventListener'](https://stackoverflow.com/questions/43489131/jasmine-test-removeeventlistener) - How to use `removeEventListener` in Jasmine.\r\n- [Jasmine audio files](https://stackoverflow.com/questions/53900671/testing-htmlmediaelement-play-in-angular-7-jasmine-karma-chrome) - How to test 'audio files' in Jasmine.\r\n\r\n### Acknowledgements\r\n\r\n- [Chris Quinn](https://github.com/10xOXR) - My accountability partner on all projects.\r\n\r\n##### back to [top](#table-of-contents)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftraveltimn%2Fsimon-game","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftraveltimn%2Fsimon-game","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftraveltimn%2Fsimon-game/lists"}