adds requests state for Request component

lootalot_front/src/App.vue

@@ -18,13 +18,15 @@ export const store = {
     debug: true,
     state: {
         player_id: 0,
+        player_list: [
+            {id: 0, name: "Groupe", wealth: [0,0,0,0], debt: 0},
+            {id: 1, name: "Lomion", wealth: [0,0,0,0], debt: 0},
+            {id: 4, name: "Oilosse", wealth: [0,0,0,0], debt: 0},
+            {id: 3, name: "Fefi", wealth: [0,0,0,0], debt: 0},
+        ],
         show_player_chest: false,
-        // methods
+        requests: {  // TEST: must be initialised with players ids
-        isPlayer () {
+            0: [], 1: [], 4: [], 3: []
-            this.player_id != 0
-        },
-        isGroup () {
-            this.player_id == 0
         },
     },
     setActivePlayer (newPlayerId) {
@@ -36,7 +38,12 @@ export const store = {
     switchPlayerChestVisibility () {
         if (this.debug) console.log('switchPlayerChestVisibility', !this.state.show_player_chest)
         this.state.show_player_chest = !this.state.show_player_chest
-    }
+    },
+    putRequest (itemId) {
+        const playerId = this.state.player_id
+        if (this.debug) console.log('newRequest from', playerId, 'on', itemId)
+        this.state.requests[playerId].push(itemId);
+    },
 }
 
 function getCookie(cname) {

lootalot_front/src/components/Chest.vue

@@ -5,7 +5,7 @@
         <thead>
           <tr>
             <th width="100%" >Objets de {{ player }}</th>
-            <th v-if="canGrab"></th>
+            <th v-if="canGrab" style="min-width: 120px"></th>
             <th v-if="canSell" style="min-width: 120px">
                   <button class="button is-fullwidth" 
                     :class="is_selling ? 'is-danger' :  'is-warning'"

lootalot_front/src/components/Player.vue

@@ -17,7 +17,7 @@
           <div class="dropdown-menu" id="dropdown-menu" role="menu"
             v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown', visible: show_dropdown }">
             <div class="dropdown-content">
-              <a v-for="(p,i) in player_list" :key="i"
+              <a v-for="(p,i) in state.player_list" :key="i"
                  @click="setActivePlayer(i)" 
                  href="#" class="dropdown-item">
                 {{ p.name }}</a>
@@ -41,9 +41,9 @@
         <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" v-show="state.show_player_chest" style="margin-top: 1em;">
       <div class="card-content">
-        <Chest :player="app_state.player_id"></Chest>
+        <Chest :player="state.player_id"></Chest>
       </div>
     </div>
   </div>
@@ -74,13 +74,7 @@
         components: { Chest, Wealth },
         data () {
             return {
-                app_state: store.state,
+                state: store.state,
-                player_list: [
-                    {id: 0, name: "Groupe", wealth: [0,0,0,0], debt: 0},
-                    {id: 1, name: "Lomion", wealth: [0,0,0,0], debt: 0},
-                    {id: 4, name: "Oilosse", wealth: [0,0,0,0], debt: 0},
-                    {id: 3, name: "Fefi", wealth: [0,0,0,0], debt: 0},
-                ],
                 show_dropdown: false,
                 edit_wealth: false,
                 handleOutsideClick: null,
@@ -88,16 +82,16 @@
         },
         computed: {
             player () {
-                const id = this.app_state.player_id;
+                const id = this.state.player_id;
-                const idx = this.player_list.findIndex(p => p.id == id);
+                const idx = this.state.player_list.findIndex(p => p.id == id);
-                return this.player_list[idx];
+                return this.state.player_list[idx];
             },
             name () {
                 return this.player.name;
             },
             // Check if the active player is the special 'Group' player
             playerIsGroup () {
-                return this.app_state.player_id == 0;
+                return this.state.player_id == 0;
             }
         },
         methods: {
@@ -105,15 +99,15 @@
                 store.switchPlayerChestVisibility();
             },
             hidePlayerChest () {
-                if (this.app_state.show_player_chest) {
+                if (this.state.show_player_chest) {
                     this.switchPlayerChestVisibility();
                 }
             },
             setActivePlayer (playerIdx) {
-                const newId = this.player_list[playerIdx].id;
+                const newId = this.state.player_list[playerIdx].id;
                 store.setActivePlayer(newId);
                 if (newId == 0) { this.hidePlayerChest() }
-                this.player.name = this.player_list[playerIdx].name
+                this.player.name = this.state.player_list[playerIdx].name
             },
             closeDropdown () {
                 this.show_dropdown = false

lootalot_front/src/components/Request.vue

@@ -1,21 +1,40 @@
 <template>
-        <button class="button is-primary" disabled>
+    <div>
+        <button class="button is-primary is-fullwidth" 
+            @click="putRequest"
+            :disabled="isRequested">
           <span class="icon">
             <i class="fas fa-praying-hands"></i>
           </span>
-          <small>Request pending...</small>
         </button>
+    </div>
 </template>
 
-<style>
+<script>
+    import { store } from '../App.vue'
     export default {
         props: ["item"],
         data () { 
             return {
+                state: store.state,
+                _requested: false, // Dummy state
             };
         },
         computed: {
+            // Check if item is requested by active player
+            isRequested () {
+                const reqs = this.state.requests[this.state.player_id];
+                return reqs.includes(this.item);
+            },
+            // Check if item is requested by multiple players including active one
+            isInConflict () {
                             
+            },
+        },
+        methods: {
+            putRequest () {
+                store.putRequest(this.item)
+            },
+        },
     }
-    }
+</script>
-</style>