Thousand Card Game: State Management

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

Details:

While developing thousand game logic (1k) in typescript I was really enjoying redux state management. I thought it would be awesome to see something similar on 1k-table project side. Thankfully, vuejs has also its own state management engine. It's vuex.

API differs slightly comparing to redux, but the way it works is the same. I decided to migrate early stage of codebase to this approach to make my further work process even simpler.

What has been done within the contribution?

I have moved table cards into common state, so it will be easier to access it from any place in the codebase.

What's more, moveCard action has been introduced. It basically allow us to move card from one position into another. You can see it in action:

Actions are part of vuex. If you would like to find out more, official documentation is good place to start.

Card position is a simple enum describing where the cards is currently located on. Very basic shape of the object was presented below.

Position will change in the course of the game. From player hands into battle area, then into player won cards section and so on. Current entries specified within the enum does not cover all use cases, but it will be extended by the time.

Utils functions lib (lodash) has been also included as a dependency.

More details in the pull request!

Bye, players!

Recent articles:
Thousand Card Game: Card & Table Components
Thousand Card Game: The Game Table
Thousand Card Game: Additional coverage + README.md update

---

Posted on Utopian.io - Rewarding Open Source Contributors

---