NC-Client: Lot's of new features

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

GitHub Account

https://github.com/Jarunik