adds simple cookie to store active player_id

lootalot_front/src/App.vue

@@ -30,6 +30,8 @@ export const store = {
     setActivePlayer (newPlayerId) {
         if (this.debug) console.log('setActivePlayer to ', newPlayerId)
         this.state.player_id = newPlayerId
+        document.cookie = `player_id=${newPlayerId};`;
+        if (this.debug) console.log('setCookie', document.cookie);
     },
     switchPlayerChestVisibility () {
         if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
@@ -37,11 +39,37 @@ export const store = {
     }
 }
 
+function getCookie(cname) {
+  var name = cname + "=";
+  var decodedCookie = decodeURIComponent(document.cookie);
+  var ca = decodedCookie.split(';');
+  for(var i = 0; i <ca.length; i++) {
+    var c = ca[i];
+    while (c.charAt(0) == ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) == 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
 export default {
   name: 'app',
   components: {
     Player,
     GroupChest
+  },
+  created () {
+    const cookie = getCookie("player_id");
+    if (cookie == "") {
+        return;
+    } else {
+        var newPlayerId = Number(cookie);
+        console.log("initiated with id", newPlayerId); 
+        store.setActivePlayer(newPlayerId);
+    }
   }
 }
 </script>

lootalot_front/src/components/Chest.vue

@@ -25,12 +25,7 @@
             <tr :key="`row-${idx}`">
               <td>{{item.name}}</td>
               <td v-if="canGrab">
-                <button class="button is-primary" disabled>
+                <Request :item="item.id"></Request>
-                  <span class="icon">
-                    <i class="fas fa-praying-hands"></i>
-                  </span>
-                  <small>Request pending...</small>
-                </button>
               </td>
               <td v-if="canSell">
                 <label class="checkbox" v-show="is_selling">
@@ -50,6 +45,7 @@
 
 <script>
     import { store } from '../App.vue'
+    import Request from './Request.vue'
     /*
         The chest displays the collection of items owned by a player
 
@@ -70,6 +66,9 @@
                 default: 0
             }
         },
+        components: {
+            Request
+        },
         data () {
             return {
                 app_state: store.state,

lootalot_front/src/components/Player.vue

@@ -75,16 +75,11 @@
         data () {
             return {
                 app_state: store.state,
-                player: {
-                    name: "Groupe",
-                    wealth: [1000,100,10,1],
-                    debt: 0,
-                },
                 player_list: [
-                    {id: 0, name: "Groupe"},
+                    {id: 0, name: "Groupe", wealth: [0,0,0,0], debt: 0},
-                    {id: 1, name: "Lomion"},
+                    {id: 1, name: "Lomion", wealth: [0,0,0,0], debt: 0},
-                    {id: 4, name: "Oilosse"},
+                    {id: 4, name: "Oilosse", wealth: [0,0,0,0], debt: 0},
-                    {id: 3, name: "Fefi"},
+                    {id: 3, name: "Fefi", wealth: [0,0,0,0], debt: 0},
                 ],
                 show_dropdown: false,
                 edit_wealth: false,
@@ -92,6 +87,12 @@
             };
         },
         computed: {
+            player () {
+                const id = this.app_state.player_id;
+                const idx = this.player_list.findIndex(p => p.id == id);
+                console.log(id, idx);
+                return this.player_list[idx];
+            },
             name () {
                 return this.player.name;
             },

lootalot_front/src/components/Request.vue

@@ -0,0 +1,21 @@
+<template>
+        <button class="button is-primary" disabled>
+          <span class="icon">
+            <i class="fas fa-praying-hands"></i>
+          </span>
+          <small>Request pending...</small>
+        </button>
+</template>
+
+<style>
+    export default {
+        props: ["item"],
+        data () { 
+            return {
+            };
+        },
+        computed: {
+
+        }
+    }
+</style>

lootalot_front/src/components/Wealth.vue

@@ -3,22 +3,22 @@
     <span class="icon is-large">
       <i class="fas fa-2x fa-piggy-bank"></i>
     </span>
-    <nav class="columns is-mobile">
+    <nav class="columns is-mobile is-multiline">
       <div class="column">
-          <p class="heading">CP</p>
+          <p class="heading">PC</p>
-          <p class="is-size-3">{{ wealth[0] }}</p>
+          <p class="is-size-4">{{ wealth[0] }}</p>
       </div>
       <div class="column">
-          <p class="heading">SP</p>
+          <p class="heading">PA</p>
-          <p class="is-size-3">{{ wealth[1] }}</p>
+          <p class="is-size-4">{{ wealth[1] }}</p>
       </div>
       <div class="column">
-          <p class="heading">GP</p>
+          <p class="heading">PO</p>
-          <p class="is-size-3">{{ wealth[2] }}</p>
+          <p class="is-size-4">{{ wealth[2] }}</p>
       </div>
       <div class="column">
           <p class="heading">PP</p>
-          <p class="is-size-3">{{ wealth[3] }}</p>
+          <p class="is-size-4">{{ wealth[3] }}</p>
       </div>
     </nav>
     <div v-if="edit"> <!-- or v-show ? -->