feat(event): Winter Wonderland 2021 and Gift-One-Get-One Promotion

This commit is contained in:
Sabe Jones
2020-12-10 16:53:37 -06:00
parent 74ebcf919e
commit 53f19c4da3
282 changed files with 681 additions and 198 deletions
@@ -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',
+14 -3
View File
@@ -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">