Add basic Item activation and gifting (#14)

close #7

README.md

@@ -2,11 +2,11 @@
 
 An alternative and experimental client for the blockchain game NextColony.
 
-Demo: https://nc-client.jarunik.com/
+Demo: [nc-client.jarunik.com/](https://nc-client.jarunik.com/)
 
-Documentation about NextColony: https://jarunik.github.io/nc-docs/
+Documentation about NextColony: [jarunik.github.io/nc-docs/](https://jarunik.github.io/nc-docs/)
 
-Official Game Client: https://nextcolony.io
+Official Game Client: [nextcolony.io](https://nextcolony.io)
 
 ## Contributing
 
@@ -19,34 +19,27 @@ To help with development:
 1. Fork the repository
 2. Create a feature branch on the `develop` branch
 3. Make a pull request to the `develop` branch
-4. Let jarunik know on Discord: https://discord.gg/A8tH9Vv
+4. Let jarunik know on Discord: [discord.gg/A8tH9Vv](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.
 
 ## Project setup
-```
+
+```bash
 npm install
 ```
 
 ### Compiles and hot-reloads for development
-```
+
+```bash
 npm run serve
 ```
 
 ### Compiles and minifies for production
-```
-npm run build
-```
 
-### Run your tests
-```
-npm run test
-```
-
-### Lints and fixes files
-```
-npm run lint
+```bash
+npm run build
 ```
 
 ### Environment Variables
@@ -55,40 +48,40 @@ Please check `.env` for environment configurations.
 
 Example:
 
-```
+```bash
 VUE_APP_ROOT_API=https://nextcolony.io/api
 VUE_APP_STEEMCONNECT_APP=nc-client
 VUE_APP_JSON_ID=nextcolony
 ```
 
 You can create a local file `.env.development.local` to use a different configuration during development.
 This will only work if you have a server providing the needed API's.
-`npm run server`will use the `.env.development`environment by default. 
+`npm run server` will use the `.env.development` environment by default.
 
-```
+```bash
 VUE_APP_ROOT_API=https://locahost:8080/api
 VUE_APP_STEEMCONNECT_APP=nc-client
 VUE_APP_JSON_ID=nextcolony.test
 ```
 
-More information about Environment Variables in VueJS: https://cli.vuejs.org/guide/mode-and-env.html#modes
+More information about Environment Variables in VueJS: [cli.vuejs.org/guide/mode-and-env.html#modes](https://cli.vuejs.org/guide/mode-and-env.html#modes)
 
 #### VUE_APP_ROOT_API
 
-The root of the API server that will provide the data through an API as specified here: https://jarunik.github.io/nc-docs/api/
+The root of the API server that will provide the data through an API as specified here: [jarunik.github.io/nc-docs/api/](https://jarunik.github.io/nc-docs/api/)
 
 Example call that will be created: `VUE_APP_ROOT_API + "/loaduser"`
 
 #### VUE_APP_STEEMCONNECT_APP
 
 This is the steemconnect app that will be used to manage the authorities. You will have to create your own to whitelist your IP.
 
-You can find the information to create the Steemconnect App registration here: https://app.steemconnect.com/apps/create
+You can find the information to create the Steemconnect App registration here: [app.steemconnect.com/apps/create](https://app.steemconnect.com/apps/create)
 
 #### VUE_APP_JSON_ID
 
 You have to include the correct ID in order that the backend server will pick up your JSON transactions.
 
-You can find more information about the JSON format here: https://jarunik.github.io/nc-docs/json/
+You can find more information about the JSON format here: [jarunik.github.io/nc-docs/json/](https://jarunik.github.io/nc-docs/json/)
 
 The currently productive game server uses the id: `nextcolony`.

src/services/steemconnect.js

@@ -76,6 +76,34 @@ class SteemConnectService extends Client {
 
     super.customJson([], [user], [appId], finalJson, cb);
   }
+
+  giftItem(user, itemId, recipient, cb) {
+    var scJson = {};
+    var scCommand = {};
+    scJson["username"] = user;
+    scJson["type"] = "giftitem";
+    scCommand["tr_var1"] = itemId;
+    scCommand["tr_var2"] = recipient;
+    scJson["command"] = scCommand;
+    var finalJson = JSON.stringify(scJson);
+    var appId = this.appId();
+
+    super.customJson([], [user], [appId], finalJson, cb);
+  }
+
+  activateItem(user, itemId, planetId, cb) {
+    var scJson = {};
+    var scCommand = {};
+    scJson["username"] = user;
+    scJson["type"] = "activate";
+    scCommand["tr_var1"] = itemId;
+    scCommand["tr_var2"] = planetId;
+    scJson["command"] = scCommand;
+    var finalJson = JSON.stringify(scJson);
+    var appId = this.appId();
+
+    super.customJson([], [user], [appId], finalJson, cb);
+  }
 }
 
 export default new SteemConnectService();

src/store/modules/game.js

@@ -26,7 +26,7 @@ export default {
     },
     [types.SET_GAME_EXPIRYDATE](state, payload) {
       state.expiryDate = payload.value;
-    },    
+    },
     [types.SET_GAME_LANGUAGE](state, payload) {
       state.language = payload.value;
     },
@@ -75,7 +75,7 @@ export default {
         type: types.SET_GAME_EXPIRYDATE,
         value
       });
-    },    
+    },
     setLanguage: ({ commit }, value) => {
       localStorage.setItem("gameLanguage", JSON.stringify(value));
 

src/views/Buildings.vue

@@ -153,21 +153,21 @@ export default {
         }
       }
     },
-    upgradeBuilding(building, index) {
+    upgradeBuilding(building) {
       this.clicked.push(building.name);
       SteemConnectService.setAccessToken(this.$store.state.game.accessToken);
       SteemConnectService.upgradeBuilding(
         this.$store.state.game.loginUser,
         this.$store.state.planet.id,
         building.name,
         (error, result) => {
-          if (error === null) {
+          if (error === null && result.success) {
             this.chainResponse.push(building.name);
           }
         }
       );
     },
-    buildingPossible(building, index) {
+    buildingPossible(building) {
       if (this.isBusy(building.busy)) {
         return false;
       }

src/views/Items.vue

@@ -11,11 +11,41 @@
         <thead>
           <th>{{ $t("Name") }}</th>
           <th>{{ $t("Quantity") }}</th>
+          <th>{{ $t("Gift") }}</th>
+          <th>{{ $t("Activate") }}</th>
+          <th>{{ $t(" ") }}</th>
         </thead>
         <tbody>
-          <tr v-for="item in items" :key="item.uid">
+          <tr v-for="(item, index) in items" :key="item.uid">
             <td>{{ $t(item.name) }}</td>
             <td>{{ item.total }}</td>
+            <td v-if="user === $store.state.game.loginUser">
+              <button @click="toggleGift(item.id)">
+                ...
+              </button>
+              <template v-if="showGift === item.id">
+                <input v-model="recipient" :placeholder="$t(placeholderGift)" />
+                <button @click="giftItem(item, index)" v-if="item.total > 0">
+                  {{ $t("Send") }}
+                </button>
+              </template>
+            </td>
+            <td>
+              <button
+                v-if="
+                  user === $store.state.game.loginUser &&
+                    item.total > 0 &&
+                    $store.state.planet.id !== null
+                "
+                @click="activateItem(item, $store.state.planet.id, index)"
+                :disabled="clicked.includes(item.id)"
+              >
+                {{ $t("☀") }}
+              </button>
+            </td>
+            <td>
+              <span v-if="chainResponse.includes(item.id)">{{ $t("⌛") }}</span>
+            </td>
           </tr>
         </tbody>
       </table>
@@ -39,13 +69,19 @@
 
 <script>
 import ItemsService from "@/services/items";
+import SteemConnectService from "@/services/steemconnect";
 
 export default {
   name: "items",
   props: ["user"],
   data: function() {
     return {
-      items: null
+      items: null,
+      recipient: null,
+      showGift: null,
+      clicked: [],
+      chainResponse: [],
+      placeholderGift: "enter recipient"
     };
   },
   async mounted() {
@@ -58,6 +94,43 @@ export default {
     async getShop() {
       const response = await ItemsService.byUser(this.user);
       this.items = response;
+    },
+    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;
+          }
+        }
+      );
+    },
+    toggleGift(itemId) {
+      if (this.showGift !== itemId) {
+        this.showGift = itemId;
+      } else {
+        this.showGift = null;
+      }
+    },
+    activateItem(item, planetId, index) {
+      this.clicked.push(item.id);
+      SteemConnectService.setAccessToken(this.$store.state.game.accessToken);
+      SteemConnectService.activateItem(
+        this.$store.state.game.loginUser,
+        item.uid,
+        planetId,
+        (error, result) => {
+          if (error === null && result.success) {
+            this.chainResponse.push(item.id);
+            this.items[index].total = this.items[index].total - 1;
+          }
+        }
+      );
     }
   }
 };

src/views/Planets.vue

@@ -96,7 +96,7 @@ export default {
         planetId,
         this.newName,
         (error, result) => {
-          if (error === null) {
+          if (error === null && result.success) {
             this.planets[index].name = this.newName;
             this.$store.dispatch("planet/setName", this.newName);
             this.newName = null;

src/views/Production.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="production">
     <h1>{{ $t("Production") }}</h1>
-        <template v-if="user !== this.$store.state.game.user">
+    <template v-if="user !== this.$store.state.game.user">
       <p>
         {{ $t("User: ") + user }}
         <template v-if="user !== this.$store.state.planet.id">
-          </br>{{ $t("Planet: ") + planet }}
+          <br />{{ $t("Planet: ") + planet }}
         </template>
       </p>
     </template>
@@ -21,7 +21,7 @@
           <th>{{ $t("Uranium") }}</th>
         </thead>
         <tbody>
-                    <tr>
+          <tr>
             <td>{{ $t("Depot Size") }}</td>
             <td>{{ production.coal.depot }}</td>
             <td>{{ production.ore.depot }}</td>

src/views/Shipyard.vue

@@ -36,7 +36,7 @@
           <th>{{ $t(" ") }}</th>
         </thead>
         <tbody>
-          <tr v-for="(ship, index) in shipyard" :key="ship.longname">
+          <tr v-for="ship in shipyard" :key="ship.longname">
             <td>{{ $t(ship.longname) }}</td>
             <td>{{ ship.cost.coal }}</td>
             <td>{{ ship.cost.ore }}</td>
@@ -60,8 +60,8 @@
             >
               <button
                 :disabled="clicked.includes(ship.longname)"
-                v-if="shipPossible(ship, index)"
-                @click="buildShip(ship, index)"
+                v-if="shipPossible(ship)"
+                @click="buildShip(ship)"
               >
                 ↑
               </button>
@@ -169,21 +169,21 @@ export default {
         }
       }
     },
-    buildShip(ship, index) {
+    buildShip(ship) {
       this.clicked.push(ship.longname);
       SteemConnectService.setAccessToken(this.$store.state.game.accessToken);
       SteemConnectService.buildShip(
         this.$store.state.game.loginUser,
         this.$store.state.planet.id,
         ship.name,
         (error, result) => {
-          if (error === null) {
+          if (error === null && result.success) {
             this.chainResponse.push(ship.longname);
           }
         }
       );
     },
-    shipPossible(ship, index) {
+    shipPossible(ship) {
       if (this.isBusy(ship.busy_until)) {
         return false;
       }