adds dummy impls for targeted behaviours

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">{{ player.name }}</p>
+        <p class="card-header-title">{{ name }}</p>
         <div class="dropdown is-right" 
             :class="{ 'is-active': show_dropdown }">
           <div class="dropdown-trigger" ref="dropdown_btn">
@@ -17,25 +17,30 @@
           <div class="dropdown-menu" id="dropdown-menu" role="menu"
             v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown' }">
             <div class="dropdown-content">
-              <a href="#" class="dropdown-item">Féfi</a>
-              <a href="#" class="dropdown-item">Lomion</a>
-              <a href="#" class="dropdown-item">Oilossë</a>
+              <a v-for="(p,i) in player_list" :key="i"
+                 @click="setActivePlayer(i)" 
+                 href="#" class="dropdown-item">
+                {{ p.name }}</a>
             </div>
           </div>
         </div>
       </header>
       <div class="card-content">
         <Wealth v-bind:wealth="player.wealth"></Wealth>
+        <p class="notification is-warning" v-show="!playerIsGroup">Dette : {{ player.debt }}gp</p>
       </div>
       <footer class="card-footer">
-        <a @click="switchPlayerChestVisibility" href="#" class="card-footer-item is-dark">Coffre</a>
+        <a @click="switchPlayerChestVisibility" v-show="!playerIsGroup" 
+           href="#" class="card-footer-item is-dark">
+          Coffre
+        </a>
         <a href="#" class="card-footer-item">Argent</a>
         <a href="#" class="card-footer-item disabled">Historique</a>
       </footer>
     </div>
     <div class="card" v-show="app_state.show_player_chest" style="margin-top: 1em;">
       <div class="card-content">
-        <Chest player_id="0"></Chest>
+        <Chest :player="app_state.player_id"></Chest>
       </div>
     </div>
   </div>
@@ -55,15 +60,42 @@
             return {
                 app_state: store.state,
                 player: {
-                    name: "Player name",
+                    name: "Groupe",
                     wealth: [1000,100,10,1],
+                    debt: 0,
                 },
+                player_list: [
+                    {id: 0, name: "Groupe"},
+                    {id: 1, name: "Lomion"},
+                    {id: 4, name: "Oilosse"},
+                    {id: 3, name: "Fefi"},
+                ],
                 show_dropdown: false,
             };
         },
+        computed: {
+            name () {
+                return this.player.name;
+            },
+            // Check if the active player is the special 'Group' player
+            playerIsGroup () {
+                return this.app_state.player_id == 0;
+            }
+        },
         methods: {
             switchPlayerChestVisibility () {
-                store.switchPlayerChestVisibility()
+                store.switchPlayerChestVisibility();
+            },
+            hidePlayerChest () {
+                if (this.app_state.show_player_chest) {
+                    this.switchPlayerChestVisibility();
+                }
+            },
+            setActivePlayer (playerIdx) {
+                const newId = this.player_list[playerIdx].id;
+                store.setActivePlayer(newId);
+                if (newId == 0) { this.hidePlayerChest() }
+                this.player.name = this.player_list[playerIdx].name
             },
             closeDropdown () {
                 this.show_dropdown = false
@@ -84,7 +116,7 @@
                             }
                         });
                     
-                        if (!el.contains(e.target) && !excludedElClicked) {
+                        if (!excludedElClicked) {
                             console.log('outsideCloseDropdown');
                             vnode.context[handler]()
                         }