NC-Client: An alternative open-source game client for NextColony
Repository
https://github.com/Jarunik/nc-client
Open Source Client for NextColony
Demo: https://nc-client.jarunik.com
What is the project about?
This project started as an experiment to research options for another game client for NextColony. I stumbled from one problem to the next. That didn't bother me much as my first priority was building an app to gain more knowledge and insight into Steem blockchain games. I solved quite a lot of basic problems and built infrastructure to address them. Over time it became clear that a functional app is not too far away anymore. It is still not done but you can now play some aspects of the game with it. So decided to keep building it and share it with the community. I hope it helps some of you or motivates you to participate in the blockchain adventure.
I took a pretty simple approach to implement the game client:
- Create a VueJS App
- Register it with Steemconnect (https://app.steemconnect.com/apps/create)
- Use SteemConnect.js to create a token for users (https://www.npmjs.com/package/steemconnect)
- Store the token in my App.
- Create Custom JSON transactions that represent game commands and send them to the Steem Blockchain
- Read out the Game State from the NextColony Server API
Here are some of the key challenge that I worked on:
- There is no easy way to Issue custom JSON transactions on the latest steemconnect SDK.
- Solution: Use the Beta Version: https://www.npmjs.com/package/steemconnect/v/3.0.0-beta.2
- Additional Bonus: You also get a Steem Keychain Integration with it.
- I soon realized that I need global state in order to manage key information and avoid spaming the API.
- Solution: Use VueX as a data store: https://github.com/Jarunik/nc-client/tree/master/src/store
- It is cumbersome to write all thes JSON's and trigger complex commands on the chain.
- Solution: I created my own SteemConnect Class that extends Steemconnect and offers an API for the commands I need: https://github.com/Jarunik/nc-client/blob/master/src/services/steemconnect.js
- There are a lot of API calls that I need to retrieve the game state and they might change regularly.
- Solution: I created my own API services that take care of Data retrieval: https://github.com/Jarunik/nc-client/tree/master/src/services
- There are a lot of languages on this world and I will want translations soon or later.
- Solution: I included i18n (internationalization) support and made it ready to use: https://github.com/Jarunik/nc-client/tree/master/src/i18n
I still have some things I want to try out in this project and are not really solved yet:
- User and planet layer as context that should update automatically without too much API calls.
- Better UI handling of the slow blockchain commands (Waiting and Delayed feedback for the user)
- Styling: I didn't bother with it yet.
- Protection of drastic transactions like gifting planets.
Oh ... I forgot to link the game in case you want to have a look at the official client: https://nextcolony.io
Technology Stack
I am building the entire client with VueJS: https://vuejs.org/
I consume two services with my client:
- Steemconnect to trigger custom JSON transactions
- Format of the JSON transactions is defined by NextColony: https://jarunik.github.io/nc-docs/json/
- NextColony API to retrieve the game state: https://jarunik.github.io/nc-docs/api/
Inside of VueJS I try to keep dependencies small. I currently have these dependancies:
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"@vue/eslint-config-prettier": "^4.0.1",
"axios": "^0.18.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"moment": "^2.24.0",
"steemconnect": "^3.0.0-beta.2",
"vue-i18n": "^8.11.2",
"vue-template-compiler": "^2.5.21"
}
I use the following frameworks on top of of the basics:
vuex
provides me with a global store with proper state handlingvue-router
to have proper URL's routing to the pages with dynamic routes.- Example: My Planets Buildings: https://nc-client.jarunik.com/jarunik/P-Z5CNNNZTL40/buildings
axios
to do the API calls: https://github.com/Jarunik/nc-client/blob/master/src/services/api.jsmoment
to handle and format times and datessteemconnect
to login users and sign and broadcast steem transacitonsvue-18n
provides me with a translation framework
If you are interested in one of these libraries you can find an example implementation in my client. I am still learning how to make better use of them so feedback is welcome too.
Roadmap
I am currently building out the app along the existing game features. I am still missing these:
- Planet Gifting
- Item Gifting
- Galaxy Map
- Fleet
- Shipyard
Once I have these I will most likely try to look into the upcoming battle features and then look into making things nicer. It is all still far out but this would be a wis hlist:
- Translations
- Better User Experience
- Mobile Support
- Battle Simulation
- Styling
- Graphics
Looks like I will never finish... as there is still a lot that I want to experiment with. Maybe you can help me?
How to contribute?
Quality contributions to the web client are very welcome.
Please open issues for feedback, ideas, change request and bug reports.
To help with development:
- Fork the repository
- Create a feature branch
- Make a pull request for your feature
- Let jarunik know on Discord: https://discord.gg/A8tH9Vv
- Jarunik will review, discuss and merge the pull request.
In case you want to do bigger changes: Please describe them in an issue and discuss them with @jarunik before implementation.
I am also taking care of documentation of the JSON and Rest API of NextColony. Contributions are also welcome there: https://github.com//jarunik/nc-docs
Do you want to build something on Steem too?
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Chat with us on Discord.
[utopian-moderator]
Thanks for the feedback.
Thank you for your review, @helo! Keep up the good work!
nice! Could be a pretty frontend for a bot, too.
This is great!
Hi @jarunik!
Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server
Hey, @jarunik!
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!
Thank you for @nextcolony post.
Supported you a little.
Keep exploring!
@bronevik
You could support #nextcolony with us
delegate 10 SP 20 SP 50 SP 100 SP500 SP
Stop with these phishing links, please.