The auth.py module and its client counterpart were added to allow for string player identifiers instead of numbers. The display is clarified by showing only the HTML related to the current state of the game, using the cardstories_active CSS selector.
authentication in the webservice
The auth.py authentication module was implemented (and tested) as a mean to convert player names (strings) into unique identifiers convenient for service.py.
The module is called before the query is given to the game logic and converts the player_id and owner_id fields. It is called to convert the result of the game logic and substitute player numbers into their string counterpart.
if self.auth:
d.addCallback(self.auth.preprocess, request)
d.addCallback(self.handle, request)
if self.auth:
d.addCallback(self.auth.postprocess)
The –auth option was added to the command line and controls the activation of the authentication mapping. Alternatives could be implemented to support opensocial or other authentication mechanism. The –auth-db option points to the database file name that contains the mapping between the user name and the serial number.
The init file was modified to activate the authentication mapping by default.
authentication client side
If no player_id parameter and no CARDSTORIES_ID cookie are set, the user is asked for a nickname. Otherwise the application proceeds directly to the game creation.
$.fn.cardstories = function(player_id, game_id) {
if(player_id === undefined || player_id === '') {
player_id = $.cookie('CARDSTORIES_ID');
}
...
The jquery.cookie.js plugin was selected to set and retrieve the CARDSTORIES_ID cookie.
game state display
The game is displayed in a div that depends on the state of the game. All states were displayed at the same time which made it confusing to interact with. All parts are now hidden by default, using the following CSS stanza:
.cardstories .cardstories_subscribe,
.cardstories .cardstories_create,
.cardstories .cardstories_invitation > div,
.cardstories .cardstories_vote > div,
.cardstories .cardstories_complete
{ display: none; }
The code was re-architectured so that each function displaying a game state ( create, vote, etc.) is given the root of the DOM where the game is displayed (.cardstories) instead of the child displaying this specific state (for instance .cardstories .cardstories_create for the create state). The unset_active and set_active functions have been implemented and each function updating the display for a given state starts by removing the cardstories_active class in all childs of the .cardstories element and then adds the b>cardstories_active class to the DOM element where the state is displayed. The following CSS stanza ensure that only the relevant part is displayed:
.cardstories .cardstories_subscribe.cardstories_active,
.cardstories .cardstories_create.cardstories_active,
.cardstories .cardstories_invitation > div.cardstories_active,
.cardstories .cardstories_vote > div.cardstories_active,
.cardstories .cardstories_complete.cardstories_active
{ display: block; }