diff --git a/website/client/components/snackbars/notification.vue b/website/client/components/snackbars/notification.vue index de2fa3ee73..6302b7c422 100644 --- a/website/client/components/snackbars/notification.vue +++ b/website/client/components/snackbars/notification.vue @@ -14,7 +14,7 @@ transition(name="fade") .text.col-7.offset-1 div | {{message}} - .icon.col-4 + .icon.col-4.d-flex.align-items-center div.svg-icon(v-html="icons.health", v-if='notification.type === "hp"') div.svg-icon(v-html="icons.gold", v-if='notification.type === "gp"') div.svg-icon(v-html="icons.star", v-if='notification.type === "xp"') @@ -24,10 +24,10 @@ transition(name="fade") .text.col-12 div(v-html='notification.text') .row(v-if='notification.type === "drop"') - .col-2 + .col-3 .icon-item div(:class='notification.icon') - .text.col-9 + .text.col-8 div(v-html='notification.text') @@ -150,6 +150,9 @@ export default { }, computed: { message () { + if (this.notification.flavorMessage) { + return this.notification.flavorMessage; + } let localeKey = this.negative === 'negative' ? 'lost' : 'gained'; if (this.notification.type === 'hp') localeKey += 'Health'; if (this.notification.type === 'mp') localeKey += 'Mana'; diff --git a/website/client/store/actions/shops.js b/website/client/store/actions/shops.js index 68ac4597e7..168df9d9cc 100644 --- a/website/client/store/actions/shops.js +++ b/website/client/store/actions/shops.js @@ -59,6 +59,7 @@ async function buyArmoire (store, params) { if (buyResult) { const resData = buyResult; const item = resData.armoire; + const message = result.data.message; const isExperience = item.type === 'experience'; if (item.type === 'gear') { @@ -67,12 +68,22 @@ async function buyArmoire (store, params) { store.state.user.data.stats.gp -= armoire.value; // @TODO: We might need to abstract notifications to library rather than mixin + const notificationOptions = isExperience ? + { + text: `+ ${item.value}`, + type: 'xp', + flavorMessage: message, + } : + { + text: message, + type: 'drop', + icon: getDropClass({type: item.type, key: item.dropKey}), + }; + store.dispatch('snackbars:add', { title: '', - text: isExperience ? item.value : item.dropText, - type: isExperience ? 'xp' : 'drop', - icon: isExperience ? null : getDropClass({type: item.type, key: item.dropKey}), timeout: true, + ...notificationOptions, }); } } diff --git a/website/common/script/ops/buyArmoire.js b/website/common/script/ops/buyArmoire.js index be8dd3cec6..5f4ca82da1 100644 --- a/website/common/script/ops/buyArmoire.js +++ b/website/common/script/ops/buyArmoire.js @@ -43,7 +43,7 @@ module.exports = function buyArmoire (user, req = {}, analytics) { drop = randomVal(eligibleEquipment); if (user.items.gear.owned[drop.key]) { - throw new NotAuthorized(i18n.t('equipmentAlradyOwned', req.language)); + throw new NotAuthorized(i18n.t('equipmentAlreadyOwned', req.language)); } user.items.gear.owned[drop.key] = true;