small fixes while reviewing code

lootalot_front/src/components/Player.vue

@@ -10,15 +10,9 @@
 	</a>
     </div>
     <div id="menu" class="navbar-menu">
-      <div class="navbar-start">
-     	<template v-if="playerIsGroup">
-     	  <a class="navbar-item">Nouveau loot</a>
-     	</template>
-     	<template v-else>
+      <div class="navbar-start" v-if="!playerIsGroup">
      	  <a class="navbar-item" @click="switchPlayerChestVisibility">
      	    {{ app_state.show_player_chest ? 'Coffre de groupe' : 'Mon coffre' }}</a>
-     	  <a class="navbar-item">Marchand</a>
-     	</template>
       </div>
       <div class="navbar-end">
       <div class="navbar-item has-dropdown is-hoverable">
@@ -36,10 +30,24 @@
       </div>
     </div>
   </nav>
-  <section class="has-background-light" v-if="show_wealth">
-  <Wealth :wealth="wealth" :debt="player.debt"></Wealth>
+  <section class="box is-shadowless" v-if="show_wealth">
+    <Wealth :wealth="wealth" :debt="player.debt"></Wealth>
+  </section>
+  <section class="card">
+    <div class="card-content">
+      <Loot v-if="is_adding"></Loot>
+      <Chest v-else :player="shownChest"></Chest>
+    </div>
+    <div class="card-footer" v-if="shownChest == player.id">
+      <template v-if="is_adding">
+        <a class="card-footer-item">Confirmer</a>
+        <a class="card-footer-item" @click="toggleAdding">Annuler</a>
+      </template>
+      <a v-else class="card-footer-item" @click="toggleAdding">
+        + {{ playerIsGroup ? 'Nouveau loot' : 'Acheter' }}
+      </a>
+    </div>
   </section>
-  <Chest :player="shownChest"></Chest>
   </div>
 </template>
 
@@ -47,28 +55,16 @@
     import { AppStorage } from '../AppStorage'
     import Chest from './Chest.vue'
     import Wealth from './Wealth.vue'
+    import Loot from './Loot.vue'
     /*
     The Player control board.
-    To test :
-        - Player name is displayed
-        - Player's wealth is displayed -> Inside Wealth component
-        - Dropdown:
-            - The first item is the group
-            - Opened by activator
-            - Closed when clicked outside
-            - Click on item does switch active player
-        - Switch player :
-            - Name is updated when player_id is updated
-            - Wealth is updated -> Inside Wealth component
-        - Chest button controls Chest visibility
-            
     */
-    let handleOutsideClick;
     export default {
-        components: { Chest, Wealth },
+        components: { Chest, Wealth, Loot },
         data () {
             return {
                 app_state: AppStorage.state,
+                is_adding: false,
                 show_wealth: true,
             };
         },
@@ -82,12 +78,12 @@
             	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];
-		}
+                    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 () {
@@ -100,6 +96,9 @@
             }
         },
         methods: {
+            toggleAdding () {
+               this.is_adding = !this.is_adding; 
+            },
             switchPlayerChestVisibility () {
                 AppStorage.switchPlayerChestVisibility();
             },