cardstories part 6: CSS integration

The game creation pages ( pick a card and write a sentence ) and the author view of the invitation state were integrated.

card picking

In order to make the best use of the display size, the jqDock widget was used to display the deck proposed to the game author. However the implementation showed that displaying 36 cards in this fashion is inconvenient. The issue was brought to the attention of the game designer Xavier Antoviaque. He suggested that instead of proposing 36 cards the gameplay could be adapted to only propose 7 cards picked at random, thus resolving display issue. This change will be written down in the game specifications before it is implemented.

layout strategy

The mockups suggested an absolute positioning layout strategy. The div of each game state is given all the space in the game div:

.cardstories .cardstories_subscribe,
.cardstories .cardstories_create,
.cardstories .cardstories_create > div,
.cardstories .cardstories_invitation,
.cardstories .cardstories_invitation > div,
.cardstories .cardstories_vote,
.cardstories .cardstories_vote > div,
.cardstories .cardstories_complete
 {
     width: 100%;
     height: 100%;
 }

The background, logo, top and bottom line are positioned in the enclosing div (.cardstories) and shared among all states. The images that indicate the state progression during the game creation (1, 2, 3, 4) are common to multiple game states and are therefore described in the CSS part dedicated to the enclosing div of the game:

.cardstories .cardstories_counter {
    position: absolute;
    height: 45px;
    width: 81px;
    z-index: 1;
    right: 5%;
    top: 75px;
}

so that only the image path name needs to be specified for the game state div.
The set_active function from jquery.cardstories.js was modified to set the cardstories_active class on all parents of the element displaying the state instead of just the element. This allows for state display embedded in divs that can be hidden when necessary.

$(element).parents('.cardstories_root div').addClass('cardstories_active');

slicing images

A SVG file containing a vector version of all the mockups was provided by tartarugafeliz. The images used for the integration were extracted from it. The extraction was done by running inkscape on the file, select the desired element(s), chose File => Export Bitmap check Hide all except selected and click Export.

author view of the invitation state

When the author href=”http://cardstories.dachary.org/cardstories/static/mockups/Interface010.png”>view of the invitation state was integrated, it became necessary to add the card picked by each player to the game state information returned by the web service, as shown by the following lines from service.py

 if player[2] != None and ( player[0] == player_id or owner_id == player_id ):
     picked = ord(player[2])
  else:
      picked = None
...
     players.append([ player[0], vote, player[4], picked, player_cards ])

This information is used to reveal the board to the game author and let her/him decide when to go to the voting phase. A place holder to show when the player has not picked a card yet was created. To accommodate for the smaller div size, the cards were reduced to 150 pixels wide and stored in a thumbs directory.
The cards for the invitation owner view need room for the label on top.
Because jqDock relies on images instead of div to display and resize the deck, the jquery.cardstories.js code could not rely solely on CSS class to display the images. In order to keep the code free of path names, the templates were encoded as meta information in the parent div, as shown below:

<div class="cardstories_cards" data="{card:'css/thumbs/card0{card}.png', nocard:'css/thumbs/card-back.png', waiting:'Waiting'}" >

Where card will be set to the src attribute with the {card} card placeholder replaced with the card number (range from 1 to 36), nocard will be used instead of hte card if there is none available and the waiting text will replace the player namein the title attribute when there is none.

game creation and input

The jquery.cardstories.js code handling the game creation assumed input elements would be used. This dependency was removed and replaced with selectors relying on CSS classes instead.

fonts, static and images

The fonts that should be used for final rendering are not yet determined. After a discussion with tartarugafeliz, it was agreed that they will be provided before the end of April. The layout of the page was designed initially to adapt to variable screen sizes. Unfortunately, the necessary information is not yet available and a static display assuming a 1024×768 div size was integrated. The specifications for a variable size display will be provided by tartarugafeliz before the end of April.
The line image used for the top and bottom line is larger than it could be and should be reduced. The thumbs cards should be reworked to make room for the player name on top. A white space of 15px (assuming a font size of 12px) at the top should be enough.