basic impl of players list and loot api in frontend

lootalot_front/src/components/Chest.vue

@@ -118,17 +118,22 @@
         data () {
             return {
                 app_state: AppStorage.state,
-                content: [
-                    {id: 10, name: "Épée longue +2 acérée",
-                     sell_value: 15000 },
-                    {id: 5, name: "Ceinture de force +6",
-                     sell_value: 80000 },
-                ],
+                content: [],
                 is_selling: false,
                 is_adding: false,
                 sell_selected: [],
             };
         },
+        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: {
             // Can the active user sell items from this chest ?
             canSell () {
@@ -158,6 +163,9 @@
                      && !this.is_adding);
             }
         },
+        mounted () {
+	    this.fetchLoot();
+        }
     }
 </script>
 

lootalot_front/src/components/Player.vue

@@ -2,7 +2,7 @@
   <div class="column is-one-third-desktop">
     <div id="sidebar" class="card">
       <header id="sidebar-heading" class="card-header">
-        <p class="card-header-title">{{ name }}</p>
+        <p class="card-header-title">{{ player.name }}</p>
         <div class="dropdown is-right" 
             :class="{ 'is-active': show_dropdown }">
           <div class="dropdown-trigger" ref="dropdown_btn">
@@ -26,7 +26,7 @@
         </div>
       </header>
       <div class="card-content">
-        <Wealth :wealth="player.wealth" 
+        <Wealth :wealth="wealth"
                 :edit="edit_wealth" 
                 @updated="edit_wealth = !edit_wealth">
         </Wealth>
@@ -86,8 +86,8 @@
                 const idx = this.state.player_list.findIndex(p => p.id == id);
                 return this.state.player_list[idx];
             },
-            name () {
-                return this.player.name;
+            wealth () {
+            	return [this.player.cp, this.player.sp, this.player.gp, this.player.pp];
             },
             // Check if the active player is the special 'Group' player
             playerIsGroup () {