Thousand Card Game: Trick Animation

Image source: pixabay.com

What is this project about?

This contribution is made to gornanization/1k-table. If you would like to find more info - I strongly recommend reading this post first.

PR:

https://github.com/gornanization/1k-table/pull/4

Details:

Thousand card game is designed for three players. We have to specify place for each of the player on the TV screen, right? So, left part of the screen is reserved for the first player, right for the second one, and the bottom of the screen is reserved for the third player.

Whenever card will be thrown by a player, throw animation origin will be one of those three screen parts.

Having this areas reserved for players, I decided to extend throwCard action and link it to animations engine. Animations are CSS-based. Whenever throwCard action is performed, specific CSS class is added to the card. This class describes target position, it might be:

• .card__position-trick-first
• .card__position-trick-third
• .card__position-player-first

If one of the above class is added, cards changes the position. Each card has also transition delay specified to fixed time, so the overall effect is close to real card throw behaviour. It's 100% CSS. But, on javascript side we have to be aware of animation being finished. That's why each animation backed action is promise-based. Whenever animation is finished, promise (returned by action) is resolved so we do know that the action has been entirely performed. Example?

What you can see in the picture is basic action. J♥ card is being sent to the center of the table (TRICK_FIRST position). Take a look into something more sophisticated:

What you can see now is a set of actions describing basic trick case, which is a part of the battle phase. Each player throws one card, then the winner of a trick receives all of them.

How is it managed internally?

Let's split it into smaller chunks.

Lines :35 - :37 performs throwing card into the trick area. When all player cards are in the trick area, we have one second delay (:38). Notice, all of this actions are performed sequentially, one by one (notice function name: performActionsOneByOne).

When delay passes, next action is being performed (:38 - :43). It's a composition of three smaller actions, which changes trick cards position to player winner position. Those three animations are performed simultaneously (notice performActionAllInOne).

Finally, when whole animation is performed, action promise is resolved, so then the done text is being printed on the console (:45).

Within the flow functions (performActionsOneByOne, performActionAllInOne) we are capable of performing even most advanced animations. That's a strong foundation for further changes to the project.

Details inside the pull request!

Bye Bye, card-throwers!

Recent articles:
Thousand Card Game: State Management
Thousand Card Game: Card & Table Components
Thousand Card Game: The Game Table

---

Posted on Utopian.io - Rewarding Open Source Contributors

---