tartarugafeliz created a new set of mockups for improved interactions. The players are shown a page to make it clear that they should wait for the others to pick a card or wait for the others to vote. A link to the list of game was added to each page. A game progress indicator is shown at the top right corner of each page.
waiting for players
Once a player picked a card or decided to vote for a card, a new step is introduced to make it clear that he should wait for the other players to act ( see the mockups for invitation and vote states).
Displaying this state does not require an interaction with the game server, it is done client side only. The wait invitation state was implemented first ( and linked to a ticket ) and the wait vote state was implemented afterward (it includes some factorization of the wait invitation state).
In both cases the modification involves a change in the client logic that is encapsulated in the vote_voter_wait function, called when a player already chose a card (either for vote or for picking a card as shown below). This accommodates for when a player just picked a card and stays in the same page, triggering only client logic, or when the player displays the game state from scratch using a permalink.
if(game.self[0] === null) {
deferred = this.invitation_pick(player_id, game, root);
// do not disturb a player while (s)he is picking a card
poll = false;
} else {
deferred = this.invitation_pick_wait(player_id, game, root);
}
The function itself sets a few classes for display purpose and activate an action that allows the player to go back and change her/his mind.
invitation_pick_wait: function(player_id, game, root) {
var $this = this;
var element = $('.cardstories_invitation .cardstories_pick_wait', root);
this.set_active(root, element);
$('.cardstories_sentence', element).text(game.sentence);
var card = game.self[0];
$('.cardstories_card', element).attr('class', 'cardstories_card cardstories_card' + card + ' {card:' + card + '}');
$('.cardstories_card_change', element).unbind('click').click(function() {
$this.invitation_pick(player_id, game, root);
});
},
The new function is tested to validate is functionalities, using a minimal HTML markup.
After validating this functional change, a new skin page is created to display the wait state of the invitation ( or the vote ). A new HTML element is created together with a few CSS stanzas associating it with images sliced from the mockup.
skin gallery
The skin gallery was moved inside the cardstories element and positioned in absolute with a z-index that is larger than any other to ensure that it will always show. Otherwise it may be hidden behind elements such as the hanging man in the wait state.
<div class="cardstories_skin" style="display: none; position: absolute; top: 0; z-index: 1000">
The order of the skin links have be re-ordered to better match the workflow of the game and make it easier to check all of them.
lobby link
A link to the list of games was added to the top of each page It only requires modifications to HTML and CSS.
game progress
Instead of a counter that showed only to the author, each step of the game now has a progress list that shows what has been completed and what remains to be done. The size and position of the player progress image and the author progress image are different and they have been associated to different HTML elements and CSS stanzas. For the player it is:
.cardstories .cardstories_progress_player {
position: absolute;
height: 180px;
width: 198px;
z-index: 1;
right: 10px;
top: 20px;
}
.cardstories .cardstories_vote .cardstories_voter_wait .cardstories_progress_player {
background: transparent url('images/player_progress4.png') no-repeat left top;
}
The complete state was the same from the author point of view or the player point of view. It has been changed set a class to its outer element that allows to differentiate the CSS. It is set to cardstories_owner or cardstories_player.