Added world boss notification (#10030)

* Added world boss notification

* Updated styles

website/client/components/header/notifications/worldBoss.vue

@@ -0,0 +1,179 @@
+<template lang="pug">
+base-notification(
+  :can-remove="false",
+  :notification="{}",
+  :read-after-click="false",
+  @click="action"
+)
+  .background(slot="content")
+    .text
+      .title {{ $t('worldBoss') }}
+      .sub-title {{ $t('questDysheartenerText') }}
+    .d-flex.align-items-center.justify-content-left
+      div
+        .left-hearts
+      .float-right
+        .quest_dysheartener_notification
+        .phobia_dysheartener_notification
+    .health-bar.d-flex.align-items-center.justify-content-center
+      .svg-icon(v-html="icons.health")
+      .boss-health-wrap
+        .boss-health-bar(:style="{width: (parseInt(bossHp) / questData.boss.hp) * 100 + '%'}")
+      .pending-damage
+        .svg-icon(v-html="icons.sword")
+        span +{{parseInt(user.party.quest.progress.up) || 0}}
+</template>
+
+<style lang="scss" scoped>
+  .background {
+    position: relative;
+  }
+
+  .notification {
+    background-image: linear-gradient(to right, #410f2a, #931f4d 50%, #410f2a) !important;
+    padding: 0 !important;
+  }
+
+  .notification /deep/ .notification-content {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
+  .title, .sub-title {
+    color: #fff;
+  }
+
+  .title {
+    font-size: 14px;
+    font-weight: bold;
+  }
+
+  .text {
+    position: absolute;
+    margin-top: 1em;
+    margin-left: 1em;
+  }
+
+  .sub-title {
+    font-size: 14px;
+  }
+
+  .left-hearts {
+    background-size: 100%;
+    margin-left: 2em;
+    margin-right: 1em;
+    width: 106px;
+    height: 41px;
+    background-size: contain;
+  }
+
+  .left-hearts {
+    background-image: url('~client/assets/images/world-boss/left-hearts@3x.png');
+  }
+
+  .quest_dysheartener_notification, .phobia_dysheartener_notification {
+    width: 219px;
+    height: 64px;
+    background-size: 100%;
+  }
+
+  .phobia_dysheartener_notification {
+    display: none;
+  }
+
+  .quest_dysheartener_notification {
+    background-image: url('~client/assets/images/world-boss/mantis-static-notification@3x.png');
+  }
+
+  .phobia_dysheartener_notification {
+    display: none;
+    background-image: url('~client/assets/images/world-boss/heart-translucent-shadow-notification@3x.png');
+  }
+
+  .health-bar {
+    width: 378px;
+    height: 24px;
+    background-color: #410f2a;
+  }
+
+  .boss-health-wrap {
+    margin-left: .5em;
+    margin-right: .5em;
+    width: 274px;
+    height: 12px;
+    background-color: rgba(255, 255, 255, 0.24);
+    border-radius: 2px;
+  }
+
+  .boss-health-bar {
+    background-color: #f74e52;
+    height: 12px;
+    margin-bottom: .5em;
+    border-radius: 2px;
+  }
+
+  .svg-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .pending-damage {
+    .svg-icon {
+      display: inline-block;
+      margin-right: .2em;
+      margin-bottom: .2em;
+    }
+
+    span, .svg-icon {
+      vertical-align: bottom;
+    }
+
+    color: #fff;
+  }
+</style>
+
+<script>
+import quests from 'common/script/content/quests';
+
+import { mapState } from 'client/libs/store';
+import BaseNotification from './base';
+
+import health from 'assets/svg/health.svg';
+import sword from 'assets/svg/sword.svg';
+
+export default {
+  components: {
+    BaseNotification,
+  },
+  data () {
+    const questData = quests.quests.dysheartener;
+
+    return {
+      icons: Object.freeze({
+        health,
+        sword,
+      }),
+      questData,
+      worldBoss: {},
+    };
+  },
+  async mounted () {
+    const result = await this.$store.dispatch('worldState:getWorldState');
+    this.worldBoss = result.worldBoss;
+  },
+  computed: {
+    ...mapState({user: 'user.data'}),
+    bossHp () {
+      if (this.worldBoss && this.worldBoss.progress) {
+        return this.worldBoss.progress.hp;
+      }
+      return this.questData.boss.hp.toLocaleString();
+    },
+  },
+  methods: {
+    action () {
+      this.$router.push({name: 'tavern'});
+    },
+  },
+};
+</script>

website/client/components/header/notificationsDropdown.vue

@@ -15,6 +15,7 @@ menu-dropdown.item-notifications(:right="true", @toggled="handleOpenStatusChange
     )
       h4.dropdown-title(v-once) {{ $t('notifications') }}
       a.small-link.standard-link(@click="dismissAll", :disabled="notificationsCount === 0") {{ $t('dismissAll') }}
+    world-boss
     component(
       :is="notification.type",
       :key="notification.id",
@@ -28,46 +29,45 @@ menu-dropdown.item-notifications(:right="true", @toggled="handleOpenStatusChange
       .svg-icon(v-html="icons.success")
       h2 You're all caught up!
       p The notification fairies give you a raucous round of applause! Well done!
-
 </template>
 
 <style lang='scss' scoped>
-@import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/colors.scss';
 
-.dropdown-item {
+  .dropdown-item {
-  padding: 16px 24px;
+    padding: 16px 24px;
-  width: 378px;
+    width: 378px;
-}
-
-.dropdown-title {
-  margin-bottom: 0px;
-  margin-right: 8px;
-  line-height: 1.5;
-}
-
-.no-notifications {
-  h2, p {
-    text-align: center;
-    color: $gray-200 !important;
   }
 
-  h2 {
+  .dropdown-title {
-    margin-top: 24px;
+    margin-bottom: 0px;
+    margin-right: 8px;
+    line-height: 1.5;
   }
 
-  p {
+  .no-notifications {
-    white-space: normal;
+    h2, p {
-    margin-bottom: 43px;
+      text-align: center;
-    margin-left: 24px;
+      color: $gray-200 !important;
-    margin-right: 24px;
+    }
-  }
 
-  .svg-icon {
+    h2 {
-    margin: 0 auto;
+      margin-top: 24px;
-    width: 256px;
+    }
-    height: 104px;
+
+    p {
+      white-space: normal;
+      margin-bottom: 43px;
+      margin-left: 24px;
+      margin-right: 24px;
+    }
+
+    .svg-icon {
+      margin: 0 auto;
+      width: 256px;
+      height: 104px;
+    }
   }
-}
 </style>
 
 <script>
@@ -92,6 +92,7 @@ import NEW_MYSTERY_ITEMS from './notifications/newMysteryItems';
 import CARD_RECEIVED from './notifications/cardReceived';
 import NEW_INBOX_MESSAGE from './notifications/newInboxMessage';
 import NEW_CHAT_MESSAGE from './notifications/newChatMessage';
+import WORLD_BOSS from './notifications/worldBoss';
 
 export default {
   components: {
@@ -103,6 +104,7 @@ export default {
     QUEST_INVITATION, GROUP_TASK_APPROVAL, GROUP_TASK_APPROVED,
     UNALLOCATED_STATS_POINTS, NEW_MYSTERY_ITEMS, CARD_RECEIVED,
     NEW_INBOX_MESSAGE, NEW_CHAT_MESSAGE,
+    WorldBoss: WORLD_BOSS,
   },
   data () {
     return {

website/common/locales/en/groups.json

@@ -429,5 +429,6 @@
   "worldBossBullet1": "Complete tasks to damage the World Boss",
   "worldBossBullet2": "The World Boss won’t damage you for missed tasks, but its Rage meter will go up. If the bar fills up, the Boss will attack one of Habitica’s shopkeepers!",
   "worldBossBullet3": "You can continue with normal Quest Bosses, damage will apply to both",
-  "worldBossBullet4": "Check the Tavern regularly to see World Boss progress and Rage attacks"
+  "worldBossBullet4": "Check the Tavern regularly to see World Boss progress and Rage attacks",
+  "worldBoss": "World Boss"
 }