updates frontend to use DB api

lootalot_front/src/App.vue

@@ -1,9 +1,9 @@
 <template>
   <main id="app" class="section">
   <section id="content" class="columns is-desktop">
-    <Player v-if="fullyLoaded"></Player>
+    <Player v-if="state.initiated"></Player>
     <div class="column">
-      <Chest :player="0" v-if="fullyLoaded"></Chest>
+      <Chest :player="0" v-if="state.initiated"></Chest>
     </div>
   </section>
   </main>
@@ -32,14 +32,18 @@ function getCookie(cname) {
 
 export default {
   name: 'app',
-  data () { return {
+  data () {
-    fullyLoaded: false,
+      return {
-  };},
+  	state: AppStorage.state,
+      };
+  },
   components: {
     Player,
     Chest
   },
   created () {
+    // Initiate with active player set to value found in cookie
+    // or as group by default.
     const cookie = getCookie("player_id");
     let playerId;
     if (cookie == "") {
@@ -47,8 +51,7 @@ export default {
     } else {
         playerId = Number(cookie);
     }
-    AppStorage.initStorage(playerId)
+    AppStorage.initStorage(playerId);
-    	.then(_ => this.fullyLoaded = true);
   },
 }
 </script>

lootalot_front/src/AppStorage.js

@@ -1,45 +1,84 @@
 
-const PLAYER_LIST = [
-            {id: 0, name: "Groupe", wealth: [0,0,0,0], debt: 0},
-            {id: 1, name: "Lomion", wealth: [0,0,0,0], debt: 0},
-            {id: 4, name: "Oilosse", wealth: [0,0,0,0], debt: 0},
-            {id: 3, name: "Fefi", wealth: [0,0,0,0], debt: 0},
-        ];
 
-const __fetchPlayerList = function() {
+const Api = {
+  fetchPlayerList () {
       return fetch("http://localhost:8088/players")
           .then(r => r.json())
+          .catch(e => console.error("Fetch error ", e));
+  },
+  fetchClaims () {
+      return fetch("http://localhost:8088/claims")
+          .then(r => r.json())
+          .catch(e => console.error("Fetch error ", e));
+  },
+  fetchLoot (playerId) {
+      const url = "http://localhost:8088/loot/" + playerId;
+      return fetch(url)
+       	  .then(r => r.json())
+       	  .catch(e => console.error("Fetch error", e));
+  },
+  putClaim (playerId, itemId) {
+        console.log('newRequest from', playerId, 'on', itemId);
+        return true;
+  },
+  unClaim (playerId, itemId) {
+        console.log('cancelRequest of', playerId, 'on', itemId);
+        return true;
+  },
+  updateWealth (playerId, goldValue) {
+        console.log('Update wealth', goldValue);
+        return true;
+  }
 };
 
+
 export const AppStorage = {
     debug: true,
     state: {
         player_id: 0,
-        player_list: [],
+        player_list: {},
-        show_player_chest: false,
+        player_loot: {},
         requests: {}, 
+        initiated: false,
+        show_player_chest: false,
     },
     // Initiate the state
     initStorage (playerId) {
-        if (this.debug) console.log('Initiate with player : ', playerId)
+        if (this.debug) console.log('Initiates with player : ', playerId)
         this.state.player_id = playerId;
-        return Promise.all([
+        // Fetch initial data
-          fetch("http://localhost:8088/players")
+        return Promise
-            .then(r => r.json()),
+            .all([ Api.fetchPlayerList(), Api.fetchClaims(), ])
-          ])
             .then(data => {
-            console.log("initiate ", data);
+                const [players, claims] = data;
-            this.initPlayerList(data[0]);
+                this.initPlayerList(players);
-          })
+                console.log("claims", claims);
-          .catch(e => console.log("Fetch error ", e));
+            });
-
     },
     initPlayerList(data) {
         for (var idx in data) {
-          var p = data[idx];
+          var playerDesc = data[idx];
-          this.state.player_list.push(p);
+          const playerId = Number(playerDesc.id);
-          this.state.requests[p.id] = [5,];
+          if (this.debug) console.log("Creates", playerId, playerDesc.name)
+          this.state.player_list[playerId] = playerDesc;
+          this.state.player_loot[playerId] = [];
+          this.state.requests[playerId] = [];
         }
+        // Hack for now !!
+        // Fetch all players loot and wait to set initiated to true
+        var promises = [];
+        for (var idx in data) {
+          const playerId = data[idx].id;
+          var promise = Api.fetchLoot(playerId)
+             .then(data => data.forEach(
+                item => {
+                  if (this.debug) console.log("add looted item", item, playerId)
+                  this.state.player_loot[playerId].push(item)
+                }
+             ));
+          promises.push(promise);
+        }
+        Promise.all(promises).then(_ => this.state.initiated = true);
     },
     // Player actions
     // Sets a new active player by id
@@ -56,19 +95,28 @@ export const AppStorage = {
     // Put a claim on an item from group chest.
     putRequest (itemId) {
         const playerId = this.state.player_id
-        if (this.debug) console.log('newRequest from', playerId, 'on', itemId)
+        const done = Api.putClaim(playerId, itemId);
+        if (done) {
+          // Update cliend-side state
           this.state.requests[playerId].push(itemId);
+        } else {
+          if (this.debug) console.log("API responded with 'false'")
+        }
     },
     // Withdraws a claim.
     cancelRequest(itemId) {
         const playerId = this.state.player_id
-        if (this.debug) console.log('cancelRequest of', playerId, 'on', itemId)
+        const done = Api.unClaim(playerId, itemId);
+        if (done) {
           var idx = this.state.requests[playerId].indexOf(itemId);
           if (idx > -1) {
               this.state.requests[playerId].splice(idx, 1);
           } else {
               if (this.debug) console.log("cancel a non-existent request")
           }
+        } else {
+          if (this.debug) console.log("API responded with 'false'")
+        }
     }
 }
 

lootalot_front/src/components/Chest.vue

@@ -72,7 +72,7 @@
                         id="`item-${idx}`" 
                         :value="item.id"
                         v-model="sell_selected">
-                      {{item.sell_value}} GP
+                      {{item.base_price / 2}} GP
                     </label>
                   </div>
                 <PercentInput></PercentInput>
@@ -118,7 +118,6 @@
         data () {
             return {
                 app_state: AppStorage.state,
-                content: [],
                 is_selling: false,
                 is_adding: false,
                 sell_selected: [],
@@ -126,27 +125,25 @@
         },
         methods: {
        	    fetchLoot () {
-       	   	fetch(`http://localhost:8088/loot/${this.player}`)
+
-       	   	    .then(r => r.json())
-       	   	    .then(data => {
-       	   	    	data.forEach(item => this.content.push(item));
-       	   	    })
-       	   	    .then(_ => console.log("Loot loaded !"))
        	    }
         },
         computed: {
+            content () {
+            	const playerId = this.player;
+            	console.log("Refresh chest of", playerId);
+            	return this.app_state.player_loot[playerId];
+            },
             // Can the active user sell items from this chest ?
             canSell () {
                 return this.player == this.app_state.player_id;
             },
             totalSellValue () {
                 const selected = this.sell_selected;
-                var value = this.content
+                return this.content
                     .filter(item => selected.includes(item.id))
-                    .map(item => item.sell_value)
+                    .map(item => item.base_price / 2)
                     .reduce((total,value) => total + value, 0);
-
-                return value;
             },
             // Can the user grab items from this chest ?
             canGrab () {
@@ -163,9 +160,6 @@
                      && !this.is_adding);
             }
         },
-        mounted () {
-	    this.fetchLoot();
-        }
     }
 </script>
 

lootalot_front/src/components/Player.vue

@@ -82,8 +82,7 @@
         },
         computed: {
             player () {
-                const id = this.state.player_id;
+                const idx = this.state.player_id;
-                const idx = this.state.player_list.findIndex(p => p.id == id);
                 return this.state.player_list[idx];
             },
             wealth () {
@@ -104,10 +103,9 @@
                 }
             },
             setActivePlayer (playerIdx) {
-                const newId = this.state.player_list[playerIdx].id;
+            	var playerIdx = Number(playerIdx);
-                AppStorage.setActivePlayer(newId);
+                AppStorage.setActivePlayer(playerIdx);
-                if (newId == 0) { this.hidePlayerChest() }
+                if (playerIdx == 0) { this.hidePlayerChest() }
-                this.player.name = this.state.player_list[playerIdx].name
             },
             closeDropdown () {
                 this.show_dropdown = false

lootalot_front/src/components/Request.vue

@@ -35,7 +35,6 @@
         data () { 
             return {
                 state: AppStorage.state,
-                _requested: false, // Dummy state
             };
         },
         computed: {