From 4e28eb415957d9d13a551d2d0f7142222341e051 Mon Sep 17 00:00:00 2001
From: Artus <artus@landoftheunicorn.ovh>
Date: Wed, 3 Jul 2019 16:07:56 +0200
Subject: [PATCH] basic impl of players list and loot api in frontend

---
 lootalot_front/src/App.vue               | 15 ++++++-----
 lootalot_front/src/AppStorage.js         | 32 ++++++++++++++----------
 lootalot_front/src/components/Chest.vue  | 20 ++++++++++-----
 lootalot_front/src/components/Player.vue |  8 +++---
 4 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/lootalot_front/src/App.vue b/lootalot_front/src/App.vue
index 062a6db..4173780 100644
--- a/lootalot_front/src/App.vue
+++ b/lootalot_front/src/App.vue
@@ -1,9 +1,9 @@
 <template>
   <main id="app" class="section">
   <section id="content" class="columns is-desktop">
-    <Player></Player>
+    <Player v-if="fullyLoaded"></Player>
     <div class="column">
-      <Chest :player="0"></Chest>
+      <Chest :player="0" v-if="fullyLoaded"></Chest>
     </div>
   </section>
   </main>
@@ -32,11 +32,14 @@ function getCookie(cname) {
 
 export default {
   name: 'app',
+  data () { return {
+    fullyLoaded: false,
+  };},
   components: {
     Player,
     Chest
   },
-  beforeCreate () {
+  created () {
     const cookie = getCookie("player_id");
     let playerId;
     if (cookie == "") {
@@ -44,9 +47,9 @@ export default {
     } else {
         playerId = Number(cookie);
     }
-    AppStorage.initStorage(playerId);
-    return;
-  }
+    AppStorage.initStorage(playerId)
+    	.then(_ => this.fullyLoaded = true);
+  },
 }
 </script>
 
diff --git a/lootalot_front/src/AppStorage.js b/lootalot_front/src/AppStorage.js
index b7bf4d5..35b454d 100644
--- a/lootalot_front/src/AppStorage.js
+++ b/lootalot_front/src/AppStorage.js
@@ -6,14 +6,9 @@ const PLAYER_LIST = [
             {id: 3, name: "Fefi", wealth: [0,0,0,0], debt: 0},
         ];
 
-const fetchPlayerList = function () {
-  fetch("http://localhost:8088/players")
-    .then(r => r.json())
-    .then(r => console.log(r));
-};
-
-const fetchRequests = function () {
-
+const __fetchPlayerList = function() {
+    return fetch("http://localhost:8088/players")
+      .then(r => r.json())
 };
 
 export const AppStorage = {
@@ -27,12 +22,23 @@ export const AppStorage = {
     // Initiate the state
     initStorage (playerId) {
         if (this.debug) console.log('Initiate with player : ', playerId)
-        fetchPlayerList();
         this.state.player_id = playerId;
-        for (var idx in PLAYER_LIST) {
-            var player = PLAYER_LIST[idx];
-            this.state.player_list.push(player);
-            this.state.requests[player.id] = []; 
+        return Promise.all([
+          fetch("http://localhost:8088/players")
+            .then(r => r.json()),
+          ])
+          .then(data => {
+            console.log("initiate ", data);
+            this.initPlayerList(data[0]);
+          })
+          .catch(e => console.log("Fetch error ", e));
+
+    },
+    initPlayerList(data) {
+        for (var idx in data) {
+          var p = data[idx];
+          this.state.player_list.push(p);
+          this.state.requests[p.id] = [5,];
         }
     },
     // Player actions
diff --git a/lootalot_front/src/components/Chest.vue b/lootalot_front/src/components/Chest.vue
index e02265e..ef9eeba 100644
--- a/lootalot_front/src/components/Chest.vue
+++ b/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>
 
diff --git a/lootalot_front/src/components/Player.vue b/lootalot_front/src/components/Player.vue
index 3b01860..5ab0f5a 100644
--- a/lootalot_front/src/components/Player.vue
+++ b/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 () {