The list of games in progress and finished were integrated. The lobby function was added to the webservice server. The list of games in progress is now the first step when entering the client.
server
The lobby function was added to the webservice with action=lobby. For instance:
action=lobby&player_id=myself&my=true&in_progress=false
will return all the games in which myself is involved and that are complete. The lobby function is designed to be used for all the list of games. It returns a map such as
{
'games': [(101, 'SENTENCE2', 'invitation', 1, '2011-05-01'),
(100, 'SENTENCE1', 'invitation', 0, '2011-02-01')],
'win': {101: 'n'}
}
Where games is an array of games in which the first element is the game identifier, the second is the sentence written by the game author, the third is 1 if the player who sent the command (as listed in the player_id= argument) is the author of the game or 0 if (s)he is not, the fourth is the date at which the game was created. The list of rows is sorted by creation date, most recent first.
The wins field is a map showing y if the player who sent the command won the game or n if (s)he did not. This
is also indicates which games the user participates in.
The following describes the semantic of the all the parameters combinations. In each paragraph, player_id refers to the mandatory value of the player_id parameter.
my=true&in_progress=true
Shows the games that are not in the complete state and where player_id is either participating (because (s)he is listed in the player2game table) or invited (because (s)he is listed in the invitations table). For each game game_id in which player_id is participating, the wins maps wins[game_id] to ‘n’. For each game in which player_id is invited, there is no entry in the wins map.
my=true&in_progress=false
Shows the games that are in the complete state and where player_id participated. For each game game_id the wins maps wins[game_id] to ‘n’ if the player lost or ‘y’ if (s)he won.
my=false&in_progress=true
Shows the games that are not in the complete state. For each game game_id in which player_id is participating (because (s)he is listed in the player2game table), the wins maps wins[game_id] to ‘n’. There is no entry in wins for the games in which player_id is invited or is not participating.
my=false&in_progress=false
Shows the games that are in the complete state. For each game game_id in which player_id participated ( (because (s)he is listed in the player2game table) the wins maps wins[game_id] to ‘n’ if the player lost or ‘y’ if (s)he won.
CSS integration
The in progress and finished pages were integrated. It misses the following:
- skinning for the table pager
- fonts to display the table content
- hover images for the start new story sign and the sentence story
client
The workflow was modified so that the list of games for a given user is displayed first (it was formerly the game creation state). From there the user can click on a game to display it or chose to create a new one, rejoining the previous workflow.
When reading the list of games from the server, the client needs to create HTML rows. Instead of encoding the HTML in the cardstories JQuery plugin, a template is extracted from the page (and hidden so that it does not show to the user). It must be made available under the cardstories_template as follows:
<div class="cadrstories_games_display">
<table class="cardstories_template">
<tbody>
<tr>
<td><div class="cardstories_lobby_role {role}"></div></td>
<td><div class="cardstories_lobby_state">{state}</div></td>
<td><div class="cardstories_lobby_sentence" data="{game_id:{game_id}}">{sentence}</div></td>
</tr>
</tbody>
</table>
...
It is extracted and the placeholders are replaced with actual values for each row returned by the lobby function of the webservice.
var template = $('.cardstories_template tbody', element).html();
var rows = []
for(var i = 0; i < lobby.games.length; i++) {
var game = lobby.games[i];
var role = game[3] == 1 ? 'cardstories_lobby_owner' : 'cardstories_lobby_player';
row = template.supplant({'game_id': game[0],
'sentence': game[1],
'state': game[2],
'role': role
});
rows.push(row);
}
The created rows are then injected in the body of a table and run thru the tablesorter plugin to allow for pagination and sorting.
$('table.cardstories_games', element).tablesorter().
tablesorterPager({size: pagesize, positionFixed: false, container: $('.cardstories_pager', element) });
It was discovered during the implementation that tablesorter silently does nothing if the element on which it is applied does not contain the thead or tbody elements.
The handling of the lobby has been divided in three functions : two for the display of a given state ( lobbyInProgress and lobbyFinished ) and one to send a request to the server ( refreshLobby ). The lobbyFinished function is not finished and will probably lead to the writing of a function encoding the processing common to lobbyInProgress.