makes modifier kind-of work, needs refactoring

lootalot_front/src/components/Chest.vue

@@ -12,7 +12,7 @@
               <p v-if="!is_selling">Vendre</p>
               <p v-else>{{ selected_items.length > 0 ? `${totalSelectedValue} po` : 'Annuler' }}</p>
             </button>
-            <PercentInput v-show="is_selling"></PercentInput>
+            <PercentInput v-show="is_selling" v-model="modifiers['global']"></PercentInput>
           </div>
           <div v-else-if="perms.canBuy">
             <button class="button is-danger is-fullwidth" 
@@ -43,7 +43,7 @@
                 :value="item.id"
                 v-model="selected_items">
               </label>
-              <PercentInput></PercentInput>
+              <PercentInput v-model="modifiers[item.id]"></PercentInput>
             </div>
           </td>
         </tr>
@@ -55,7 +55,6 @@
 <script>
     import Request from './Request.vue'
     import PercentInput from './PercentInput.vue'
-    import Loot from './Loot.vue'
     /*
         The chest displays a collection of items.
 
@@ -68,7 +67,7 @@
             items: {
                 type: Array,
                 required: true,
-                default: [] 
+                default () { return []; }
             },
             perms: {
                 type: Object,
@@ -78,21 +77,23 @@
         components: {
             Request,
             PercentInput,
-            Loot,
         },
         data () {
             return {
                 is_selling: false,
                 selected_items: [],
+                modifiers: {},
             };
         },
         methods: {
             buySelectedItems () {
                 const items = this.items.filter(i => this.selected_items.includes(i.id));
                 var payload = [];
-                items.forEach(item => {
-               	  payload.push([item.id, null]);
-                });
+                for (var idx in items) {
+                    var item = items[idx];
+                    var mod = this._modifierForItem(item.id);
+                    payload.push([item.id, mod]);
+                }
                 this.$emit("buy", payload);
                 this.selected_items = [];
             },
@@ -105,26 +106,38 @@
                         const items = this.items.filter(i => this.selected_items.includes(i.id));
                         var payload = [];
                         items.forEach(item => {
-                            payload.push([item.id, null]);
+                            const mod = this._modifierForItem(item.id);
+                            payload.push([item.id, mod]);
                         });
                         this.$emit("sell", payload);
                         this.selected_items = [];
                     }
                 }
             },
+            // TODO: fix this. It breaks reactivity and it's lazy
+            _modifierForItem (itemId) {
+                if (!(itemId in this.modifiers)) {
+                    this.modifiers[itemId] = 0;
+                }
+                return 1 + this.modifiers[itemId] / 100;
+            }
         },
         computed: {
             showSelectors () { return !this.perms.canGrab && (this.is_selling || this.perms.canBuy); },
             totalSelectedValue () {
-                return this.items
+                const global_mod = this._modifierForItem("global");
+                var total = this.items
                     .filter(item => this.selected_items.includes(item.id))
                     .map(item => {
+                        const mod = this._modifierForItem(item.id);
+                        var price = item.base_price * mod;
                         if (this.is_selling) { 
-                            return item.base_price / 2;
-                        } else {
-                            return item.base_price;
-                        }})
+                            price = price / 2;
+                        }
+                        return price;
+                    })
                     .reduce((total,value) => total + value, 0);
+                return global_mod * total;
             },
         },
     }

lootalot_front/src/components/PercentInput.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="field has-addons">
     <div v-show="is_opened" class="control has-icons-left">
-      <input class="input" type="number" size="3" min=-50 max=50 step=5>
+      <input class="input" :value="value" @input="input" type="number" size="3" min="-50" max=50 step=5>
       <span class="icon is-left">
         <i class="fas fa-percent"></i>
       </span>
     </div>
     <div class="control">
-      <button class="button" @click="is_opened = !is_opened">
+      <button class="button" @click="switchOpenedState">
         <small v-if="!is_opened">Mod.</small>
         <span v-else class="icon"><i class="fas fa-times-circle"></i></span>
       </button>
@@ -17,14 +17,25 @@
 
 <script>
     export default {
+        props: ["value"],
         data () {
             return {
                 is_opened: false,
             };
+        },
+        methods: {
+            input (event) { this.$emit("input", event.target.value); },
+            switchOpenedState () {
+                this.is_opened = !this.is_opened;
+                // Reset the modifier in closed state
+                if (!this.is_opened) {
+                    this.$emit("input", 0);
+                }
+            }
         }
     }
 </script>
 
 <style scoped>
-.input { width: 6em; }
+  .input { width: 6em; }
 </style>