From 44eb245184eeb63b24a8c3fcfde79e8584b6e92d Mon Sep 17 00:00:00 2001
From: Carl Vuorinen <carl.vuorinen@gmail.com>
Date: Mon, 1 Jun 2020 16:42:54 +0300
Subject: [PATCH] New notification type for boss damage (#12249)

* Add new notification type for boss damage with sword icon

* Use vars for color
---
 .../src/components/snackbars/notification.vue | 24 +++++++++++++++++++
 website/client/src/components/tasks/task.vue  |  2 +-
 website/client/src/mixins/notifications.js    |  3 +++
 website/client/src/mixins/spells.js           |  2 +-
 website/common/locales/en/quests.json         |  2 +-
 5 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/website/client/src/components/snackbars/notification.vue b/website/client/src/components/snackbars/notification.vue
index e945e451a1..61f23c2ebe 100644
--- a/website/client/src/components/snackbars/notification.vue
+++ b/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
diff --git a/website/client/src/components/tasks/task.vue b/website/client/src/components/tasks/task.vue
index 45957cf217..b345a9f421 100644
--- a/website/client/src/components/tasks/task.vue
+++ b/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);
diff --git a/website/client/src/mixins/notifications.js b/website/client/src/mixins/notifications.js
index 6c9533ff9f..c5143a9ce3 100644
--- a/website/client/src/mixins/notifications.js
+++ b/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));
diff --git a/website/client/src/mixins/spells.js b/website/client/src/mixins/spells.js
index 9a40857c24..042bc4d38b 100644
--- a/website/client/src/mixins/spells.js
+++ b/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);
         }
diff --git a/website/common/locales/en/quests.json b/website/common/locales/en/quests.json
index d1fb6279a2..eb9eafe8a8 100644
--- a/website/common/locales/en/quests.json
+++ b/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",