From 63c14b4a54f56fd643fb549982f05de8766fb138 Mon Sep 17 00:00:00 2001
From: Artus <artus@landoftheunicorn.ovh>
Date: Fri, 5 Jul 2019 15:06:16 +0200
Subject: [PATCH] improves progressive rendering, work in progress...

---
 lootalot_db/db.sqlite3                        | Bin 28672 -> 28672 bytes
 lootalot_front/src/App.vue                    |   2 +-
 lootalot_front/src/AppStorage.js              |  20 +++---
 lootalot_front/src/components/NumberInput.vue |  11 +--
 lootalot_front/src/components/Player.vue      |  66 ++++++++++--------
 lootalot_front/src/components/Request.vue     |   4 +-
 lootalot_front/src/components/Wealth.vue      |   4 +-
 7 files changed, 58 insertions(+), 49 deletions(-)

diff --git a/lootalot_db/db.sqlite3 b/lootalot_db/db.sqlite3
index d0944f8e4b1657c33216fbb00d876007a8a6eef8..9ac5afea47f7c9eab367cb0950c2e631ad4c545a 100644
GIT binary patch
delta 106
zcmZp8z}WDBae_3X)<hX+My-tri~M=cGBEQmX5wGWzk~noW<iAs{Pz5(8KfA588{du
xIT#rkncR!=OAAstS%Mj+3NnHOL83nSxtaNStg3wc@A%&_2rwXl&3EIK1pvqx7$E=v

delta 80
zcmZp8z}WDBae_3X+C&*=MzxIzi~M=sF);J*VBkN^zk~noW<iBj{HlVC91M~i9E^;N
gKKZ$s`FX6Wd;$z$A)uIhQGRJbsyP4VyYb2b0GLS>vH$=8

diff --git a/lootalot_front/src/App.vue b/lootalot_front/src/App.vue
index 229ce0d..eaf8d58 100644
--- a/lootalot_front/src/App.vue
+++ b/lootalot_front/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <main id="app" class="section">
   <section id="content" class="columns is-desktop">
-    <Player v-if="state.initiated"></Player>
+    <Player></Player>
     <div class="column">
       <Chest :player="0" v-if="state.initiated"></Chest>
     </div>
diff --git a/lootalot_front/src/AppStorage.js b/lootalot_front/src/AppStorage.js
index c465dbd..f5bec72 100644
--- a/lootalot_front/src/AppStorage.js
+++ b/lootalot_front/src/AppStorage.js
@@ -43,7 +43,7 @@ export const AppStorage = {
         player_id: 0,
         player_list: {},
         player_loot: {},
-        requests: {}, 
+        player_claims: {},
         initiated: false,
         show_player_chest: false,
     },
@@ -56,18 +56,19 @@ export const AppStorage = {
             .all([ Api.fetchPlayerList(), Api.fetchClaims(), ])
             .then(data => {
                 const [players, claims] = data;
-                this.initPlayerList(players);
+                this.__initPlayerList(players);
                 console.log("claims", claims);
             });
     },
-    initPlayerList(data) {
+    __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_loot, playerId, []);
-          Vue.set(this.state.requests, playerId, []);
+          Vue.set(this.state.player_claims, playerId, []);
         }
         // Hack for now !!
         // Fetch all players loot and wait to set initiated to true
@@ -85,7 +86,7 @@ export const AppStorage = {
         }
         Promise.all(promises).then(_ => this.state.initiated = true);
     },
-    // Player actions
+    // User actions
     // Sets a new active player by id
     setActivePlayer (newPlayerId) {
         if (this.debug) console.log('setActivePlayer to ', newPlayerId)
@@ -97,6 +98,9 @@ export const AppStorage = {
         if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
         this.state.show_player_chest = !this.state.show_player_chest
     },
+    // TODO
+    // get the content of a player Chest, retrieve form cache or fetched
+    // will replace hack that loads *all* chest...
     getPlayerLoot (playerId) {
 
     },
@@ -118,7 +122,7 @@ export const AppStorage = {
            .then(done => {
               if (done) {
                 // Update cliend-side state
-                this.state.requests[playerId].push(itemId);
+                this.state.player_claims[playerId].push(itemId);
               } else {
                 if (this.debug) console.log("API responded with 'false'")
               }
@@ -130,9 +134,9 @@ export const AppStorage = {
         Api.unClaim(playerId, itemId)
           .then(done => {
               if (done) {
-                var idx = this.state.requests[playerId].indexOf(itemId);
+                var idx = this.state.player_claims[playerId].indexOf(itemId);
                 if (idx > -1) {
-                    this.state.requests[playerId].splice(idx, 1);
+                    this.state.player_claims[playerId].splice(idx, 1);
                 } else {
                     if (this.debug) console.log("cancel a non-existent request")
                 }
diff --git a/lootalot_front/src/components/NumberInput.vue b/lootalot_front/src/components/NumberInput.vue
index 5a8f7b3..bd71ffe 100644
--- a/lootalot_front/src/components/NumberInput.vue
+++ b/lootalot_front/src/components/NumberInput.vue
@@ -17,11 +17,12 @@
             checkError (ev) {
                 const newValue = ev.target.value;
                 this.has_error = isNaN(newValue);
-                this.$emit(
-                    'input', 
-                    // Do the conversion if valid
-                    this.has_error ? newValue : Number(newValue)
-                ); 
+                if (!this.has_error) {
+		        this.$emit(
+		            'input',
+		            Number(newValue)
+		        );
+		}
             }
         },
     }
diff --git a/lootalot_front/src/components/Player.vue b/lootalot_front/src/components/Player.vue
index 551afac..219f92c 100644
--- a/lootalot_front/src/components/Player.vue
+++ b/lootalot_front/src/components/Player.vue
@@ -2,8 +2,9 @@
   <div class="column is-one-third-desktop">
     <div id="sidebar" class="card">
       <header id="sidebar-heading" class="card-header">
-        <p class="card-header-title">{{ player.name }}</p>
-        <div class="dropdown is-right" 
+        <p class="card-header-title">
+          {{ app_state.initiated ? player.name : "..." }}</p>
+        <div class="dropdown is-right"
             :class="{ 'is-active': show_dropdown }">
           <div class="dropdown-trigger" ref="dropdown_btn">
             <a id="change_player" class="card-header-icon"
@@ -16,33 +17,30 @@
           </div>
           <div class="dropdown-menu" id="dropdown-menu" role="menu"
             v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown', visible: show_dropdown }">
-            <div class="dropdown-content">
-              <a v-for="(p,i) in state.player_list" :key="i"
+            <div class="dropdown-content" v-if="app_state.initiated">
+              <a v-for="(p,i) in app_state.player_list" :key="i"
                  @click="setActivePlayer(i)" 
                  href="#" class="dropdown-item">
                 {{ p.name }}</a>
+              </div>
             </div>
           </div>
-        </div>
-      </header>
+        </header>
       <div class="card-content">
-        <Wealth :wealth="wealth"
-                @updated="console.log('updated wealth')">
-        </Wealth>
-        <p class="notification is-warning" v-show="!playerIsGroup">Dette : {{ player.debt }}gp</p>
-	<a @click="switchPlayerChestVisibility" v-show="!playerIsGroup"
-	  href="#" class="button is-link is-fullwidth">
-	  Coffre
-	</a>
+      <Wealth :wealth="wealth"></Wealth>
+      <p class="notification is-warning" v-show="!playerIsGroup">
+      	Dette : {{ app_state.initiated ? player.debt : "" }}gp
+	</p>
+      <a @click="switchPlayerChestVisibility" v-show="!playerIsGroup"
+        href="#" class="button is-link is-fullwidth">
+        Coffre
+        </a>
+      <Chest :player="app_state.player_id"
+      	v-show="app_state.show_player_chest">
+      	</Chest>
+      <a href="#" class="button is-link is-fullwidth is-hidden" disabled>Historique</a>
       </div>
     </div>
-
-    <div class="card" v-show="state.show_player_chest">
-      <div class="card-content">
-        <Chest :player="state.player_id"></Chest>
-      </div>
-    </div>
-    <a href="#" class="button is-link is-fullwidth" disabled>Historique</a>
   </div>
 </template>
 
@@ -71,7 +69,7 @@
         components: { Chest, Wealth },
         data () {
             return {
-                state: AppStorage.state,
+                app_state: AppStorage.state,
                 show_dropdown: false,
                 edit_wealth: false,
                 handleOutsideClick: null,
@@ -79,19 +77,24 @@
         },
         computed: {
             player () {
-                const idx = this.state.player_id;
-                return this.state.player_list[idx];
+            	if (!this.app_state.initiated) return {}
+                const idx = this.app_state.player_id;
+                return this.app_state.player_list[idx];
             },
             wealth () {
-            	const cp = this.player.cp
-            	const sp = this.player.sp
-            	const gp = this.player.gp
-            	const pp = this.player.pp
-            	return [cp, sp, gp, pp];
+            	if (!this.app_state.initiated) {
+            	    return ["-", "-", "-", "-"];
+            	} else {
+		    const cp = this.player.cp
+		    const sp = this.player.sp
+		    const gp = this.player.gp
+		    const pp = this.player.pp
+		    return [cp, sp, gp, pp];
+		}
             },
             // Check if the active player is the special 'Group' player
             playerIsGroup () {
-                return this.state.player_id == 0;
+                return this.app_state.player_id == 0;
             }
         },
         methods: {
@@ -99,7 +102,7 @@
                 AppStorage.switchPlayerChestVisibility();
             },
             hidePlayerChest () {
-                if (this.state.show_player_chest) {
+                if (this.app_state.show_player_chest) {
                     this.switchPlayerChestVisibility();
                 }
             },
@@ -153,4 +156,5 @@
 </script>
 
 <style scoped>
+  .fa-exchange-alt.disabled { opacity: 0.4; }
 </style>
diff --git a/lootalot_front/src/components/Request.vue b/lootalot_front/src/components/Request.vue
index 1ef0991..8f35886 100644
--- a/lootalot_front/src/components/Request.vue
+++ b/lootalot_front/src/components/Request.vue
@@ -40,12 +40,12 @@
         computed: {
             // Check if item is requested by active player
             isRequested () {
-                const reqs = this.state.requests[this.state.player_id];
+                const reqs = this.state.player_claims[this.state.player_id];
                 return reqs.includes(this.item);
             },
             // Check if item is requested by multiple players including active one
             isInConflict () {
-                const reqs = this.state.requests;
+                const reqs = this.state.player_claims;
                 const playerId = this.state.player_id;
                 var reqByPlayer = false;
                 var reqByOther = false;
diff --git a/lootalot_front/src/components/Wealth.vue b/lootalot_front/src/components/Wealth.vue
index a7798a2..63f9dcf 100644
--- a/lootalot_front/src/components/Wealth.vue
+++ b/lootalot_front/src/components/Wealth.vue
@@ -12,8 +12,8 @@
         <p class="is-size-4">{{ wealth[3] }}</p>
       	</div>
       <div class="column">
-        <p class="heading">PG</p>
-        <p class="is-size-4">{{ wealth[2] }}</p>
+        <p class="heading">PO</p>
+        <p class="is-size-4 is-primary">{{ wealth[2] }}</p>
       	</div>
       <div class="column">
         <p class="heading">PA</p>