Thousand Card Game: Scores View Added

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/6

Details:

Each card game ends up with the winner, so it's important to give a players possibility to track current score state.
Within the contribution I created basic table displaying game result.

Design skills was always my weak point so forgive me, I will focus on it later on!

What you can see above is basic three-column table with the points received by players in each round.

Each line represents cumulative points number received in each battle by the players (bolded number). First line is basically the beginning of the game, so each of the participants has 0 points. Next line shows the result after the very first battle. In this case, adam lost 220 points (-220), alan won 100 and pic won 80. On the right to the score there is also another value. It represents total points won in specific battle. It might be both positive or negative value - it depends whether player managed to win whole battle (or any trick) or lost at all.

Notice also, that near the player name I am displaying number of bombs being declared by the player. adam has one bomb (*) already announced. You can see the bomb was declared in second battle, that's why adam's opponents gained additional 60 points respectively.

Last line represents the total score.

I am planning to use scores view in two cases:

• On demand: each player will be able to open this view whenever they want during the course of the game.
• After battle finished: player, who has won the bidding phase wants to know whether he managed to reach bid score he has been bidding.

Specific action was declared to show the scores:

store.dispatch('togglePointsVisibility');

After fixed timeout (defined in the store), it will disappear from the screen. How about the function innards?

I specified pointsVisible flag in the store. It represents whether scores table is displayed or not. This property is linked with specific CSS class, which hides/shows Points component DOM element. As I mentioned earlier, we have also timeout representing total time scores are being visible on the screen. This property (pointsAnimationTimeoutMs) is also declared in the store.

The action returns a promise. It is resolved, when delay passes, or rejected, when we have it already displayed in the screen.

More details? See the pull request!

Bye, leaders!

Recent articles:
Thousand Card Game: Trick Position Animation
Thousand Card Game: Trick Animation
Thousand Card Game: State Management

---

Posted on Utopian.io - Rewarding Open Source Contributors

---