removes obsolete AppStorage.js

lootalot_front/src/App.vue

@@ -1,11 +1,11 @@
 <template>
   <PlayerView
-    :id="state.player_id"
+    :id="player_id"
     v-slot="{ player, loot, notifications, actions, claims }"
   >
     <main id="app" class="container">
       <header>
-        <HeaderBar :app_state="state">
+        <HeaderBar>
           <template v-slot:title>
             {{ player.name }}
           </template>
@@ -19,7 +19,7 @@
             </template>
             <hr class="navbar-divider">
             <div class="navbar-item heading">Changer</div>
-            <a v-for="(p,i) in state.player_list" :key="i"
+            <a v-for="(p,i) in playerList" :key="i"
               @click="setActivePlayer(i)"
               href="#" class="navbar-item">
               {{ p.name }}</a>
@@ -57,14 +57,14 @@
       <main class="section">
         <template v-if="isAdding">
           <Loot v-if="playerIsGroup"
-            :inventory="state.inventory"
+            :inventory="itemsInventory"
             @addItem="item => pending_loot.push(item)"
             @confirmAction="addNewLoot"
           ></Loot>
           <AddingChest
               :player="player.id"
               :claims="claims"
-              :items="playerIsGroup ? pending_loot : state.inventory"
+              :items="playerIsGroup ? pending_loot : itemsInShop"
               :perms="playerIsGroup ? {} : { canBuy: true }"
               @buy="(data) => { switchView('player'); actions.buyItems(data); }">
           </AddingChest>
@@ -72,7 +72,7 @@
         <Chest v-else
             :player="player.id"
             :claims="claims"
-            :items="showPlayerChest ? loot : state.group_loot"
+            :items="showPlayerChest ? loot : groupLoot"
             :perms="{ 
                 canGrab: !(showPlayerChest || playerIsGroup), 
                 canSell: showPlayerChest || playerIsGroup
@@ -92,7 +92,7 @@ import HeaderBar from './components/HeaderBar.vue'
 import Wealth from './components/Wealth.vue'
 import Chest from './components/Chest.vue'
 import Loot from './components/Loot.vue'
-import { Api, AppStorage } from './AppStorage'
+import { api } from './lootalot.js'
 
 function getCookie(cname) {
   var name = cname + "=";
@@ -114,10 +114,14 @@ export default {
   name: 'app',
   data () {
       return {
-        state: AppStorage.state,
+        player_id: 0,
+        playerList: [],
         activeView: 'group',
-        shopInventory: [{id: 1, name: "Item from shop #1", base_price: 2000}],
+        groupLoot: [],
+        itemsInventory: [],
+        itemsInShop: [{id: 1, name: "Item from shop #1", base_price: 2000}],
         pending_loot: [],
+        initiated: false,
       };
   },
   components: {
@@ -129,21 +133,26 @@ export default {
     Loot,
   },
   created () {
-    // Initiate with active player set to value found in cookie
+      const cookie = getCookie("player_id");
-    // or as group by default.
+      this.player_id = cookie ? Number(cookie) : 0;
-    const cookie = getCookie("player_id");
+      Promise.all([
-    let playerId;
+          api.fetch("players/", "GET", null),
-    if (cookie == "") {
+          api.fetch("players/0/loot", "GET", null),
-        playerId = 0;
+          api.fetch("items", "GET", null),
-    } else {
+      ])
-        playerId = Number(cookie);
+          .then(([players, loot, items]) => {
-    }
+              this.playerList = players.value;
-    AppStorage.initStorage(playerId);
+              this.groupLoot = loot.value;
+              this.itemsInventory = items.value;
+          })
+          .catch(r => alert("Error ! \n" + r))
+          .then(() => this.initiated = true);
   },
   methods: {
     setActivePlayer (idx) { 
         if (idx == 0) this.switchView('group');
-        AppStorage.setActivePlayer(idx); 
+        this.player_id = Number(idx)
+        document.cookie = `player_id=${idx};`;
     },
     switchView (viewId) {
         if (!['group', 'player', 'adding'].includes(viewId)) {
@@ -151,21 +160,19 @@ export default {
         }
         this.activeView = viewId;
     },
-    switchPlayerChestVisibility () {
-        AppStorage.switchPlayerChestVisibility();
-    },
     addNewLoot () {
-        Api.newLoot(this.pending_loot)
+        api.fetch("admin/add-loot", "POST", this.pending_loot)
-           .then(_ => {
+           .then(() => {
                this.pending_loot = []
                this.switchView('group');
-           });
+           })
+           .catch(r => alert("Error: " + r));
     }
   },
   computed: {
     showPlayerChest () { return this.activeView == 'player' },
     isAdding () { return this.activeView == 'adding' },
-    playerIsGroup () { return this.state.player_id == 0 },
+    playerIsGroup () { return this.player_id == 0 },
   }
 }
 </script>

lootalot_front/src/AppStorage.js

@@ -1,149 +0,0 @@
-import Vue from 'vue'
-
-const API_BASEURL = "http://localhost:8088/api/"
-const API_ENDPOINT = function (tailString) {
-  return API_BASEURL + tailString;
-}
-
-export const Api = {
-  __doFetch (endpoint, method, payload) {
-    return fetch(API_ENDPOINT(endpoint),
-        {
-            method,
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify(payload)
-        })
-        .then(r => r.json())
-  },
-  fetchPlayerList () {
-      return fetch(API_ENDPOINT("players/"))
-          .then(r => r.json())
-  },
-  fetchInventory () {
-      return fetch(API_ENDPOINT("items"))
-          .then(r => r.json())
-  },
-  fetchClaims () {
-      return fetch(API_ENDPOINT("claims"))
-          .then(r => r.json())
-  },
-  fetchLoot (playerId) {
-      return fetch(API_ENDPOINT("players/" + playerId + "/loot"))
-          .then(r => r.json())
-  },
-  putClaim (player_id, item_id) {
-      const payload = item_id;
-      return this.__doFetch("players/" + player_id + "/claims", 'PUT', payload);
-  },
-  unClaim (player_id, item_id) {
-       const payload = item_id;
-       return this.__doFetch("players/" + player_id + "/claims", 'DELETE', payload);
-  },
-  updateWealth (player_id, value_in_gp) {
-      const payload = Number(value_in_gp);
-      return this.__doFetch("players/" + player_id + "/wealth", 'PUT', payload);
-  },
-  buyItems (player_id, items) {
-      const payload = items;
-      return this.__doFetch("players/" + player_id + "/loot", 'PUT', payload);
-  },
-  sellItems (player_id, items) {
-      const payload = items;
-      return this.__doFetch("players/" + player_id + "/loot", 'DELETE', payload);
-  },
-  newLoot (items) {
-    return this.__doFetch("admin/add-loot", 'POST', items);
-  },
-};
-
-
-export const AppStorage = {
-    debug: true,
-    state: {
-        player_id: 0,
-        player_list: {},
-        group_loot: [],
-        player_claims: {},
-        inventory: [],
-        initiated: false,
-        show_player_chest: false,
-    },
-    // Initiate the state
-    initStorage (playerId) {
-        if (this.debug) console.log('Initiates with player : ', playerId)
-        this.state.player_id = playerId;
-        // Fetch initial data
-        return Promise
-            .all([ 
-                Api.fetchPlayerList(), 
-                Api.fetchClaims(), 
-                Api.fetchInventory(),
-                Api.fetchLoot(0)
-            ])
-            .then(data => {
-                const [players, claims, inventory, group_loot] = data;
-              this.__initPlayerList(players.value);
-              this.__initClaimsStore(claims.value);
-              Vue.set(this.state, 'group_loot', group_loot.value);
-              Vue.set(this.state, 'inventory', inventory.value);
-            })
-            .then(_ => this.state.initiated = true)
-            .catch(e => { alert(e); this.state.initiated = false });
-    },
-    __initClaimsStore(data) {
-      for (var idx in data) {
-        var claimDesc = data[idx];
-        this.state.player_claims[claimDesc.player_id].push(claimDesc.loot_id);
-      }
-    },
-    __initPlayerList(data) {
-        for (var idx in data) {
-          var playerDesc = data[idx];
-          const playerId = Number(playerDesc.id);
-          if (this.debug) console.log("Creates", playerId, playerDesc.name)
-          // Initiate data for a single Player.
-          Vue.set(this.state.player_list, playerId, playerDesc);
-          Vue.set(this.state.player_claims, playerId, []);
-        }
-    },
-    // User actions
-    // Sets a new active player by id
-    setActivePlayer (newPlayerId) {
-        if (this.debug) console.log('setActivePlayer to ', newPlayerId)
-        this.state.player_id = Number(newPlayerId)
-        document.cookie = `player_id=${newPlayerId};`;
-    },
-    // Show/Hide player's chest
-    switchPlayerChestVisibility () {
-        if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
-        this.state.show_player_chest = !this.state.show_player_chest
-    },
-    // Put a claim on an item from group chest.
-    putRequest (itemId) {
-        const playerId = this.state.player_id
-        return Api.putClaim(playerId, itemId)
-           .then(done => {
-              // Update cliend-side state
-              this.state.player_claims[playerId].push(itemId);
-           });
-    },
-    // Withdraws a claim.
-    cancelRequest(itemId) {
-        const playerId = this.state.player_id
-        return Api.unClaim(playerId, itemId)
-          .then(_ => {
-                var idx = this.state.player_claims[playerId].indexOf(itemId);
-                if (idx > -1) {
-                    this.state.player_claims[playerId].splice(idx, 1);
-                } else {
-                    if (this.debug) console.log("cancel a non-existent request")
-                }
-          });
-    },
-    addNewLoot (items) {
-      return Api.newLoot(items);
-    },
-}
-

lootalot_front/src/components/HeaderBar.vue

@@ -4,10 +4,10 @@
       <p class="navbar-item is-size-4"><slot name="title">...</slot></p>
       <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
          @click="switchMobileVisibility">
-	  <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
-	  <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
-	  <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
-	</a>
+      </a>
     </div>
     <div id="menu" class="navbar-menu" :class="{'is-active': showOnMobile }">
       <div class="navbar-end">
@@ -17,7 +17,7 @@
           <slot name="links">
           <a class="navbar-item">History of Loot</a>
           </slot>
-	    </div>
+        </div>
       </div>
       </div>
     </div>

lootalot_front/src/components/Request.vue

@@ -25,7 +25,6 @@
 </template>
 
 <script>
-    import { AppStorage } from '../AppStorage'
     export default {
         props: {
             // Id of active player
@@ -47,7 +46,11 @@
         computed: {
             // Check if item is requested by active player
             isRequested () {
-                return this.claims[this.id].includes(this.item);
+                if (this.claims[this.id]) {
+                    return this.claims[this.id].includes(this.item);
+                } else {
+                    return false;
+                }
             },
             // Check if item is requested by multiple players including active one
             isInConflict () {

lootalot_front/src/lootalot.js

@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 const API_BASEURL = "http://localhost:8088/api/"
 const API_ENDPOINT = function (tailString) {
   return API_BASEURL + tailString;