VS_CODE/Qwixx/frontend-example

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
  2. 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