Pattern

Second Milestone Project for the Web Development course offered by Code Institute. A simple memory game coded with JavaScript.

Table of Contents

1. UX
   • Project Goals
   • User Goals
   • User Stories
   • Design Choices
2. Planning
   • Wireframes
3. Future Additions
4. Testing
   • Bugfixes
5. Technologies Used
6. Deployment
7. Credit

UX

Project Goals

This is a simple pattern game in which a pattern flashes across 4 bottons on the screen, which the player must correctly replicate. The length of the pattern and the speed at which the pattern flashes increases as time goes on. If the player does not input the correct sequence, the game ends and they must start over.

User Goals

• Simple design.
• Visually appealing.
• Interactive controls.
• Intuitive gameplay.

User Stories

• As a user, I want a functioning game interface.
• As a user, I want an intuitive game interface.
• As a user, I want a game interface that's easy to look at.
• As a user, I want a game whose rules are easy to understand.
• As a user, I want a clear indication of when I have made a mistake.
• As a user, I want a way to track my longest run.

Design Choices

Interface

Pattern is built as a simple one-page website consisting of 4 game buttons of different colours and a start button, as well as a high score display and longest pattern display.

The site shifts to accommodate several screen sizes while keeping the same basic layout.

When the player starts the game, the start button is removed, and a pattern flashes on the screen.

Once a pattern is finished, the player must press the buttons in the order displayed. If the player does not do so, the game ends, and a popup on the screen informs the player of this.

On smaller screens, the buttons shift to a more vertical layout.

(I do not possess a screen small enough to get a mobile snapshot of the game over screen, unfortunately.)

Colours

• #FF0000 is used for the red button.
• #FFFF00 is used for the yellow button.
• #1B1BF7 is used for the blue button.
• #008000 is used for the green button.
• #808085 is used for the game start button.

Planning

Wireframes

I have used MS Paint to sketch out a basic wireframe for the site:

Future Additions

• A way to change the effective difficulty (speed of flashes and time between flashes)
• A way to adjust the minimum and maximum pattern length
• Possible colour changes for the buttons

Testing

The site has been tested extensively to ensure the best user experience across multiple screen sizes.

The developer used W3C CSS Validation Service and W3C Markup Validation Service to check the validity of the HTML and CSS, and JSHint to check the validity of the JavaScript. Jest was also used to test core functionalities in and spot errors in the JavaScript code, along with manual testing; script.test.js contains the tests written for this purpose, and Jest is installed so that these tests can still be run.

Testing Process

In order to make sure the site renders acceptably across several screen sizes, I made liberal use of the DevTools offered by Google Chrome, as well as testing load times, mobile and desktop, with the Lighthouse Chrome extension.

When writing my JavaScript, I used a mix of manual and automated testing; I wrote sections of code and wrote tests for their functionality. This helped me in troubleshooting parts of the code that didn't work as expected. I also manually tested the site to catch errors that I would have missed with pure automated testing. For instance, I discovered the second problem in the Bugfixes section by manually testing the site (this can be attributed to a poor test being written in the first place; this has since been corrected).

User Stories Testing

As a user of the site, I want:

• an intuitive game interface.
  • Ensured that buttons respond to being clicked.
  • Ensured that buttons can only be pressed when the pattern isn't being displayed.
• a game interface that's easy to look at.
  • Subjective, but I believe the simple multicoloured buttons set against a white background is easy to look at and keeps player attention on the game itself.
• a game whose rules are easy to understand.
  • The game simply requires that the player click the buttons in the order of the pattern they are shown.
• a clear indication of when I have made a mistake.
  • Tested that game stops when player makes a mistake.
  • Tested that the player is alerted when a mistake has been made and the game is reset properly.
• a way to track my longest run.
  • Tested that high score (longest run) and max pattern length are displayed upon game-over.
  • Tested that worse subsequent runs do not override the high score displays.
  • Tested that high score displays persist between refreshes.

Bugfixes

• Problem: There was a mass of unneeded whitespace at the bottom of the page.
  • Solution: Initially I had just used divs with relative positioning stacked atop each other, shifting their positions with the left and top css attributes. To fix the whitespace issue, I wrapped each 'row' of buttons in a container div (the start button has its own start-container) and used float: inline-start to position them within the rows.
• Problem: Found an issue where the new pattern was added to (instead of replacing) the old pattern, and player's new input was being added to the old input.
  • Solution: in the nextTurn() function that handles each new turn, I had not reset both the player's input playerInput and the current pattern currentPat properly. I added currentPat = []; to reset the current pattern.f
  • Problem: New pattern still being added to old pattern; new player input still being added to old player input.
    • Solution: playerInput and currentPat are keys in the gameStuff object, which I wasn't actually keeping in mind. Changed code to reset gameStuff.playerInput and gameStuff.currentPat.
• Problem: The pattern could sometimes be hard to follow visually.
  • Solution: I had added a :hover CSS rule to have the buttons light up when the mouse is over them, but this could get in the way of the actual pattern being displayed. I removed that particular rule, and increased the contrast between buttons lighting up and not (by reducing their opacity further) for good measure.
• Problem: The high score and maximum pattern length were not being updated.
  • Solution: These are supposed to update once the player has made an error and has to start over. The code that updated these displays was erroneously placed after the gameReset call, putting relevant stats at 0. Shifting gameReset to the bottom fixed this issue.
• Problem: The high score and maximum pattern length did not persist between browser refreshes.
  • Solution: I made use of localStorage, adding highScore and maxLength data items that could be referenced and loaded onto the page.
  • Problem: The code I use returns a TypeError: Cannot set properties of null (setting 'innerHTML) when run through Jest. All tests fail; the test suite fails to run entirely.
    • Solution: I created a new score-script.js file which handles the initial loading of the high score and max length as stored in localStorage. The rest of the code still works when manually tested, and all automated tests now pass again.

Technologies Used

Building

• HTML5
• CSS53
• JavaScript

Testing

• Jest
• Lighthouse

Validation

• W3C CSS Validation
• W3C Markup Validation
• JSHint

Deployment

Deploy to GitHub Pages or a similar website hosting and rendering service. The html files can also be opened from local storage (this requires downloading all files in a dedicated folder; this can be done with the git pull command).

To deploy this site to GitHub Pages from its GitHub repository, the following steps were taken.

1. Log in to GitHub.
2. From the list of repositories on the screen, select pattern-MP2. (The above link leads straight to the repository in question.)
3. Select Settings from the menu items near the top of the page.
4. From the left sidebar, select Pages.
5. Under Build and Deployment select Deploy from a branch as the Source and main as the branch.
6. Page is refreshed and site is being deployed.
7. Scroll down to GitHub Pages section again to retrieve the link for the deployed site.

At the moment of submitting the milestone project, the development branch and main branch are identical.

How to run the project locally

To clone this project from GitHub:

1. Follow this link to its GitHub repository.
2. Under the Code dropdown menu in the Code section, you can copy the HTTPS link or download a ZIP.
3. A copied link can be used to make a pull request using Git Bash.
   1. Change the current working directory to one where you want the clone to be made.
   2. Run git init to initialise a local repository.
   3. Run git remote add origin and paste the copied link right after. Running this command sets the GitHub repository as the 'origin'.
   4. Run git branch -M main if the local repository doesn't have a main branch.
   5. Run git pull origin main to make the pull request.

Cloning project into GitPod

To clone this project into GitPod, you will need:

• A GitHub account.
• A Chrome browser or compatible browser.

Then follow these steps:

1. Install the GitPod browser extension for Chrome.
2. Restart the browser after installation.
3. Log into GitPod with your GitHub account.
4. Navigate into the Project GitHub repository.
5. Click the green GitPod button in the top right corner of the repository. This will trigger a new GitPod workspace to be created from the code in GitHub where you can work normally.

Installing Jest

To install Jest, follow these instructions. The test file and settings are available within the repository; no further setup should be required to get the tests working.

To run the automated tests, use npm test or npm t.

Credit

Code

Code not written by me and not covered below is attributed to proper sources in comments within the code. All other code is written by me.

Guidance and Inspiration

Simen Daehlin