Kai/habitica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP(shop): empty states for categories

Browse Source
This commit is contained in:
Sabe Jones
2024-04-04 17:06:03 -05:00
parent fdc709d1c2
commit e52c7ff9ce
5 changed files with 96 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/client/src/components/shops/buyModal.vue
+12 -11
View File
@@ -825,20 +825,21 @@ export default {
) 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.item.purchaseType === 'customization') {
await this.unlock(this.item.path);
this.sync();
} else if (this.genericPurchase) {
this.makeGenericPurchase(this.item, 'buyModal', this.selectedAmountToBuy);
this.purchased(this.item.text);
} else {
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);
website/client/src/components/shops/customizations/index.vue
+66
View File
@@ -55,6 +55,8 @@
:item-width="94"
:item-margin="24"
:max-items-per-row="8"
:no-items-label="emptyStateString(category.identifier)"
@emptyClick="emptyClick(category.identifier, $event)"
>
<template
slot="item"
@@ -183,6 +185,70 @@ export default {
return category.items.filter(item => !searchBy
|| item.text.toLowerCase().includes(searchBy));
},
emptyClick (identifier, event) {
if (event.target.tagName !== 'A') return;
this.$store.state.avatarEditorOptions.editingUser = true;
switch (identifier) {
case 'animalEars':
this.$store.state.avatarEditorOptions.startingPage = 'extra';
this.$store.state.avatarEditorOptions.subpage = 'ears';
break;
case 'animalTails':
this.$store.state.avatarEditorOptions.startingPage = 'extra';
this.$store.state.avatarEditorOptions.subpage = 'tails';
break;
case 'background':
this.$store.state.avatarEditorOptions.startingPage = 'background';
this.$store.state.avatarEditorOptions.subpage = '2024';
break;
case 'facialHair':
this.$store.state.avatarEditorOptions.startingPage = 'hair';
this.$store.state.avatarEditorOptions.subpage = 'beard';
break;
case 'hairColors':
this.$store.state.avatarEditorOptions.startingPage = 'hair';
this.$store.state.avatarEditorOptions.subpage = 'color';
break;
case 'hairStyles':
this.$store.state.avatarEditorOptions.startingPage = 'hair';
this.$store.state.avatarEditorOptions.subpage = 'style';
break;
case 'shirts':
this.$store.state.avatarEditorOptions.startingPage = 'body';
this.$store.state.avatarEditorOptions.subpage = 'shirt';
break;
case 'skins':
this.$store.state.avatarEditorOptions.startingPage = 'skin';
this.$store.state.avatarEditorOptions.subpage = 'color';
break;
default:
throw new Error(`Unknown identifier ${identifier}`);
}
this.$root.$emit('bv::show::modal', 'avatar-modal');
},
emptyStateString (identifier) {
const { $t } = this;
switch (identifier) {
case 'animalEars':
return $t('allCustomizationsOwned');
case 'animalTails':
return $t('allCustomizationsOwned');
case 'background':
return `${$t('allCustomizationsOwned')} ${$t('checkNextMonth')}`;
case 'facialHair':
return $t('allCustomizationsOwned');
case 'hairColors':
return `${$t('allCustomizationsOwned')} ${$t('checkNextSeason')}`;
case 'hairStyles':
return $t('allCustomizationsOwned');
case 'shirts':
return $t('allCustomizationsOwned');
case 'skins':
return `${$t('allCustomizationsOwned')} ${$t('checkNextSeason')}`;
default:
return `Unknown identifier ${identifier}`;
}
},
selectItem (item) {
this.$root.$emit('buyModal::showItem', item);
},