lint common
This commit is contained in:
Matteo Pagliazzi
@@ -37,66 +37,66 @@ span {
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgHourglasses from '@/assets/svg/hourglass.svg';
|
||||
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';
|
||||
import currencyMixin from './_currencyMixin';
|
||||
|
||||
export default {
|
||||
mixins: [currencyMixin],
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
gem: svgGem,
|
||||
gold: svgGold,
|
||||
hourglasses: svgHourglasses,
|
||||
}),
|
||||
};
|
||||
export default {
|
||||
mixins: [currencyMixin],
|
||||
props: {
|
||||
withHourglass: {
|
||||
type: Boolean,
|
||||
},
|
||||
computed: {
|
||||
currencies () {
|
||||
let currencies = [];
|
||||
|
||||
if (this.withHourglass) {
|
||||
currencies.push({
|
||||
type: 'hourglasses',
|
||||
icon: this.icons.hourglasses,
|
||||
value: this.userHourglasses,
|
||||
});
|
||||
}
|
||||
currencyNeeded: {
|
||||
type: String,
|
||||
},
|
||||
amountNeeded: {
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
gem: svgGem,
|
||||
gold: svgGold,
|
||||
hourglasses: svgHourglasses,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currencies () {
|
||||
const currencies = [];
|
||||
|
||||
if (this.withHourglass) {
|
||||
currencies.push({
|
||||
type: 'gems',
|
||||
icon: this.icons.gem,
|
||||
value: this.userGems,
|
||||
type: 'hourglasses',
|
||||
icon: this.icons.hourglasses,
|
||||
value: this.userHourglasses,
|
||||
});
|
||||
}
|
||||
|
||||
currencies.push({
|
||||
type: 'gold',
|
||||
icon: this.icons.gold,
|
||||
value: this.userGold,
|
||||
});
|
||||
currencies.push({
|
||||
type: 'gems',
|
||||
icon: this.icons.gem,
|
||||
value: this.userGems,
|
||||
});
|
||||
|
||||
for (let currency of currencies) {
|
||||
if (currency.type === this.currencyNeeded && !this.enoughCurrency(this.currencyNeeded, this.amountNeeded)) {
|
||||
currency.notEnough = true;
|
||||
}
|
||||
currencies.push({
|
||||
type: 'gold',
|
||||
icon: this.icons.gold,
|
||||
value: this.userGold,
|
||||
});
|
||||
|
||||
for (const currency of currencies) {
|
||||
if (currency.type === this.currencyNeeded && !this.enoughCurrency(this.currencyNeeded, this.amountNeeded)) {
|
||||
currency.notEnough = true;
|
||||
}
|
||||
}
|
||||
|
||||
return currencies;
|
||||
},
|
||||
return currencies;
|
||||
},
|
||||
props: {
|
||||
withHourglass: {
|
||||
type: Boolean,
|
||||
},
|
||||
currencyNeeded: {
|
||||
type: String,
|
||||
},
|
||||
amountNeeded: {
|
||||
type: Number,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -274,250 +274,246 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import * as Analytics from '@/libs/analytics';
|
||||
import spellsMixin from '@/mixins/spells';
|
||||
import planGemLimits from '@/../../common/script/libs/planGemLimits';
|
||||
import numberInvalid from '@/mixins/numberInvalid';
|
||||
import keys from 'lodash/keys';
|
||||
import reduce from 'lodash/reduce';
|
||||
import moment from 'moment';
|
||||
import * as Analytics from '@/libs/analytics';
|
||||
import spellsMixin from '@/mixins/spells';
|
||||
import planGemLimits from '@/../../common/script/libs/planGemLimits';
|
||||
import numberInvalid from '@/mixins/numberInvalid';
|
||||
|
||||
import svgClose from '@/assets/svg/close.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgHourglasses from '@/assets/svg/hourglass.svg';
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgClock from '@/assets/svg/clock.svg';
|
||||
import svgWhiteClock from '@/assets/svg/clock-white.svg';
|
||||
import svgClose from '@/assets/svg/close.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgHourglasses from '@/assets/svg/hourglass.svg';
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgClock from '@/assets/svg/clock.svg';
|
||||
import svgWhiteClock from '@/assets/svg/clock-white.svg';
|
||||
|
||||
import BalanceInfo from './balanceInfo.vue';
|
||||
import currencyMixin from './_currencyMixin';
|
||||
import notifications from '@/mixins/notifications';
|
||||
import buyMixin from '@/mixins/buy';
|
||||
import BalanceInfo from './balanceInfo.vue';
|
||||
import currencyMixin from './_currencyMixin';
|
||||
import notifications from '@/mixins/notifications';
|
||||
import buyMixin from '@/mixins/buy';
|
||||
|
||||
import { mapState } from '@/libs/store';
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
import EquipmentAttributesGrid from '../inventory/equipment/attributesGrid.vue';
|
||||
import EquipmentAttributesGrid from '../inventory/equipment/attributesGrid.vue';
|
||||
|
||||
import Item from '@/components/inventory/item';
|
||||
import Avatar from '@/components/avatar';
|
||||
import Item from '@/components/inventory/item';
|
||||
import Avatar from '@/components/avatar';
|
||||
|
||||
import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';
|
||||
import { drops as dropEggs } from '@/../../common/script/content/eggs';
|
||||
import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';
|
||||
import { drops as dropEggs } from '@/../../common/script/content/eggs';
|
||||
|
||||
import keys from 'lodash/keys';
|
||||
import reduce from 'lodash/reduce';
|
||||
import moment from 'moment';
|
||||
|
||||
const dropEggKeys = keys(dropEggs);
|
||||
const dropEggKeys = keys(dropEggs);
|
||||
|
||||
const hideAmountSelectionForPurchaseTypes = [
|
||||
'gear', 'backgrounds', 'mystery_set', 'card',
|
||||
'rebirth_orb', 'fortify', 'armoire', 'keys',
|
||||
'debuffPotion', 'pets', 'mounts',
|
||||
];
|
||||
const hideAmountSelectionForPurchaseTypes = [
|
||||
'gear', 'backgrounds', 'mystery_set', 'card',
|
||||
'rebirth_orb', 'fortify', 'armoire', 'keys',
|
||||
'debuffPotion', 'pets', 'mounts',
|
||||
];
|
||||
|
||||
export default {
|
||||
mixins: [buyMixin, currencyMixin, notifications, numberInvalid, spellsMixin],
|
||||
components: {
|
||||
BalanceInfo,
|
||||
EquipmentAttributesGrid,
|
||||
Item,
|
||||
Avatar,
|
||||
export default {
|
||||
components: {
|
||||
BalanceInfo,
|
||||
EquipmentAttributesGrid,
|
||||
Item,
|
||||
Avatar,
|
||||
},
|
||||
mixins: [buyMixin, currencyMixin, notifications, numberInvalid, spellsMixin],
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
close: svgClose,
|
||||
gold: svgGold,
|
||||
gems: svgGem,
|
||||
hourglasses: svgHourglasses,
|
||||
pin: svgPin,
|
||||
clock: svgClock,
|
||||
whiteClock: svgWhiteClock,
|
||||
}),
|
||||
|
||||
selectedAmountToBuy: 1,
|
||||
isPinned: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({ user: 'user.data' }),
|
||||
showAvatar () {
|
||||
return ['backgrounds', 'gear', 'mystery_set'].includes(this.item.purchaseType);
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
close: svgClose,
|
||||
gold: svgGold,
|
||||
gems: svgGem,
|
||||
hourglasses: svgHourglasses,
|
||||
pin: svgPin,
|
||||
clock: svgClock,
|
||||
whiteClock: svgWhiteClock,
|
||||
}),
|
||||
|
||||
selectedAmountToBuy: 1,
|
||||
isPinned: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
showAvatar () {
|
||||
return ['backgrounds', 'gear', 'mystery_set'].includes(this.item.purchaseType);
|
||||
},
|
||||
|
||||
preventHealthPotion () {
|
||||
if (this.item.key === 'potion' && this.user.stats.hp >= 50) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
showAttributesGrid () {
|
||||
return this.item.purchaseType === 'gear';
|
||||
},
|
||||
|
||||
itemText () {
|
||||
if (this.item.text instanceof Function) {
|
||||
return this.item.text();
|
||||
} else {
|
||||
return this.item.text;
|
||||
}
|
||||
},
|
||||
itemNotes () {
|
||||
if (this.item.notes instanceof Function) {
|
||||
return this.item.notes();
|
||||
} else {
|
||||
return this.item.notes;
|
||||
}
|
||||
},
|
||||
limitedString () {
|
||||
return this.$t('limitedOffer', {date: moment(seasonalShopConfig.dateRange.end).format('LL')});
|
||||
},
|
||||
gemsLeft () {
|
||||
if (!this.user.purchased.plan) return 0;
|
||||
return planGemLimits.convCap + this.user.purchased.plan.consecutive.gemCapExtra - this.user.purchased.plan.gemsBought;
|
||||
},
|
||||
attemptingToPurchaseMoreGemsThanAreLeft () {
|
||||
if (this.item && this.item.key && this.item.key === 'gem' && this.selectedAmountToBuy > this.gemsLeft) return true;
|
||||
preventHealthPotion () {
|
||||
if (this.item.key === 'potion' && this.user.stats.hp >= 50) {
|
||||
return false;
|
||||
},
|
||||
notEnoughCurrency () {
|
||||
return !this.enoughCurrency(this.getPriceClass(), this.item.value * this.selectedAmountToBuy);
|
||||
},
|
||||
nextFreeRebirth () {
|
||||
return 45 - moment().diff(moment(this.user.flags.lastFreeRebirth), 'days');
|
||||
},
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
watch: {
|
||||
item: function itemChanged () {
|
||||
this.isPinned = this.item && this.item.pinned;
|
||||
this.selectedAmountToBuy = 1;
|
||||
},
|
||||
|
||||
showAttributesGrid () {
|
||||
return this.item.purchaseType === 'gear';
|
||||
},
|
||||
methods: {
|
||||
onChange ($event) {
|
||||
this.$emit('change', $event);
|
||||
},
|
||||
buyItem () {
|
||||
// @TODO: I think we should buying to the items. Turn the items into classes, and use polymorphism
|
||||
if (this.item.buy) {
|
||||
this.item.buy();
|
||||
this.$emit('buyPressed', this.item);
|
||||
this.hideDialog();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.item.pinType === 'premiumHatchingPotion' || this.item.pinType === 'eggs' && dropEggKeys.indexOf(this.item.key) === -1) {
|
||||
let petsRemaining = 20 - this.selectedAmountToBuy;
|
||||
petsRemaining -= reduce(this.user.items.pets, (sum, petValue, petKey) => {
|
||||
if (petKey.indexOf(this.item.key) !== -1 && petValue > 0) return sum + 1;
|
||||
return sum;
|
||||
}, 0);
|
||||
petsRemaining -= reduce(this.user.items.mounts, (sum, mountValue, mountKey) => {
|
||||
if (mountKey.indexOf(this.item.key) !== -1 && mountValue === true) return sum + 1;
|
||||
return sum;
|
||||
}, 0);
|
||||
if (this.item.pinType === 'premiumHatchingPotion') {
|
||||
petsRemaining -= this.user.items.hatchingPotions[this.item.key] + 2 || 2;
|
||||
} else {
|
||||
petsRemaining -= this.user.items.eggs[this.item.key] || 0;
|
||||
}
|
||||
|
||||
if (petsRemaining < 0 && !confirm(this.$t('purchasePetItemConfirm', {itemText: this.item.text}))) return;
|
||||
}
|
||||
|
||||
const shouldConfirmPurchase = this.item.currency === 'gems' || this.item.currency === 'hourglasses';
|
||||
if (shouldConfirmPurchase && !this.confirmPurchase(this.item.currency, this.item.value * this.selectedAmountToBuy)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.genericPurchase) {
|
||||
this.makeGenericPurchase(this.item, 'buyModal', this.selectedAmountToBuy);
|
||||
this.purchased(this.item.text);
|
||||
}
|
||||
|
||||
itemText () {
|
||||
if (this.item.text instanceof Function) {
|
||||
return this.item.text();
|
||||
}
|
||||
return this.item.text;
|
||||
},
|
||||
itemNotes () {
|
||||
if (this.item.notes instanceof Function) {
|
||||
return this.item.notes();
|
||||
}
|
||||
return this.item.notes;
|
||||
},
|
||||
limitedString () {
|
||||
return this.$t('limitedOffer', { date: moment(seasonalShopConfig.dateRange.end).format('LL') });
|
||||
},
|
||||
gemsLeft () {
|
||||
if (!this.user.purchased.plan) return 0;
|
||||
return planGemLimits.convCap + this.user.purchased.plan.consecutive.gemCapExtra - this.user.purchased.plan.gemsBought;
|
||||
},
|
||||
attemptingToPurchaseMoreGemsThanAreLeft () {
|
||||
if (this.item && this.item.key && this.item.key === 'gem' && this.selectedAmountToBuy > this.gemsLeft) return true;
|
||||
return false;
|
||||
},
|
||||
notEnoughCurrency () {
|
||||
return !this.enoughCurrency(this.getPriceClass(), this.item.value * this.selectedAmountToBuy);
|
||||
},
|
||||
nextFreeRebirth () {
|
||||
return 45 - moment().diff(moment(this.user.flags.lastFreeRebirth), 'days');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
item: function itemChanged () {
|
||||
this.isPinned = this.item && this.item.pinned;
|
||||
this.selectedAmountToBuy = 1;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onChange ($event) {
|
||||
this.$emit('change', $event);
|
||||
},
|
||||
buyItem () {
|
||||
// @TODO: I think we should buying to the items. Turn the items into classes, and use polymorphism
|
||||
if (this.item.buy) {
|
||||
this.item.buy();
|
||||
this.$emit('buyPressed', this.item);
|
||||
this.hideDialog();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.item.key === 'rebirth_orb') {
|
||||
window.location.reload(true);
|
||||
if (this.item.pinType === 'premiumHatchingPotion' || this.item.pinType === 'eggs' && dropEggKeys.indexOf(this.item.key) === -1) {
|
||||
let petsRemaining = 20 - this.selectedAmountToBuy;
|
||||
petsRemaining -= reduce(this.user.items.pets, (sum, petValue, petKey) => {
|
||||
if (petKey.indexOf(this.item.key) !== -1 && petValue > 0) return sum + 1;
|
||||
return sum;
|
||||
}, 0);
|
||||
petsRemaining -= reduce(this.user.items.mounts, (sum, mountValue, mountKey) => {
|
||||
if (mountKey.indexOf(this.item.key) !== -1 && mountValue === true) return sum + 1;
|
||||
return sum;
|
||||
}, 0);
|
||||
if (this.item.pinType === 'premiumHatchingPotion') {
|
||||
petsRemaining -= this.user.items.hatchingPotions[this.item.key] + 2 || 2;
|
||||
} else {
|
||||
petsRemaining -= this.user.items.eggs[this.item.key] || 0;
|
||||
}
|
||||
},
|
||||
purchaseGems () {
|
||||
if (this.item.key === 'rebirth_orb') {
|
||||
Analytics.track({
|
||||
hitType: 'event',
|
||||
eventCategory: 'button',
|
||||
eventAction: 'click',
|
||||
eventLabel: 'Gems > Rebirth',
|
||||
|
||||
if (petsRemaining < 0 && !confirm(this.$t('purchasePetItemConfirm', { itemText: this.item.text }))) return;
|
||||
}
|
||||
|
||||
const shouldConfirmPurchase = this.item.currency === 'gems' || this.item.currency === 'hourglasses';
|
||||
if (shouldConfirmPurchase && !this.confirmPurchase(this.item.currency, this.item.value * this.selectedAmountToBuy)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.genericPurchase) {
|
||||
this.makeGenericPurchase(this.item, 'buyModal', this.selectedAmountToBuy);
|
||||
this.purchased(this.item.text);
|
||||
}
|
||||
|
||||
this.$emit('buyPressed', this.item);
|
||||
this.hideDialog();
|
||||
|
||||
if (this.item.key === 'rebirth_orb') {
|
||||
window.location.reload(true);
|
||||
}
|
||||
},
|
||||
purchaseGems () {
|
||||
if (this.item.key === 'rebirth_orb') {
|
||||
Analytics.track({
|
||||
hitType: 'event',
|
||||
eventCategory: 'button',
|
||||
eventAction: 'click',
|
||||
eventLabel: 'Gems > Rebirth',
|
||||
});
|
||||
}
|
||||
this.$root.$emit('bv::show::modal', 'buy-gems');
|
||||
},
|
||||
togglePinned () {
|
||||
this.isPinned = this.$store.dispatch('user:togglePinnedItem', { type: this.item.pinType, path: this.item.path });
|
||||
|
||||
if (!this.isPinned) {
|
||||
this.text(this.$t('unpinnedItem', { item: this.item.text }));
|
||||
}
|
||||
},
|
||||
hideDialog () {
|
||||
this.$root.$emit('bv::hide::modal', 'buy-modal');
|
||||
},
|
||||
getPriceClass () {
|
||||
if (this.priceType && this.icons[this.priceType]) {
|
||||
return this.priceType;
|
||||
} if (this.item.currency && this.icons[this.item.currency]) {
|
||||
return this.item.currency;
|
||||
}
|
||||
return 'gold';
|
||||
},
|
||||
showAmountToBuy (item) {
|
||||
if (hideAmountSelectionForPurchaseTypes.includes(item.purchaseType)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
getAvatarOverrides (item) {
|
||||
switch (item.purchaseType) {
|
||||
case 'gear':
|
||||
return {
|
||||
[item.type]: item.key,
|
||||
};
|
||||
case 'backgrounds':
|
||||
return {
|
||||
background: item.key,
|
||||
};
|
||||
case 'mystery_set': {
|
||||
const gear = {};
|
||||
|
||||
item.items.map(setItem => {
|
||||
gear[setItem.type] = setItem.key;
|
||||
});
|
||||
}
|
||||
this.$root.$emit('bv::show::modal', 'buy-gems');
|
||||
},
|
||||
togglePinned () {
|
||||
this.isPinned = this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path});
|
||||
|
||||
if (!this.isPinned) {
|
||||
this.text(this.$t('unpinnedItem', {item: this.item.text}));
|
||||
return gear;
|
||||
}
|
||||
},
|
||||
hideDialog () {
|
||||
this.$root.$emit('bv::hide::modal', 'buy-modal');
|
||||
},
|
||||
getPriceClass () {
|
||||
if (this.priceType && this.icons[this.priceType]) {
|
||||
return this.priceType;
|
||||
} else if (this.item.currency && this.icons[this.item.currency]) {
|
||||
return this.item.currency;
|
||||
} else {
|
||||
return 'gold';
|
||||
}
|
||||
},
|
||||
showAmountToBuy (item) {
|
||||
if (hideAmountSelectionForPurchaseTypes.includes(item.purchaseType)) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
getAvatarOverrides (item) {
|
||||
switch (item.purchaseType) {
|
||||
case 'gear':
|
||||
return {
|
||||
[item.type]: item.key,
|
||||
};
|
||||
case 'backgrounds':
|
||||
return {
|
||||
background: item.key,
|
||||
};
|
||||
case 'mystery_set': {
|
||||
let gear = {};
|
||||
}
|
||||
|
||||
item.items.map((setItem) => {
|
||||
gear[setItem.type] = setItem.key;
|
||||
});
|
||||
|
||||
return gear;
|
||||
}
|
||||
}
|
||||
|
||||
return {};
|
||||
},
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
},
|
||||
priceType: {
|
||||
type: String,
|
||||
},
|
||||
withPin: {
|
||||
type: Boolean,
|
||||
},
|
||||
genericPurchase: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
},
|
||||
};
|
||||
priceType: {
|
||||
type: String,
|
||||
},
|
||||
withPin: {
|
||||
type: Boolean,
|
||||
},
|
||||
genericPurchase: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -34,36 +34,36 @@ div.featuredItems
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ShopItem from './shopItem';
|
||||
import ShopItem from './shopItem';
|
||||
|
||||
import pinUtils from '@/mixins/pinUtils';
|
||||
import pinUtils from '@/mixins/pinUtils';
|
||||
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
|
||||
export default {
|
||||
mixins: [pinUtils],
|
||||
props: {
|
||||
broken: Boolean,
|
||||
npcName: String,
|
||||
featuredText: String,
|
||||
featuredItems: Array,
|
||||
export default {
|
||||
components: {
|
||||
ShopItem,
|
||||
},
|
||||
mixins: [pinUtils],
|
||||
props: {
|
||||
broken: Boolean,
|
||||
npcName: String,
|
||||
featuredText: String,
|
||||
featuredItems: Array,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
pin: svgPin,
|
||||
}),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
featuredItemSelected (item) {
|
||||
this.$emit('featuredItemSelected', item);
|
||||
},
|
||||
components: {
|
||||
ShopItem,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
pin: svgPin,
|
||||
}),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
featuredItemSelected (item) {
|
||||
this.$emit('featuredItemSelected', item);
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -10,12 +10,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SecondaryMenu from '@/components/secondaryMenu';
|
||||
import SecondaryMenu from '@/components/secondaryMenu';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SecondaryMenu,
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
export default {
|
||||
components: {
|
||||
SecondaryMenu,
|
||||
},
|
||||
methods: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -23,11 +23,11 @@ import planGemLimits from '@/../../common/script/libs/planGemLimits';
|
||||
import pinUtils from '../../../mixins/pinUtils';
|
||||
|
||||
export default {
|
||||
mixins: [pinUtils],
|
||||
props: ['item'],
|
||||
components: {
|
||||
CountBadge,
|
||||
},
|
||||
mixins: [pinUtils],
|
||||
props: ['item'],
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
|
||||
@@ -14,81 +14,79 @@ div.items
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from '@/libs/store';
|
||||
import pinUtils from '@/mixins/pinUtils';
|
||||
import planGemLimits from '@/../../common/script/libs/planGemLimits';
|
||||
import _filter from 'lodash/filter';
|
||||
import _sortBy from 'lodash/sortBy';
|
||||
import _map from 'lodash/map';
|
||||
import { mapState } from '@/libs/store';
|
||||
import pinUtils from '@/mixins/pinUtils';
|
||||
import planGemLimits from '@/../../common/script/libs/planGemLimits';
|
||||
|
||||
import ShopItem from '../shopItem';
|
||||
import CategoryItem from './categoryItem';
|
||||
import ShopItem from '../shopItem';
|
||||
import CategoryItem from './categoryItem';
|
||||
|
||||
import _filter from 'lodash/filter';
|
||||
import _sortBy from 'lodash/sortBy';
|
||||
import _map from 'lodash/map';
|
||||
|
||||
export default {
|
||||
mixins: [pinUtils],
|
||||
props: ['hideLocked', 'hidePinned', 'searchBy', 'sortBy', 'category'],
|
||||
components: {
|
||||
CategoryItem,
|
||||
ShopItem,
|
||||
export default {
|
||||
components: {
|
||||
CategoryItem,
|
||||
ShopItem,
|
||||
},
|
||||
mixins: [pinUtils],
|
||||
props: ['hideLocked', 'hidePinned', 'searchBy', 'sortBy', 'category'],
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
user: 'user.data',
|
||||
userItems: 'user.data.items',
|
||||
userStats: 'user.data.stats',
|
||||
}),
|
||||
gemsLeft () {
|
||||
if (!this.user.purchased.plan) return 0;
|
||||
return planGemLimits.convCap + this.user.purchased.plan.consecutive.gemCapExtra - this.user.purchased.plan.gemsBought;
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
user: 'user.data',
|
||||
userItems: 'user.data.items',
|
||||
userStats: 'user.data.stats',
|
||||
}),
|
||||
gemsLeft () {
|
||||
if (!this.user.purchased.plan) return 0;
|
||||
return planGemLimits.convCap + this.user.purchased.plan.consecutive.gemCapExtra - this.user.purchased.plan.gemsBought;
|
||||
},
|
||||
sortedMarketItems () {
|
||||
let result = _map(this.category.items, (e) => {
|
||||
return {
|
||||
...e,
|
||||
pinned: this.isPinned(e),
|
||||
};
|
||||
});
|
||||
sortedMarketItems () {
|
||||
let result = _map(this.category.items, e => ({
|
||||
...e,
|
||||
pinned: this.isPinned(e),
|
||||
}));
|
||||
|
||||
result = _filter(result, (item) => {
|
||||
if (this.hidePinned && item.pinned) {
|
||||
result = _filter(result, item => {
|
||||
if (this.hidePinned && item.pinned) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.searchBy) {
|
||||
const foundPosition = item.text.toLowerCase().indexOf(this.searchBy);
|
||||
if (foundPosition === -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.searchBy) {
|
||||
let foundPosition = item.text.toLowerCase().indexOf(this.searchBy);
|
||||
if (foundPosition === -1) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
switch (this.sortBy) {
|
||||
case 'AZ': {
|
||||
result = _sortBy(result, ['text']);
|
||||
|
||||
break;
|
||||
}
|
||||
case 'sortByNumber': {
|
||||
result = _sortBy(result, item => {
|
||||
if (item.showCount === false) return 0;
|
||||
|
||||
return this.userItems[item.purchaseType][item.key] || 0;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
return true;
|
||||
});
|
||||
|
||||
switch (this.sortBy) {
|
||||
case 'AZ': {
|
||||
result = _sortBy(result, ['text']);
|
||||
|
||||
break;
|
||||
}
|
||||
case 'sortByNumber': {
|
||||
result = _sortBy(result, item => {
|
||||
if (item.showCount === false) return 0;
|
||||
|
||||
return this.userItems[item.purchaseType][item.key] || 0;
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
methods: {
|
||||
itemSelected (item) {
|
||||
this.$root.$emit('buyModal::showItem', item);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
itemSelected (item) {
|
||||
this.$root.$emit('buyModal::showItem', item);
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -47,126 +47,125 @@ layout-section(:title="$t('equipment')")
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from '@/libs/store';
|
||||
import LayoutSection from '@/components/ui/layoutSection';
|
||||
import FilterDropdown from '@/components/ui/filterDropdown';
|
||||
import ItemRows from '@/components/ui/itemRows';
|
||||
import ShopItem from '../shopItem';
|
||||
import _filter from 'lodash/filter';
|
||||
import _orderBy from 'lodash/orderBy';
|
||||
import { mapState } from '@/libs/store';
|
||||
import LayoutSection from '@/components/ui/layoutSection';
|
||||
import FilterDropdown from '@/components/ui/filterDropdown';
|
||||
import ItemRows from '@/components/ui/itemRows';
|
||||
import ShopItem from '../shopItem';
|
||||
|
||||
import shops from '@/../../common/script/libs/shops';
|
||||
import shops from '@/../../common/script/libs/shops';
|
||||
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgWarrior from '@/assets/svg/warrior.svg';
|
||||
import svgWizard from '@/assets/svg/wizard.svg';
|
||||
import svgRogue from '@/assets/svg/rogue.svg';
|
||||
import svgHealer from '@/assets/svg/healer.svg';
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgWarrior from '@/assets/svg/warrior.svg';
|
||||
import svgWizard from '@/assets/svg/wizard.svg';
|
||||
import svgRogue from '@/assets/svg/rogue.svg';
|
||||
import svgHealer from '@/assets/svg/healer.svg';
|
||||
|
||||
import _filter from 'lodash/filter';
|
||||
import _orderBy from 'lodash/orderBy';
|
||||
import pinUtils from '../../../mixins/pinUtils';
|
||||
import pinUtils from '../../../mixins/pinUtils';
|
||||
|
||||
const sortGearTypes = ['sortByType', 'sortByPrice', 'sortByCon', 'sortByPer', 'sortByStr', 'sortByInt'].map(g => ({id: g}));
|
||||
const sortGearTypes = ['sortByType', 'sortByPrice', 'sortByCon', 'sortByPer', 'sortByStr', 'sortByInt'].map(g => ({ id: g }));
|
||||
|
||||
const sortGearTypeMap = {
|
||||
sortByType: 'type',
|
||||
sortByPrice: 'value',
|
||||
sortByCon: 'con',
|
||||
sortByPer: 'per',
|
||||
sortByStr: 'str',
|
||||
sortByInt: 'int',
|
||||
};
|
||||
const sortGearTypeMap = {
|
||||
sortByType: 'type',
|
||||
sortByPrice: 'value',
|
||||
sortByCon: 'con',
|
||||
sortByPer: 'per',
|
||||
sortByStr: 'str',
|
||||
sortByInt: 'int',
|
||||
};
|
||||
|
||||
export default {
|
||||
mixins: [pinUtils],
|
||||
props: ['hideLocked', 'hidePinned', 'searchBy'],
|
||||
components: {
|
||||
LayoutSection,
|
||||
FilterDropdown,
|
||||
ItemRows,
|
||||
ShopItem,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
sortGearBy: sortGearTypes,
|
||||
selectedSortGearBy: sortGearTypes[0],
|
||||
selectedGroupGearByClass: '',
|
||||
icons: Object.freeze({
|
||||
pin: svgPin,
|
||||
warrior: svgWarrior,
|
||||
wizard: svgWizard,
|
||||
rogue: svgRogue,
|
||||
healer: svgHealer,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
user: 'user.data',
|
||||
userItems: 'user.data.items',
|
||||
userStats: 'user.data.stats',
|
||||
export default {
|
||||
components: {
|
||||
LayoutSection,
|
||||
FilterDropdown,
|
||||
ItemRows,
|
||||
ShopItem,
|
||||
},
|
||||
mixins: [pinUtils],
|
||||
props: ['hideLocked', 'hidePinned', 'searchBy'],
|
||||
data () {
|
||||
return {
|
||||
sortGearBy: sortGearTypes,
|
||||
selectedSortGearBy: sortGearTypes[0],
|
||||
selectedGroupGearByClass: '',
|
||||
icons: Object.freeze({
|
||||
pin: svgPin,
|
||||
warrior: svgWarrior,
|
||||
wizard: svgWizard,
|
||||
rogue: svgRogue,
|
||||
healer: svgHealer,
|
||||
}),
|
||||
marketGearCategories () {
|
||||
return shops.getMarketGearCategories(this.user).map(c => {
|
||||
c.id = c.identifier;
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
user: 'user.data',
|
||||
userItems: 'user.data.items',
|
||||
userStats: 'user.data.stats',
|
||||
}),
|
||||
marketGearCategories () {
|
||||
return shops.getMarketGearCategories(this.user).map(c => {
|
||||
c.id = c.identifier;
|
||||
|
||||
return c;
|
||||
});
|
||||
},
|
||||
selectedGearCategory () {
|
||||
return this.marketGearCategories.filter(c => c.id === this.selectedGroupGearByClass)[0];
|
||||
},
|
||||
sortedGearItems () {
|
||||
let result = this.filterGearItems();
|
||||
let selectedSortKey = sortGearTypeMap[this.selectedSortGearBy.id];
|
||||
let sortingByStat = selectedSortKey !== 'type' && selectedSortKey !== 'value';
|
||||
let order = sortingByStat ? 'desc' : 'asc';
|
||||
|
||||
// split into unlocked and locked, then apply selected sort
|
||||
return _orderBy(result, ['locked', selectedSortKey], ['asc', order]);
|
||||
},
|
||||
return c;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getClassName (classType) {
|
||||
if (classType === 'wizard') {
|
||||
return this.$t('mage');
|
||||
} else {
|
||||
return this.$t(classType);
|
||||
}
|
||||
},
|
||||
gearSelected (item) {
|
||||
if (!item.locked) {
|
||||
this.$root.$emit('buyModal::showItem', item);
|
||||
}
|
||||
},
|
||||
filterGearItems () {
|
||||
let category = _filter(this.marketGearCategories, ['identifier', this.selectedGroupGearByClass]);
|
||||
let items = category[0].items;
|
||||
selectedGearCategory () {
|
||||
return this.marketGearCategories.filter(c => c.id === this.selectedGroupGearByClass)[0];
|
||||
},
|
||||
sortedGearItems () {
|
||||
const result = this.filterGearItems();
|
||||
const selectedSortKey = sortGearTypeMap[this.selectedSortGearBy.id];
|
||||
const sortingByStat = selectedSortKey !== 'type' && selectedSortKey !== 'value';
|
||||
const order = sortingByStat ? 'desc' : 'asc';
|
||||
|
||||
return _filter(items, (gear) => {
|
||||
if (this.hideLocked && gear.locked) {
|
||||
return false;
|
||||
}
|
||||
if (this.hidePinned && gear.pinned) {
|
||||
// split into unlocked and locked, then apply selected sort
|
||||
return _orderBy(result, ['locked', selectedSortKey], ['asc', order]);
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.selectedGroupGearByClass = this.userStats.class;
|
||||
},
|
||||
methods: {
|
||||
getClassName (classType) {
|
||||
if (classType === 'wizard') {
|
||||
return this.$t('mage');
|
||||
}
|
||||
return this.$t(classType);
|
||||
},
|
||||
gearSelected (item) {
|
||||
if (!item.locked) {
|
||||
this.$root.$emit('buyModal::showItem', item);
|
||||
}
|
||||
},
|
||||
filterGearItems () {
|
||||
const category = _filter(this.marketGearCategories, ['identifier', this.selectedGroupGearByClass]);
|
||||
const { items } = category[0];
|
||||
|
||||
return _filter(items, gear => {
|
||||
if (this.hideLocked && gear.locked) {
|
||||
return false;
|
||||
}
|
||||
if (this.hidePinned && gear.pinned) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.searchBy) {
|
||||
const foundPosition = gear.text.toLowerCase().indexOf(this.searchBy);
|
||||
if (foundPosition === -1) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (this.searchBy) {
|
||||
let foundPosition = gear.text.toLowerCase().indexOf(this.searchBy);
|
||||
if (foundPosition === -1) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// hide already owned
|
||||
return !this.userItems.gear.owned[gear.key];
|
||||
});
|
||||
},
|
||||
// hide already owned
|
||||
return !this.userItems.gear.owned[gear.key];
|
||||
});
|
||||
},
|
||||
created () {
|
||||
this.selectedGroupGearByClass = this.userStats.class;
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -24,21 +24,22 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Checkbox from '@/components/ui/checkbox';
|
||||
import toggleSwitch from '@/components/ui/toggleSwitch';
|
||||
export default {
|
||||
props: ['hidePinned', 'hideLocked', 'viewOptions'],
|
||||
components: {
|
||||
Checkbox,
|
||||
toggleSwitch,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
lockedChecked: this.hideLocked,
|
||||
pinnedChecked: this.hidePinned,
|
||||
};
|
||||
},
|
||||
};
|
||||
import Checkbox from '@/components/ui/checkbox';
|
||||
import toggleSwitch from '@/components/ui/toggleSwitch';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Checkbox,
|
||||
toggleSwitch,
|
||||
},
|
||||
props: ['hidePinned', 'hideLocked', 'viewOptions'],
|
||||
data () {
|
||||
return {
|
||||
lockedChecked: this.hideLocked,
|
||||
pinnedChecked: this.hidePinned,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -124,230 +124,220 @@
|
||||
|
||||
|
||||
<script>
|
||||
import {mapState} from '@/libs/store';
|
||||
import _filter from 'lodash/filter';
|
||||
import _map from 'lodash/map';
|
||||
import _throttle from 'lodash/throttle';
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
import ShopItem from '../shopItem';
|
||||
import KeysToKennel from './keysToKennel';
|
||||
import EquipmentSection from './equipmentSection';
|
||||
import CategoryRow from './categoryRow';
|
||||
import Item from '@/components/inventory/item';
|
||||
import CountBadge from '@/components/ui/countBadge';
|
||||
import ItemRows from '@/components/ui/itemRows';
|
||||
import Avatar from '@/components/avatar';
|
||||
import InventoryDrawer from '@/components/shared/inventoryDrawer';
|
||||
import FeaturedItemsHeader from '../featuredItemsHeader';
|
||||
import PageLayout from '@/components/ui/pageLayout';
|
||||
import LayoutSection from '@/components/ui/layoutSection';
|
||||
import FilterDropdown from '@/components/ui/filterDropdown';
|
||||
import MarketFilter from './filter';
|
||||
import ShopItem from '../shopItem';
|
||||
import KeysToKennel from './keysToKennel';
|
||||
import EquipmentSection from './equipmentSection';
|
||||
import CategoryRow from './categoryRow';
|
||||
import Item from '@/components/inventory/item';
|
||||
import CountBadge from '@/components/ui/countBadge';
|
||||
import ItemRows from '@/components/ui/itemRows';
|
||||
import Avatar from '@/components/avatar';
|
||||
import InventoryDrawer from '@/components/shared/inventoryDrawer';
|
||||
import FeaturedItemsHeader from '../featuredItemsHeader';
|
||||
import PageLayout from '@/components/ui/pageLayout';
|
||||
import LayoutSection from '@/components/ui/layoutSection';
|
||||
import FilterDropdown from '@/components/ui/filterDropdown';
|
||||
import MarketFilter from './filter';
|
||||
|
||||
import SellModal from './sellModal.vue';
|
||||
import EquipmentAttributesGrid from '../../inventory/equipment/attributesGrid.vue';
|
||||
import SelectMembersModal from '@/components/selectMembersModal.vue';
|
||||
import SellModal from './sellModal.vue';
|
||||
import EquipmentAttributesGrid from '../../inventory/equipment/attributesGrid.vue';
|
||||
import SelectMembersModal from '@/components/selectMembersModal.vue';
|
||||
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgInformation from '@/assets/svg/information.svg';
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgInformation from '@/assets/svg/information.svg';
|
||||
|
||||
import getItemInfo from '@/../../common/script/libs/getItemInfo';
|
||||
import shops from '@/../../common/script/libs/shops';
|
||||
import getItemInfo from '@/../../common/script/libs/getItemInfo';
|
||||
import shops from '@/../../common/script/libs/shops';
|
||||
|
||||
import _filter from 'lodash/filter';
|
||||
import _map from 'lodash/map';
|
||||
import _throttle from 'lodash/throttle';
|
||||
|
||||
const sortItems = ['AZ', 'sortByNumber'].map(g => ({id: g}));
|
||||
import notifications from '@/mixins/notifications';
|
||||
import buyMixin from '@/mixins/buy';
|
||||
import currencyMixin from '../_currencyMixin';
|
||||
import inventoryUtils from '@/mixins/inventoryUtils';
|
||||
import pinUtils from '@/mixins/pinUtils';
|
||||
|
||||
import notifications from '@/mixins/notifications';
|
||||
import buyMixin from '@/mixins/buy';
|
||||
import currencyMixin from '../_currencyMixin';
|
||||
import inventoryUtils from '@/mixins/inventoryUtils';
|
||||
import pinUtils from '@/mixins/pinUtils';
|
||||
const sortItems = ['AZ', 'sortByNumber'].map(g => ({ id: g }));
|
||||
|
||||
export default {
|
||||
mixins: [notifications, buyMixin, currencyMixin, inventoryUtils, pinUtils],
|
||||
components: {
|
||||
ShopItem,
|
||||
KeysToKennel,
|
||||
Item,
|
||||
CountBadge,
|
||||
components: {
|
||||
ShopItem,
|
||||
KeysToKennel,
|
||||
Item,
|
||||
CountBadge,
|
||||
|
||||
ItemRows,
|
||||
ItemRows,
|
||||
|
||||
SellModal,
|
||||
EquipmentAttributesGrid,
|
||||
Avatar,
|
||||
SellModal,
|
||||
EquipmentAttributesGrid,
|
||||
Avatar,
|
||||
|
||||
InventoryDrawer,
|
||||
FeaturedItemsHeader,
|
||||
PageLayout,
|
||||
LayoutSection,
|
||||
FilterDropdown,
|
||||
EquipmentSection,
|
||||
CategoryRow,
|
||||
MarketFilter,
|
||||
InventoryDrawer,
|
||||
FeaturedItemsHeader,
|
||||
PageLayout,
|
||||
LayoutSection,
|
||||
FilterDropdown,
|
||||
EquipmentSection,
|
||||
CategoryRow,
|
||||
MarketFilter,
|
||||
|
||||
SelectMembersModal,
|
||||
},
|
||||
watch: {
|
||||
searchText: _throttle(function throttleSearch () {
|
||||
this.searchTextThrottled = this.searchText.toLowerCase();
|
||||
}, 250),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
viewOptions: {
|
||||
equipment: {
|
||||
selected: false,
|
||||
text: this.$t('equipment'),
|
||||
},
|
||||
SelectMembersModal,
|
||||
},
|
||||
mixins: [notifications, buyMixin, currencyMixin, inventoryUtils, pinUtils],
|
||||
watch: {
|
||||
searchText: _throttle(function throttleSearch () {
|
||||
this.searchTextThrottled = this.searchText.toLowerCase();
|
||||
}, 250),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
viewOptions: {
|
||||
equipment: {
|
||||
selected: false,
|
||||
text: this.$t('equipment'),
|
||||
},
|
||||
},
|
||||
|
||||
searchText: null,
|
||||
searchTextThrottled: null,
|
||||
searchText: null,
|
||||
searchTextThrottled: null,
|
||||
|
||||
icons: Object.freeze({
|
||||
pin: svgPin,
|
||||
gem: svgGem,
|
||||
information: svgInformation,
|
||||
}),
|
||||
|
||||
sortItemsBy: sortItems,
|
||||
selectedSortItemsBy: sortItems[0],
|
||||
|
||||
hideLocked: false,
|
||||
hidePinned: false,
|
||||
|
||||
broken: false,
|
||||
};
|
||||
},
|
||||
async mounted () {
|
||||
const worldState = await this.$store.dispatch('worldState:getWorldState');
|
||||
this.broken = worldState && worldState.worldBoss && worldState.worldBoss.extra && worldState.worldBoss.extra.worldDmg && worldState.worldBoss.extra.worldDmg.market;
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
user: 'user.data',
|
||||
userStats: 'user.data.stats',
|
||||
userItems: 'user.data.items',
|
||||
icons: Object.freeze({
|
||||
pin: svgPin,
|
||||
gem: svgGem,
|
||||
information: svgInformation,
|
||||
}),
|
||||
market () {
|
||||
return shops.getMarketShop(this.user);
|
||||
},
|
||||
categories () {
|
||||
if (!this.market) return [];
|
||||
|
||||
let categories = [
|
||||
...this.market.categories,
|
||||
];
|
||||
sortItemsBy: sortItems,
|
||||
selectedSortItemsBy: sortItems[0],
|
||||
|
||||
categories.push({
|
||||
identifier: 'cards',
|
||||
text: this.$t('cards'),
|
||||
items: _map(_filter(this.content.cardTypes, (value) => {
|
||||
return value.yearRound;
|
||||
}), (value) => {
|
||||
return {
|
||||
...getItemInfo(this.user, 'card', value),
|
||||
showCount: false,
|
||||
};
|
||||
}),
|
||||
});
|
||||
hideLocked: false,
|
||||
hidePinned: false,
|
||||
|
||||
let specialItems = [{
|
||||
...getItemInfo(this.user, 'fortify'),
|
||||
showCount: false,
|
||||
}];
|
||||
|
||||
if (this.user.purchased.plan.customerId) {
|
||||
let gemItem = getItemInfo(this.user, 'gem');
|
||||
|
||||
specialItems.push({
|
||||
...gemItem,
|
||||
showCount: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (this.user.flags.rebirthEnabled) {
|
||||
let rebirthItem = getItemInfo(this.user, 'rebirth_orb');
|
||||
|
||||
specialItems.push({
|
||||
showCount: false,
|
||||
...rebirthItem,
|
||||
});
|
||||
}
|
||||
|
||||
if (specialItems.length > 0) {
|
||||
categories.push({
|
||||
identifier: 'special',
|
||||
text: this.$t('special'),
|
||||
items: specialItems,
|
||||
});
|
||||
}
|
||||
|
||||
categories.map((category) => {
|
||||
if (!this.viewOptions[category.identifier]) {
|
||||
this.$set(this.viewOptions, category.identifier, {
|
||||
selected: false,
|
||||
text: category.text,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return categories;
|
||||
},
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
broken: false,
|
||||
};
|
||||
},
|
||||
async mounted () {
|
||||
const worldState = await this.$store.dispatch('worldState:getWorldState');
|
||||
this.broken = worldState && worldState.worldBoss && worldState.worldBoss.extra && worldState.worldBoss.extra.worldDmg && worldState.worldBoss.extra.worldDmg.market;
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
user: 'user.data',
|
||||
userStats: 'user.data.stats',
|
||||
userItems: 'user.data.items',
|
||||
}),
|
||||
market () {
|
||||
return shops.getMarketShop(this.user);
|
||||
},
|
||||
methods: {
|
||||
sellItem (itemScope) {
|
||||
this.$root.$emit('sellItem', itemScope);
|
||||
},
|
||||
ownedItems (type) {
|
||||
let mappedItems = _filter(this.content[type], i => {
|
||||
return this.userItems[type][i.key] > 0;
|
||||
});
|
||||
categories () {
|
||||
if (!this.market) return [];
|
||||
|
||||
switch (type) {
|
||||
case 'food':
|
||||
return _filter(mappedItems, f => {
|
||||
return f.key !== 'Saddle';
|
||||
});
|
||||
case 'special':
|
||||
if (this.userItems.food.Saddle) {
|
||||
return _filter(this.content.food, f => {
|
||||
return f.key === 'Saddle';
|
||||
});
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
default:
|
||||
return mappedItems;
|
||||
const categories = [
|
||||
...this.market.categories,
|
||||
];
|
||||
|
||||
categories.push({
|
||||
identifier: 'cards',
|
||||
text: this.$t('cards'),
|
||||
items: _map(_filter(this.content.cardTypes, value => value.yearRound), value => ({
|
||||
...getItemInfo(this.user, 'card', value),
|
||||
showCount: false,
|
||||
})),
|
||||
});
|
||||
|
||||
const specialItems = [{
|
||||
...getItemInfo(this.user, 'fortify'),
|
||||
showCount: false,
|
||||
}];
|
||||
|
||||
if (this.user.purchased.plan.customerId) {
|
||||
const gemItem = getItemInfo(this.user, 'gem');
|
||||
|
||||
specialItems.push({
|
||||
...gemItem,
|
||||
showCount: false,
|
||||
});
|
||||
}
|
||||
|
||||
if (this.user.flags.rebirthEnabled) {
|
||||
const rebirthItem = getItemInfo(this.user, 'rebirth_orb');
|
||||
|
||||
specialItems.push({
|
||||
showCount: false,
|
||||
...rebirthItem,
|
||||
});
|
||||
}
|
||||
|
||||
if (specialItems.length > 0) {
|
||||
categories.push({
|
||||
identifier: 'special',
|
||||
text: this.$t('special'),
|
||||
items: specialItems,
|
||||
});
|
||||
}
|
||||
|
||||
categories.map(category => {
|
||||
if (!this.viewOptions[category.identifier]) {
|
||||
this.$set(this.viewOptions, category.identifier, {
|
||||
selected: false,
|
||||
text: category.text,
|
||||
});
|
||||
}
|
||||
},
|
||||
hasOwnedItemsForType (type) {
|
||||
return this.ownedItems(type).length > 0;
|
||||
},
|
||||
inventoryDrawerErrorMessage (type) {
|
||||
if (!this.hasOwnedItemsForType(type)) {
|
||||
// @TODO: Change any places using similar locales from `pets.json` and use these new locales from 'inventory.json'
|
||||
return this.$t('noItemsAvailableForType', { type: this.$t(`${type}ItemType`) });
|
||||
}
|
||||
},
|
||||
itemSelected (item) {
|
||||
this.$root.$emit('buyModal::showItem', item);
|
||||
},
|
||||
featuredItemSelected (item) {
|
||||
if (item.purchaseType === 'gear') {
|
||||
if (!item.locked) {
|
||||
this.itemSelected(item);
|
||||
});
|
||||
|
||||
return categories;
|
||||
},
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
sellItem (itemScope) {
|
||||
this.$root.$emit('sellItem', itemScope);
|
||||
},
|
||||
ownedItems (type) {
|
||||
const mappedItems = _filter(this.content[type], i => this.userItems[type][i.key] > 0);
|
||||
|
||||
switch (type) {
|
||||
case 'food':
|
||||
return _filter(mappedItems, f => f.key !== 'Saddle');
|
||||
case 'special':
|
||||
if (this.userItems.food.Saddle) {
|
||||
return _filter(this.content.food, f => f.key === 'Saddle');
|
||||
}
|
||||
} else {
|
||||
return [];
|
||||
|
||||
default:
|
||||
return mappedItems;
|
||||
}
|
||||
},
|
||||
hasOwnedItemsForType (type) {
|
||||
return this.ownedItems(type).length > 0;
|
||||
},
|
||||
inventoryDrawerErrorMessage (type) {
|
||||
if (!this.hasOwnedItemsForType(type)) {
|
||||
// @TODO: Change any places using similar locales from `pets.json` and use these new locales from 'inventory.json'
|
||||
return this.$t('noItemsAvailableForType', { type: this.$t(`${type}ItemType`) });
|
||||
}
|
||||
},
|
||||
itemSelected (item) {
|
||||
this.$root.$emit('buyModal::showItem', item);
|
||||
},
|
||||
featuredItemSelected (item) {
|
||||
if (item.purchaseType === 'gear') {
|
||||
if (!item.locked) {
|
||||
this.itemSelected(item);
|
||||
}
|
||||
},
|
||||
} else {
|
||||
this.itemSelected(item);
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -66,10 +66,10 @@ import { beastCount, mountMasterProgress } from '@/../../common/script/count';
|
||||
import notifications from '@/mixins/notifications';
|
||||
|
||||
export default {
|
||||
mixins: [notifications],
|
||||
components: {
|
||||
ShopItem,
|
||||
},
|
||||
mixins: [notifications],
|
||||
data () {
|
||||
// @TODO: should these be clases
|
||||
return {
|
||||
@@ -86,7 +86,7 @@ export default {
|
||||
buy: () => {
|
||||
if (!confirm(this.$t('releasePetsConfirm'))) return;
|
||||
try {
|
||||
this.$store.dispatch('shops:releasePets', {user: this.user});
|
||||
this.$store.dispatch('shops:releasePets', { user: this.user });
|
||||
this.text(this.$t('releasePetsSuccess'));
|
||||
// this.$router.push({name: 'stable'});
|
||||
// Reload because achievement is set in user.save instead of common
|
||||
@@ -109,7 +109,7 @@ export default {
|
||||
buy: () => {
|
||||
if (!confirm(this.$t('releaseMountsConfirm'))) return;
|
||||
try {
|
||||
this.$store.dispatch('shops:releaseMounts', {user: this.user});
|
||||
this.$store.dispatch('shops:releaseMounts', { user: this.user });
|
||||
this.text(this.$t('releaseMountsSuccess'));
|
||||
// this.$router.push({name: 'stable'});
|
||||
// Reload because achievement is set in user.save instead of common
|
||||
@@ -132,7 +132,7 @@ export default {
|
||||
buy: () => {
|
||||
if (!confirm(this.$t('releaseBothConfirm'))) return;
|
||||
try {
|
||||
this.$store.dispatch('shops:releaseBoth', {user: this.user});
|
||||
this.$store.dispatch('shops:releaseBoth', { user: this.user });
|
||||
this.text(this.$t('releaseBothSuccess'));
|
||||
// this.$router.push({name: 'stable'});
|
||||
// Reload because achievement is set in user.save instead of common
|
||||
@@ -145,7 +145,7 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({user: 'user.data'}),
|
||||
...mapState({ user: 'user.data' }),
|
||||
userHasAllPets () {
|
||||
return beastCount(this.user.items.pets) === 90;
|
||||
},
|
||||
|
||||
@@ -121,75 +121,75 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import svgClose from '@/assets/svg/close.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgClose from '@/assets/svg/close.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
|
||||
import BalanceInfo from '../balanceInfo.vue';
|
||||
import Item from '@/components/inventory/item';
|
||||
import CountBadge from '@/components/ui/countBadge';
|
||||
import BalanceInfo from '../balanceInfo.vue';
|
||||
import Item from '@/components/inventory/item';
|
||||
import CountBadge from '@/components/ui/countBadge';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BalanceInfo,
|
||||
Item,
|
||||
CountBadge,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedAmountToSell: 1,
|
||||
itemContextToSell: null,
|
||||
export default {
|
||||
components: {
|
||||
BalanceInfo,
|
||||
Item,
|
||||
CountBadge,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectedAmountToSell: 1,
|
||||
itemContextToSell: null,
|
||||
|
||||
icons: Object.freeze({
|
||||
close: svgClose,
|
||||
gold: svgGold,
|
||||
gem: svgGem,
|
||||
}),
|
||||
};
|
||||
icons: Object.freeze({
|
||||
close: svgClose,
|
||||
gold: svgGold,
|
||||
gem: svgGem,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
item () {
|
||||
return this.itemContextToSell && this.itemContextToSell.item;
|
||||
},
|
||||
computed: {
|
||||
item () {
|
||||
return this.itemContextToSell && this.itemContextToSell.item;
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.$root.$on('sellItem', itemCtx => {
|
||||
this.itemContextToSell = itemCtx;
|
||||
this.$root.$emit('bv::show::modal', 'sell-modal');
|
||||
});
|
||||
},
|
||||
destroyed () {
|
||||
this.$root.$off('sellItem');
|
||||
},
|
||||
methods: {
|
||||
onChange ($event) {
|
||||
this.$emit('change', $event);
|
||||
|
||||
this.selectedAmountToSell = 1;
|
||||
},
|
||||
mounted () {
|
||||
this.$root.$on('sellItem', (itemCtx) => {
|
||||
this.itemContextToSell = itemCtx;
|
||||
this.$root.$emit('bv::show::modal', 'sell-modal');
|
||||
preventNegative ($event) {
|
||||
const { value } = $event.target;
|
||||
|
||||
if (Number(value) < 0) {
|
||||
this.selectedAmountToSell = 0;
|
||||
}
|
||||
},
|
||||
sellItems () {
|
||||
if (!Number.isInteger(Number(this.selectedAmountToSell))) {
|
||||
this.selectedAmountToSell = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
this.$store.dispatch('shops:sellItems', {
|
||||
type: this.itemContextToSell.itemType,
|
||||
key: this.item.key,
|
||||
amount: this.selectedAmountToSell,
|
||||
});
|
||||
this.hideDialog();
|
||||
},
|
||||
destroyed () {
|
||||
this.$root.$off('sellItem');
|
||||
hideDialog () {
|
||||
this.$root.$emit('bv::hide::modal', 'sell-modal');
|
||||
},
|
||||
methods: {
|
||||
onChange ($event) {
|
||||
this.$emit('change', $event);
|
||||
|
||||
this.selectedAmountToSell = 1;
|
||||
},
|
||||
preventNegative ($event) {
|
||||
let value = $event.target.value;
|
||||
|
||||
if (Number(value) < 0) {
|
||||
this.selectedAmountToSell = 0;
|
||||
}
|
||||
},
|
||||
sellItems () {
|
||||
if (!Number.isInteger(Number(this.selectedAmountToSell))) {
|
||||
this.selectedAmountToSell = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
this.$store.dispatch('shops:sellItems', {
|
||||
type: this.itemContextToSell.itemType,
|
||||
key: this.item.key,
|
||||
amount: this.selectedAmountToSell,
|
||||
});
|
||||
this.hideDialog();
|
||||
},
|
||||
hideDialog () {
|
||||
this.$root.$emit('bv::hide::modal', 'sell-modal');
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -196,146 +196,144 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import {mapState} from '@/libs/store';
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
import svgClose from '@/assets/svg/close.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgExperience from '@/assets/svg/experience.svg';
|
||||
import svgHourglasses from '@/assets/svg/hourglass.svg';
|
||||
import svgClose from '@/assets/svg/close.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgExperience from '@/assets/svg/experience.svg';
|
||||
import svgHourglasses from '@/assets/svg/hourglass.svg';
|
||||
|
||||
import BalanceInfo from '../balanceInfo.vue';
|
||||
import currencyMixin from '../_currencyMixin';
|
||||
import QuestInfo from './questInfo.vue';
|
||||
import notifications from '@/mixins/notifications';
|
||||
import buyMixin from '@/mixins/buy';
|
||||
import numberInvalid from '@/mixins/numberInvalid';
|
||||
import BalanceInfo from '../balanceInfo.vue';
|
||||
import currencyMixin from '../_currencyMixin';
|
||||
import QuestInfo from './questInfo.vue';
|
||||
import notifications from '@/mixins/notifications';
|
||||
import buyMixin from '@/mixins/buy';
|
||||
import numberInvalid from '@/mixins/numberInvalid';
|
||||
|
||||
import questDialogDrops from './questDialogDrops';
|
||||
import questDialogContent from './questDialogContent';
|
||||
import questDialogDrops from './questDialogDrops';
|
||||
import questDialogContent from './questDialogContent';
|
||||
|
||||
export default {
|
||||
mixins: [buyMixin, currencyMixin, notifications, numberInvalid],
|
||||
components: {
|
||||
BalanceInfo,
|
||||
QuestInfo,
|
||||
questDialogDrops,
|
||||
questDialogContent,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
close: svgClose,
|
||||
gold: svgGold,
|
||||
gem: svgGem,
|
||||
pin: svgPin,
|
||||
experience: svgExperience,
|
||||
hourglass: svgHourglasses,
|
||||
}),
|
||||
|
||||
isPinned: false,
|
||||
selectedAmountToBuy: 1,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
item: function itemChanged () {
|
||||
this.isPinned = this.item && this.item.pinned;
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
export default {
|
||||
components: {
|
||||
BalanceInfo,
|
||||
QuestInfo,
|
||||
questDialogDrops,
|
||||
questDialogContent,
|
||||
},
|
||||
mixins: [buyMixin, currencyMixin, notifications, numberInvalid],
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
close: svgClose,
|
||||
gold: svgGold,
|
||||
gem: svgGem,
|
||||
pin: svgPin,
|
||||
experience: svgExperience,
|
||||
hourglass: svgHourglasses,
|
||||
}),
|
||||
itemText () {
|
||||
if (this.item.text instanceof Function) {
|
||||
return this.item.text();
|
||||
} else {
|
||||
return this.item.text;
|
||||
}
|
||||
},
|
||||
itemNotes () {
|
||||
if (this.item.notes instanceof Function) {
|
||||
return this.item.notes();
|
||||
} else {
|
||||
return this.item.notes;
|
||||
}
|
||||
},
|
||||
currencyIcon () {
|
||||
if (this.priceType === 'gold') return this.icons.gold;
|
||||
if (this.priceType === 'hourglasses') return this.icons.hourglass;
|
||||
return this.icons.gem;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onChange ($event) {
|
||||
this.selectedAmountToBuy = 1;
|
||||
this.$emit('change', $event);
|
||||
},
|
||||
buyItem () {
|
||||
if (!this.confirmPurchase(this.item.currency, this.item.value * this.selectedAmountToBuy)) {
|
||||
return;
|
||||
}
|
||||
this.makeGenericPurchase(this.item, 'buyQuestModal', this.selectedAmountToBuy);
|
||||
this.purchased(this.item.text);
|
||||
this.hideDialog();
|
||||
},
|
||||
togglePinned () {
|
||||
this.isPinned = this.$store.dispatch('user:togglePinnedItem', {type: this.item.pinType, path: this.item.path});
|
||||
|
||||
if (!this.isPinned) {
|
||||
this.text(this.$t('unpinnedItem', {item: this.item.text}));
|
||||
}
|
||||
},
|
||||
hideDialog () {
|
||||
this.$root.$emit('bv::hide::modal', 'buy-quest-modal');
|
||||
},
|
||||
getDropIcon (drop) {
|
||||
switch (drop.type) {
|
||||
case 'gear':
|
||||
return `shop_${drop.key}`;
|
||||
case 'hatchingPotions':
|
||||
return `Pet_HatchingPotion_${drop.key}`;
|
||||
case 'food':
|
||||
return `Pet_Food_${drop.key}`;
|
||||
case 'eggs':
|
||||
return `Pet_Egg_${drop.key}`;
|
||||
case 'quests':
|
||||
return `inventory_quest_scroll_${drop.key}`;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
},
|
||||
getDropName (drop) {
|
||||
switch (drop.type) {
|
||||
case 'gear':
|
||||
return this.content.gear.flat[drop.key].text();
|
||||
case 'quests':
|
||||
return this.content.quests[drop.key].text();
|
||||
case 'hatchingPotions':
|
||||
return this.$t('namedHatchingPotion', { type: this.content.hatchingPotions[drop.key].text() });
|
||||
case 'food':
|
||||
return this.content.food[drop.key].text();
|
||||
case 'eggs':
|
||||
return this.content.eggs[drop.key].text();
|
||||
default:
|
||||
return `Unknown type: ${drop.type}`;
|
||||
}
|
||||
},
|
||||
purchaseGems () {
|
||||
this.$root.$emit('bv::show::modal', 'buy-gems');
|
||||
},
|
||||
isPinned: false,
|
||||
selectedAmountToBuy: 1,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
item: function itemChanged () {
|
||||
this.isPinned = this.item && this.item.pinned;
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
},
|
||||
priceType: {
|
||||
type: String,
|
||||
},
|
||||
withPin: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
}),
|
||||
itemText () {
|
||||
if (this.item.text instanceof Function) {
|
||||
return this.item.text();
|
||||
}
|
||||
return this.item.text;
|
||||
},
|
||||
};
|
||||
itemNotes () {
|
||||
if (this.item.notes instanceof Function) {
|
||||
return this.item.notes();
|
||||
}
|
||||
return this.item.notes;
|
||||
},
|
||||
currencyIcon () {
|
||||
if (this.priceType === 'gold') return this.icons.gold;
|
||||
if (this.priceType === 'hourglasses') return this.icons.hourglass;
|
||||
return this.icons.gem;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onChange ($event) {
|
||||
this.selectedAmountToBuy = 1;
|
||||
this.$emit('change', $event);
|
||||
},
|
||||
buyItem () {
|
||||
if (!this.confirmPurchase(this.item.currency, this.item.value * this.selectedAmountToBuy)) {
|
||||
return;
|
||||
}
|
||||
this.makeGenericPurchase(this.item, 'buyQuestModal', this.selectedAmountToBuy);
|
||||
this.purchased(this.item.text);
|
||||
this.hideDialog();
|
||||
},
|
||||
togglePinned () {
|
||||
this.isPinned = this.$store.dispatch('user:togglePinnedItem', { type: this.item.pinType, path: this.item.path });
|
||||
|
||||
if (!this.isPinned) {
|
||||
this.text(this.$t('unpinnedItem', { item: this.item.text }));
|
||||
}
|
||||
},
|
||||
hideDialog () {
|
||||
this.$root.$emit('bv::hide::modal', 'buy-quest-modal');
|
||||
},
|
||||
getDropIcon (drop) {
|
||||
switch (drop.type) {
|
||||
case 'gear':
|
||||
return `shop_${drop.key}`;
|
||||
case 'hatchingPotions':
|
||||
return `Pet_HatchingPotion_${drop.key}`;
|
||||
case 'food':
|
||||
return `Pet_Food_${drop.key}`;
|
||||
case 'eggs':
|
||||
return `Pet_Egg_${drop.key}`;
|
||||
case 'quests':
|
||||
return `inventory_quest_scroll_${drop.key}`;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
},
|
||||
getDropName (drop) {
|
||||
switch (drop.type) {
|
||||
case 'gear':
|
||||
return this.content.gear.flat[drop.key].text();
|
||||
case 'quests':
|
||||
return this.content.quests[drop.key].text();
|
||||
case 'hatchingPotions':
|
||||
return this.$t('namedHatchingPotion', { type: this.content.hatchingPotions[drop.key].text() });
|
||||
case 'food':
|
||||
return this.content.food[drop.key].text();
|
||||
case 'eggs':
|
||||
return this.content.eggs[drop.key].text();
|
||||
default:
|
||||
return `Unknown type: ${drop.type}`;
|
||||
}
|
||||
},
|
||||
purchaseGems () {
|
||||
this.$root.$emit('bv::show::modal', 'buy-gems');
|
||||
},
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
},
|
||||
priceType: {
|
||||
type: String,
|
||||
},
|
||||
withPin: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -327,167 +327,164 @@
|
||||
|
||||
|
||||
<script>
|
||||
import {mapState} from '@/libs/store';
|
||||
import _filter from 'lodash/filter';
|
||||
import _sortBy from 'lodash/sortBy';
|
||||
import _throttle from 'lodash/throttle';
|
||||
import _groupBy from 'lodash/groupBy';
|
||||
import _map from 'lodash/map';
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
import ShopItem from '../shopItem';
|
||||
import Item from '@/components/inventory/item';
|
||||
import CountBadge from '@/components/ui/countBadge';
|
||||
import ItemRows from '@/components/ui/itemRows';
|
||||
import toggleSwitch from '@/components/ui/toggleSwitch';
|
||||
import Avatar from '@/components/avatar';
|
||||
import buyMixin from '@/mixins/buy';
|
||||
import pinUtils from '@/mixins/pinUtils';
|
||||
import currencyMixin from '../_currencyMixin';
|
||||
import ShopItem from '../shopItem';
|
||||
import Item from '@/components/inventory/item';
|
||||
import CountBadge from '@/components/ui/countBadge';
|
||||
import ItemRows from '@/components/ui/itemRows';
|
||||
import toggleSwitch from '@/components/ui/toggleSwitch';
|
||||
import Avatar from '@/components/avatar';
|
||||
import buyMixin from '@/mixins/buy';
|
||||
import pinUtils from '@/mixins/pinUtils';
|
||||
import currencyMixin from '../_currencyMixin';
|
||||
|
||||
import BuyModal from './buyQuestModal.vue';
|
||||
import QuestInfo from './questInfo.vue';
|
||||
import BuyModal from './buyQuestModal.vue';
|
||||
import QuestInfo from './questInfo.vue';
|
||||
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
|
||||
import shops from '@/../../common/script/libs/shops';
|
||||
import shops from '@/../../common/script/libs/shops';
|
||||
|
||||
import isPinned from '@/../../common/script/libs/isPinned';
|
||||
import isPinned from '@/../../common/script/libs/isPinned';
|
||||
|
||||
import _filter from 'lodash/filter';
|
||||
import _sortBy from 'lodash/sortBy';
|
||||
import _throttle from 'lodash/throttle';
|
||||
import _groupBy from 'lodash/groupBy';
|
||||
import _map from 'lodash/map';
|
||||
|
||||
export default {
|
||||
mixins: [buyMixin, currencyMixin, pinUtils],
|
||||
components: {
|
||||
ShopItem,
|
||||
Item,
|
||||
CountBadge,
|
||||
ItemRows,
|
||||
toggleSwitch,
|
||||
components: {
|
||||
ShopItem,
|
||||
Item,
|
||||
CountBadge,
|
||||
ItemRows,
|
||||
toggleSwitch,
|
||||
|
||||
Avatar,
|
||||
BuyModal,
|
||||
QuestInfo,
|
||||
},
|
||||
watch: {
|
||||
searchText: _throttle(function throttleSearch () {
|
||||
this.searchTextThrottled = this.searchText.toLowerCase();
|
||||
}, 250),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
viewOptions: {},
|
||||
Avatar,
|
||||
BuyModal,
|
||||
QuestInfo,
|
||||
},
|
||||
mixins: [buyMixin, currencyMixin, pinUtils],
|
||||
watch: {
|
||||
searchText: _throttle(function throttleSearch () {
|
||||
this.searchTextThrottled = this.searchText.toLowerCase();
|
||||
}, 250),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
viewOptions: {},
|
||||
|
||||
searchText: null,
|
||||
searchTextThrottled: null,
|
||||
searchText: null,
|
||||
searchTextThrottled: null,
|
||||
|
||||
icons: Object.freeze({
|
||||
pin: svgPin,
|
||||
}),
|
||||
|
||||
sortItemsBy: ['AZ', 'sortByNumber'],
|
||||
selectedSortItemsBy: 'AZ',
|
||||
|
||||
selectedItemToBuy: null,
|
||||
|
||||
hideLocked: false,
|
||||
hidePinned: false,
|
||||
|
||||
broken: false,
|
||||
};
|
||||
},
|
||||
async mounted () {
|
||||
const worldState = await this.$store.dispatch('worldState:getWorldState');
|
||||
this.broken = worldState && worldState.worldBoss && worldState.worldBoss.extra && worldState.worldBoss.extra.worldDmg && worldState.worldBoss.extra.worldDmg.quests;
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
user: 'user.data',
|
||||
userStats: 'user.data.stats',
|
||||
userItems: 'user.data.items',
|
||||
icons: Object.freeze({
|
||||
pin: svgPin,
|
||||
}),
|
||||
shop () {
|
||||
return shops.getQuestShop(this.user);
|
||||
},
|
||||
categories () {
|
||||
if (this.shop.categories) {
|
||||
this.shop.categories.map((category) => {
|
||||
this.$set(this.viewOptions, category.identifier, {
|
||||
selected: false,
|
||||
});
|
||||
|
||||
sortItemsBy: ['AZ', 'sortByNumber'],
|
||||
selectedSortItemsBy: 'AZ',
|
||||
|
||||
selectedItemToBuy: null,
|
||||
|
||||
hideLocked: false,
|
||||
hidePinned: false,
|
||||
|
||||
broken: false,
|
||||
};
|
||||
},
|
||||
async mounted () {
|
||||
const worldState = await this.$store.dispatch('worldState:getWorldState');
|
||||
this.broken = worldState && worldState.worldBoss && worldState.worldBoss.extra && worldState.worldBoss.extra.worldDmg && worldState.worldBoss.extra.worldDmg.quests;
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
user: 'user.data',
|
||||
userStats: 'user.data.stats',
|
||||
userItems: 'user.data.items',
|
||||
}),
|
||||
shop () {
|
||||
return shops.getQuestShop(this.user);
|
||||
},
|
||||
categories () {
|
||||
if (this.shop.categories) {
|
||||
this.shop.categories.map(category => {
|
||||
this.$set(this.viewOptions, category.identifier, {
|
||||
selected: false,
|
||||
});
|
||||
});
|
||||
|
||||
return this.shop.categories;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
return this.shop.categories;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
methods: {
|
||||
questItems (category, sortBy, searchBy, hideLocked, hidePinned) {
|
||||
let result = _map(category.items, (e) => {
|
||||
return {
|
||||
...e,
|
||||
pinned: isPinned(this.user, e),
|
||||
};
|
||||
});
|
||||
|
||||
result = _filter(result, (i) => {
|
||||
if (hideLocked && i.locked) {
|
||||
return false;
|
||||
}
|
||||
if (hidePinned && i.pinned) {
|
||||
return false;
|
||||
}
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
questItems (category, sortBy, searchBy, hideLocked, hidePinned) {
|
||||
let result = _map(category.items, e => ({
|
||||
...e,
|
||||
pinned: isPinned(this.user, e),
|
||||
}));
|
||||
|
||||
return !searchBy || i.text.toLowerCase().indexOf(searchBy) !== -1;
|
||||
});
|
||||
|
||||
switch (sortBy) {
|
||||
case 'AZ': {
|
||||
result = _sortBy(result, ['text']);
|
||||
|
||||
break;
|
||||
}
|
||||
case 'sortByNumber': {
|
||||
result = _sortBy(result, ['value']);
|
||||
|
||||
break;
|
||||
}
|
||||
result = _filter(result, i => {
|
||||
if (hideLocked && i.locked) {
|
||||
return false;
|
||||
}
|
||||
if (hidePinned && i.pinned) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
getGrouped (entries) {
|
||||
return _groupBy(entries, 'group');
|
||||
},
|
||||
resetItemToBuy ($event) {
|
||||
if (!$event) {
|
||||
this.selectedItemToBuy = null;
|
||||
return !searchBy || i.text.toLowerCase().indexOf(searchBy) !== -1;
|
||||
});
|
||||
|
||||
switch (sortBy) {
|
||||
case 'AZ': {
|
||||
result = _sortBy(result, ['text']);
|
||||
|
||||
break;
|
||||
}
|
||||
},
|
||||
isGearLocked (gear) {
|
||||
if (gear.value > this.userStats.gp) {
|
||||
return true;
|
||||
case 'sortByNumber': {
|
||||
result = _sortBy(result, ['value']);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
selectItem (item) {
|
||||
if (item.locked) return;
|
||||
|
||||
this.selectedItemToBuy = item;
|
||||
|
||||
this.$root.$emit('bv::show::modal', 'buy-quest-modal');
|
||||
},
|
||||
isBuyingDependentOnPrevious (item) {
|
||||
let questsNotDependentToPrevious = ['moon2', 'moon3'];
|
||||
if (item.key in questsNotDependentToPrevious) return false;
|
||||
return result;
|
||||
},
|
||||
getGrouped (entries) {
|
||||
return _groupBy(entries, 'group');
|
||||
},
|
||||
resetItemToBuy ($event) {
|
||||
if (!$event) {
|
||||
this.selectedItemToBuy = null;
|
||||
}
|
||||
},
|
||||
isGearLocked (gear) {
|
||||
if (gear.value > this.userStats.gp) {
|
||||
return true;
|
||||
},
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
};
|
||||
selectItem (item) {
|
||||
if (item.locked) return;
|
||||
|
||||
this.selectedItemToBuy = item;
|
||||
|
||||
this.$root.$emit('bv::show::modal', 'buy-quest-modal');
|
||||
},
|
||||
isBuyingDependentOnPrevious (item) {
|
||||
const questsNotDependentToPrevious = ['moon2', 'moon3'];
|
||||
if (item.key in questsNotDependentToPrevious) return false;
|
||||
return true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -32,32 +32,30 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import QuestInfo from './questInfo.vue';
|
||||
import QuestInfo from './questInfo.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
QuestInfo,
|
||||
export default {
|
||||
components: {
|
||||
QuestInfo,
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
},
|
||||
computed: {
|
||||
itemText () {
|
||||
if (this.item.text instanceof Function) {
|
||||
return this.item.text();
|
||||
} else {
|
||||
return this.item.text;
|
||||
}
|
||||
},
|
||||
itemNotes () {
|
||||
if (this.item.notes instanceof Function) {
|
||||
return this.item.notes();
|
||||
} else {
|
||||
return this.item.notes;
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
itemText () {
|
||||
if (this.item.text instanceof Function) {
|
||||
return this.item.text();
|
||||
}
|
||||
return this.item.text;
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
},
|
||||
itemNotes () {
|
||||
if (this.item.notes instanceof Function) {
|
||||
return this.item.notes();
|
||||
}
|
||||
return this.item.notes;
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -66,57 +66,56 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgExperience from '@/assets/svg/experience.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgExperience from '@/assets/svg/experience.svg';
|
||||
|
||||
export default {
|
||||
mixins: [],
|
||||
components: {
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
mixins: [],
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
gold: svgGold,
|
||||
experience: svgExperience,
|
||||
}),
|
||||
};
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
gold: svgGold,
|
||||
experience: svgExperience,
|
||||
}),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getDropIcon (drop) {
|
||||
switch (drop.type) {
|
||||
case 'gear':
|
||||
return `shop_${drop.key}`;
|
||||
case 'hatchingPotions':
|
||||
return `Pet_HatchingPotion_${drop.key}`;
|
||||
case 'food':
|
||||
return `Pet_Food_${drop.key}`;
|
||||
case 'eggs':
|
||||
return `Pet_Egg_${drop.key}`;
|
||||
case 'quests':
|
||||
return `inventory_quest_scroll_${drop.key}`;
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getDropIcon (drop) {
|
||||
switch (drop.type) {
|
||||
case 'gear':
|
||||
return `shop_${drop.key}`;
|
||||
case 'hatchingPotions':
|
||||
return `Pet_HatchingPotion_${drop.key}`;
|
||||
case 'food':
|
||||
return `Pet_Food_${drop.key}`;
|
||||
case 'eggs':
|
||||
return `Pet_Egg_${drop.key}`;
|
||||
case 'quests':
|
||||
return `inventory_quest_scroll_${drop.key}`;
|
||||
default:
|
||||
return '';
|
||||
getDropName (drop) {
|
||||
return drop.text();
|
||||
},
|
||||
getDropsList (drops, ownerOnly) {
|
||||
if (!drops) return [];
|
||||
|
||||
return drops.filter(drop => {
|
||||
if (ownerOnly) {
|
||||
return drop.onlyOwner;
|
||||
}
|
||||
},
|
||||
getDropName (drop) {
|
||||
return drop.text();
|
||||
},
|
||||
getDropsList (drops, ownerOnly) {
|
||||
if (!drops) return [];
|
||||
|
||||
return drops.filter(function dropsList (drop) {
|
||||
if (ownerOnly) {
|
||||
return drop.onlyOwner;
|
||||
} else {
|
||||
return !drop.onlyOwner;
|
||||
}
|
||||
});
|
||||
},
|
||||
return !drop.onlyOwner;
|
||||
});
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -95,64 +95,63 @@ dt {
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import svgStar from '@/assets/svg/difficulty-star.svg';
|
||||
import svgStarHalf from '@/assets/svg/difficulty-star-half.svg';
|
||||
import svgStarEmpty from '@/assets/svg/difficulty-star-empty.svg';
|
||||
import svgStar from '@/assets/svg/difficulty-star.svg';
|
||||
import svgStarHalf from '@/assets/svg/difficulty-star-half.svg';
|
||||
import svgStarEmpty from '@/assets/svg/difficulty-star-empty.svg';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
quest: {
|
||||
type: Object,
|
||||
},
|
||||
smallVersion: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
export default {
|
||||
props: {
|
||||
quest: {
|
||||
type: Object,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
star: svgStar,
|
||||
starHalf: svgStarHalf,
|
||||
starEmpty: svgStarEmpty,
|
||||
}),
|
||||
};
|
||||
smallVersion: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
computed: {
|
||||
difficulty () {
|
||||
if (this.quest.boss) {
|
||||
return this.quest.boss.str;
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
star: svgStar,
|
||||
starHalf: svgStarHalf,
|
||||
starEmpty: svgStarEmpty,
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
difficulty () {
|
||||
if (this.quest.boss) {
|
||||
return this.quest.boss.str;
|
||||
}
|
||||
|
||||
return 1;
|
||||
},
|
||||
return 1;
|
||||
},
|
||||
methods: {
|
||||
stars () {
|
||||
let result = [];
|
||||
let difficulty = this.difficulty;
|
||||
},
|
||||
methods: {
|
||||
stars () {
|
||||
const result = [];
|
||||
const { difficulty } = this;
|
||||
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
let diff = difficulty - i;
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
const diff = difficulty - i;
|
||||
|
||||
if (diff >= 0) {
|
||||
result.push('star');
|
||||
} else if (diff <= -1) {
|
||||
result.push('starEmpty');
|
||||
} else {
|
||||
result.push('starHalf');
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
getCollectText (collect) {
|
||||
if (collect.text instanceof Function) {
|
||||
return collect.text();
|
||||
if (diff >= 0) {
|
||||
result.push('star');
|
||||
} else if (diff <= -1) {
|
||||
result.push('starEmpty');
|
||||
} else {
|
||||
return collect.text;
|
||||
result.push('starHalf');
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
};
|
||||
getCollectText (collect) {
|
||||
if (collect.text instanceof Function) {
|
||||
return collect.text();
|
||||
}
|
||||
return collect.text;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -284,257 +284,243 @@
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import {mapState} from '@/libs/store';
|
||||
import _filter from 'lodash/filter';
|
||||
import _map from 'lodash/map';
|
||||
import _mapValues from 'lodash/mapValues';
|
||||
import _forEach from 'lodash/forEach';
|
||||
import _sortBy from 'lodash/sortBy';
|
||||
import _throttle from 'lodash/throttle';
|
||||
import _groupBy from 'lodash/groupBy';
|
||||
import _reverse from 'lodash/reverse';
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
import ShopItem from '../shopItem';
|
||||
import Item from '@/components/inventory/item';
|
||||
import CountBadge from '@/components/ui/countBadge';
|
||||
import ItemRows from '@/components/ui/itemRows';
|
||||
import Checkbox from '@/components/ui/checkbox';
|
||||
import toggleSwitch from '@/components/ui/toggleSwitch';
|
||||
import Avatar from '@/components/avatar';
|
||||
import buyMixin from '@/mixins/buy';
|
||||
import currencyMixin from '../_currencyMixin';
|
||||
import pinUtils from '@/mixins/pinUtils';
|
||||
import ShopItem from '../shopItem';
|
||||
import Item from '@/components/inventory/item';
|
||||
import CountBadge from '@/components/ui/countBadge';
|
||||
import ItemRows from '@/components/ui/itemRows';
|
||||
import Checkbox from '@/components/ui/checkbox';
|
||||
import toggleSwitch from '@/components/ui/toggleSwitch';
|
||||
import Avatar from '@/components/avatar';
|
||||
import buyMixin from '@/mixins/buy';
|
||||
import currencyMixin from '../_currencyMixin';
|
||||
import pinUtils from '@/mixins/pinUtils';
|
||||
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgWarrior from '@/assets/svg/warrior.svg';
|
||||
import svgWizard from '@/assets/svg/wizard.svg';
|
||||
import svgRogue from '@/assets/svg/rogue.svg';
|
||||
import svgHealer from '@/assets/svg/healer.svg';
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgWarrior from '@/assets/svg/warrior.svg';
|
||||
import svgWizard from '@/assets/svg/wizard.svg';
|
||||
import svgRogue from '@/assets/svg/rogue.svg';
|
||||
import svgHealer from '@/assets/svg/healer.svg';
|
||||
|
||||
import _filter from 'lodash/filter';
|
||||
import _map from 'lodash/map';
|
||||
import _mapValues from 'lodash/mapValues';
|
||||
import _forEach from 'lodash/forEach';
|
||||
import _sortBy from 'lodash/sortBy';
|
||||
import _throttle from 'lodash/throttle';
|
||||
import _groupBy from 'lodash/groupBy';
|
||||
import _reverse from 'lodash/reverse';
|
||||
|
||||
import isPinned from '@/../../common/script/libs/isPinned';
|
||||
import getOfficialPinnedItems from '@/../../common/script/libs/getOfficialPinnedItems';
|
||||
import isPinned from '@/../../common/script/libs/isPinned';
|
||||
import getOfficialPinnedItems from '@/../../common/script/libs/getOfficialPinnedItems';
|
||||
|
||||
import i18n from '@/../../common/script/i18n';
|
||||
import i18n from '@/../../common/script/i18n';
|
||||
|
||||
import shops from '@/../../common/script/libs/shops';
|
||||
import shops from '@/../../common/script/libs/shops';
|
||||
|
||||
export default {
|
||||
mixins: [buyMixin, currencyMixin, pinUtils],
|
||||
components: {
|
||||
ShopItem,
|
||||
Item,
|
||||
CountBadge,
|
||||
ItemRows,
|
||||
toggleSwitch,
|
||||
Checkbox,
|
||||
export default {
|
||||
components: {
|
||||
ShopItem,
|
||||
Item,
|
||||
CountBadge,
|
||||
ItemRows,
|
||||
toggleSwitch,
|
||||
Checkbox,
|
||||
|
||||
Avatar,
|
||||
},
|
||||
watch: {
|
||||
searchText: _throttle(function throttleSearch () {
|
||||
this.searchTextThrottled = this.searchText.toLowerCase();
|
||||
}, 250),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
viewOptions: {},
|
||||
searchText: null,
|
||||
searchTextThrottled: null,
|
||||
Avatar,
|
||||
},
|
||||
mixins: [buyMixin, currencyMixin, pinUtils],
|
||||
watch: {
|
||||
searchText: _throttle(function throttleSearch () {
|
||||
this.searchTextThrottled = this.searchText.toLowerCase();
|
||||
}, 250),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
viewOptions: {},
|
||||
searchText: null,
|
||||
searchTextThrottled: null,
|
||||
|
||||
icons: Object.freeze({
|
||||
pin: svgPin,
|
||||
warrior: svgWarrior,
|
||||
wizard: svgWizard,
|
||||
rogue: svgRogue,
|
||||
healer: svgHealer,
|
||||
}),
|
||||
|
||||
gearTypesToStrings: Object.freeze({ // TODO use content.itemList?
|
||||
weapon: i18n.t('weaponCapitalized'),
|
||||
shield: i18n.t('offhandCapitalized'),
|
||||
head: i18n.t('headgearCapitalized'),
|
||||
armor: i18n.t('armorCapitalized'),
|
||||
headAccessory: i18n.t('headAccessoryCapitalized'),
|
||||
body: i18n.t('body'),
|
||||
back: i18n.t('back'),
|
||||
eyewear: i18n.t('eyewear'),
|
||||
}),
|
||||
|
||||
sortItemsBy: ['AZ'],
|
||||
selectedSortItemsBy: 'AZ',
|
||||
|
||||
hidePinned: false,
|
||||
featuredGearBought: false,
|
||||
|
||||
backgroundUpdate: new Date(),
|
||||
|
||||
broken: false,
|
||||
};
|
||||
},
|
||||
async mounted () {
|
||||
const worldState = await this.$store.dispatch('worldState:getWorldState');
|
||||
this.broken = worldState && worldState.worldBoss && worldState.worldBoss.extra && worldState.worldBoss.extra.worldDmg && worldState.worldBoss.extra.worldDmg.seasonalShop;
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
user: 'user.data',
|
||||
userStats: 'user.data.stats',
|
||||
icons: Object.freeze({
|
||||
pin: svgPin,
|
||||
warrior: svgWarrior,
|
||||
wizard: svgWizard,
|
||||
rogue: svgRogue,
|
||||
healer: svgHealer,
|
||||
}),
|
||||
|
||||
usersOfficalPinnedItems () {
|
||||
return getOfficialPinnedItems(this.user);
|
||||
},
|
||||
gearTypesToStrings: Object.freeze({ // TODO use content.itemList?
|
||||
weapon: i18n.t('weaponCapitalized'),
|
||||
shield: i18n.t('offhandCapitalized'),
|
||||
head: i18n.t('headgearCapitalized'),
|
||||
armor: i18n.t('armorCapitalized'),
|
||||
headAccessory: i18n.t('headAccessoryCapitalized'),
|
||||
body: i18n.t('body'),
|
||||
back: i18n.t('back'),
|
||||
eyewear: i18n.t('eyewear'),
|
||||
}),
|
||||
|
||||
seasonal () {
|
||||
// vue subscriptions, don't remove
|
||||
sortItemsBy: ['AZ'],
|
||||
selectedSortItemsBy: 'AZ',
|
||||
|
||||
hidePinned: false,
|
||||
featuredGearBought: false,
|
||||
|
||||
backgroundUpdate: new Date(),
|
||||
|
||||
broken: false,
|
||||
};
|
||||
},
|
||||
async mounted () {
|
||||
const worldState = await this.$store.dispatch('worldState:getWorldState');
|
||||
this.broken = worldState && worldState.worldBoss && worldState.worldBoss.extra && worldState.worldBoss.extra.worldDmg && worldState.worldBoss.extra.worldDmg.seasonalShop;
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
user: 'user.data',
|
||||
userStats: 'user.data.stats',
|
||||
}),
|
||||
|
||||
usersOfficalPinnedItems () {
|
||||
return getOfficialPinnedItems(this.user);
|
||||
},
|
||||
|
||||
seasonal () {
|
||||
// vue subscriptions, don't remove
|
||||
let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
|
||||
const myUserVersion = this.user._v; // eslint-disable-line
|
||||
|
||||
let seasonal = shops.getSeasonalShop(this.user);
|
||||
const seasonal = shops.getSeasonalShop(this.user);
|
||||
|
||||
let itemsNotOwned = seasonal.featured.items.filter(item => {
|
||||
return !this.user.items.gear.owned[item.key];
|
||||
});
|
||||
seasonal.featured.items = itemsNotOwned;
|
||||
const itemsNotOwned = seasonal.featured.items.filter(item => !this.user.items.gear.owned[item.key]);
|
||||
seasonal.featured.items = itemsNotOwned;
|
||||
|
||||
// If we are out of gear, show the spells
|
||||
// @TODO: add dates to check instead?
|
||||
if (seasonal.featured.items.length === 0) {
|
||||
this.featuredGearBought = true; // eslint-disable-line vue/no-side-effects-in-computed-properties
|
||||
if (seasonal.categories.length > 0) {
|
||||
seasonal.featured.items = seasonal.featured.items.concat(seasonal.categories[0].items);
|
||||
}
|
||||
// If we are out of gear, show the spells
|
||||
// @TODO: add dates to check instead?
|
||||
if (seasonal.featured.items.length === 0) {
|
||||
this.featuredGearBought = true; // eslint-disable-line vue/no-side-effects-in-computed-properties
|
||||
if (seasonal.categories.length > 0) {
|
||||
seasonal.featured.items = seasonal.featured.items.concat(seasonal.categories[0].items);
|
||||
}
|
||||
}
|
||||
|
||||
return seasonal;
|
||||
},
|
||||
seasonalCategories () {
|
||||
return this.seasonal.categories;
|
||||
},
|
||||
categories () {
|
||||
if (this.seasonalCategories) {
|
||||
return _reverse(_sortBy(this.seasonalCategories, (c) => {
|
||||
if (c.event) {
|
||||
return c.event.start;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
}));
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
filterCategories () {
|
||||
if (this.content) {
|
||||
let equipmentList = _mapValues(this.gearTypesToStrings, (value, key) => {
|
||||
return {
|
||||
key,
|
||||
value,
|
||||
};
|
||||
});
|
||||
|
||||
_forEach(equipmentList, (value) => {
|
||||
this.$set(this.viewOptions, value.key, {
|
||||
selected: false,
|
||||
});
|
||||
});
|
||||
|
||||
return equipmentList;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
return seasonal;
|
||||
},
|
||||
methods: {
|
||||
getClassName (classType) {
|
||||
if (classType === 'wizard') {
|
||||
return this.$t('mage');
|
||||
} else {
|
||||
return this.$t(classType);
|
||||
}
|
||||
},
|
||||
seasonalItems (category, sortBy, searchBy, viewOptions, hidePinned) {
|
||||
let result = _map(category.items, (e) => {
|
||||
return {
|
||||
...e,
|
||||
pinned: isPinned(this.user, e, this.usersOfficalPinnedItems),
|
||||
};
|
||||
});
|
||||
|
||||
result = _filter(result, (i) => {
|
||||
if (hidePinned && i.pinned) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.anyFilterSelected && viewOptions[i.type] && !viewOptions[i.type].selected) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !searchBy || i.text.toLowerCase().indexOf(searchBy) !== -1;
|
||||
});
|
||||
|
||||
switch (sortBy) {
|
||||
case 'AZ': {
|
||||
result = _sortBy(result, ['text']);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
getGroupedCategories (categories) {
|
||||
let spellCategory = _filter(categories, (c) => {
|
||||
return c.identifier === 'spells';
|
||||
})[0];
|
||||
|
||||
let questsCategory = _filter(categories, (c) => {
|
||||
return c.identifier === 'quests';
|
||||
})[0];
|
||||
|
||||
let setCategories = _filter(categories, 'specialClass');
|
||||
|
||||
let result = _groupBy(setCategories, 'specialClass');
|
||||
|
||||
if (spellCategory) {
|
||||
result.spells = [
|
||||
spellCategory,
|
||||
];
|
||||
}
|
||||
|
||||
if (questsCategory) {
|
||||
result.quests = [
|
||||
questsCategory,
|
||||
];
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
isGearLocked (gear) {
|
||||
if (gear.value > this.userStats.gp) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
itemSelected (item) {
|
||||
if (item.locked) return;
|
||||
this.$root.$emit('buyModal::showItem', item);
|
||||
},
|
||||
seasonalCategories () {
|
||||
return this.seasonal.categories;
|
||||
},
|
||||
created () {
|
||||
this.$root.$on('buyModal::boughtItem', () => {
|
||||
this.backgroundUpdate = new Date();
|
||||
categories () {
|
||||
if (this.seasonalCategories) {
|
||||
return _reverse(_sortBy(this.seasonalCategories, c => {
|
||||
if (c.event) {
|
||||
return c.event.start;
|
||||
}
|
||||
return -1;
|
||||
}));
|
||||
}
|
||||
return [];
|
||||
},
|
||||
filterCategories () {
|
||||
if (this.content) {
|
||||
const equipmentList = _mapValues(this.gearTypesToStrings, (value, key) => ({
|
||||
key,
|
||||
value,
|
||||
}));
|
||||
|
||||
_forEach(equipmentList, value => {
|
||||
this.$set(this.viewOptions, value.key, {
|
||||
selected: false,
|
||||
});
|
||||
});
|
||||
|
||||
return equipmentList;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.$root.$on('buyModal::boughtItem', () => {
|
||||
this.backgroundUpdate = new Date();
|
||||
});
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$root.$off('buyModal::boughtItem');
|
||||
},
|
||||
methods: {
|
||||
getClassName (classType) {
|
||||
if (classType === 'wizard') {
|
||||
return this.$t('mage');
|
||||
}
|
||||
return this.$t(classType);
|
||||
},
|
||||
seasonalItems (category, sortBy, searchBy, viewOptions, hidePinned) {
|
||||
let result = _map(category.items, e => ({
|
||||
...e,
|
||||
pinned: isPinned(this.user, e, this.usersOfficalPinnedItems),
|
||||
}));
|
||||
|
||||
result = _filter(result, i => {
|
||||
if (hidePinned && i.pinned) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.anyFilterSelected && viewOptions[i.type] && !viewOptions[i.type].selected) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !searchBy || i.text.toLowerCase().indexOf(searchBy) !== -1;
|
||||
});
|
||||
|
||||
switch (sortBy) {
|
||||
case 'AZ': {
|
||||
result = _sortBy(result, ['text']);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$root.$off('buyModal::boughtItem');
|
||||
getGroupedCategories (categories) {
|
||||
const spellCategory = _filter(categories, c => c.identifier === 'spells')[0];
|
||||
|
||||
const questsCategory = _filter(categories, c => c.identifier === 'quests')[0];
|
||||
|
||||
const setCategories = _filter(categories, 'specialClass');
|
||||
|
||||
const result = _groupBy(setCategories, 'specialClass');
|
||||
|
||||
if (spellCategory) {
|
||||
result.spells = [
|
||||
spellCategory,
|
||||
];
|
||||
}
|
||||
|
||||
if (questsCategory) {
|
||||
result.quests = [
|
||||
questsCategory,
|
||||
];
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
};
|
||||
isGearLocked (gear) {
|
||||
if (gear.value > this.userStats.gp) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
itemSelected (item) {
|
||||
if (item.locked) return;
|
||||
this.$root.$emit('buyModal::showItem', item);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -150,104 +150,102 @@ div
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import uuid from 'uuid';
|
||||
import uuid from 'uuid';
|
||||
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgHourglasses from '@/assets/svg/hourglass.svg';
|
||||
import svgLock from '@/assets/svg/lock.svg';
|
||||
import svgClock from '@/assets/svg/clock.svg';
|
||||
import moment from 'moment';
|
||||
import svgGem from '@/assets/svg/gem.svg';
|
||||
import svgGold from '@/assets/svg/gold.svg';
|
||||
import svgHourglasses from '@/assets/svg/hourglass.svg';
|
||||
import svgLock from '@/assets/svg/lock.svg';
|
||||
import svgClock from '@/assets/svg/clock.svg';
|
||||
|
||||
import EquipmentAttributesPopover from '@/components/inventory/equipment/attributesPopover';
|
||||
import EquipmentAttributesPopover from '@/components/inventory/equipment/attributesPopover';
|
||||
|
||||
import QuestInfo from './quests/questInfo.vue';
|
||||
import QuestInfo from './quests/questInfo.vue';
|
||||
|
||||
import moment from 'moment';
|
||||
|
||||
import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';
|
||||
import seasonalShopConfig from '@/../../common/script/libs/shops-seasonal.config';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EquipmentAttributesPopover,
|
||||
QuestInfo,
|
||||
export default {
|
||||
components: {
|
||||
EquipmentAttributesPopover,
|
||||
QuestInfo,
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
},
|
||||
data () {
|
||||
return Object.freeze({
|
||||
itemId: uuid.v4(),
|
||||
icons: {
|
||||
gems: svgGem,
|
||||
gold: svgGold,
|
||||
lock: svgLock,
|
||||
hourglasses: svgHourglasses,
|
||||
clock: svgClock,
|
||||
},
|
||||
});
|
||||
price: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
},
|
||||
price: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
emptyItem: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
highlightBorder: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
popoverPosition: {
|
||||
type: String,
|
||||
default: 'bottom',
|
||||
},
|
||||
showPopover: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showEventBadge: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
emptyItem: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
computed: {
|
||||
showNotes () {
|
||||
if (['armoire', 'potion'].indexOf(this.item.path) > -1) return true;
|
||||
return false;
|
||||
},
|
||||
currencyClass () {
|
||||
if (this.item.currency && this.icons[this.item.currency]) {
|
||||
return this.item.currency;
|
||||
} else {
|
||||
return 'gold';
|
||||
}
|
||||
},
|
||||
limitedString () {
|
||||
return this.item.owned === false ? '' :
|
||||
this.$t('limitedOffer', {date: moment(seasonalShopConfig.dateRange.end).format('LL')});
|
||||
},
|
||||
highlightBorder: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
methods: {
|
||||
click () {
|
||||
this.$emit('click', {});
|
||||
},
|
||||
getPrice () {
|
||||
if (this.price === -1) {
|
||||
return this.item.value;
|
||||
} else {
|
||||
return this.price;
|
||||
}
|
||||
},
|
||||
getItemClasses () {
|
||||
return {
|
||||
'item-empty': this.emptyItem,
|
||||
'highlight-border': this.highlightBorder,
|
||||
suggested: this.item.isSuggested,
|
||||
locked: this.item.locked,
|
||||
};
|
||||
},
|
||||
popoverPosition: {
|
||||
type: String,
|
||||
default: 'bottom',
|
||||
},
|
||||
};
|
||||
showPopover: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
showEventBadge: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return Object.freeze({
|
||||
itemId: uuid.v4(),
|
||||
icons: {
|
||||
gems: svgGem,
|
||||
gold: svgGold,
|
||||
lock: svgLock,
|
||||
hourglasses: svgHourglasses,
|
||||
clock: svgClock,
|
||||
},
|
||||
});
|
||||
},
|
||||
computed: {
|
||||
showNotes () {
|
||||
if (['armoire', 'potion'].indexOf(this.item.path) > -1) return true;
|
||||
return false;
|
||||
},
|
||||
currencyClass () {
|
||||
if (this.item.currency && this.icons[this.item.currency]) {
|
||||
return this.item.currency;
|
||||
}
|
||||
return 'gold';
|
||||
},
|
||||
limitedString () {
|
||||
return this.item.owned === false ? ''
|
||||
: this.$t('limitedOffer', { date: moment(seasonalShopConfig.dateRange.end).format('LL') });
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
click () {
|
||||
this.$emit('click', {});
|
||||
},
|
||||
getPrice () {
|
||||
if (this.price === -1) {
|
||||
return this.item.value;
|
||||
}
|
||||
return this.price;
|
||||
},
|
||||
getItemClasses () {
|
||||
return {
|
||||
'item-empty': this.emptyItem,
|
||||
'highlight-border': this.highlightBorder,
|
||||
suggested: this.item.isSuggested,
|
||||
locked: this.item.locked,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -233,191 +233,183 @@
|
||||
|
||||
|
||||
<script>
|
||||
import {mapState} from '@/libs/store';
|
||||
import _filter from 'lodash/filter';
|
||||
import _sortBy from 'lodash/sortBy';
|
||||
import _throttle from 'lodash/throttle';
|
||||
import _groupBy from 'lodash/groupBy';
|
||||
import _map from 'lodash/map';
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
import ShopItem from '../shopItem';
|
||||
import Item from '@/components/inventory/item';
|
||||
import CountBadge from '@/components/ui/countBadge';
|
||||
import ItemRows from '@/components/ui/itemRows';
|
||||
import toggleSwitch from '@/components/ui/toggleSwitch';
|
||||
import Avatar from '@/components/avatar';
|
||||
import QuestInfo from '../quests/questInfo.vue';
|
||||
import ShopItem from '../shopItem';
|
||||
import Item from '@/components/inventory/item';
|
||||
import CountBadge from '@/components/ui/countBadge';
|
||||
import ItemRows from '@/components/ui/itemRows';
|
||||
import toggleSwitch from '@/components/ui/toggleSwitch';
|
||||
import Avatar from '@/components/avatar';
|
||||
import QuestInfo from '../quests/questInfo.vue';
|
||||
|
||||
import BuyModal from '../buyModal.vue';
|
||||
import BuyQuestModal from '../quests/buyQuestModal.vue';
|
||||
import BuyModal from '../buyModal.vue';
|
||||
import BuyQuestModal from '../quests/buyQuestModal.vue';
|
||||
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgHourglass from '@/assets/svg/hourglass.svg';
|
||||
import svgPin from '@/assets/svg/pin.svg';
|
||||
import svgHourglass from '@/assets/svg/hourglass.svg';
|
||||
|
||||
import _filter from 'lodash/filter';
|
||||
import _sortBy from 'lodash/sortBy';
|
||||
import _throttle from 'lodash/throttle';
|
||||
import _groupBy from 'lodash/groupBy';
|
||||
import _map from 'lodash/map';
|
||||
|
||||
import isPinned from '@/../../common/script/libs/isPinned';
|
||||
import shops from '@/../../common/script/libs/shops';
|
||||
import isPinned from '@/../../common/script/libs/isPinned';
|
||||
import shops from '@/../../common/script/libs/shops';
|
||||
|
||||
import pinUtils from '@/mixins/pinUtils';
|
||||
import pinUtils from '@/mixins/pinUtils';
|
||||
|
||||
export default {
|
||||
mixins: [pinUtils],
|
||||
components: {
|
||||
ShopItem,
|
||||
Item,
|
||||
CountBadge,
|
||||
ItemRows,
|
||||
toggleSwitch,
|
||||
QuestInfo,
|
||||
export default {
|
||||
components: {
|
||||
ShopItem,
|
||||
Item,
|
||||
CountBadge,
|
||||
ItemRows,
|
||||
toggleSwitch,
|
||||
QuestInfo,
|
||||
|
||||
Avatar,
|
||||
BuyModal,
|
||||
BuyQuestModal,
|
||||
},
|
||||
watch: {
|
||||
searchText: _throttle(function throttleSearch () {
|
||||
this.searchTextThrottled = this.searchText.toLowerCase();
|
||||
}, 250),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
viewOptions: {},
|
||||
Avatar,
|
||||
BuyModal,
|
||||
BuyQuestModal,
|
||||
},
|
||||
mixins: [pinUtils],
|
||||
watch: {
|
||||
searchText: _throttle(function throttleSearch () {
|
||||
this.searchTextThrottled = this.searchText.toLowerCase();
|
||||
}, 250),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
viewOptions: {},
|
||||
|
||||
searchText: null,
|
||||
searchTextThrottled: null,
|
||||
searchText: null,
|
||||
searchTextThrottled: null,
|
||||
|
||||
icons: Object.freeze({
|
||||
pin: svgPin,
|
||||
hourglass: svgHourglass,
|
||||
}),
|
||||
|
||||
sortItemsBy: ['AZ', 'sortByNumber'],
|
||||
selectedSortItemsBy: 'AZ',
|
||||
|
||||
selectedItemToBuy: null,
|
||||
|
||||
hidePinned: false,
|
||||
|
||||
backgroundUpdate: new Date(),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
quests: 'shops.quests.data',
|
||||
user: 'user.data',
|
||||
userStats: 'user.data.stats',
|
||||
userItems: 'user.data.items',
|
||||
icons: Object.freeze({
|
||||
pin: svgPin,
|
||||
hourglass: svgHourglass,
|
||||
}),
|
||||
|
||||
closed () {
|
||||
return this.user.purchased.plan.consecutive.trinkets === 0;
|
||||
},
|
||||
sortItemsBy: ['AZ', 'sortByNumber'],
|
||||
selectedSortItemsBy: 'AZ',
|
||||
|
||||
shop () {
|
||||
return shops.getTimeTravelersShop(this.user);
|
||||
},
|
||||
selectedItemToBuy: null,
|
||||
|
||||
categories () {
|
||||
let apiCategories = this.shop.categories;
|
||||
hidePinned: false,
|
||||
|
||||
// FIX ME Refactor the apiCategories Hack to force update for now until we restructure the data
|
||||
backgroundUpdate: new Date(),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
content: 'content',
|
||||
quests: 'shops.quests.data',
|
||||
user: 'user.data',
|
||||
userStats: 'user.data.stats',
|
||||
userItems: 'user.data.items',
|
||||
}),
|
||||
|
||||
closed () {
|
||||
return this.user.purchased.plan.consecutive.trinkets === 0;
|
||||
},
|
||||
|
||||
shop () {
|
||||
return shops.getTimeTravelersShop(this.user);
|
||||
},
|
||||
|
||||
categories () {
|
||||
const apiCategories = this.shop.categories;
|
||||
|
||||
// FIX ME Refactor the apiCategories Hack to force update for now until we restructure the data
|
||||
let backgroundUpdate = this.backgroundUpdate; // eslint-disable-line
|
||||
|
||||
let normalGroups = _filter(apiCategories, (c) => {
|
||||
return c.identifier === 'mounts' || c.identifier === 'pets' || c.identifier === 'quests';
|
||||
const normalGroups = _filter(apiCategories, c => c.identifier === 'mounts' || c.identifier === 'pets' || c.identifier === 'quests');
|
||||
|
||||
const setGroups = _filter(apiCategories, c => c.identifier !== 'mounts' && c.identifier !== 'pets' && c.identifier !== 'quests');
|
||||
|
||||
const setCategory = {
|
||||
identifier: 'sets',
|
||||
text: this.$t('mysterySets'),
|
||||
items: setGroups.map(c => ({
|
||||
...c,
|
||||
value: 1,
|
||||
currency: 'hourglasses',
|
||||
key: c.identifier,
|
||||
class: `shop_set_mystery_${c.identifier}`,
|
||||
purchaseType: 'mystery_set',
|
||||
})),
|
||||
};
|
||||
|
||||
normalGroups.push(setCategory);
|
||||
|
||||
normalGroups.map(category => {
|
||||
this.$set(this.viewOptions, category.identifier, {
|
||||
selected: false,
|
||||
});
|
||||
|
||||
let setGroups = _filter(apiCategories, (c) => {
|
||||
return c.identifier !== 'mounts' && c.identifier !== 'pets' && c.identifier !== 'quests';
|
||||
});
|
||||
|
||||
let setCategory = {
|
||||
identifier: 'sets',
|
||||
text: this.$t('mysterySets'),
|
||||
items: setGroups.map((c) => {
|
||||
return {
|
||||
...c,
|
||||
value: 1,
|
||||
currency: 'hourglasses',
|
||||
key: c.identifier,
|
||||
class: `shop_set_mystery_${c.identifier}`,
|
||||
purchaseType: 'mystery_set',
|
||||
};
|
||||
}),
|
||||
};
|
||||
|
||||
normalGroups.push(setCategory);
|
||||
|
||||
normalGroups.map((category) => {
|
||||
this.$set(this.viewOptions, category.identifier, {
|
||||
selected: false,
|
||||
});
|
||||
});
|
||||
|
||||
return normalGroups;
|
||||
},
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
travelersItems (category, sortBy, searchBy, hidePinned) {
|
||||
let result = _map(category.items, (e) => {
|
||||
return {
|
||||
...e,
|
||||
pinned: isPinned(this.user, e),
|
||||
};
|
||||
});
|
||||
|
||||
result = _filter(result, (i) => {
|
||||
if (hidePinned && i.pinned) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !searchBy || i.text.toLowerCase().indexOf(searchBy) !== -1;
|
||||
});
|
||||
|
||||
switch (sortBy) {
|
||||
case 'AZ': {
|
||||
result = _sortBy(result, ['text']);
|
||||
|
||||
break;
|
||||
}
|
||||
case 'sortByNumber': {
|
||||
result = _sortBy(result, ['value']);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
getGrouped (entries) {
|
||||
return _groupBy(entries, 'group');
|
||||
},
|
||||
selectItemToBuy (item) {
|
||||
if (item.purchaseType === 'quests') {
|
||||
this.selectedItemToBuy = item;
|
||||
|
||||
this.$root.$emit('bv::show::modal', 'buy-quest-modal');
|
||||
} else {
|
||||
this.$root.$emit('buyModal::showItem', item);
|
||||
}
|
||||
},
|
||||
resetItemToBuy ($event) {
|
||||
if (!$event) {
|
||||
this.selectedItemToBuy = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.$root.$on('buyModal::boughtItem', () => {
|
||||
this.backgroundUpdate = new Date();
|
||||
});
|
||||
|
||||
return normalGroups;
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$root.$off('buyModal::boughtItem');
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
};
|
||||
},
|
||||
created () {
|
||||
this.$root.$on('buyModal::boughtItem', () => {
|
||||
this.backgroundUpdate = new Date();
|
||||
});
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$root.$off('buyModal::boughtItem');
|
||||
},
|
||||
methods: {
|
||||
travelersItems (category, sortBy, searchBy, hidePinned) {
|
||||
let result = _map(category.items, e => ({
|
||||
...e,
|
||||
pinned: isPinned(this.user, e),
|
||||
}));
|
||||
|
||||
result = _filter(result, i => {
|
||||
if (hidePinned && i.pinned) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !searchBy || i.text.toLowerCase().indexOf(searchBy) !== -1;
|
||||
});
|
||||
|
||||
switch (sortBy) {
|
||||
case 'AZ': {
|
||||
result = _sortBy(result, ['text']);
|
||||
|
||||
break;
|
||||
}
|
||||
case 'sortByNumber': {
|
||||
result = _sortBy(result, ['value']);
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
getGrouped (entries) {
|
||||
return _groupBy(entries, 'group');
|
||||
},
|
||||
selectItemToBuy (item) {
|
||||
if (item.purchaseType === 'quests') {
|
||||
this.selectedItemToBuy = item;
|
||||
|
||||
this.$root.$emit('bv::show::modal', 'buy-quest-modal');
|
||||
} else {
|
||||
this.$root.$emit('buyModal::showItem', item);
|
||||
}
|
||||
},
|
||||
resetItemToBuy ($event) {
|
||||
if (!$event) {
|
||||
this.selectedItemToBuy = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user