adds simple global state, adds dropdown to switch players

lootalot_front/src/App.vue

@@ -3,19 +3,7 @@
   <section id="content" class="columns is-desktop">
     <Player></Player>
     <div class="column">
-    <section id="main" class="columns">
+        <GroupChest></GroupChest>
-       <div class="column">
-          <div id="main-heading" class="columns is-mobile is-vcentered">
-            <div class="column is-narrow">
-                <span class="icon is-large"><i class="fas fa-3x fa-gem"></i></span>
-            </div>
-            <div class="column has-text-left">
-                <h1 class="title">Coffre de groupe</h1>
-            </div>
-          </div>
-          <Chest player_id="0"></Chest>
-       </div>
-    </section>   
     </div>
   </section>
   </main>
@@ -23,14 +11,30 @@
 
 <script>
 import Player from './components/Player.vue'
-import Chest from './components/Chest.vue'
+import GroupChest from './components/GroupChest.vue'
 import 'bulma/css/bulma.css'
 
+export const store = {
+    debug: true,
+    state: {
+        player_id: 0,
+        show_player_chest: false,
+    },
+    setActivePlayer (newPlayerId) {
+        if (this.debug) console.log('setActivePlayer to ', newPlayerId)
+        this.state.player_id = newPlayerId
+    },
+    switchPlayerChestVisibility () {
+        if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
+        this.state.show_player_chest = !this.state.show_player_chest
+    }
+}
+
 export default {
   name: 'app',
   components: {
     Player,
-    Chest
+    GroupChest
   }
 }
 </script>

lootalot_front/src/components/GroupChest.vue

@@ -0,0 +1,22 @@
+<template>
+  <section id="main" class="section">
+    <div id="main-heading" class="columns is-mobile is-vcentered">
+      <div class="column is-narrow">
+        <span class="icon is-large"><i class="fas fa-3x fa-gem"></i></span>
+      </div>
+      <div class="column has-text-left">
+        <h1 class="title">Coffre de groupe</h1>
+      </div>
+    </div>
+    <Chest player_id="0"></Chest>
+  </section>   
+</template>
+
+<script>
+    import Chest from './Chest.vue'
+
+    export default {
+        components: { Chest },
+        data () { return {}; }
+    }
+</script>

lootalot_front/src/components/Player.vue

@@ -2,12 +2,26 @@
   <div class="column is-one-third-desktop">
     <div id="sidebar" class="card">
       <header id="sidebar-heading" class="card-header">
-       <a id="change_player" class="card-header-icon is-dark">
+        <p class="card-header-title">{{ player.name }}</p>
-        <span class="icon is-small">
+        <div class="dropdown is-right" 
-         <i class="fas fa-exchange-alt"></i>
+            :class="{ 'is-active': show_dropdown }">
-        </span>
+          <div class="dropdown-trigger">
-       </a>
+            <a id="change_player" class="button is-outlined is-primary"
-       <p id="active_player" class="card-header-title">{{ name }}</p>
+               @click="show_dropdown = !show_dropdown"
+               aria-haspopup="true" aria-controls="dropdown-menu">
+              <span class="icon is-small">
+                <i class="fas fa-exchange-alt"></i>
+              </span>
+            </a>
+          </div>
+          <div class="dropdown-menu" id="dropdown-menu" role="menu">
+            <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>
+            </div>
+          </div>
+        </div>
       </header>
       <div class="card-content">
         <span class="icon is-large">
@@ -15,25 +29,26 @@
         </span>
         <nav class="level is-mobile">
           <div class="level-item">
-            <div><p class="heading">CP</p><p class="subtitle">{{ wealth[0] }}</p></div>
+            <div><p class="heading">CP</p><p class="subtitle">{{ player.wealth[0] }}</p></div>
           </div>
           <div class="level-item">
-            <div><p class="heading">SP</p><p class="subtitle">{{ wealth[1] }}</p></div>
+            <div><p class="heading">SP</p><p class="subtitle">{{ player.wealth[1] }}</p></div>
           </div>
           <div class="level-item">
-            <div><p class="heading">GP</p><p class="subtitle">{{ wealth[2] }}</p></div>
+            <div><p class="heading">GP</p><p class="subtitle">{{ player.wealth[2] }}</p></div>
           </div>
           <div class="level-item">
-            <div><p class="heading">PP</p><p class="subtitle">{{ wealth[3] }}</p></div>
+            <div><p class="heading">PP</p><p class="subtitle">{{ player.wealth[3] }}</p></div>
           </div>
         </nav>
       </div>
       <footer class="card-footer">
-        <a @click="showChest = !showChest" href="#" class="card-footer-item is-dark">Coffre</a>
+        <a @click="switchPlayerChestVisibility" 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="showChest" style="margin-top: 1em;">
+    <div class="card" v-show="app_state.show_player_chest" style="margin-top: 1em;">
       <div class="card-content">
         <Chest player_id="0"></Chest>
       </div>
@@ -42,6 +57,7 @@
 </template>
 
 <script>
+    import { store } from '../App.vue'
     import Chest from './Chest.vue'
     /*
 
@@ -54,11 +70,22 @@
         components: { Chest },
         data () {
             return {
-                name: "Player name",
+                app_state: store.state,
-                wealth: [1000,100,10,1],
+                player: {
-                showChest: false,
+                    name: "Player name",
+                    wealth: [1000,100,10,1],
+                },
+                show_dropdown: false,
             };
-        }
+        },
+        methods: {
+            switchPlayerChestVisibility () {
+                store.switchPlayerChestVisibility()
+            },
+            closeDropdown () {
+                this.show_dropdown = false
+            }
+        },
     }
 </script>