old client structure

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

@@ -0,0 +1,180 @@
+<template lang="pug">
+base-notification(
+  :can-remove="false",
+  :notification="{}",
+  :read-after-click="false",
+  @click="action",
+  v-if="worldBoss.active"
+)
+  .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>