Sit back, relax, and Align The Chakras in this simple memory game. This game is desgined to be challenging yet relaxing all-in-one. The game is also desgined to fit all screens so enjoy on any device availabe.

Image

View the live site here.

• User Stories

  • First Time Visitor Goals

  • a. As a First Time Visitor, I want to play a card matching game that helps to keep my memory skills sharp.

  • b. As a First Time Visitor, I want to easily understand the game.

  • c. As a First Time Visitor, I want the game to function properly and easily work on all screen sizes.

  • Returning Visitor Goals

    a. As a returning visitor, I would like to check and make sure I have kept the high score.

    b. I want the game to become more challeng as I go.

    c. I want the game to frequently become updated with new levels and challenges to beat.

  • Frequent User Goals

    a. As a frequent user, I want to see if the game has added any new features added.

    b. As a frequent user, I want to see if there are new levels or challenges implemented.

    c. As a frequent user, I will continue to check back to see if there have been any blogs added or Facebook community groups.

• Design

  • Colour Scheme

    The two main colours used are teal and dark orchid in the animated gradient background. This style was chosen for the background of the game to match the theme of the cards and the gradient was animated instead of originally going with a linear gradient in order to not completely blend in with the images on the back of the card.

  • Typography

    The BioRhyme font is the main font used throughout the whole website with Sans Serif as the fallback font in case for any reason the font isn't being imported into the site correctly. BioRhyme seemed to fit the bohemian vibe that has been intended for Align The Chakras.

• Imagery

  The intention of the image on the back of the cards is a woman throwing a fire wand was to give a sense of magic, light, and mystery.

• Basic Wireframes

• HTML5
• CSS
• JavaScript

Frameworks, Libraries & Programs Used

1. Bootstrap

   • Bootstrap columns were used to ensure screen responsiveness.

2. Github

   • Github is used to store the projects code after being pushed from Git.

3. Git

   • Git was used for version control by utilizing the Gitpod terminal to commit and push to GitHub.

4. Google Fonts

   • Google Fonts was used to import the 'BioRhyme' font which is used for the
     heading.

The W3C Markup Validator, W3C CSS Validator, and JSHint Services were used to validate every page of the project to ensure there were no syntax errors in the project.

W3C Markup Validator - Results

W3C CSS Validator - Results Validator.nu/LV http://validator.w3.org/services

• JSHint Results

There are 11 functions in this file.

Function with the largest signature take 1 arguments, while the median is 1.

Largest function has 21 statements in it, while the median is 3.

The most complex function has a cyclomatic complexity value of 4 while the median is 1.

The game has been extensively tested across multiple browsers such as Google Chrome, Safari, Bing, and Mozilla browers. The first attempt at the game runs smoothly across all of the browsers.

The game was tested across all screen sizes on each browser to ensure responsiveness.

• First Time Visitor Goals

  i. As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.

  a. The game is very basic. There are no bells and whistles which makes it easier for a user to navigate.

  b. The main points are made immediately with the game grid image and header.

  c. The user only has one option, to click a card which begins the game

  d. As a first time visitor, I want the game board to work properly, meaning each cards clicks and flips over smoothly. I would like to have enough time to mentally calcuate the displayed image and remember the proper placement for future matching.

• Returning Visitor Goals

  ii. As a Returning Visitor, I want to get straight to the point and play the game. A "How To Play" Modal and start button would be nice to have.

• Frequent User Goals

  a. As a Frequent User, I want to check to see if there are any newly added challenges or hackathons.

  b. As a Frequent User, I want to check to see if there are any new blog posts.

• Further Testing

  The Website was tested on Google Chrome, Internet Explorer, Microsoft Edge, Safari, Bing, browsers. The website was viewed on a variety of devices such as Desktop, Laptop, multiple devices such as iPhone X, Samsung Galaxy,

  The game was also tested by friends and family.

• The first major bug in Align The Chakras is that upon winning the game, the shuffle function breaks which renders the second game useless.

• The second major bug is again, after the first win, the victory screen fails to reappear.

• On some browsers like Safari, it seems two of the bottom two cards turn blue.

• In some instances, the cards that have already been flippied can be clicked back over which breaks the logic early on and the victory screen appears earlier.

There should be a timer function added along with a Hig Score Board.

There should also be different levels of difficulty.

Align The Chakras has been deployed on GitHub Pages with the following process:

All code was written on Gitpod, a cloud-based IDE.

The code was then pushed to GitHub where it is stored in my Repository.

Under the Settings section of the GitHub repository, scroll down to GitHub Pages section.

Under 'Source' drop-down, the 'Master branch' was selected.

Once selected, this publishes the project to GitHub Pages and displays the site URL.

There is no difference between the deployed version and the development version.

The code can be run locally through clone or download. You can do this by opening the repository, clicking on the green 'Code' button and selecting either 'clone or download'.

The Clone option provides a URL, which you can use on your desktop IDE.

The Download ZIP option provides a link to download a ZIP file which can be unzipped on your local machine or uploaded to your cloud-based IDE workspace.

Forking the GitHub Repository

Forking the repository let you produce a copy of the repository with the ability to make changes without impacting the original repositry. Forking can be don ewith the following steps:

1. Log in to GitHub and locate the GitHub Repository
2. At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub Repository
2. Under the repository name, click "Clone or download".
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type git clone, and then paste the URL you copied in Step 3.

$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.

Code

• Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.

• JavaScript portion was written with the help of Zackery Wilson of:

  • PortEXE - YouTube

• Animated gradient adapted from:

  • Kevin Powell

Media:

Flamethrower Card Image adapted from:

Dusan Petkovic

Chakra images adapted from:

Yoga Practice

Code Institute

Gerard McBride

Slack and the community for all contributions.