Thousand Card Game: Bidding 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/7

Details:

Recently I added scores view. Today I would like to show you similar view, but with different data: bidding history. It is required for bidding phase.

Some time ago I presented to you the whole state of the game logic project (1k). It's described i.e. here. I mentioned about the way bidding history is being stored inside the redux state:

Please, focus on lines :260 - :264. You can see there are set of player bids. pass property shows us whether player rejected to bid and is no longer involved in bidding process.

I decided to use the same shape of object in the 1k-table:

As it's defined in global state, we can access it inside the Bids UI component with no effort. How does the component look like? Quiet simple, I guess:

If you are not familiar with the Vuejs, you might find this code fragment, let's say, "chaotic"?

We have basically the whole component definition in one file. It includes template, javascript code and styles. This approach is really convenient for small component definitions.

In line :21 I access global store to get bid history. It's done within the bids function defined in computed area of the component. Pure store data is being parsed (using slice, reverse, etc.) in order to prepare data before displaying in. Manipulated bids list is accessible in the template, where we do basically iterate over those entries.

Each table row is displayed through separated bid-row component (:6). If you would like to see more, check pull request!

Later, bidders!

Recent articles:
Thousand Card Game: Scores View Added
Thousand Card Game: Trick Position Animation
Thousand Card Game: Trick Animation

---

Posted on Utopian.io - Rewarding Open Source Contributors

---