You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
3.4 KiB
128 lines
3.4 KiB
4 years ago
|
<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>
|