From dbeb5398222a1f190f1019af874e0000f4849346 Mon Sep 17 00:00:00 2001
From: Nero Ignis <neroignis@gmail.com>
Date: Fri, 27 May 2022 19:33:55 +0200
Subject: [PATCH] WIP tabs;

---
 concept.md                      |   2 +
 src/assets/gui/border_dark.png  | Bin 2019 -> 7933 bytes
 src/assets/gui/border_light.png | Bin 2019 -> 7744 bytes
 src/components/CropShopView.vue | 128 ++++++++++++++++++++++++++++++++
 src/components/ShopView.vue     |  94 -----------------------
 src/router/index.js             |   6 +-
 6 files changed, 133 insertions(+), 97 deletions(-)
 create mode 100644 src/components/CropShopView.vue
 delete mode 100644 src/components/ShopView.vue

diff --git a/concept.md b/concept.md
index afb18fe..606e699 100644
--- a/concept.md
+++ b/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)
diff --git a/src/assets/gui/border_dark.png b/src/assets/gui/border_dark.png
index e7aaca039dda54a180110aad259b91733ee55e4a..60332065207c286f148cae5849cc8140ecd4b52f 100644
GIT binary patch
literal 7933
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
To$Rpz>j+{&u`wy%=@t8Lryo6k

literal 2019
zcmeAS@N?(olHy`uVBq!ia0y~yU{nBM4rT@h2IbheO+bpVILO_JVcj{Imp~3nx}&cn
z1H;CC?mvmF3=GT+0X`wFK=H*v3j5OywibK;Z?`$s9QJ=^)V+i2{~wt7|LDU1S9iU+
zd-?yJWB(st{Qv(yQ1K`j4T0el0<}pAM}hf-p(MyJ7?{FGGGGY)&aMiKTh0QH$YKTt
zZeb8+WSBKa0$5lic)B=-RK&f#da>xTg+xQ(v^=NT+xGmwEtZ@qnH~IN!So+B<<pj)
zd2!~)`Q_Vp%f0{g-Nd)axnY{xK}84e$qxh;EcGnlxNu3uf+ZtUNM@EpaMJtFozg!4
z-|$L0csD3H2rl3V5OFBJe(y#}+p|{w-mi+x908{KH5qI8XT~$y+St@sI!-^Gdhh3c
z23^K3rWdiZE|&dx%~@4dCH4PZ^yGwm1qP;&T9yo-`Olv}|0!Kxy8U*p@vgY_4fps1
zzOXwaXTDas{QSmW6)BO1w1!3ZS*@;qu`ILi1Q}Mx_2utuYn{0TzhtB*zi4M$@Sk0S
zNrbVB!4>K*mQn8D3=P%`*Pa&LG`pL(z4DRC-hKP_?b#EvKHT9wyT-5B1#90H8qa#}
zcX`?8A3rLtFl=Gb_+`A{ZLrOGm0k1glpTy6F1k0ksn2xzemR{bgH3~L!S=l$4er0m
z-F;l;*X!RmzepN2FoeppTZMkURqdR7f??L#?DxFAip&{i>-U<Qw4GrxnYG*RrpgUz
zBTy>8H-T}B3Fo&q9$-S>V4lLD>)W&!s5VpR4ew0OlAL|^sTi4n38;aOF=`fzeO2{u
Zw!?ZhJq}y4fYmqygQu&X%Q~loCIDW$T5kXV

diff --git a/src/assets/gui/border_light.png b/src/assets/gui/border_light.png
index d2e640603eb1516c2b05ad52ec7d75945823a1ce..3f45dc032a6f2670e03c33a890cfdf3c48f3ecd0 100644
GIT binary patch
literal 7744
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
Ph5&nOC#&);0WtpuzG(b~

literal 2019
zcmeAS@N?(olHy`uVBq!ia0y~yU{nBM4rT@h2IbheO+bpVILO_JVcj{Imp~3nx}&cn
z1H;CC?mvmF3=GT+0X`wFK=E@0I@dY_pY%Gtn4kE6bI|{N*{=>S|9^ei|A)Ij-Z=LE
z$<hDsZvX%I@c;k+K*ghAGz5lI2q>1Z*aPzkLrIWdFffIWWWW&oom~|ex10qYk;M!Q
z+`=Ht$S`Y;1hBA3@N{tusfc@f^>)z}3lWDvwaX?iV}AVK&wK1rz_pSDXSt8J@~16b
zcWKq9m;U+Xw)emOH1Tb6ZkVQaP|?AA@&kbdOFauXE?iQvV9Cf7l9}ZYob>*_u=$LC
zH>HglrZKoSC^-l&&}ewJZtupIJZHJ(rCvL;2`tEp`*9&c-e^BlRYk>*q9(oRr}uoW
zXN+PJVZE^1WbxY%*M-0Q_+jzy?sm0<_Z%2lR{Y|)FvHH@-~Y4uzgKzNZ>N>)jbq#^
zzu*Ob!?8=(JeQr{_}kM&gW)WL>wfN%RWFO*)CqwM`z!L|w|RMl)x$5AW@;Dtc^&@q
z2e4=`i7<9S-NiA=9h{-TwP5Y(r<-zj-Oc-aB(tivwzjfzXWaURd;9@kb~{Ahew=1<
ze(o~g=Rbe`T)~*Z8So|D;r8;1d7dTqwQdb*4U762di{(#-z`7Sae*g5#38@>apJz4
zx6ArHzg+*m`K56R1LG<?zLHhXwtjCrHi6M(_Vs(xQqF7_a^kA<Gk9jQW|)-E-Q>B!
zJcU8mw`s2;GcaMl;gtlY_JsTs3{kUKs)1@Rsoan@5`J-`rv4Q6oWQijgtP9;w{N`D
WGgIXp&RnPg6|SDHelF{r5}E*h>S1L7

diff --git a/src/components/CropShopView.vue b/src/components/CropShopView.vue
new file mode 100644
index 0000000..3960d9a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/ShopView.vue b/src/components/ShopView.vue
deleted file mode 100644
index 4f0f954..0000000
--- a/src/components/ShopView.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index ff795f2..b684391 100644
--- a/src/router/index.js
+++ b/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',