removes Chest use of AppStorage, various fixes

lootalot_front/src/App.vue

@@ -1,8 +1,8 @@
 <template>
-  <main id="app" class="container">
-    <PlayerView :id="state.player_id" 
+  <PlayerView :id="state.player_id" 
       v-slot="{ player, loot, notifications, actions }">
-      <section class="section">
+    <main id="app" class="container">
+      <header class="section">
         <HeaderBar :app_state="state">
           <template v-slot:title>{{ player.name }}</template>
           <template v-slot:links>
@@ -21,27 +21,38 @@
               {{ p.name }}</a>
           </template>
         </HeaderBar>
-        <p v-if="notifications.length > 0">{{ notifications }}</p>
+        <p v-show="notifications.length > 0">{{ notifications }}</p>
         <Wealth 
             :wealth="[player.cp, player.sp, player.gp, player.pp]" 
             :debt="player.debt"
             @update="actions.updateWealth">
         </wealth>
-        <div class="tabs is-centered is-boxed is-medium" v-show="!playerIsGroup">
+      </header>
+      <nav>
+        <div class="tabs is-centered is-boxed is-medium">
           <ul>
             <li :class="{ 'is-active': !state.show_player_chest }">
               <a @click="switchPlayerChestVisibility">Coffre de groupe</a></li>
-            <li :class="{ 'is-active': state.show_player_chest }">
+            <li :class="{ 'is-active': state.show_player_chest }" v-show="!playerIsGroup">
               <a @click="switchPlayerChestVisibility">Mon coffre</a></li>
-          </ul>
+            <li>
+              <a class="disabled">
+                + {{ playerIsGroup ? 'Nouveau Loot' : 'Acheter' }}
+              </a>
+            </li>
+           </ul>
         </div>
-        <Chest :items="state.show_player_chest ? loot : state.group_loot"
-               :player="state.show_player_chest ? player.id : 0"
+      </nav>
+      <main class="">
+        <Chest 
+            :items="state.show_player_chest ? loot : state.group_loot"
+            :perms="permissions"
             @claim="actions.putClaim"
-            @unclaim="actions.withdrawClaim"></Chest>
-      </section>
-    </PlayerView>
-  </main>
+            @unclaim="actions.withdrawClaim">
+        </Chest>
+      </main>
+    </main>
+  </PlayerView>
 </template>
 
 <script>
@@ -97,6 +108,12 @@ export default {
     switchPlayerChestVisibility () { AppStorage.switchPlayerChestVisibility(); },
   },
   computed: {
+    permissions () {
+        return {
+            canGrab: this.state.player_id != 0 && !this.state.show_player_chest,
+            canSell: this.state.show_player_chest || this.state.player_id == 0,
+        };
+    },
     playerIsGroup () { return this.state.player_id == 0 },
   }
 }

lootalot_front/src/components/Chest.vue

@@ -3,9 +3,9 @@
     <thead>
       <tr>
         <th>Objets</th>
-        <th v-if="canGrab"></th>
-        <th v-if="canSell">
-          <div class="buttons is-right">
+        <th>Valeur</th>
+        <th>
+          <div v-show="perms.canSell" class="buttons is-right" :class="{'has-addons': is_selling}">
             <button class="button" :class="is_selling ? 'is-danger' : 'is-warning'"
               @click="is_selling = !is_selling">
               <span class="icon"><i class="fas fa-coins"></i></span>
@@ -14,58 +14,50 @@
             </button>
             <PercentInput v-show="is_selling"></PercentInput>
           </div>
+          <div v-show="perms.canBuy">
+            <button class="button is-primary">Acheter</button>
+          </div>
         </th>
       </tr>
     </thead>
-    <tbody v-if="app_state.initiated">
+    <tbody>
       <template v-for="(item, idx) in items">
         <tr :key="`row-${idx}`">
+          <td><strong>{{item.name}}</strong></td>
+          <td>{{ item.base_price }}po</td>
           <td>
-            <strong>{{item.name}}</strong>
-          </td>
-          <td v-if="canGrab">
-            <Request :item="item.id"
-             @claim="(data) => $emit('claim', data)"
-             @unclaim="(data) => $emit('unclaim', data)"
-             ></Request>
-          </td>
-          <td v-if="canSell">
-            <div class="field is-grouped is-pulled-right" v-show="is_selling">
-              <div class="control">
-                <label class="label">
-                  <input type="checkbox"
-                      id="`item-${idx}`"
-                      :value="item.id"
-                      v-model="sell_selected">
-                    {{item.base_price / 2}} GP
-                </label>
-              </div>
+            <Request v-show="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 is-pulled-right" >
+              <input type="checkbox" class="checkbox"
+                id="`select-${idx}`"
+                :value="item.id"
+                v-model="selected_items">
+              <label for="`select-${idx}`">
+                  {{item.base_price / 2}} GP
+              </label>
               <PercentInput></PercentInput>
             </div>
           </td>
         </tr>
       </template>
     </tbody>
-    <p v-else>Loading...</p>
   </table>
 </template>
 
 <script>
-    import { AppStorage } from '../AppStorage'
     import Request from './Request.vue'
     import PercentInput from './PercentInput.vue'
     import Loot from './Loot.vue'
     /*
-        The chest displays the collection of items owned by a player
+        The chest displays a collection of items.
 
-        TO TEST :
-            - Possible interactions depends on player_id and current chest
-            - Objects are displayed as a table
+        A set of permissions is passed as props, to update
+        the possible actions of active user upon these items.
 
-        Sell workflow :
-            1. Click sell (sell becomes danger)
-            2. Check objects to sell (sell button displays total value)
-            3. Click sell to confirm
     */
     export default {
         props: {
@@ -74,10 +66,9 @@
                 required: true,
                 default: [] 
             },
-            player: {
-                type: Number,
+            perms: {
+                type: Object,
                 required: true,
-                default: 0
             },
         },
         components: {
@@ -87,42 +78,22 @@
         },
         data () {
             return {
-                app_state: AppStorage.state,
                 is_selling: false,
                 is_adding: false,
-                sell_selected: [],
+                selected_items: [],
             };
         },
-        methods: {
-       	    fetchLoot () {
-
-       	    }
-        },
         computed: {
-            // Can the active user sell items from this chest ?
-            canSell () {
-                return this.player == this.app_state.player_id;
-            },
             totalSellValue () {
-                const selected = this.sell_selected;
                 return this.items
-                    .filter(item => selected.includes(item.id))
+                    .filter(item => this.selected_items.includes(item.id))
                     .map(item => item.base_price / 2)
                     .reduce((total,value) => total + value, 0);
             },
-            // Can the user grab items from this chest ?
-            canGrab () {
-                return (this.app_state.player_id != 0  // User is not the group
-                     && this.player == 0);  // This is the group chest
-            },
-            canAdd () {
-                return (this.app_state.player_id == 0 
-                    && this.player == 0);
-            },
         },
     }
 </script>
 
 <style scoped>
-    .table td, .table th { vertical-align: middle; }
+    .table td, .table th { vertical-align: bottom; }
 </style>

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 is-small" type="number" size="3" min=-50 max=50 step=5>
-      <span class="icon is-small is-left">
+      <input class="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 is-small is-outlined" @click="is_opened = !is_opened">
+      <button class="button is-outlined" @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>
@@ -24,3 +24,7 @@
         }
     }
 </script>
+
+<style scoped>
+.input { width: 6em; }
+</style>

lootalot_front/src/components/Request.vue

@@ -16,7 +16,6 @@
     </template>
     <button class="button is-primary" 
       @click="putRequest"
-      :class="{'is-small': isRequested}"
       :disabled="isRequested">
       <span class="icon is-small">
         <i class="fas fa-praying-hands"></i>