The complete state and the vote state were integrated. It revealed missing features from jqDock. A few problems in the workflow of the game and the user interaction were found and discussed with Xavier Antoviaque.
CSS integration
The complete state and the vote state were integrated. The server was slightly modified to change the parameter argument during the vote (card= instead of vote=) so that the client code for vote and picking a card can be merged into a single function more easily.
player_select_card: function(player_id, game_id, sentence, cards, action, element, root) {
var $this = this;
this.set_active(root, element);
$('.cardstories_sentence', element).text(sentence);
$('.cardstories_card', element).unbind('click').click(function() {
var card = $(this).metadata({type: "attr", name: "data"}).card;
$this.send(player_id, game_id, element, 'action=' + action + '&player_id=' + player_id + '&game_id=' + game_id + '&card=' + card);
});
var meta = $('.cardstories_cards', element).metadata({type: "attr", name: "data"});
$('.cardstories_card', element).each(function(index) {
var card = cards[index];
var card_file = meta.nocard;
if(index < cards.length) {
card_file = meta.card.supplant({'card': cards[index]});
}
$(this).attr('src', card_file);
$(this).metadata({type: "attr", name: "data"}).card = card;
});
},
player_select_card: function(player_id, game_id, sentence, cards, action, element, root) {
var $this = this;
this.set_active(root, element);
$('.cardstories_sentence', element).text(sentence);
$('.cardstories_card', element).unbind('click').click(function() {
var card = $(this).metadata({type: "attr", name: "data"}).card;
$this.send(player_id, game_id, element, 'action=' + action + '&player_id=' + player_id + '&game_id=' + game_id + '&card=' + card);
});
var meta = $('.cardstories_cards', element).metadata({type: "attr", name: "data"});
$('.cardstories_card', element).each(function(index) {
var card = cards[index];
var card_file = meta.nocard;
if(index < cards.length) {
card_file = meta.card.supplant({'card': cards[index]});
}
$(this).attr('src', card_file);
$(this).metadata({type: "attr", name: "data"}).card = card;
});
},
There probably are too many card sizes (width 100 in small, 150 in thumbs, 280 in medium and 333 in images) and it will impact the load time. This is not a blocker though.
dock plugin
The jqDock used to display the cards has many options but cannot do the following:
- always have an item selected, even when the mouse moves out
- add css class to the images that are left untouched
- display a label above the image
- add a div next to the image, for instance to show that a given card is the player card
There are two options out of these problems: either contribute to the jqDock code base to add support for more options, or implement a custom way of displaying the cards available to the user.
user workflow
The mockups were designed with a social network integration in mind. When attempting to implement a standalone site, the following are missing:
- user authentication
- player invitation
- home page
The user authentication has been replaced by an input where the user can enter a nickname.
The inviations will be implemented by allowing the author / owner of the game to enter nicknames that will be stored server side. When a player displays his games, he will be invited to join the ones for which there is a pending invitation.
The home page will be made as a variation of the player personal page that shows all the games instead of just the ones where the user is involved.
The current specifications are missing the following:
- how does the author decide when the voting phase is over ?
- how does the visitor get out of the game result page ?
It was discussed with Xavier Antoviaque and it will be resolved at a later time by amending the specifications.
user interface notes
- missing sentence in the voting phase
- missing feedback when picking a card or when voting for a card
- the complete phase : how does one see who won and who lost ?