feat(rage-strike): Seasonal Shop modal

website/client/components/groups/tavern.vue

@@ -1,6 +1,7 @@
 <template lang="pug">
 .row
   world-boss-info-modal
+  world-boss-rage-modal
   .col-12.col-sm-8.clearfix.standard-page
     .row
       .col-6.title-details
@@ -69,7 +70,7 @@
               .col-sm-5.d-flex
                 strong {{ $t('rageStrikes') }}
                 .svg-icon.boss-icon.information-icon.ml-2(v-html="icons.informationIcon", v-b-tooltip.hover.top="questData.boss.rage.description()")
-              .col-sm-2.text-center
+              .col-sm-2.text-center(@click="showWorldBossRage('seasonalShop')")
                 img.rage-strike(src="~assets/images/world-boss/rage_strike@2x.png", v-if="!group.quest.extra.worldDmg.seasonalShop")
                 img.rage-strike-active(src="~assets/images/world-boss/rage_strike-seasonalShop@2x.png", v-if="group.quest.extra.worldDmg.seasonalShop")
               .col-sm-2.text-center
@@ -505,7 +506,8 @@ import { TAVERN_ID } from '../../../common/script/constants';
 import chatMessage from '../chat/chatMessages';
 import autocomplete from '../chat/autoComplete';
 import communityGuidelines from './communityGuidelines';
-import worldBossInfoModal from '../worldBossInfoModal';
+import worldBossInfoModal from '../world-boss/worldBossInfoModal';
+import worldBossRageModal from '../world-boss/worldBossRageModal';
 
 import challengeIcon from 'assets/svg/challenge.svg';
 import chevronIcon from 'assets/svg/chevron-red.svg';
@@ -537,6 +539,7 @@ export default {
     autocomplete,
     communityGuidelines,
     worldBossInfoModal,
+    worldBossRageModal,
   },
   data () {
     return {
@@ -739,6 +742,11 @@ export default {
     showWorldBossInfo () {
       this.$root.$emit('bv::show::modal', 'world-boss-info');
     },
+    showWorldBossRage (npc) {
+      if (this.group.quest.extra.worldDmg[npc]) {
+        this.$root.$emit('bv::show::modal', 'world-boss-rage');
+      }
+    },
   },
 };
 </script>

website/client/components/world-boss/worldBossRageModal.vue

@@ -0,0 +1,57 @@
+<template lang="pug">
+  b-modal#world-boss-rage(title="", :hide-footer="true", :hide-header="true")
+    .modal-header.d-flex.align-items-center.justify-content-center
+      .reduce {{ $t('seasonalShopRageStrikeHeader') }}
+    img.npc-background(src='~assets/images/npc/broken/rage-strike-seasonalShop-scaled@2x.png')
+    .modal-body
+      .row
+        .col-12.text-center.padding-24
+          h2 {{ $t('seasonalShopRageStrikeLead') }}
+          p {{ $t('seasonalShopRageStrikeRecap') }}
+</template>
+
+<style>
+  #world-boss-rage .modal-body {
+    padding: 0;
+    width: 376px;
+  }
+  #world-boss-rage .modal-content {
+    width: 378px;
+  }
+</style>
+
+<style lang='scss' scoped>
+  .modal-header {
+    background-color: #FA8537;
+    color: white;
+    height: 2em;
+  }
+
+  .npc-background {
+    max-width: 376px;
+    height: auto;
+    margin-top: -1px;
+  }
+
+  .padding-24 {
+    padding-top: 1em;
+    padding-left: 3em;
+    padding-right: 3em;
+    padding-bottom: 1em;
+  }
+
+  .reduce {
+    font-size: 12px;
+  }
+
+</style>
+
+<script>
+  export default {
+    methods: {
+      close () {
+        this.$root.$emit('bv::hide::modal', 'world-boss-rage');
+      },
+    },
+  };
+</script>

website/common/locales/en/questsContent.json

@@ -663,6 +663,9 @@
   "questDysheartenerBossRageTitle": "Shattering Heartbreak",
   "questDysheartenerBossRageDescription": "The Rage Attack gauge fills when Habiticans miss their Dailies. If it fills up, the Dysheartener will unleash its Shattering Heartbreak attack on one of Habitica's shopkeepers, so be sure to do your tasks!",
   "questDysheartenerBossRageSeasonal": "`The Dysheartener uses SHATTERING HEARTBREAK!`\n\nOh, no! After feasting on our undone Dailies, the Dysheartener has gained the strength to unleash its Shattering Heartbreak attack. With a shrill shriek, it brings its spiny forelegs down upon the pavilion that houses the Seasonal Shop! The concussive blast of magic shreds the wood, and the Seasonal Sorceress is overcome by sorrow at the sight.\n\nQuickly, let's keep doing our Dailies so that the beast won't strike again!",
+  "seasonalShopRageStrikeHeader": "The Seasonal Shop was Attacked!",
+  "seasonalShopRageStrikeLead": "Leslie is Heartbroken!",
+  "seasonalShopRageStrikeRecap": "On February 21, our beloved Leslie the Seasonal Sorceress was devastated when the Dysheartener shattered the Seasonal Shop. Quickly, tackle your tasks to defeat the monster and help rebuild!",
   "questDysheartenerBossRageMarket": "`The Dysheartener uses SHATTERING HEARTBREAK!`\n\nHelp! After feasting on our incomplete Dailies, the Dysheartener lets out another Shattering Heartbreak attack, smashing the walls and floor of the Market! As stone rains down, Alex the Merchant weeps at his crushed merchandise, stricken by the destruction.\n\nWe can't let this happen again! Be sure to do all our your Dailies to prevent the Dysheartener from using its final strike.",
   "questDysheartenerBossRageQuests": "`The Dysheartener uses SHATTERING HEARTBREAK!`\n\nAaaah! We've left our Dailies undone again, and the Dysheartener has mustered the energy for one final blow against our beloved shopkeepers. The countryside around Ian the Quest Master is ripped apart by its Shattering Heartbreak attack, and Ian is struck to the core by the horrific vision. We're so close to defeating this monster.... Hurry! Don't stop now!",
   "questDysheartenerDropHippogriffPet": "Hopeful Hippogriff (Pet)",