WIP tabs;

concept.md

@@ -25,6 +25,8 @@
   - [ ] Mini blackjack
   - [ ] Mini slotmachine
 - [x] Stores
+  - [ ] Each store has tabs [buy / sell]
+  - [ ] Depending on store-itemtype, sell-price is 100% or 70%
   - [ ] Crop-Store
   - [ ] Animal Store
   - [ ] Machine Store (crafting machines)

src/components/CropShopView.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="container container-fluid" id="main-container">
+        <div class="float-right shop-tab-wrapper row">
+            <div class="col-6">
+                <div v-on:click="active = 'buy'" :class="'btn btn-sm btn-pixel-border ' + (active === 'buy' ? ' active' : '') + ' shop-tab'">Buy</div>
+            </div>
+            <div class="col-6">
+                <div v-on:click="active = 'sell'" :class="'btn btn-sm btn-pixel-border ' + (active === 'sell' ? ' active' : '') + ' shop-tab'">Sell</div>
+            </div>
+
+        </div>
+        <div class="pixel-border-static shop-front" style="border-bottom: none;">
+            <div class="row" v-for="item in items" v-bind:key="item">
+                <div class="col-12 item-card">
+                    <div class="float-end">
+                        <img :src="item.icon" class="item-icon" :alt="item.name">
+                    </div>
+                    {{ item.name }}<br/>
+                    Costs {{ item.economy.buy }}$<span v-if="item.cropData">, Sells for {{ item.economy.sell }}$ when harvested</span><br>
+                    <span v-if="item.cropData">
+                    Takes {{ item.cropData.timeToGrow }} minutes to grow
+                </span>
+                </div>
+                <div class="col-4">
+                    <a href="javascript:"
+                       v-on:click="$store.commit('buyItem', {item: item, quantity: 1})"
+                       class="btn btn-sm btn-pixel-border">Buy 1</a>
+                </div>
+                <div class="col-4">
+                    <a href="javascript:"
+                       v-on:click="$store.commit('buyItem', {item: item, quantity: 5})"
+                       class="btn btn-sm btn-pixel-border">Buy 5</a>
+                </div>
+                <div class="col-4">
+                    <a href="javascript:"
+                       v-on:click="$store.commit('buyItem', {item: item, quantity: 20})"
+                       class="btn btn-sm btn-pixel-border">Buy 20</a>
+                </div>
+                <hr>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import ItemService from "@/services/ItemService";
+import {ItemTypes} from "@/data/ItemTypes";
+
+export default {
+    name: "CropShopView",
+    data() {
+        return {
+            active: 'buy'
+        }
+    },
+    methods: {
+        getMaxQuantity(seed) {
+            return Math.floor(this.$store.state.player.money / seed.economy.buy).toFixed(0)
+        }
+    },
+    mounted() {
+    },
+    computed: {
+        items() {
+            return ItemService.getItemsByType([ItemTypes.Seeds, ItemTypes.AnimalProducts]);
+        }
+    }
+}
+</script>
+
+<style scoped>
+#main-container {
+    padding: 4.9em 1em;
+}
+
+.item-card {
+    font-size: 0.75em;
+    margin-bottom: 1em;
+}
+
+.item-icon {
+    max-height: 3.5em;
+    width: 42px;
+    background-color: rgba(255, 255, 255, 0.2);
+    padding: 5px;
+    border-radius: 5px;
+    border: 1px solid saddlebrown;
+    margin-top: 1em;
+}
+
+.btn-pixel-border {
+    margin: 0 0 0.5em;
+    font-size: 0.8em;
+    white-space: nowrap;
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+}
+
+.buy-buttons a {
+    width: 100%;
+}
+
+hr {
+    margin-top: 1em;
+    color: white;
+}
+
+.shop-tab {
+    text-align: center;
+    padding : 0.1em;
+    width: 100%;
+    border-radius: 20px;
+}
+
+.shop-tab:not(.active) {
+    display: inline-block;
+    opacity: 0.7;
+}
+
+.shop-front {
+    background-color: white;
+    margin-top: 1em;
+    border-radius: 20px;
+}
+
+</style>

src/components/ShopView.vue

@@ -1,94 +0,0 @@
-<template>
-    <div class="container container-fluid" id="main-container">
-        <div class="row" v-for="item in items" v-bind:key="item">
-            <div class="col-12 item-card">
-                <div class="float-end">
-                    <img :src="item.icon" class="item-icon" :alt="item.name">
-                </div>
-                {{ item.name }}<br/>
-                Costs {{ item.economy.buy }}$<span v-if="item.cropData">, Sells for {{ item.economy.sell }}$ when harvested</span><br>
-                <span v-if="item.cropData">
-                    Takes {{ item.cropData.timeToGrow }} minutes to grow
-                </span>
-            </div>
-            <div class="col-4">
-                <a href="javascript:"
-                   v-on:click="$store.commit('buyItem', {item: item, quantity: 1})"
-                   class="btn btn-sm btn-pixel-border">Buy 1</a>
-            </div>
-            <div class="col-4">
-                <a href="javascript:"
-                   v-on:click="$store.commit('buyItem', {item: item, quantity: 5})"
-                   class="btn btn-sm btn-pixel-border">Buy 5</a>
-            </div>
-            <div class="col-4">
-                <a href="javascript:"
-                   v-on:click="$store.commit('buyItem', {item: item, quantity: 20})"
-                   class="btn btn-sm btn-pixel-border">Buy 20</a>
-            </div>
-            <hr>
-        </div>
-    </div>
-</template>
-
-<script>
-
-import ItemService from "@/services/ItemService";
-import {ItemTypes} from "@/data/ItemTypes";
-
-export default {
-    name: "ShopView",
-    methods: {
-        getMaxQuantity(seed) {
-            return Math.floor(this.$store.state.player.money / seed.economy.buy).toFixed(0)
-        }
-    },
-    mounted() {
-    },
-    computed: {
-        items() {
-            return ItemService.getItemsByType([ItemTypes.Seeds, ItemTypes.AnimalProducts]);
-        }
-    }
-}
-</script>
-
-<style scoped>
-#main-container {
-    padding: 4.9em 1em;
-    color: white;
-}
-
-.item-card {
-    font-size: 0.75em;
-    margin-bottom: 1em;
-}
-
-.item-icon {
-    max-height: 3.5em;
-    width: 42px;
-    background-color: rgba(255, 255, 255, 0.2);
-    padding: 5px;
-    border-radius: 5px;
-    border: 1px solid saddlebrown;
-    margin-top: 1em;
-}
-
-.btn-pixel-border {
-    margin: 0 0 0.5em;
-    font-size: 0.8em;
-    white-space: nowrap;
-    padding-left: 0;
-    padding-right: 0;
-    width: 100%;
-}
-
-.buy-buttons a {
-    width: 100%;
-}
-
-hr {
-    margin-top: 1em;
-    color: white;
-}
-</style>

src/router/index.js

@@ -1,6 +1,6 @@
 import {createRouter, createWebHistory} from 'vue-router'
 import FieldView from '@/components/CropField'
-import ShopView from "@/components/ShopView";
+import CropShopView from "@/components/CropShopView";
 import InventoryView from "@/components/InventoryView";
 
 const routes = [
@@ -16,7 +16,7 @@ const routes = [
     {
         path: '/shop',
         name: 'shop',
-        component: ShopView,
+        component: CropShopView,
         meta: {
             title: 'Shop',
             background: '/assets/backgrounds/planks.jpg',
@@ -36,7 +36,7 @@ const routes = [
     {
         path: '/barn',
         name: 'barn',
-        component: ShopView,
+        component: CropShopView,
         meta: {
             title: 'Barn',
             background: '/assets/backgrounds/planks.jpg',