Shop refactor; better buying system; adjust assets; add helpers.js; add mono-button; move gui-elements to own scss;

src/components/CropField.vue

@@ -38,7 +38,7 @@
                     </div>
 
                     <div class="modal-footer" v-if="!$store.getters.getSeedsInInventory.length">
-                        <button type="button" class="btn btn-pixel-border" data-bs-dismiss="modal">K, bye</button>
+                        <button type="button" class="btn btn-pixel" data-bs-dismiss="modal">K, bye</button>
                     </div>
                 </div>
             </div>

src/components/CropShopView.vue

@@ -2,41 +2,64 @@
     <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 v-on:click="active = 'buy'" :class="'btn btn-sm btn-pixel' + (active === 'buy' ? '-mono' : '') + ' 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 v-on:click="active = 'sell'" :class="'btn btn-sm btn-pixel' + (active === 'sell' ? '-mono' : '') + ' 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">
+        <div v-if="active === 'buy'" class="pixel-border-static shop-front" style="border-bottom: none;">
+            <template v-for="item in items" v-bind:key="item">
+                <div class="item-info row">
+                    <div class="col-9">
                         <img :src="item.icon" class="item-icon" :alt="item.name">
+                        <span>{{ item.name }}</span>
+                        <span class="float-end price-view">{{ item.economy.buy }}$</span>
+                    </div>
+                    <div class="col-3">
+                        <div class="btn-pixel buy-button" v-on:click="selectQuantity(item)">Buy</div>
                     </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>
+            </template>
+        </div>
+
+        <div class="modal fade" id="quantityModal" tabindex="-1" aria-labelledby="quantityModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-sm">
+                <div class="modal-content steel-border" v-if="selectedItem">
+                    <div class="modal-header">
+                        Buy {{ selectedItem.name }}
+                        <div class="float-end">
+                            <img src="@/assets/gui/close.png" alt="" data-bs-dismiss="modal">
+                        </div>
+                    </div>
+                    <div class="modal-body">
+                        <div class="row">
+                            <div class="col-12" v-if="selectedItem.cropData">
+                                <small class="text-muted">Seed info</small><br/>
+                                Sells for <span class="number-marker">{{ selectedItem.economy.sell }}$</span> when harvested<br/>
+                                Takes <span class="number-marker">{{ selectedItem.cropData.timeToGrow }}</span> minutes to grow
+                                <hr>
+                            </div>
+                            <div class="col-4">
+                                <input type="number" class="d-inline quantity-input pixel-border-green" v-model="quantity">
+                            </div>
+                            <div class="col-4 text-center">
+                                <div class="btn btn-sm btn-pixel" v-on:click="quantity = getMaxQuantity(selectedItem)">
+                                    MAX
+                                </div>
+                            </div>
+                            <div class="col-4 text-center">
+                                <img src="@/assets/gui/minus.png" alt="minus" class="quantity-button" v-on:click="quantity--">
+                                <img src="@/assets/gui/plus.png" alt="plus" class="quantity-button" v-on:click="quantity++">
+                            </div>
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <div class="btn-pixel" data-bs-dismiss="modal" v-on:click="$store.commit('buyItem', {item: selectedItem, quantity: quantity})">
+                            Buy for {{ selectedItem.economy.buy * quantity }}$
+                        </div>
+                    </div>
                 </div>
-                <hr>
             </div>
         </div>
     </div>
@@ -46,21 +69,43 @@
 
 import ItemService from "@/services/ItemService";
 import {ItemTypes} from "@/data/ItemTypes";
+import {openModal} from "@/helpers";
 
 export default {
     name: "CropShopView",
     data() {
         return {
-            active: 'buy'
+            active: 'buy',
+            selectedItem: null,
+            quantity: 1
         }
     },
     methods: {
-        getMaxQuantity(seed) {
-            return Math.floor(this.$store.state.player.money / seed.economy.buy).toFixed(0)
+        selectQuantity(item) {
+            this.selectedItem = item;
+            openModal('quantityModal');
+            console.log(item);
+        },
+        getMaxQuantity(item) {
+            return Math.floor(this.$store.state.player.money / item.economy.buy).toFixed(0);
         }
     },
     mounted() {
     },
+    watch: {
+        selectedItem() {
+            this.quantity = 1;
+        },
+        quantity() {
+            if (this.quantity < 1) {
+                this.quantity = 1;
+            }
+
+            if (this.quantity > this.getMaxQuantity(this.selectedItem)) {
+                this.quantity = this.getMaxQuantity(this.selectedItem);
+            }
+        }
+    },
     computed: {
         items() {
             return ItemService.getItemsByType([ItemTypes.Seeds, ItemTypes.AnimalProducts]);
@@ -74,22 +119,18 @@ export default {
     padding: 4.9em 1em;
 }
 
-.item-card {
-    font-size: 0.75em;
-    margin-bottom: 1em;
-}
-
 .item-icon {
+    display: inline-block;
     max-height: 3.5em;
     width: 42px;
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(100, 100, 100, 0.2);
     padding: 5px;
     border-radius: 5px;
     border: 1px solid saddlebrown;
-    margin-top: 1em;
+    margin-right: 0.4em;
 }
 
-.btn-pixel-border {
+.btn-pixel {
     margin: 0 0 0.5em;
     font-size: 0.8em;
     white-space: nowrap;
@@ -102,11 +143,6 @@ export default {
     width: 100%;
 }
 
-hr {
-    margin-top: 1em;
-    color: white;
-}
-
 .shop-tab {
     text-align: center;
     padding : 0.1em;
@@ -116,13 +152,43 @@ hr {
 
 .shop-tab:not(.active) {
     display: inline-block;
-    opacity: 0.7;
 }
 
 .shop-front {
     background-color: white;
-    margin-top: 1em;
+    margin-top: 0.5em;
     border-radius: 20px;
 }
 
+.buy-button {
+    width: 100%;
+    text-align: center;
+}
+
+.price-view {
+    padding-top: 0.5em;
+    color: green;
+}
+
+#quantityModal .btn-pixel {
+    text-align: center;
+}
+
+.quantity-input {
+    text-align: right;
+    max-width: 100%;
+    height: 2.7em;
+}
+
+.quantity-button {
+    height: 2.7em;
+    width: auto;
+    margin: 0 0.1em;
+    display: inline-block;
+}
+
+.number-marker {
+    color: green;
+    text-decoration: underline;
+}
 </style>

src/helpers.js

@@ -0,0 +1,6 @@
+import Modal from "bootstrap/js/src/modal";
+
+export const openModal = (modalName) => {
+    const modal = new Modal(document.getElementById(modalName))
+    modal.toggle();
+}

src/style/_gui-elements.scss

@@ -0,0 +1,92 @@
+.grass-border {
+    background-position: 64px 64px;
+
+    border: 16px solid transparent;
+    border-image: url(@/assets/border.png) 10% round;
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: 10px;
+}
+
+.steel-border {
+    border: 10px solid transparent;
+    border-image: url(@/assets/gui/border_steel.png) 36 repeat;
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.pixel-border-static {
+    padding: 0;
+    border: 12px solid transparent;
+    border-image: url(@/assets/gui/border_light.png) 36 repeat;
+}
+
+.pixel-border-green {
+    padding: 0;
+    border: 12px solid transparent;
+    border-image: url(@/assets/gui/border_green.png) 36 repeat;
+}
+
+.pixel-border-red {
+    padding: 0;
+    border: 12px solid transparent;
+    border-image: url(@/assets/gui/border_red.png) 36 repeat;
+}
+
+.pixel-border-blue {
+    padding: 0;
+    border: 12px solid transparent;
+    border-image: url(@/assets/gui/border_blue.png) 36 repeat;
+}
+
+.pixel-border-magenta {
+    padding: 0;
+    border: 12px solid transparent;
+    border-image: url(@/assets/gui/border_magenta.png) 36 repeat;
+}
+
+.pixel-border {
+    padding: 0;
+    border: 12px solid transparent;
+    border-image: url(@/assets/gui/border_light.png) 36 repeat;
+}
+
+.pixel-border:hover {
+    border-image: url(@/assets/gui/border_dark.png) 36 repeat;
+}
+
+.btn-pixel {
+    margin-bottom: 5px;
+    padding: 0 15px;
+
+    background-color: #C9A46A;
+    border: 12px solid transparent;
+    border-radius: 7px;
+    border-image: url('@/assets/gui/btn_light.png') 15 repeat;
+}
+
+.btn-pixel:hover {
+    border-image: url('@/assets/gui/btn_dark.png') 15 repeat;
+}
+
+.btn-pixel:active {
+    border-image: url('@/assets/gui/btn_light_pressed.png') 15 repeat;
+}
+
+.btn-pixel-mono {
+    margin-bottom: 5px;
+    padding: 0 15px;
+
+    border: 12px solid transparent;
+    border-radius: 7px;
+    background-color: #A8A8A8;
+    border-image: url('@/assets/gui/btn_monochrome_light.png') 15 repeat;
+}
+
+.btn-pixel-mono:hover {
+    border-image: url('@/assets/gui/btn_monochrome.png') 15 repeat;
+}
+
+.btn-pixel-mono:active {
+    border-image: url('@/assets/gui/btn_monochrome_pressed.png') 15 repeat;
+}

src/style/app.scss

@@ -1,5 +1,6 @@
 @import "bootswatch/dist/simplex/bootstrap.min.css";
 @import "izitoast/dist/css/iziToast.min.css";
+@import "gui-elements";
 
 @font-face {
     font-family: Pixellari;
@@ -7,76 +8,9 @@
 }
 
 body {
-    cursor: url("@/assets/cursor/cursor.png");
     font-family: 'Pixellari', sans-serif;
 }
 
-
-.grass-border {
-    background-position: 64px 64px;
-
-    border: 16px solid transparent;
-    border-image: url(@/assets/border.png) 10% round;
-    padding-left: 0;
-    padding-right: 0;
-    padding-bottom: 10px;
-}
-
-.steel-border {
-    border: 10px solid transparent;
-    border-image: url(@/assets/gui/border_steel.png) 36 repeat;
-    padding-left: 0;
-    padding-right: 0;
-}
-
-.pixel-border-static {
-    padding: 0;
-    border: 12px solid transparent;
-    border-image: url(@/assets/gui/border_light.png) 36 repeat;
-}
-
-.pixel-border-green {
-    padding: 0;
-    border: 12px solid transparent;
-    border-image: url(@/assets/gui/border_green.png) 36 repeat;
-}
-
-.pixel-border-red {
-    padding: 0;
-    border: 12px solid transparent;
-    border-image: url(@/assets/gui/border_red.png) 36 repeat;
-}
-
-.pixel-border-blue {
-    padding: 0;
-    border: 12px solid transparent;
-    border-image: url(@/assets/gui/border_blue.png) 36 repeat;
-}
-
-.pixel-border {
-    padding: 0;
-    border: 12px solid transparent;
-    border-image: url(@/assets/gui/border_light.png) 36 repeat;
-}
-
-.pixel-border:hover {
-    border-image: url(@/assets/gui/border_dark.png) 36 repeat;
-}
-
-.btn-pixel-border {
-    margin-bottom: 5px;
-    padding: 0 15px;
-
-    background-color: #C9A46A;
-    border: 12px solid transparent;
-    border-radius: 7px;
-    border-image: url('@/assets/gui/btn_light.png') 15 repeat;
-}
-
-.btn-pixel-border:hover {
-    border-image: url('@/assets/gui/btn_dark.png') 15 repeat;
-}
-
-.btn-pixel-border:active {
-    border-image: url('@/assets/gui/btn_light_pressed.png') 15 repeat;
+.text-right {
+    text-align: right;
 }