CSS integration and game interactions (part 2)

The page where the user picks a card at the beginning of a game was integrated. The modifications also include an update of the logo and adjustments of the game creation and vote selection confirmation.


The page where the user picks a card displays a confirmation dialog when picking a card. It shows to the right of the cards if one of the first three cards is selected, otherwise it shows to the left. This is achieved by setting a meta data in the confirmation top element as follows:

<div class="cardstories_card_confirm" data="{middle:3}">
 <div class="cardstories_card_confirm_ok"></div>
 <div class="cardstories_card_confirm_cancel"></div>
</div>

The function triggered when selecting a card will set the cardstories_card_confirm_right class on the top level element of the page currently being displayed ( actually the element that has the cardstories_active class when walking the parents of the confirmation element up ).

.cardstories_card_confirm_right .cardstories_card_confirm {
   left: 50px;
 }

Instead of being to the right, the confirmation element will show to the left of the cards. However, when this happens the confirmation shows on top of the hint explaining what the user can do. The cardstories_card_confirm_right selector is used again to hide the hint:

.cardstories .cardstories_invitation .cardstories_pick.cardstories_card_confirm_right .cardstories_pick_mask_chose_a_card {
    display: none;
}