From dae7633c112f57dc4e6bde0cdf202b89d25577ee Mon Sep 17 00:00:00 2001
From: Artus <artus@landoftheunicorn.ovh>
Date: Wed, 31 Jul 2019 15:37:35 +0200
Subject: [PATCH] moves logic to PlayerView, adds simple notifications when
 debugging

---
 lootalot_front/src/App.vue                  | 10 ++++++---
 lootalot_front/src/AppStorage.js            |  4 ++--
 lootalot_front/src/components/Chest.vue     |  5 ++++-
 lootalot_front/src/components/PlayerView.js | 24 +++++++++++++++++----
 lootalot_front/src/components/Request.vue   |  4 ++--
 5 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/lootalot_front/src/App.vue b/lootalot_front/src/App.vue
index 6382c79..c38f037 100644
--- a/lootalot_front/src/App.vue
+++ b/lootalot_front/src/App.vue
@@ -1,16 +1,20 @@
 <template>
   <main id="app" class="container">
-    <PlayerView :id="state.player_id" v-slot="{ player, updateWealth }">
+    <PlayerView :id="state.player_id" 
+      v-slot="{ player, notifications, actions }">
       <section class="section">
         <HeaderBar :app_state="state">
           <template v-slot:title>{{ player.name }}</template>
         </HeaderBar>
+        <p v-if="notifications">{{ notifications }}</p>
         <Wealth 
             :wealth="[player.cp, player.sp, player.gp, player.pp]" 
             :debt="player.debt"
-            @update="updateWealth">
+            @update="actions.updateWealth">
         </wealth>
-        <Chest :player="state.show_player_chest ? player.id : 0"></Chest>
+        <Chest :player="state.show_player_chest ? player.id : 0"
+            @claim="actions.putClaim"
+            @unclaim="actions.withdrawClaim"></Chest>
       </section>
     </PlayerView>
   </main>
diff --git a/lootalot_front/src/AppStorage.js b/lootalot_front/src/AppStorage.js
index 2b5a017..80eba9e 100644
--- a/lootalot_front/src/AppStorage.js
+++ b/lootalot_front/src/AppStorage.js
@@ -130,7 +130,7 @@ export const AppStorage = {
     // Put a claim on an item from group chest.
     putRequest (itemId) {
         const playerId = this.state.player_id
-        Api.putClaim(playerId, itemId)
+        return Api.putClaim(playerId, itemId)
            .then(done => {
               // Update cliend-side state
               this.state.player_claims[playerId].push(itemId);
@@ -139,7 +139,7 @@ export const AppStorage = {
     // Withdraws a claim.
     cancelRequest(itemId) {
         const playerId = this.state.player_id
-        Api.unClaim(playerId, itemId)
+        return Api.unClaim(playerId, itemId)
           .then(done => {
                 var idx = this.state.player_claims[playerId].indexOf(itemId);
                 if (idx > -1) {
diff --git a/lootalot_front/src/components/Chest.vue b/lootalot_front/src/components/Chest.vue
index 68b0529..bb91068 100644
--- a/lootalot_front/src/components/Chest.vue
+++ b/lootalot_front/src/components/Chest.vue
@@ -24,7 +24,10 @@
             <strong>{{item.name}}</strong>
           </td>
           <td v-if="canGrab">
-            <Request :item="item.id"></Request>
+            <Request :item="item.id"
+             @claim="(data) => $emit('claim', data)"
+             @unclaim="(data) => $emit('unclaim', data)"
+             ></Request>
           </td>
           <td v-if="canSell">
             <div class="field is-grouped is-pulled-right" v-show="is_selling">
diff --git a/lootalot_front/src/components/PlayerView.js b/lootalot_front/src/components/PlayerView.js
index c88ec39..396fa26 100644
--- a/lootalot_front/src/components/PlayerView.js
+++ b/lootalot_front/src/components/PlayerView.js
@@ -2,13 +2,24 @@ import { AppStorage } from '../AppStorage'
 
 export default {
     props: ["id"],
-    data () { return {}},
+    data () { return {
+        notifications: [],
+    }},
     methods: {
         updateWealth (value) {
             AppStorage.updatePlayerWealth(value)
-                .then(_ => {if (AppStorage.debug) console.log("Wealth updated")})
+                .then(_ => {if (AppStorage.debug) this.notifications.push("Wealth updated")})
                 .catch(e => {if (AppStorage.debug) console.error("wealthUpdate Error", e)})
-        }
+        },
+        putClaim (itemId) {
+            AppStorage.putRequest(itemId)
+                .then(_ => { if (AppStorage.debug) this.notifications.push("Claim put")})
+        },
+        withdrawClaim (itemId) {
+            AppStorage.cancelRequest(itemId)
+                .then(_ => { if (AppStorage.debug) this.notifications.push("Claim withdrawn")})
+
+        },
     },
     computed: {
         player () {
@@ -26,7 +37,12 @@ export default {
     render () {
         return this.$scopedSlots.default({
             player: this.player, 
-            updateWealth: this.updateWealth,
+            notifications: this.notifications,
+            actions: {
+                    updateWealth: this.updateWealth,
+                    putClaim: this.putClaim,
+                    withdrawClaim: this.withdrawClaim,
+            }
         })
     }
 }
diff --git a/lootalot_front/src/components/Request.vue b/lootalot_front/src/components/Request.vue
index 8cf6f74..dae0751 100644
--- a/lootalot_front/src/components/Request.vue
+++ b/lootalot_front/src/components/Request.vue
@@ -60,11 +60,11 @@
         methods: {
             // The active player claims the item
             putRequest () {
-                AppStorage.putRequest(this.item)
+                this.$emit("claim", this.item);
             },
             // The active player withdraws his request
             cancelRequest () {
-                AppStorage.cancelRequest(this.item)
+                this.$emit("unclaim", this.item);
             },
             // The active player insist on his claim
             // TODO: Find a simple and fun system to express