feat(event): Winter Wonderland 2021 and Gift-One-Get-One Promotion
This commit is contained in:
@@ -209,7 +209,12 @@ export default {
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
classes: 'content.classes',
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
eventName () {
|
||||
if (!this.currentEvent || !this.currentEvent.event || this.currentEvent.season === 'normal') return null;
|
||||
return this.currentEvent.event.replace('NoPromo', '');
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
@@ -224,6 +229,14 @@ export default {
|
||||
},
|
||||
classGear (heroClass) {
|
||||
if (heroClass === 'rogue') {
|
||||
if (this.eventName) {
|
||||
return {
|
||||
armor: `armor_special_${this.eventName}Rogue`,
|
||||
head: `head_special_${this.eventName}Rogue`,
|
||||
shield: `shield_special_${this.eventName}Rogue`,
|
||||
weapon: `weapon_special_${this.eventName}Rogue`,
|
||||
};
|
||||
}
|
||||
return {
|
||||
armor: 'armor_rogue_5',
|
||||
head: 'head_rogue_5',
|
||||
@@ -231,12 +244,27 @@ export default {
|
||||
weapon: 'weapon_rogue_6',
|
||||
};
|
||||
} if (heroClass === 'wizard') {
|
||||
if (this.eventName) {
|
||||
return {
|
||||
armor: `armor_special_${this.eventName}Mage`,
|
||||
head: `head_special_${this.eventName}Mage`,
|
||||
weapon: `weapon_special_${this.eventName}Mage`,
|
||||
};
|
||||
}
|
||||
return {
|
||||
armor: 'armor_wizard_5',
|
||||
head: 'head_wizard_5',
|
||||
weapon: 'weapon_wizard_6',
|
||||
};
|
||||
} if (heroClass === 'healer') {
|
||||
if (this.eventName) {
|
||||
return {
|
||||
armor: `armor_special_${this.eventName}Healer`,
|
||||
head: `head_special_${this.eventName}Healer`,
|
||||
shield: `shield_special_${this.eventName}Healer`,
|
||||
weapon: `weapon_special_${this.eventName}Healer`,
|
||||
};
|
||||
}
|
||||
return {
|
||||
armor: 'armor_healer_5',
|
||||
head: 'head_healer_5',
|
||||
@@ -244,6 +272,14 @@ export default {
|
||||
weapon: 'weapon_healer_6',
|
||||
};
|
||||
}
|
||||
if (this.eventName) {
|
||||
return {
|
||||
armor: `armor_special_${this.eventName}Warrior`,
|
||||
head: `head_special_${this.eventName}Warrior`,
|
||||
shield: `shield_special_${this.eventName}Warrior`,
|
||||
weapon: `weapon_special_${this.eventName}Warrior`,
|
||||
};
|
||||
}
|
||||
return {
|
||||
armor: 'armor_warrior_5',
|
||||
head: 'head_warrior_5',
|
||||
|
||||
@@ -518,7 +518,10 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="npc-justin-textbox"></div>
|
||||
<div
|
||||
class="npc-justin-textbox"
|
||||
:style="{'background-image': imageURL}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@@ -755,7 +758,6 @@
|
||||
top: -3.1rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-image: url('~@/assets/images/justin_textbox.png');
|
||||
}
|
||||
|
||||
.featured-label {
|
||||
@@ -1189,7 +1191,10 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({ user: 'user.data' }),
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
editing () {
|
||||
return this.$store.state.avatarEditorOptions.editingUser;
|
||||
},
|
||||
@@ -1240,6 +1245,12 @@ export default {
|
||||
});
|
||||
return ownedBackgrounds;
|
||||
},
|
||||
imageURL () {
|
||||
if (!this.currentEvent || !this.currentEvent.season) {
|
||||
return 'url(/static/npc/normal/npc_justin.png)';
|
||||
}
|
||||
return `url(/static/npc/${this.currentEvent.season}/npc_justin.png)`;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
editing () {
|
||||
|
||||
@@ -19,8 +19,14 @@
|
||||
</div>
|
||||
<div class="col-12 col-sm-4 sidebar">
|
||||
<div class="section">
|
||||
<div class="grassy-meadow-backdrop">
|
||||
<div class="daniel_front"></div>
|
||||
<div
|
||||
class="grassy-meadow-backdrop"
|
||||
:style="{'background-image': imageURLs.background}"
|
||||
>
|
||||
<div
|
||||
class="daniel_front"
|
||||
:style="{'background-image': imageURLs.npc}"
|
||||
></div>
|
||||
</div>
|
||||
<div class="boss-section">
|
||||
<div
|
||||
@@ -501,7 +507,6 @@
|
||||
|
||||
<style lang='scss' scoped>
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
@import '~@/assets/scss/variables.scss';
|
||||
|
||||
h1 {
|
||||
color: $purple-200;
|
||||
@@ -519,14 +524,12 @@
|
||||
}
|
||||
|
||||
.grassy-meadow-backdrop {
|
||||
background-image: url('~@/assets/images/npc/#{$npc_tavern_flavor}/tavern_background.png');
|
||||
background-repeat: repeat-x;
|
||||
width: 100%;
|
||||
height: 246px;
|
||||
}
|
||||
|
||||
.daniel_front {
|
||||
background-image: url('~@/assets/images/npc/#{$npc_tavern_flavor}/tavern_npc.png');
|
||||
height: 246px;
|
||||
width: 471px;
|
||||
background-repeat: no-repeat;
|
||||
@@ -771,7 +774,6 @@ import worldBossRageModal from '../world-boss/worldBossRageModal';
|
||||
import sidebarSection from '../sidebarSection';
|
||||
import chat from './chat';
|
||||
|
||||
|
||||
import challengeIcon from '@/assets/svg/challenge.svg';
|
||||
import chevronIcon from '@/assets/svg/chevron-red.svg';
|
||||
import gemIcon from '@/assets/svg/gem.svg';
|
||||
@@ -835,11 +837,26 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({ user: 'user.data' }),
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
questData () {
|
||||
if (!this.group.quest) return {};
|
||||
return quests.quests[this.group.quest.key];
|
||||
},
|
||||
imageURLs () {
|
||||
if (!this.currentEvent || !this.currentEvent.season) {
|
||||
return {
|
||||
background: 'url(/static/npc/normal/tavern_background.png)',
|
||||
npc: 'url(/static/npc/normal/tavern_npc.png)',
|
||||
};
|
||||
}
|
||||
return {
|
||||
background: `url(/static/npc/${this.currentEvent.season}/tavern_background.png)`,
|
||||
npc: `url(/static/npc/${this.currentEvent.season}/tavern_npc.png)`,
|
||||
};
|
||||
},
|
||||
},
|
||||
async mounted () {
|
||||
this.$store.dispatch('common:setTitle', {
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<base-banner
|
||||
banner-id="gift-promo"
|
||||
class="gift-promo-banner"
|
||||
:show="showGiftPromoBanner"
|
||||
height="3rem"
|
||||
>
|
||||
<div
|
||||
slot="content"
|
||||
:aria-label="$t('subscription')"
|
||||
class="content d-flex justify-content-around align-items-center ml-auto mr-auto"
|
||||
@click="showSelectUser"
|
||||
>
|
||||
<div
|
||||
class="svg-icon svg-gifts left-gift"
|
||||
v-html="icons.gifts"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="announce-text"
|
||||
>
|
||||
{{ $t('g1g1Announcement') }}
|
||||
</div>
|
||||
<div
|
||||
class="svg-icon svg-gifts right-gift"
|
||||
v-html="icons.gifts"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</base-banner>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.announce-text {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.gift-promo-banner {
|
||||
width: 100%;
|
||||
min-height: 2.5rem;
|
||||
background: $teal-50;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.left-gift {
|
||||
margin: auto 1rem auto auto;
|
||||
}
|
||||
|
||||
.right-gift {
|
||||
margin: auto auto auto 1rem;
|
||||
filter: flipH;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.svg-gifts {
|
||||
width: 4.6rem;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// import * as Analytics from '@/libs/analytics';
|
||||
import { mapState } from '@/libs/store';
|
||||
import BaseBanner from './base';
|
||||
|
||||
import gifts from '@/assets/svg/gifts.svg';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BaseBanner,
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
eventName () {
|
||||
return this.currentEvent && this.currentEvent.event;
|
||||
},
|
||||
showGiftPromoBanner () {
|
||||
const currEvt = this.currentEvent;
|
||||
if (!currEvt) return false;
|
||||
return currEvt && currEvt.promo === 'g1g1';
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: Object.freeze({
|
||||
gifts,
|
||||
}),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showSelectUser () {
|
||||
/* Analytics.track({
|
||||
hitType: 'event',
|
||||
eventCategory: 'button',
|
||||
eventAction: 'click',
|
||||
eventLabel: 'Gift Promo Banner',
|
||||
}); */
|
||||
|
||||
this.$root.$emit('bv::show::modal', 'select-user-modal');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -9,7 +9,7 @@
|
||||
<div slot="header">
|
||||
<div
|
||||
id="npmMattStable"
|
||||
class="npc_matt"
|
||||
:class="mattClass"
|
||||
></div>
|
||||
<b-popover
|
||||
triggers="hover"
|
||||
@@ -530,6 +530,7 @@ export default {
|
||||
currentMount: 'user.data.items.currentMount',
|
||||
userItems: 'user.data.items',
|
||||
user: 'user.data',
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
petGroups () {
|
||||
const petGroups = [
|
||||
@@ -644,6 +645,10 @@ export default {
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
mattClass () {
|
||||
if (!this.currentEvent || !this.currentEvent.season) return 'npc_matt';
|
||||
return `npc_matt npc_matt_${this.currentEvent.season}`;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
searchText: _throttle(function throttleSearch () {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
@hide="hideFlag()"
|
||||
>
|
||||
<div class="content">
|
||||
<div class="npc_matt"></div><h1
|
||||
<div :class="mattClass"></div><h1
|
||||
v-once
|
||||
class="page-header"
|
||||
>
|
||||
@@ -63,7 +63,12 @@ export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
hideDialog: 'user.data.flags.tutorial.common.mounts',
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
mattClass () {
|
||||
if (!this.currentEvent || !this.currentEvent.season) return 'npc_matt';
|
||||
return `npc_matt npc_matt_${this.currentEvent.season}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hideFlag () {
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="bailey-header d-flex align-items-center mb-3">
|
||||
<div class="npc_bailey mr-3"></div>
|
||||
<div
|
||||
class="mr-3"
|
||||
:class="baileyClass"
|
||||
></div>
|
||||
<h1 v-once>
|
||||
{{ $t('newStuff') }}
|
||||
</h1>
|
||||
@@ -73,7 +76,14 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({ user: 'user.data' }),
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
baileyClass () {
|
||||
if (!this.currentEvent || !this.currentEvent.season) return 'npc_bailey';
|
||||
return `npc_bailey npc_bailey_${this.currentEvent.season}`;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async getPosts () {
|
||||
|
||||
@@ -78,7 +78,9 @@
|
||||
</h3>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div
|
||||
:class="columnClass"
|
||||
>
|
||||
<div class="form-group mb-0">
|
||||
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
||||
<div
|
||||
@@ -100,6 +102,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="col-md-7"
|
||||
v-if="currentEvent && currentEvent.promo && currentEvent.promo === 'g1g1'"
|
||||
>
|
||||
<h4 v-once> {{ $t('winterPromoGiftHeader') }} </h4>
|
||||
<p v-once> {{ $t('winterPromoGiftDetails1') }} </p>
|
||||
<p v-once> {{ $t('winterPromoGiftDetails2') }} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -204,6 +214,7 @@ export default {
|
||||
...mapState({
|
||||
userLoggedIn: 'user.data',
|
||||
originalSubscriptionBlocks: 'content.subscriptionBlocks',
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
subscriptionBlocks () {
|
||||
let subscriptionBlocks = toArray(this.originalSubscriptionBlocks);
|
||||
@@ -229,6 +240,10 @@ export default {
|
||||
}
|
||||
return this.userReceivingGems.profile.name;
|
||||
},
|
||||
columnClass () {
|
||||
if (this.currentEvent && this.currentEvent.promo && this.currentEvent.promo === 'g1g1') return 'col-md-5';
|
||||
return 'col-md-12';
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.$root.$on('habitica::send-gems', data => {
|
||||
|
||||
@@ -283,22 +283,36 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-center mt-4">
|
||||
<div class="d-flex justify-content-center align-items-start">
|
||||
<div class="d-flex flex-column align-items-center mt-4">
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-gift-box m-auto"
|
||||
v-html="icons.giftBox"
|
||||
>
|
||||
</div>
|
||||
<div class="muted mx-auto mt-3 mb-1">
|
||||
{{ $t('giftSubscription') }}
|
||||
</div>
|
||||
<a
|
||||
class="mx-auto"
|
||||
@click="showSelectUser()"
|
||||
>
|
||||
{{ $t('giftASubscription') }}
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
v-once
|
||||
class="svg-icon svg-gift-box m-auto"
|
||||
v-html="icons.giftBox"
|
||||
>
|
||||
v-if="currentEvent && currentEvent.promo && currentEvent.promo === 'g1g1'"
|
||||
class="m-5">
|
||||
</div>
|
||||
<div class="muted mx-auto mt-3 mb-1">
|
||||
{{ $t('giftSubscription') }}
|
||||
</div>
|
||||
<a
|
||||
class="mx-auto"
|
||||
@click="showSelectUser()"
|
||||
<div
|
||||
v-if="currentEvent && currentEvent.promo && currentEvent.promo === 'g1g1'"
|
||||
class="ml-5 mt-3"
|
||||
>
|
||||
{{ $t('giftASubscription') }}
|
||||
</a>
|
||||
<h2 v-once> {{ $t('winterPromoGiftHeader') }} </h2>
|
||||
<p v-once> {{ $t('winterPromoGiftDetails1') }} </p>
|
||||
<p v-once> {{ $t('winterPromoGiftDetails2') }} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -597,7 +611,11 @@ export default {
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState({ user: 'user.data', credentials: 'credentials' }),
|
||||
...mapState({
|
||||
user: 'user.data',
|
||||
credentials: 'credentials',
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
purchasedPlanIdInfo () {
|
||||
if (!this.subscriptionBlocks[this.user.purchased.plan.planId]) {
|
||||
// @TODO: find which subs are in the common
|
||||
|
||||
@@ -2,13 +2,21 @@
|
||||
<div class="featuredItems">
|
||||
<div
|
||||
class="background"
|
||||
:class="{broken: broken}"
|
||||
></div>
|
||||
<div
|
||||
class="background"
|
||||
:class="{cracked: broken, broken: broken}"
|
||||
:style="{
|
||||
background: bgUrl,
|
||||
'background-repeat': 'repeat-x',
|
||||
}"
|
||||
>
|
||||
<div class="npc">
|
||||
<div
|
||||
class="npc"
|
||||
:style="{
|
||||
background: npcUrl,
|
||||
'background-repeat': 'no-repeat',
|
||||
}"
|
||||
>
|
||||
<div class="featured-label">
|
||||
<span class="rectangle"></span>
|
||||
<span class="text">{{ npcName }}</span>
|
||||
@@ -65,8 +73,9 @@ export default {
|
||||
},
|
||||
mixins: [pinUtils],
|
||||
props: {
|
||||
broken: Boolean,
|
||||
npcName: String,
|
||||
bgUrl: String,
|
||||
npcUrl: String,
|
||||
featuredText: String,
|
||||
featuredItems: Array,
|
||||
},
|
||||
@@ -117,21 +126,6 @@ export default {
|
||||
width: 100%;
|
||||
height: 216px;
|
||||
}
|
||||
|
||||
.background.broken {
|
||||
background: url('~@/assets/images/npc/broken/market_broken_background.png');
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.background.cracked {
|
||||
background: url('~@/assets/images/npc/broken/market_broken_layer.png');
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.broken .npc {
|
||||
background: url('~@/assets/images/npc/broken/market_broken_npc.png');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-label {
|
||||
|
||||
@@ -17,7 +17,8 @@
|
||||
</div>
|
||||
<div slot="page">
|
||||
<featured-items-header
|
||||
:broken="broken"
|
||||
:bg-url="imageURLs.background"
|
||||
:npc-url="imageURLs.npc"
|
||||
:npc-name="'Alex'"
|
||||
:featured-text="market.featured.text"
|
||||
:featured-items="market.featured.items"
|
||||
@@ -105,7 +106,6 @@
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
@import '~@/assets/scss/variables.scss';
|
||||
|
||||
.fill-height {
|
||||
height: 38px; // button + margin + padding
|
||||
@@ -128,18 +128,8 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.featuredItems {
|
||||
.background {
|
||||
background: url('~@/assets/images/npc/#{$npc_market_flavor}/market_background.png');
|
||||
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.npc {
|
||||
background: url('~@/assets/images/npc/#{$npc_market_flavor}/market_banner_npc.png');
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.featured-label {
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
@@ -161,7 +151,7 @@
|
||||
import _filter from 'lodash/filter';
|
||||
import _map from 'lodash/map';
|
||||
import _throttle from 'lodash/throttle';
|
||||
import { mapState, mapGetters } from '@/libs/store';
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
import KeysToKennel from './keysToKennel';
|
||||
import EquipmentSection from './equipmentSection';
|
||||
@@ -229,9 +219,7 @@ export default {
|
||||
user: 'user.data',
|
||||
userStats: 'user.data.stats',
|
||||
userItems: 'user.data.items',
|
||||
}),
|
||||
...mapGetters({
|
||||
broken: 'worldState.brokenMarket',
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
market () {
|
||||
return shops.getMarketShop(this.user);
|
||||
@@ -297,6 +285,18 @@ export default {
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
imageURLs () {
|
||||
if (!this.currentEvent || !this.currentEvent.season) {
|
||||
return {
|
||||
background: 'url(/static/npc/normal/market_background.png)',
|
||||
npc: 'url(/static/npc/normal/market_banner_npc.png)',
|
||||
};
|
||||
}
|
||||
return {
|
||||
background: `url(/static/npc/${this.currentEvent.season}/market_background.png)`,
|
||||
npc: `url(/static/npc/${this.currentEvent.season}/market_banner_npc.png)`,
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
searchText: _throttle(function throttleSearch () {
|
||||
|
||||
@@ -64,13 +64,15 @@
|
||||
<div class="featuredItems">
|
||||
<div
|
||||
class="background"
|
||||
:class="{broken: broken}"
|
||||
></div>
|
||||
<div
|
||||
class="background"
|
||||
:class="{cracked: broken, broken: broken}"
|
||||
:style="{'background-image': imageURLs.background}"
|
||||
>
|
||||
<div class="npc">
|
||||
<div
|
||||
class="npc"
|
||||
:style="{'background-image': imageURLs.npc}"
|
||||
>
|
||||
<div class="featured-label">
|
||||
<span class="rectangle"></span>
|
||||
<span class="text">Ian</span>
|
||||
@@ -387,8 +389,6 @@
|
||||
height: 216px;
|
||||
|
||||
.background {
|
||||
background: url('~@/assets/images/npc/#{$npc_quests_flavor}/quest_shop_background.png');
|
||||
|
||||
background-repeat: repeat-x;
|
||||
|
||||
width: 100%;
|
||||
@@ -415,7 +415,6 @@
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background: url('~@/assets/images/npc/#{$npc_quests_flavor}/quest_shop_npc.png');
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.featured-label {
|
||||
@@ -425,23 +424,6 @@
|
||||
left: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.background.broken {
|
||||
background: url('~@/assets/images/npc/broken/quest_shop_broken_background.png');
|
||||
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.background.cracked {
|
||||
background: url('~@/assets/images/npc/broken/quest_shop_broken_layer.png');
|
||||
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.broken .npc {
|
||||
background: url('~@/assets/images/npc/broken/quest_shop_broken_npc.png');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -453,7 +435,7 @@ import _sortBy from 'lodash/sortBy';
|
||||
import _throttle from 'lodash/throttle';
|
||||
import _groupBy from 'lodash/groupBy';
|
||||
import _map from 'lodash/map';
|
||||
import { mapState, mapGetters } from '@/libs/store';
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
import ShopItem from '../shopItem';
|
||||
import Item from '@/components/inventory/item';
|
||||
@@ -514,9 +496,7 @@ export default {
|
||||
user: 'user.data',
|
||||
userStats: 'user.data.stats',
|
||||
userItems: 'user.data.items',
|
||||
}),
|
||||
...mapGetters({
|
||||
broken: 'worldState.brokenQuests',
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
shop () {
|
||||
return shops.getQuestShop(this.user);
|
||||
@@ -536,10 +516,21 @@ export default {
|
||||
}
|
||||
return [];
|
||||
},
|
||||
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
imageURLs () {
|
||||
if (!this.currentEvent || !this.currentEvent.season) {
|
||||
return {
|
||||
background: 'url(/static/npc/normal/quest_shop_background.png)',
|
||||
npc: 'url(/static/npc/normal/quest_shop_npc.png)',
|
||||
};
|
||||
}
|
||||
return {
|
||||
background: `url(/static/npc/${this.currentEvent.season}/quest_shop_background.png)`,
|
||||
npc: `url(/static/npc/${this.currentEvent.season}/quest_shop_npc.png)`,
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
searchText: _throttle(function throttleSearch () {
|
||||
|
||||
@@ -41,8 +41,12 @@
|
||||
<div
|
||||
class="background"
|
||||
:class="{opened: seasonal.opened}"
|
||||
:style="{'background-image': imageURLs.background}"
|
||||
>
|
||||
<div class="npc">
|
||||
<div
|
||||
class="npc"
|
||||
:style="{'background-image': imageURLs.npc}"
|
||||
>
|
||||
<div class="featured-label">
|
||||
<span class="rectangle"></span>
|
||||
<span class="text">Leslie</span>
|
||||
@@ -56,14 +60,9 @@
|
||||
<div class="featured-label with-border closed">
|
||||
<span class="rectangle"></span>
|
||||
<span
|
||||
v-if="!broken"
|
||||
class="text"
|
||||
v-html="seasonal.notes"
|
||||
></span>
|
||||
<span
|
||||
v-if="broken"
|
||||
class="text"
|
||||
>{{ $t('seasonalShopBrokenText') }}</span>
|
||||
<span class="rectangle"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -285,8 +284,6 @@
|
||||
height: 216px;
|
||||
|
||||
.background {
|
||||
background: url('~@/assets/images/npc/normal/seasonal_shop_closed_background.png');
|
||||
|
||||
background-repeat: repeat-x;
|
||||
|
||||
width: 100%;
|
||||
@@ -301,21 +298,8 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.background.opened {
|
||||
background: url('~@/assets/images/npc/#{$npc_seasonal_flavor}/seasonal_shop_opened_background.png');
|
||||
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.background.broken {
|
||||
background: url('~@/assets/images/npc/broken/seasonal_shop_broken_background.png');
|
||||
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.background.cracked {
|
||||
background: url('~@/assets/images/npc/broken/seasonal_shop_broken_layer.png');
|
||||
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
@@ -330,7 +314,6 @@
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 216px;
|
||||
background: url('~@/assets/images/npc/normal/seasonal_shop_closed_npc.png');
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.featured-label {
|
||||
@@ -342,12 +325,6 @@
|
||||
}
|
||||
|
||||
.opened .npc {
|
||||
background: url('~@/assets/images/npc/#{$npc_seasonal_flavor}/seasonal_shop_opened_npc.png');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.broken .npc {
|
||||
background: url('~@/assets/images/npc/broken/seasonal_shop_broken_npc.png');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
@@ -370,7 +347,7 @@ import _sortBy from 'lodash/sortBy';
|
||||
import _throttle from 'lodash/throttle';
|
||||
import _groupBy from 'lodash/groupBy';
|
||||
import _reverse from 'lodash/reverse';
|
||||
import { mapState, mapGetters } from '@/libs/store';
|
||||
import { mapState } from '@/libs/store';
|
||||
|
||||
import Checkbox from '@/components/ui/checkbox';
|
||||
import PinBadge from '@/components/ui/pinBadge';
|
||||
@@ -444,9 +421,7 @@ export default {
|
||||
content: 'content',
|
||||
user: 'user.data',
|
||||
userStats: 'user.data.stats',
|
||||
}),
|
||||
...mapGetters({
|
||||
broken: 'worldState.brokenSeasonalShop',
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
|
||||
usersOfficalPinnedItems () {
|
||||
@@ -513,6 +488,18 @@ export default {
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
imageURLs () {
|
||||
if (!this.seasonal.opened || !this.currentEvent || !this.currentEvent.season) {
|
||||
return {
|
||||
background: 'url(/static/npc/normal/seasonal_shop_closed_background.png)',
|
||||
npc: 'url(/static/npc/normal/seasonal_shop_closed_npc.png)',
|
||||
};
|
||||
}
|
||||
return {
|
||||
background: `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_background.png)`,
|
||||
npc: `url(/static/npc/${this.currentEvent.season}/seasonal_shop_opened_npc.png)`,
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
searchText: _throttle(function throttleSearch () {
|
||||
|
||||
@@ -44,10 +44,12 @@
|
||||
<div
|
||||
class="background"
|
||||
:class="{'background-closed': closed, 'background-open': !closed }"
|
||||
:style="{'background-image': imageURLs.background}"
|
||||
>
|
||||
<div
|
||||
class="npc"
|
||||
:class="{'closed': closed }"
|
||||
:style="{'background-image': imageURLs.npc}"
|
||||
>
|
||||
<div class="featured-label">
|
||||
<span class="rectangle"></span><span
|
||||
@@ -165,7 +167,6 @@
|
||||
<!-- eslint-disable max-len -->
|
||||
<style lang="scss">
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
@import '~@/assets/scss/variables.scss';
|
||||
|
||||
// these styles may be applied to other pages too
|
||||
|
||||
@@ -230,11 +231,9 @@
|
||||
align-items: center;
|
||||
}
|
||||
.background-open {
|
||||
background: url('~@/assets/images/npc/#{$npc_timetravelers_flavor}/time_travelers_background.png');
|
||||
height: 188px;
|
||||
}
|
||||
.background-closed {
|
||||
background: url('~@/assets/images/npc/normal/time_travelers_background.png');
|
||||
height: 216px;
|
||||
}
|
||||
|
||||
@@ -249,11 +248,9 @@
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 216px;
|
||||
background: url('~@/assets/images/npc/#{$npc_timetravelers_flavor}/time_travelers_open_banner.png');
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&.closed {
|
||||
background: url('~@/assets/images/npc/normal/time_travelers_closed_banner.png');
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
@@ -342,6 +339,7 @@ export default {
|
||||
user: 'user.data',
|
||||
userStats: 'user.data.stats',
|
||||
userItems: 'user.data.items',
|
||||
currentEvent: 'worldState.data.currentEvent',
|
||||
}),
|
||||
|
||||
closed () {
|
||||
@@ -392,6 +390,19 @@ export default {
|
||||
anyFilterSelected () {
|
||||
return Object.values(this.viewOptions).some(g => g.selected);
|
||||
},
|
||||
imageURLs () {
|
||||
if (!this.currentEvent || !this.currentEvent.season) {
|
||||
return {
|
||||
background: 'url(/static/npc/normal/time_travelers_background.png)',
|
||||
npc: this.closed ? 'url(/static/npc/normal/time_travelers_closed_banner.png)'
|
||||
: 'url(/static/npc/normal/time_travelers_open_banner.png)',
|
||||
};
|
||||
}
|
||||
return {
|
||||
background: `url(/static/npc/${this.currentEvent.season}/time_travelers_background.png)`,
|
||||
npc: `url(/static/npc/${this.currentEvent.season}/time_travelers_open_banner.png)`,
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
searchText: _throttle(function throttleSearch () {
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
</div>
|
||||
<img
|
||||
class="npc-background"
|
||||
src="~@/assets/images/npc/broken/rage-strike-seasonalShop-scaled@2x.png"
|
||||
>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
@@ -32,7 +31,6 @@
|
||||
</div>
|
||||
<img
|
||||
class="npc-background"
|
||||
src="~@/assets/images/npc/broken/rage-strike-market-scaled@2x.png"
|
||||
>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
@@ -51,7 +49,6 @@
|
||||
</div>
|
||||
<img
|
||||
class="npc-background"
|
||||
src="~@/assets/images/npc/broken/rage-strike-quests-scaled@2x.png"
|
||||
>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
|
||||
Reference in New Issue
Block a user