adds dummy impls for targeted behaviours

lootalot_front/src/App.vue

@@ -19,6 +19,13 @@ export const store = {
     state: {
         player_id: 0,
         show_player_chest: false,
+        // methods
+        isPlayer () {
+            this.player_id != 0
+        },
+        isGroup () {
+            this.player_id == 0
+        },
     },
     setActivePlayer (newPlayerId) {
         if (this.debug) console.log('setActivePlayer to ', newPlayerId)

lootalot_front/src/components/Chest.vue

@@ -1,22 +1,54 @@
 <template>
+  <div class="container">
+    <p class="notification is-paddingless is-info" v-show="canAdd">Peut ajouter</p> 
+    <p class="notification is-paddingless is-warning" v-show="canSell">Peut vendre</p> 
+    <p class="notification is-paddingless is-primary" v-show="canGrab">Peut prendre</p> 
     <table class="table is-fullwidth is-striped">
         <thead>
-          <tr><th>Objets de {{ player_id }}</th></tr>
+          <tr><th>Objets de {{ player }}</th></tr>
         </thead>
         <tbody>
-          <tr><td>Nom 1</td></tr>
+          <template v-for="(item, idx) in content">
-          <tr><td>Nom 2</td></tr>
+            <tr :key="idx"><td>{{item.name}}</td></tr>
-          <tr><td>Nom 3</td></tr>
+          </template>
         </tbody>
     </table>
+  </div>
 </template>
 
 <script>
+    import { store } from '../App.vue'
     export default {
-        props: ["player_id"],
+        props: {
+            player: {
+                type: Number,
+                required: true,
+                default: 0
+            }
+        },
         data () {
             return {
+                app_state: store.state,
+                content: [
+                    {id: 10, name: "Épée longue +2 acérée"},
+                    {id: 5, name: "Ceinture de force +6"},
+                ],
             };
-        }
+        },
+        computed: {
+            // Can the active user sell items from this chest ?
+            canSell () {
+                return this.player == this.app_state.player_id;
+            },
+            // Can the user grab items from this chest ?
+            canGrab () {
+                return (this.app_state.player_id != 0  // User is not the group
+                     && this.player == 0);  // This is the group chest
+            },
+            canAdd () {
+                return (this.app_state.player_id == 0 
+                    && this.player == 0);
+            },
+        },
     }
 </script>

lootalot_front/src/components/GroupChest.vue

@@ -1,14 +1,14 @@
 <template>
   <section id="main" class="section">
-    <div id="main-heading" class="columns is-mobile is-vcentered">
+    <div id="main-heading" class="notification is-dark is-paddingless columns is-mobile is-vcentered">
       <div class="column is-narrow">
-        <span class="icon is-large"><i class="fas fa-3x fa-gem"></i></span>
+        <span class="icon is-large"><i class="fas fa-2x fa-dragon"></i></span>
       </div>
       <div class="column has-text-left">
         <h1 class="title">Coffre de groupe</h1>
       </div>
     </div>
-    <Chest player_id="0"></Chest>
+    <Chest player="0"></Chest>
   </section>   
 </template>
 

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 v-for="(p,i) in player_list" :key="i"
-              <a href="#" class="dropdown-item">Lomion</a>
+                 @click="setActivePlayer(i)" 
-              <a href="#" class="dropdown-item">Oilossë</a>
+                 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]()
                         }

lootalot_front/src/components/Wealth.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container">
+  <div class="container is-fluid">
         <span class="icon is-large">
           <i class="fas fa-2x fa-piggy-bank"></i>
         </span>