Thousand Card Game: Let's wait for animations...

Image source: pixabay.com

What is this project about?

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

PR:

https://github.com/gornanization/1k/pull/39

Details:

While working on 1k-table I encountered a real problem.

Imagine case when TRICK_IN_PROGRESS phase is activated. This is basically a state, when players are throwing cards on a table. Now imagine, there are two cards already thrown, and we are waiting for third and the last player:

Last card is being thrown and then what happens? As game logic is synchronous by nature, throw action is being made instantly. Then, in a game logic state there are three cards in the trick, so the appropriate validator checks, whether we can move forward, and assign this cards to the trick winner.

And it's correct... so where is the problem?

The problem is that the table UI is not fully synchronous because of animations.

So how does the problem affect UI?

When last player throws a card, animation is started. It takes some time, about one second for now. But just after the animation started, game logic proceed next step, which is setting new game phase, which is TRICK_FINISHED. When the phase is activated, another animation, which moves those three card into the player won cards section is being performed. So eventually, we can't even see what was the third player card, as it's instantly moved into a trick winner cards set.

Of course, while implementing game logic I have had such cases at the back of my head. I even managed this problem, but only for ordinary phase changes. See the game logic README.md fragment:

As you can see, while phase is being update, we have to call next() to let the game flow proceed. But it's only for phaseUpdated events...

So, in the current contribution I updated action event emitter, to let the UI builders ( me :D ) to perform the animation first:

As you can see, action event callback was extended with additional next argument. You should call it after performing your animation, always. You don't use this action event listener at all? No problem. This case was also covered to let the game flow proceed itself.

I also removed unnecessary console.log() entries from a codebase. What's more, I moved all development-type libraries into devDependencies to make the game logic npm package #slim and #fit.

More details? See the pull request!

Later, gamers!

Recent articles:
Thousand Card Game: Testing Phases Transition
Thousand Card Game: Positioning Cards
Thousand Card Game: Bidding View Added

---

Posted on Utopian.io - Rewarding Open Source Contributors

---