Gameplay

Click on a section, it changes colors
Computer randomly changes colors of sections after x amount of time
Logic for when a game is won
Progression to the next level
Level design
Timer
Logic for when a game is lost

Introduction

Lydia Butterfly was named after my cousin Kenny's daughter.
Drew her a butterfly before she was born that inspired the game
(Some of you know Marcus. Kenny is Marcus's fraternal twin.)

Demo

How to Play

Butterfly has a max of 4 colors: red, yellow, green, and blue
Once you hit start, click sections until they no longer match the color of the section next to them
If you don't fix the butterfly before time runs out, it's game over

Music

Toggles off and on

Scoring

Starts at level 1; time decreases every level to a minimum of 7 seconds
A level's score is your remaining time times the level number

Stats

Anyone can play, but you can only make it to the high score table if you have account.
If you have an account, you can also see your personal top 10.

Color problems

Game is accessible for people who are color-blind.
This was important to me because Kenny is color-blind, and it would be silly to name a game after his daughter and not have it be accessible to him.
- Growing up, when we played puzzle games that relied on colors, Kenny couldn't play them.
Show comparison image.
The most common type of colorblindness is deuteranopia, which is the inability to differentiate between red and green. You can accommodate for this by making your reds lean towards orange and your greens lean towards blue.

Code Share

SVG

Not an image with mapping
Not individual divs
SVG = Scalable Vector Graphic

Change time to local time on production

Create and configure Rails app

Can't toggle sound immediately after logging in

Tuesday - Static Site

Finish database and models
Finish basic views
Start Javascript/Ajax interactivity

BONUS - Mobile Testing

It is suuuper slow on mobile but surprisingly working.

Matt had a glitch

Game looked like it was won but it wasn't. (See screenshot)

Dynamic site wide high scores table

All scores in a table of top 10
Ability to click and append more high scores

Sign up doesn't immediately log you in

Live site problem only. Works fine in development.

Resources

Creating vector images on an HTML page:
http://css-tricks.com/using-svg/

Final levels on high score table inaccurate

They show one level higher than where someone finished.

More user stats for personal page

Rank amongst all players
Total time spent playing a single game
Total time spent playing games

Make Login not case sensitive for usernames

Overview

Butterflies (working title) is a simple color game. The player is given a butterfly that is divided into many different sections. The player's goal is to make each section a different color from the sections it is adjacent to in a given amount of time. There are 4 different colors.

Concept art

The butterfly has 20 sections total, 10 on each wing, which is then divided into 6 sections on the top half and 4 sections on bottom.

User Experience

Views

Layout

Navigation bar on top
- If logged out:
  - Sign In
  - Sign Up
- If logged in:
  - Welcome (username)
  - Your Stats
  - Sign Out
- Viewable by everyone:
  - New Game
  - High Scores
Content below

Home page

The first page the user encounters has a navigation bar on top and the game below. Anyone can play, but people who are not logged in cannot save a history of their games and cannot place on the high score table.
The user can log in or sign up by clicking the appropriate links, and the necessary fields show up in the navigation bar once a link is clicked.

Your Stats

Essentially the "show" page for Users. Contains a table of personal high scores and what place the user is in out of all users.

High Scores

Essentially the "index" page for Games. Shows the top scores out of all players, in groups of 10. The user can click "show more" at the bottom to append more high scores.