New notification type for boss damage (#12249)

* Add new notification type for boss damage with sword icon

* Use vars for color

website/client/src/components/snackbars/notification.vue

@@ -60,6 +60,21 @@
           <div v-html="notification.text"></div>
         </div>
       </div>
+      <div
+        v-if="notification.type === 'damage'"
+        class="row"
+      >
+        <div class="text col-7 offset-1">
+          <div>{{ message }}</div>
+        </div>
+        <div class="icon col-4">
+          <div
+            class="svg-icon"
+            v-html="icons.sword"
+          ></div>
+          <div v-html="notification.text"></div>
+        </div>
+      </div>
       <div
         v-if="['info', 'success', 'crit', 'lvl'].indexOf(notification.type) !== -1"
         class="row"
@@ -86,6 +101,8 @@
 </template>
 
 <style lang="scss" scoped>
+@import '~@/assets/scss/colors.scss';
+
   .notification {
     border-radius: 30px;
     background-color: #24cc8f;
@@ -133,6 +150,10 @@
     color: #2995cd;
   }
 
+  .damage .icon {
+    color: $gray-100;
+  }
+
   .icon {
     background: #fff;
     color: #ffa623;
@@ -171,6 +192,7 @@ import health from '@/assets/svg/health.svg';
 import gold from '@/assets/svg/gold.svg';
 import star from '@/assets/svg/star.svg';
 import mana from '@/assets/svg/mana.svg';
+import sword from '@/assets/svg/sword.svg';
 
 export default {
   props: ['notification'],
@@ -182,6 +204,7 @@ export default {
         gold,
         star,
         mana,
+        sword,
       }),
       show: true,
     };
@@ -197,6 +220,7 @@ export default {
       if (this.notification.type === 'xp') localeKey += 'Experience';
       if (this.notification.type === 'gp') localeKey += 'Gold';
       if (this.notification.type === 'streak') localeKey = 'streakCoins';
+      if (this.notification.type === 'damage') localeKey = 'bossDamage';
       return this.$t(localeKey);
       // This requires eight translatable strings, but that gives the
       // translators the most flexibility for matching gender/number

website/client/src/components/tasks/task.vue

@@ -1070,7 +1070,7 @@ export default {
       if (quest && user.party.quest && user.party.quest.key) {
         const userQuest = Content.quests[user.party.quest.key];
         if (quest.progressDelta && userQuest.boss) {
-          this.quest('questDamage', quest.progressDelta.toFixed(1));
+          this.damage(quest.progressDelta.toFixed(1));
         } else if (quest.collection && userQuest.collect) {
           user.party.quest.progress.collectedItems += 1;
           this.quest('questCollection', quest.collection);

website/client/src/mixins/notifications.js

@@ -29,6 +29,9 @@ export default {
     quest (type, val) {
       this.notify(this.$t(type, { val }), 'success');
     },
+    damage (val) {
+      this.notify(`${this.sign(val)}${val}`, 'damage');
+    },
     exp (val) {
       const message = getXPMessage(val);
       this.notify(message, 'xp', 'glyphicon glyphicon-star', this.sign(val));

website/client/src/mixins/spells.js

@@ -178,7 +178,7 @@ export default {
       if (questProgress > 0) {
         const userQuest = quests.quests[this.user.party.quest.key];
         if (userQuest.boss) {
-          this.quest('questDamage', questProgress.toFixed(1));
+          this.damage(questProgress.toFixed(1));
         } else if (userQuest.collection && userQuest.collect) {
           this.quest('questCollection', questProgress);
         }

website/common/locales/en/quests.json

@@ -37,7 +37,7 @@
   "questStart": "Once all members have either accepted or rejected, the quest begins. Only those that clicked \"accept\" will be able to participate in the quest and receive the drops. If members are pending too long (inactive?), the quest owner can start the quest without them by clicking \"Begin\". The quest owner can also cancel the quest and regain the quest scroll by clicking \"Cancel\".",
   "questStartBroken": "Once all members have either accepted or rejected, the quest begins... Only those that clicked \"accept\" will be able to participate in the quest and receive the drops... If members are pending too long (inactive?), the quest owner can start the quest without them by clicking \"Begin\"... The quest owner can also cancel the quest and regain the quest scroll by clicking \"Cancel\"...",
   "questCollection": "+ <%= val %> quest item(s) found",
-  "questDamage": "+ <%= val %> damage to boss",
+  "bossDamage": "You damaged the boss!",
   "begin": "Begin",
   "bossHP": "Boss HP",
   "bossStrength": "Boss Strength",