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>