# Frontend example
Some elements are both a bit complex and redundant.  Element generatos are used to cut down the time needed to test variations.

# Example games supported using TimerGame and Qwixx
* Sudden Death - rounds are timed, if a player does not complete an action within the time limit they forfeit the game
* Blitz - the game ends at a specific time
* No Restrictions - no user controls are allowed during gameplay
* Normal - allows restricting players and round time
* Timed - players have a purse of time

# Tree
Gob opens the web browser and keys in url.  Page loads with a 'press any key' to continue thing.  From here Gob can see what other games are being played.  He can also chat with people in who are on in the same place that he is.  There is a menu that has some generic shortcuts, like he could join a game, create a game, look at a list of the best players, etc.  Gob can also set his player name.

        +---------------+
        |               |
        | press-any-key |
        |               |
        +-----+---------+     End Game
              |               Join / Create Game
              v               Start Page
        +------------+        +------------+  +-----------+  +----------+
        |            |        |            |  |           |  |          |
     +->| Start Page |     +->+ Game Lobby +->+ Play Game +->+ End Game |
     |  |            |     |  |            |  |           |  |          |
     |  +-----+------+     |  +---------+--+  +-----------+  +--+--+----+
     |        |            |            ^                       |  |
     |        v            |            +-----------------------+  |
     |  +-----+---------+  |                                       |
     |  |               |  |                                       |
     |  | [Join Game]   +--+         hover menu                    |
     |  | [Create Game] +--+         +-------------+               |
     |  | [Change Name] +<---------->+ change name |               |
     |  | [Statistics]  |            +-------------+               |
     |  |               |                                          |
     |  +-----+---------+  hover menu                              |
     |        |            +------------+                          |
     |        +----------->+ statistics |                          |
     |                     +------------+                          |
     |                                                             |
     |                                                             |
     +-------------------------------------------------------------+

## Start Join Create
Clicking on the menu options Join or Create generate a small menu to so that Gob can choose which of the five games to play.  Gob has to click Join or Create again.  If a game is selected from the Start Page the menu does not appear.  Gob now looks at the Game Lobby.

## Change Name
A menu asking the user their name is displayed.

## Statistics
When Gob clicks on the Statistics button he is placed into the Statistics Page.

## Game Lobby
Gob can see the names of the other players in the game.  The game is not started.  Gob can chat with players on in the Game Lobby.

## Play Game
There is a card that is displayed prominently that has Gob's name on it.  There are several other cards that Gob can see that display other player's names.  Gob can click many elements on his card and a few elements on other players cards.  Gob can chat with players in the game.

## End Game
A winner is declared Gob can either look at Statistics or enter the Game Lobby again.

# Presentation

## generated-cells
Using `cellGenerator.svg` create the five possible cells.
* not-selectable
* previously-selected
* selectable
* selectable-selected-hovered
* selectable-selected-not-hovered

## generated-locks
Using `lockGenerator.svg` create the three lock options.
* locked
* previously-selected
* unlocked

## generated-stars
Using `starGenerator.svg` create the three possible stars.
* not-selected
* previously-selected
* selected

## generated-timers
Using `simpleTimerGenerator.svg` make three examples.
* just-started.svg
* one-third-remans.svg
* two-thirds-remains.svg

## generated-playerNames
using `playerNameGenerator.svg` make five examples.
* chocoholic
* classic
* dropTable
* L337guy
* really-long-player-name

## generated-kicks
Using `playerKickGenerator.svg` make fixe examples.
* bias-max
* bias-med
* bias-min
* keep
* kick

## generated-cards
After generated-kicks, generated-playerNames, generated-timers, generated-stars have been created, make some example cards, one per player.  Uses `scoreSheetGenerator.svg`, which depends on the listed generated templates, in addition to 11-buttons-all-selectable, 11-buttons-earned-lock-out, 11-buttons-mixed-locked-out, and 11-buttons-selected-and-hover

These cards can be used to make the playable screen.  When finished with this step, there should be five cards for players:
* chocoholic
* classic
 1. nobody likes classic, he usually gets voted out of games
* dropTable
 1. dropTable is always running late
* L337guy
 1. everyone likes L337guy, she is very liked and always has a lot of time
* really-long-player-name
 1. the player with the longest name is the primary and usually active player
 1. people are somewhat annoyed at his long name, but on average is not kicked from games

## palette
Color choices are somewhat avoided using a palette.  Most elements need some color so they inherit the color from various options.  The base colors are a light and dark background and four colors.  To prevent some of the choices becoming too tightly bound to a specific color they use color aliases stored in the palette/inherited directory.

## generated-dice
Use `diceGenerator.svg` to generate some example dice.
* color0
* color1
* color2
* color3
* five
* four
* four-wht
* one
* six
* six-wht

## generated-buttons
Use `buttonGenerator.svg` to generate the buttons.
* create-game
* join-game
* change-name
* statistics

## generated-icons
Use `iconGenerator.svg` to generate needed icons.
* kick
* clock
* sudden
* blitz