The tasks required to implemented New board: After picking a card, the author is asked to enter a story were split. An architecture is proposed for animations in cardstories. The reload frequency was reduced to a minimum to create conditions favorable to animations.
write a sentence sprint
It was decided the day before to accomplish a one day sprint on New board: After picking a card, the author is asked to enter a story. To that extent, the following tasks were created and dispatched:
- animation to Matjaz
- Integrate the CSS of mockup 2 to Xavier
- only reload when necessary to Loic
- add create_write_sentence_animate to Adolfo
transitions between states
Reloading the page at each game state change is going to be a problem for smooth transitions from state to state and a task was created to minimize when it happens.
Introducing animations in cardstories means that the HTML of a given game states changes over time.
- the player wants to create a story and starts by going to the state where (s)he can pick a card and the HTML in div .cardstories_create .cardstories_pick_card is displayed
- once the card is chosen, the HTML is animated and ends up in a different state, where only one card is displayed
- the game then switch state and displays a different HTML from div .cardstories_create .cardstories_write_sentence
When switching from the second to the third state, the change must not be visible to the user. This is done by ensuring that all the HTML to be displayed is already loaded and that the change is only a matter of hiding the previous HTML and showing the next. It is believed that such a change will not be visible to the user. Each game state must be designed to allow for such a separation. It means that there cannot be animations that span over two states.
Here is an example of how to satisfy this constraint. In the example above, the chosen card goes to the middle of the screen and is then moved up with a slightly different background and enlarged. After a short delay the input box is displayed.
The first part of the animation, up to the centering of the card, belongs to the first state, where the user picks a card. The next state, where the user writes a sentence, should start with a HTML and associated CSS showing the card centered at exactly the same place with exactly the same size.
reduce the reload frequency
The reduction of the number of reloads turned out to imply more changes because it revealed that the display_or_select_card function was not reentrant.
The poll now calls game_or_lobby instead of reload to prevent reloading the page whenever the poll function returns, which may happen each time a player vote. In the previous design that was only a small annoyance. With the board design it becomes much more visible and can even disrupt the animations. The display_or_select_card has been modified to allow for multiple calls on the same HTML element. The basic idea is that the original HTML is saved before it is altered by the jqDock.