Repository
https://github.com/Jarunik/nc-client
New Features
I add a lot of new features and would like to give a short overview about them.
Shipyard
I implemented this new feature against the upcoming new API. https://github.com/Jarunik/nc-docs/tree/feature/collect-upcoming-changes/docs/api#shipyard
Compared to the existing API's limitations it did not seem worth it to also implement something for the existing one.
Implementation
https://github.com/Jarunik/nc-client/pull/11
My approach with the extended Steemconnect class still seems to work well.
buildShip(user, planetId, shipName, cb) {
var scJson = {};
var scCommand = {};
// Create Command
scJson["username"] = user;
scJson["type"] = "buildship";
scCommand["tr_var1"] = planetId;
scCommand["tr_var2"] = shipName;
scJson["command"] = scCommand;
var finalJson = JSON.stringify(scJson);
var appId = this.appId();
super.customJson([], [user], [appId], finalJson, cb);
}
On of the tricky parts was implementing a lazy loading of the quantity and then calculating the differences.
async getQuantity() {
const response = await QuantityService.get(this.$store.state.planet.id);
this.quantity = response;
this.calculateCoal();
this.calculateOre();
this.calculateCopper();
this.calculateUranium();
},
calculateQuantity(quantity, depot, rate, lastUpdate) {
var startTime = moment.unix(parseInt(lastUpdate));
var endTime = moment.utc();
var duration = moment.duration(endTime.diff(startTime));
var diff = duration.asDays();
return Math.max(
Math.min(
parseFloat(quantity) + parseFloat(rate) * diff, // accumulation
parseFloat(depot) // below depot
),
parseFloat(quantity) // or overflow above depot
).toFixed(1);
},
It already works pretty well but I will have to try to make some central service for it to avoid implementing it in all pages where I need the current available resources.
Item Activation & Gifting
Implementation
https://github.com/Jarunik/nc-client/pull/14
This one was pretty straight forward as I could implement it along the already established patterns.
giftItem(item, index) {
SteemConnectService.setAccessToken(this.$store.state.game.accessToken);
SteemConnectService.giftItem(
this.$store.state.game.loginUser,
item.uid,
this.recipient,
(error, result) => {
if (error === null && result.success) {
this.recipient = null;
this.placeholderGift = "Success";
this.items[index].total = this.items[index].total - 1;
}
}
);
},
Yes. I don't like popups and I am experimenting with inline everything in the UI. I am not completely happy with yet but I will focus on covering all features before working more on the UX side of things.
Table Sorting
You can click all headers now to sort as you wish. This makes it easier to have your preferred view on things.
Implementation
https://github.com/Jarunik/nc-client/pull/15
sortedBuildings() {
var sortedBuildings = this.buildings;
if (sortedBuildings !== null) {
return sortedBuildings.sort((a, b) => {
let modifier = 1;
if (this.currentSortDir === "desc") modifier = -1;
if (a[this.currentSort] < b[this.currentSort]) return -1 * modifier;
if (a[this.currentSort] > b[this.currentSort]) return 1 * modifier;
return 0;
});
} else {
return sortedBuildings;
}
}
The sorting algorithm allows to click twice to reverse the sort order.
Planet Gifting
I protected this action with somoe steps as it can be destructive. I tried to build along the idea of a protected switch where you first have to remove the cover of the switch to be able to push it.
Implementation
https://github.com/Jarunik/nc-client/pull/18
toggleGiftingLock() {
if (this.giftingLock) {
this.giftingLock = false;
} else {
this.giftingLock = true;
}
}
The additional gifting protection is done as a simple toggle.
Starter Planet Generation
Adding a simple button to generate the starter planet. Most work was implementing:
- Check if user already exists
- JSON to send create newuser
Implementation
https://github.com/Jarunik/nc-client/pull/19
this.fetchUser(this.callbackUserName).then(searchedUser => {
this.getStarterPlanet(this.callbackUserName).then(() => { if (searchedUser) {
this.$store.dispatch("planet/setId", this.planetSearch.id); this.$store.dispatch("game/setUser", searchedUser);
this.$store.dispatch("planet/setName", this.planetSearch.name); this.fetchStarterPlanet(this.callbackUserName).then(
searchedPlanet => {
if (searchedPlanet) {
this.$store.dispatch("planet/setId", searchedPlanet.id);
this.$store.dispatch("planet/setName", searchedPlanet.name);
} else {
this.$store.dispatch("planet/setId", null);
this.$store.dispatch("planet/setName", null);
}
}
);
} else {
this.$store.dispatch("game/setUser", null);
this.$store.dispatch("planet/setId", null);
this.$store.dispatch("planet/setName", null);
this.showRegistration = true;
}
}); });
It is always a bit mess if you have to call multiple API's dependant on each other but I think it is still on the handable side of things like this.
Explore and Transport
Implementation
https://github.com/Jarunik/nc-client/pull/20
I am not happy with that implementaiton yet but it works as a start. I will have to:
- Clean up the code and encapsulate some stuff
- Add fuel consumption calculation and checks
- Add better feedback of what has to be changed in the form to be able to send.
Current Roadmap
I will most likely work one of these features next:
- Fuel Consumption Handling
- Implement additonal commands that are in development (Docs)
- Galaxy Map
- Refactoring, Cleanup, Commenting