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/NumberInput.vue

@@ -0,0 +1,28 @@
+<template>
+    <input type="text" 
+        class="input" 
+        :class="{'is-danger': has_error}"
+        :value="value"
+        @input="checkError"
+    ></input>
+</template>
+
+<script>
+    export default {
+        props: ["value"],
+        data () {
+            return { has_error: false};
+        },
+        methods: {
+            checkError (ev) {
+                const newValue = ev.target.value;
+                this.has_error = isNaN(newValue);
+                this.$emit(
+                    'input', 
+                    // Do the conversion if valid
+                    this.has_error ? newValue : Number(newValue)
+                ); 
+            }
+        },
+    }
+</script>

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)
+            },
+        },
     }
-</style>
+</script>

lootalot_front/src/components/Wealth.vue

@@ -25,11 +25,7 @@
     <nav class="columns is-1  is-variable is-mobile">
       <template v-for="i in 4">
       <div :key="`input-col-${i}`" class="column">
-        <input type="text" size="6" class="input" 
+        <NumberInput v-model="edit_values[i - 1]"></NumberInput>
-            :key="inputs_key"
-            :class="{'is-danger': form_errors[i - 1]}" 
-            v-model.number="edit_values[i - 1]">
-        </input>
       </div>
       </template>
     </nav>
@@ -52,34 +48,35 @@
 </template>
 
 <script>
+    import NumberInput from './NumberInput.vue'
     export default {
+        components: { NumberInput },
         props: ["wealth", "edit"],
         data () { 
             return {
                 edit_values: [0,0,0,0], 
-                form_errors: [false,false,false,false],
-                inputs_key: 0, // Hack to re-render inputs
             }; 
         },
         methods: {
             updateWealth (op) {
                 const values = this.edit_values;
-                this.form_errors.fill(false); // Reset error status
+                // Is it optimal, considering NumberInput already validates numbers ?
-                values.forEach((v,i) => {
+                // Check that all fields are valid numbers
-                    if (isNaN(v)) { 
+                const success = values
-                        console.log("error with value", v); 
+                    .map(v => !isNaN(v))
-                        this.form_errors[i] = true;
+                    .reduce(
-                        };
+                        (t,v) => t && v, 
-                });
+                        true);
-                const success = !this.form_errors.includes(true);
                 if (success) {
                     console.log('updated', op, values);
                     this.$emit('updated');
-                    this.edit_values.fill(0) }
+                    this.resetValues();
-                else {
+                } else {
-                    console.log(this.form_errors);
+                    console.log('correct errors');
-                    this.inputs_key += 1;
                 }
+            },
+            resetValues () {
+                this.edit_values.fill(0);
             }
         }
     }