adds basic 'views' concept for main content

lootalot_front/src/App.vue

@@ -31,12 +31,13 @@
       <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 }" v-show="!playerIsGroup">
-              <a @click="switchPlayerChestVisibility">Mon coffre</a></li>
-            <li>
-              <a class="disabled">
+            <li :class="{ 'is-active': activeView == 'group' }">
+              <a @click="switchView('group')">Coffre de groupe</a></li>
+            <li :class="{ 'is-active': activeView == 'player' }" 
+              v-show="!playerIsGroup">
+              <a @click="switchView('player')">Mon coffre</a></li>
+            <li :class="{'is-active': activeView == 'adding' }">
+              <a @click="switchView('adding')">
                 + {{ playerIsGroup ? 'Nouveau Loot' : 'Acheter' }}
               </a>
             </li>
@@ -44,9 +45,19 @@
         </div>
       </nav>
       <main class="">
-        <Chest 
-            :items="state.show_player_chest ? loot : state.group_loot"
-            :perms="permissions"
+        <template v-if="isAdding">
+          <h2 v-show="playerIsGroup">ItemInput</h2>
+          <Chest 
+              :items="playerIsGroup ? [] : shopInventory"
+              :perms="playerIsGroup ? {} : { canBuy: true }">
+          </Chest>
+        </template>
+        <Chest v-else
+            :items="showPlayerChest ? loot : state.group_loot"
+            :perms="{ 
+                canGrab: !(showPlayerChest || playerIsGroup), 
+                canSell: showPlayerChest || playerIsGroup
+            }"
             @claim="actions.putClaim"
             @unclaim="actions.withdrawClaim">
         </Chest>
@@ -83,6 +94,8 @@ export default {
   data () {
       return {
   	    state: AppStorage.state,
+        activeView: 'group',
+        shopInventory: [{id: 1, name: "Item from shop #1", base_price: 2000}],
       };
   },
   components: {
@@ -104,26 +117,23 @@ export default {
     AppStorage.initStorage(playerId);
   },
   methods: {
-    setActivePlayer (idx) { AppStorage.setActivePlayer(idx); },
+    setActivePlayer (idx) { 
+        if (idx == 0) this.switchView('group');
+        AppStorage.setActivePlayer(idx); 
+    },
+    switchView (viewId) {
+        if (!['group', 'player', 'adding'].includes(viewId)) {
+            console.error("Not a valid view ID :", viewId);
+        }
+        this.activeView = viewId;
+    },
     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,
-        };
-    },
+    showPlayerChest () { return this.activeView == 'player' },
+    isAdding () { return this.activeView == 'adding' },
     playerIsGroup () { return this.state.player_id == 0 },
   }
 }
 </script>
 
-<style>
-#app {
-  font-family: 'Montserrat', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-}
-</style>

lootalot_front/src/components/Chest.vue

@@ -2,10 +2,10 @@
   <table class="table is-fullwidth is-striped">
     <thead>
       <tr>
-        <th>Objets</th>
+        <th width="100%">Objets</th>
         <th>Valeur</th>
         <th>
-          <div v-show="perms.canSell" class="buttons is-right" :class="{'has-addons': is_selling}">
+          <div v-show="perms.canSell" class="buttons" :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>
@@ -31,12 +31,12 @@
               @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" >
+            <div v-show="is_selling || perms.canBuy" class="field is-grouped">
               <input type="checkbox" class="checkbox"
                 id="`select-${idx}`"
                 :value="item.id"
                 v-model="selected_items">
-              <label for="`select-${idx}`">
+              <label for="`select-${idx}`" class="label" style="padding: 0 1em;">
                   {{item.base_price / 2}} GP
               </label>
               <PercentInput></PercentInput>
@@ -95,5 +95,6 @@
 </script>
 
 <style scoped>
-    .table td, .table th { vertical-align: bottom; }
+    .table td, .table th { vertical-align: middle; }
+    .buttons { flex-wrap: nowrap; }
 </style>

lootalot_front/src/components/Request.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="buttons is-right" >
+  <div class="buttons" >
     <template v-if="isInConflict">
       <button class="button is-success" 
         @click="cancelRequest">