UI fixes, adds blanket impls of buy/sell signals

lootalot_front/src/App.vue

@@ -37,7 +37,7 @@
               v-show="!playerIsGroup">
               <a @click="switchView('player')">Mon coffre</a></li>
             <li :class="{'is-active': activeView == 'adding' }">
-              <a @click="switchView('adding')">
+              <a class="has-text-grey-light" @click="switchView('adding')">
                 + {{ playerIsGroup ? 'Nouveau Loot' : 'Acheter' }}
               </a>
             </li>
@@ -49,7 +49,8 @@
           <h2 v-show="playerIsGroup">ItemInput</h2>
           <Chest 
               :items="playerIsGroup ? [] : shopInventory"
-              :perms="playerIsGroup ? {} : { canBuy: true }">
+              :perms="playerIsGroup ? {} : { canBuy: true }"
+              @buy="(data) => { switchView('player'); actions.buyItems(data); }">
           </Chest>
         </template>
         <Chest v-else
@@ -58,6 +59,7 @@
                 canGrab: !(showPlayerChest || playerIsGroup), 
                 canSell: showPlayerChest || playerIsGroup
             }"
+            @sell="actions.sellItems"
             @claim="actions.putClaim"
             @unclaim="actions.withdrawClaim">
         </Chest>

lootalot_front/src/components/Chest.vue

@@ -5,17 +5,20 @@
         <th width="100%">Objets</th>
         <th>Valeur</th>
         <th>
-          <div v-show="perms.canSell" class="buttons" :class="{'has-addons': is_selling}">
+          <div v-if="perms.canSell" class="buttons is-marginless" :class="{'has-addons': is_selling}">
-            <button class="button" :class="is_selling ? 'is-danger' : 'is-warning'"
+            <button class="button is-marginless" :class="is_selling ? 'is-danger' : 'is-warning'"
-              @click="is_selling = !is_selling">
+              @click="sellSelectedItems">
               <span class="icon"><i class="fas fa-coins"></i></span>
               <p v-if="!is_selling">Vendre</p>
-              <p v-else>{{ totalSellValue ? totalSellValue : 'Annuler' }}</p>
+              <p v-else>{{ selected_items.length > 0 ? `${totalSelectedValue} po` : 'Annuler' }}</p>
             </button>
             <PercentInput v-show="is_selling"></PercentInput>
           </div>
-          <div v-show="perms.canBuy">
+          <div v-else-if="perms.canBuy">
-            <button class="button is-primary">Acheter</button>
+            <button class="button is-danger is-fullwidth" @click="buySelectedItems">Acheter</button>
+          </div>
+          <div v-else-if="perms.canGrab">
+            <button class="button is-static is-fullwidth">Demander</button>
           </div>
         </th>
       </tr>
@@ -26,18 +29,18 @@
           <td><strong>{{item.name}}</strong></td>
           <td>{{ item.base_price }}po</td>
           <td>
-            <Request v-show="perms.canGrab" 
+            <Request v-if="perms.canGrab" 
               :item="item.id"
               @claim="(data) => $emit('claim', data)"
               @unclaim="(data) => $emit('unclaim', data)">
             </Request>
-            <div v-show="is_selling || perms.canBuy" class="field is-grouped">
+            <div v-else-if="showSelectors" class="buttons has-addons">
+              <label :for="`select-${idx}`" class="button is-marginless">
               <input type="checkbox" class="checkbox"
-                id="`select-${idx}`"
+                :id="`select-${idx}`"
                 :value="item.id"
                 v-model="selected_items">
-              <label for="`select-${idx}`" class="label" style="padding: 0 1em;">
+                  &nbsp;{{is_selling ? item.base_price / 2 : item.base_price }}po 
-                  {{item.base_price / 2}} GP
               </label>
               <PercentInput></PercentInput>
             </div>
@@ -79,15 +82,39 @@
         data () {
             return {
                 is_selling: false,
-                is_adding: false,
                 selected_items: [],
             };
         },
+        methods: {
+            buySelectedItems () {
+                const items = this.items.filter(i => this.selected_items.includes(i.id));
+                this.$emit("buy", items);
+                this.selected_items.length = 0;
+            },
+            sellSelectedItems () {
+                if (!this.is_selling) {
+                    this.is_selling = true;
+                } else {
+                    this.is_selling = false;
+                    if (this.selected_items.length > 0) {
+                        const items = this.items.filter(i => this.selected_items.includes(i.id));
+                        this.$emit("sell", items);
+                        this.selected_items = [];
+                    }
+                }
+            },
+        },
         computed: {
-            totalSellValue () {
+            showSelectors () { return !this.perms.canGrab && (this.is_selling || this.perms.canBuy); },
+            totalSelectedValue () {
                 return this.items
                     .filter(item => this.selected_items.includes(item.id))
-                    .map(item => item.base_price / 2)
+                    .map(item => {
+                        if (this.is_selling) { 
+                            return item.base_price / 2;
+                        } else {
+                            return item.base_price;
+                        }})
                     .reduce((total,value) => total + value, 0);
             },
         },
@@ -97,4 +124,7 @@
 <style scoped>
     .table td, .table th { vertical-align: middle; }
     .buttons { flex-wrap: nowrap; }
+    label.is-checkbox {
+        background-color: #eee;
+    }
 </style>

lootalot_front/src/components/PercentInput.vue

@@ -7,7 +7,7 @@
       </span>
     </div>
     <div class="control">
-      <button class="button is-outlined" @click="is_opened = !is_opened">
+      <button class="button is-marginless" @click="is_opened = !is_opened">
         <small v-if="!is_opened">Mod.</small>
         <span v-else class="icon"><i class="fas fa-times-circle"></i></span>
       </button>

lootalot_front/src/components/PlayerView.js

@@ -21,6 +21,12 @@ export default {
                 .then(_ => { if (AppStorage.debug) this.notifications.push("Claim withdrawn")})
 
         },
+        buyItems(items) {
+            this.notifications.push(`Would buy ${items.length} items`);
+        },
+        sellItems (items) {
+            this.notifications.push(`Would sell ${items.length} items`);
+        },
         parseLoot (items) {
             this.loot = [];
             items.map(item => {
@@ -57,6 +63,8 @@ export default {
                     updateWealth: this.updateWealth,
                     putClaim: this.putClaim,
                     withdrawClaim: this.withdrawClaim,
+                    buyItems: this.buyItems,
+                    sellItems: this.sellItems,
             }
         })
     }

lootalot_front/src/components/Request.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="buttons" >
+  <div class="buttons">
     <template v-if="isInConflict">
       <button class="button is-success" 
         @click="cancelRequest">
@@ -73,3 +73,7 @@
         },
     }
 </script>
+
+<style scoped>
+    .buttons, .button { margin-bottom: 0; }
+</style>

lootalot_front/src/components/Wealth.vue

@@ -8,7 +8,14 @@
       </div>
       <template v-if="edit">
       <div class="level-item">
-    	<input class="input" type="number" step="0.01" v-model="edit_value"></input>
+        <div class="field has-addons">
+          <p class="control">
+    	    <input class="input" type="number" step="0.01" v-model="edit_value"></input>
+          </p>
+          <p class="control">
+            <a class="button is-static">po</a>
+          </p>
+        </div>
       </div>
       <div class="level-item">
         <button class="button is-danger" @click="updateWealth()">