mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-16 22:27:26 +01:00
f5cf27a79e
* reposition FlyingPigs and Hydra * hide count-badge if 0 * fix sortBy hatchable (ignore already hatched pets) * always show animal name * featuredItems, use shopItem objects * fix egg / potion names in market * buyModals: check for price, mark it if not enough available / change buy-button opacity / show purchaseGems button * save itemRows open/collapsed state during session, refactor itemRows for some more performance * pin featured items * show bordered items in market buyModal * fix popover margins / paddings * position pinned items popovers to the left
103 lines
2.0 KiB
Vue
103 lines
2.0 KiB
Vue
<template lang="pug">
|
|
div
|
|
span(
|
|
v-for="currency of currencies",
|
|
:key="currency.key"
|
|
)
|
|
.svg-icon(v-html="currency.icon")
|
|
span(:class="{'notEnough': currency.notEnough}") {{ currency.value | roundBigNumber}}
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~client/assets/scss/colors.scss';
|
|
|
|
span {
|
|
font-weight: normal;
|
|
font-size: 12px;
|
|
line-height: 1.33;
|
|
color: $gray-200;
|
|
|
|
display: inline-block;
|
|
}
|
|
|
|
.svg-icon {
|
|
vertical-align: middle;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 8px;
|
|
margin-left: 4px;
|
|
|
|
display: inline-block;
|
|
}
|
|
|
|
.notEnough {
|
|
color: #f23035 !important;
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
import svgGem from 'assets/svg/gem.svg';
|
|
import svgGold from 'assets/svg/gold.svg';
|
|
import svgHourglasses from 'assets/svg/hourglass.svg';
|
|
|
|
import currencyMixin from './_currencyMixin';
|
|
|
|
export default {
|
|
mixins: [currencyMixin],
|
|
data () {
|
|
return {
|
|
icons: Object.freeze({
|
|
gem: svgGem,
|
|
gold: svgGold,
|
|
hourglasses: svgHourglasses,
|
|
}),
|
|
};
|
|
},
|
|
computed: {
|
|
currencies () {
|
|
let currencies = [];
|
|
|
|
if (this.withHourglass) {
|
|
currencies.push({
|
|
type: 'hourglasses',
|
|
icon: this.icons.hourglasses,
|
|
value: this.userHourglasses,
|
|
});
|
|
}
|
|
|
|
currencies.push({
|
|
type: 'gems',
|
|
icon: this.icons.gem,
|
|
value: this.userGems,
|
|
});
|
|
|
|
currencies.push({
|
|
type: 'gold',
|
|
icon: this.icons.gold,
|
|
value: this.userGold,
|
|
});
|
|
|
|
for (let currency of currencies) {
|
|
if (currency.type === this.currencyNeeded && !this.enoughCurrency(this.currencyNeeded, this.amountNeeded)) {
|
|
currency.notEnough = true;
|
|
}
|
|
}
|
|
|
|
return currencies;
|
|
},
|
|
},
|
|
props: {
|
|
withHourglass: {
|
|
type: Boolean,
|
|
},
|
|
currencyNeeded: {
|
|
type: String,
|
|
},
|
|
amountNeeded: {
|
|
type: Number,
|
|
},
|
|
},
|
|
};
|
|
</script>
|