moves all api logic inside PlayerView, found weird bug in unpack_gold_value (floating error)

lootalot_front/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <PlayerView
     :id="state.player_id"
-    v-slot="{ player, loot, notifications, actions }"
+    v-slot="{ player, loot, notifications, actions, claims }"
   >
     <main id="app" class="container">
       <header>
@@ -62,12 +62,16 @@
             @confirmAction="addNewLoot"
           ></Loot>
           <AddingChest
+              :player="player.id"
+              :claims="claims"
               :items="playerIsGroup ? pending_loot : state.inventory"
               :perms="playerIsGroup ? {} : { canBuy: true }"
               @buy="(data) => { switchView('player'); actions.buyItems(data); }">
           </AddingChest>
         </template>
-        <Chest v-else 
+        <Chest v-else
+            :player="player.id"
+            :claims="claims"
             :items="showPlayerChest ? loot : state.group_loot"
             :perms="{ 
                 canGrab: !(showPlayerChest || playerIsGroup), 

lootalot_front/src/AppStorage.js

@@ -120,18 +120,6 @@ export const AppStorage = {
         if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
         this.state.show_player_chest = !this.state.show_player_chest
     },
-    updatePlayerWealth (goldValue) {
-        return Api.updateWealth(this.state.player_id, goldValue)
-          .then(diff => this.__updatePlayerWealth(diff));
-    },
-    // TODO: Weird private name denotes a conflict
-    __updatePlayerWealth (diff) {
-              if (this.debug) console.log('updatePlayerWealth', diff)
-              this.state.player_list[this.state.player_id].cp += diff[0];
-              this.state.player_list[this.state.player_id].sp += diff[1];
-              this.state.player_list[this.state.player_id].gp += diff[2];
-              this.state.player_list[this.state.player_id].pp += diff[3];
-    },
     // Put a claim on an item from group chest.
     putRequest (itemId) {
         const playerId = this.state.player_id
@@ -141,20 +129,6 @@ export const AppStorage = {
               this.state.player_claims[playerId].push(itemId);
            });
     },
-    buyItems (items) {
-        return Api.buyItems(this.state.player_id, items)
-                  .then(([items, diff]) => {
-                      this.__updatePlayerWealth(diff)
-                      // Add items to the player loot
-                      // TODO: needs refactoring because player mutation happens in
-                      // 2 different places
-                      return items;
-                  });
-    },
-    sellItems (items) {
-        return Api.sellItems(this.state.player_id, items)
-            .then(diff => this.__updatePlayerWealth(diff))
-    },
     // Withdraws a claim.
     cancelRequest(itemId) {
         const playerId = this.state.player_id

lootalot_front/src/components/Chest.vue

@@ -47,6 +47,8 @@
             <td>
               <Request
                 v-if="perms.canGrab"
+                :id="player"
+                :claims="claims"
                 :item="item.id"
                 @claim="(data) => $emit('claim', data)"
                 @unclaim="(data) => $emit('unclaim', data)"
@@ -68,6 +70,7 @@
     import Request from './Request.vue'
     import PercentInput from './PercentInput.vue'
     import Selector from './Selector.vue'
+    import { api } from '../lootalot.js'
     /*
         The chest displays a collection of items.
 
@@ -77,6 +80,10 @@
     */
     export default {
         props: {
+            player: {
+                type: Number,
+                required: true,
+            },
             items: {
                 type: Array,
                 required: true,
@@ -85,6 +92,10 @@
                 type: Object,
                 required: true,
             },
+            claims: {
+                type: Object,
+                required: true,
+            },
         },
         components: {
             Request,

lootalot_front/src/components/PlayerView.js

@@ -11,7 +11,20 @@ export default {
         },
         notifications: [],
         loot: [],
+        claims: {},
     }},
+    created () {
+        api.fetch("claims", "GET", null)
+            .then(r => {
+                for (var idx in r.value) {
+                    var claim = r.value[idx];
+                    if (!(claim.player_id in this.claims)) {
+                        this.$set(this.claims, claim.player_id, []);
+                    }
+                    this.claims[claim.player_id].push(claim.loot_id);
+                }
+            });
+    },
     methods: {
         parseUpdate (update) {
             if (update.Wealth) {
@@ -21,16 +34,24 @@ export default {
                 this.player.gp += w.gp;
                 this.player.pp += w.pp;
             }
-            if (update.ItemAdded) {
+            else if (update.ItemAdded) {
                 var i = update.ItemAdded;
                 this.loot.push(i);
             }
-            if (update.ItemRemoved) {
+            else if (update.ItemRemoved) {
                 var i = update.ItemRemoved;
                 this.loot.splice(this.loot.indexOf(i), 1);
             }
-            if (update.ClaimAdded || update.ClaimRemoved) {
-                console.error("cannot handle claim !", update);
+            else if (update.ClaimAdded) {
+                var c = update.ClaimAdded;
+                this.claims[c.player_id].push(c.loot_id);
+            }
+            else if (update.ClaimRemoved) {
+                var c = update.ClaimRemoved;
+                this.claims[c.player_id].splice(
+                    this.claims[c.player_id].indexOf(c.loot_id),
+                    1
+                );
             }
         },
         call (resource, method, payload) {
@@ -79,7 +100,8 @@ export default {
                     withdrawClaim: this.withdrawClaim,
                     buyItems: this.buyItems,
                     sellItems: this.sellItems,
-            }
+            },
+            claims: this.claims,
         })
     }
 }

lootalot_front/src/components/Request.vue

@@ -14,7 +14,7 @@
         </span>
       </button>
     </template>
-    <button class="button is-primary is-fullwidth" 
+    <button class="button is-primary"
       @click="putRequest"
       :disabled="isRequested">
       <span class="icon is-small">
@@ -27,26 +27,36 @@
 <script>
     import { AppStorage } from '../AppStorage'
     export default {
-        props: ["item"],
-        data () { 
-            return AppStorage.state;
+        props: {
+            // Id of active player
+            id: {
+                type: Number,
+                required: true,
+            },
+            // Map of all claims
+            claims: {
+                type: Object,
+                required: true,
+            },
+            // Id of item we are bound to
+            item: {
+                type: Number,
+                required: true,
+            }
         },
         computed: {
             // Check if item is requested by active player
             isRequested () {
-                const reqs = this.player_claims[this.player_id];
-                return reqs.includes(this.item);
+                return this.claims[this.id].includes(this.item);
             },
             // Check if item is requested by multiple players including active one
             isInConflict () {
-                const reqs = this.player_claims;
-                const playerId = this.player_id;
                 var reqByPlayer = false;
                 var reqByOther = false;
-                for (var key in reqs) {
-                    const isReq = reqs[key].includes(this.item);
+                for (var id in this.claims) {
+                    const isReq = this.claims[id].includes(this.item);
                     if (isReq) {
-                        if (key == playerId) {
+                        if (id == this.id) {
                             reqByPlayer = true;
                         } else {
                             reqByOther = true;