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:

1. Create a VueJS App
2. Register it with Steemconnect (https://app.steemconnect.com/apps/create)
3. Use SteemConnect.js to create a token for users (https://www.npmjs.com/package/steemconnect)
4. Store the token in my App.
5. Create Custom JSON transactions that represent game commands and send them to the Steem Blockchain
6. 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:

• vuexprovides me with a global store with proper state handling
• vue-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
• axiosto do the API calls: https://github.com/Jarunik/nc-client/blob/master/src/services/api.js
• moment to handle and format times and dates
• steemconnect to login users and sign and broadcast steem transacitons
• vue-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:

1. Fork the repository
2. Create a feature branch
3. Make a pull request for your feature
4. Let jarunik know on Discord: https://discord.gg/A8tH9Vv
5. 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?

GitHub Account

https://github.com/Jarunik