farm-fresh/src/components/CropShopView.vue

<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' + (active === 'buy' ? '-mono' : '') + ' shop-tab'">Buy</div>
            </div>
            <div class="col-6">
                <div v-on:click="active = 'sell'" :class="'btn btn-sm btn-pixel' + (active === 'sell' ? '-mono' : '') + ' shop-tab'">Sell</div>
            </div>
        </div>
        <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>
                </div>
            </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>
            </div>
        </div>
    </div>
</template>

<script>

import ItemService from "@/services/ItemService";
import {ItemTypes} from "@/data/ItemTypes";
import {openModal} from "@/helpers";

export default {
    name: "CropShopView",
    data() {
        return {
            active: 'buy',
            selectedItem: null,
            quantity: 1
        }
    },
    methods: {
        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]);
        }
    }
}
</script>

<style scoped>
#main-container {
    padding: 4.9em 1em;
}

.item-icon {
    display: inline-block;
    max-height: 3.5em;
    width: 42px;
    background-color: rgba(100, 100, 100, 0.2);
    padding: 5px;
    border-radius: 5px;
    border: 1px solid saddlebrown;
    margin-right: 0.4em;
}

.btn-pixel {
    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%;
}

.shop-tab {
    text-align: center;
    padding : 0.1em;
    width: 100%;
    border-radius: 20px;
}

.shop-tab:not(.active) {
    display: inline-block;
}

.shop-front {
    background-color: white;
    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;
}
</style>