World boss client (#9999)

* WIP(world-boss): client components partial

* WIP(world-boss): more client additions

* WIP(world-boss): some beautification

* WIP(world-boss): more Tavern beauty

* fix(world-boss): gradient adjustment

* fix(style): various WB tweaks

* fix(world-boss): better resolution Rage Strike

* fix(world-boss): alignment fixes

* Added world boss modal

* feat(world-boss): add info button

* fix(world-boss): move SVG and tweak padding

website/client/assets/css/sprites.css

@@ -1,18 +1,5 @@
-/* Comment out for holiday events */
+.quest_dysheartener {
-/* .npc_ian {
+  background: url("~assets/images/quest_dysheartener.gif") no-repeat;
-  background: url("/npc_ian.gif") no-repeat;
-  width: 78px;
-  height: 135px;
-} */
-
-.quest_burnout {
-  background: url("~assets/images/quest_burnout.gif") no-repeat;
-  width: 219px;
-  height: 249px;
-}
-
-.quest_bewilder {
-  background: url("~assets/images/quest_bewilder.gif") no-repeat;
   width: 219px;
   height: 219px;
 }

website/client/assets/svg/check-red.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10">
+    <path fill="#931F4D" fill-rule="evenodd" d="M4.662 9.832c-.312 0-.61-.123-.831-.344L0 5.657l1.662-1.662 2.934 2.934L10.534 0l1.785 1.529-6.764 7.893a1.182 1.182 0 0 1-.848.409l-.045.001"/>
+</svg>

website/client/assets/svg/chevron-red.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" viewBox="0 0 14 10">
+    <path fill="none" fill-rule="evenodd" stroke="#DC4069" stroke-width="3" d="M13 1L7 7 1 1"/>
+</svg>

website/client/assets/svg/information-red.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill="#DC4069" fill-rule="evenodd" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-2A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7 7h2v5H7V7zm0-3h2v2H7V4z"/>
+</svg>

website/client/assets/svg/rage.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16">
+    <g fill="none" fill-rule="nonzero">
+        <path fill="#24CC8F" d="M0 6l6.667-6 6.666 6-6.666 10z"/>
+        <path fill="#24CC8F" d="M0 6l6.667-6 6.666 6-6.666 10z"/>
+        <path fill="#FFF" d="M11.6 6.2l-4.933-1V1.8z" opacity=".25"/>
+        <path fill="#FFF" d="M6.667 5.2l-4.934 1 4.934-4.4z" opacity=".5"/>
+        <path fill="#5AE4B2" d="M6.667 5.2v8.4L1.733 6.2z"/>
+        <path fill="#1B996B" d="M11.6 6.2l-4.933 7.4V5.2z" opacity=".35"/>
+        <path fill="#F47825" d="M13.333 6L6.667 0 0 6l1.333 2L0 10l6.667 6 6.666-6L12 8z"/>
+        <path fill="#FFF" d="M11.6 6.2l-4.933-1V1.8z" opacity=".25"/>
+        <path fill="#FFF" d="M6.667 5.2l-4.934 1 4.934-4.4z" opacity=".5"/>
+        <path fill="#FFF" d="M6.667 5.2v8.4L5.37 11.653 1.733 6.2zM6.667 10.8V2.4l1.296 1.947L11.6 9.8z" opacity=".25"/>
+        <path fill="#B4591B" d="M11.6 6.2l-4.933 7.4V5.2zM1.733 9.8l4.934 1v3.4z" opacity=".35"/>
+        <path fill="#FFF" d="M6.667 10.8l4.933-1-4.933 4.4z" opacity=".5"/>
+        <path fill="#FFF" d="M1.733 9.8l4.934-7.4v8.4z" opacity=".25"/>
+        <path fill="#FFF" d="M3.5 9.533L4.54 8 3.5 6.467l3.167-2.8 3.166 2.8L8.793 8l1.04 1.533-3.166 2.8z" opacity=".5"/>
+    </g>
+</svg>

website/client/assets/svg/sword.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+    <defs>
+        <path id="a" d="M10.464 2.917L8.2 5.197v2.02l2.264-2.173V2.917z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd" transform="matrix(-1 0 0 1 16 .32)">
+        <path fill="#F06166" d="M6.13 9.204l2.111.934c.176.078.29.235.333.415.073.304.295 1.01.313 1.386.01.21-.214.356-.414.27l-3.529-1.623a.582.582 0 0 1-.254-.244L3 6.955c-.09-.192.063-.407.281-.397.391.017 1.112.218 1.444.3.186.045.351.15.432.319l.973 2.027z"/>
+        <path fill="#878190" d="M1.024 14.107l.91.875 2.363-.179.121-1.49 1.356-1.3 2.467 1.126 1.846-.477-.774-3.196 5.171-4.633.99-4.596h-.002V.235l-4.786.95L5.86 6.15l-3.33-.743-.497 1.77 1.174 2.37-1.355 1.3-1.552.118-.186 2.267.91.875z"/>
+        <path fill="#F06166" d="M2.976 13.366l-1.182-1.134 2.923-2.805 1.18 1.134z"/>
+        <path fill="#F06166" d="M1.126 12.874l.085-1.035 1.078-.082 1.182 1.135-.085 1.035-1.078.082z"/>
+        <path fill="#FFF" d="M11.312 2.088l.1 2.046 2.702-2.595c-.05-.045-2.086.18-2.802.55"/>
+        <path fill="#EDECEE" d="M11.262 2.113L5.553 7.862l1.463.492 4.396-4.22-.1-2.046-.05.025M5.553 7.862l-.05.052.622 1.294.89-.854-1.462-.492z"/>
+        <path fill="#EDECEE" d="M13.541 4.23l-2.13-.096 2.703-2.594c.046.048-.189 2.003-.573 2.69"/>
+        <path fill="#E1E0E3" d="M13.516 4.278l-5.989 5.48-.512-1.404 4.396-4.22 2.13.096-.025.048M7.527 9.758l-.054.048-1.348-.597.89-.854.512 1.403z"/>
+        <path fill="#D5C8FF" d="M2.289 11.757l-.25.878-.829-.796zM3.469 12.89l-.914.24.828.795z"/>
+        <path fill="#BDA8FF" d="M2.289 11.757l1.182 1.135-.916.237-.516-.494z"/>
+        <path fill="#BDA8FF" d="M1.127 12.876l.914-.24-.828-.796zM2.307 14.008l.25-.877.829.796z"/>
+        <path fill="#D5C8FF" d="M1.127 12.876L2.31 14.01l.247-.88-.516-.495z"/>
+        <path fill="#B36213" d="M4.9 11.523l-1.184-1.137.715-.685 1.184 1.136z"/>
+        <path fill="#E38F3D" d="M4.187 12.208l-1.184-1.136.714-.685L4.9 11.523z"/>
+        <path fill="#B36213" d="M3.473 12.894l-1.184-1.137.714-.685 1.184 1.136z"/>
+        <path fill="#C3C0C7" d="M6.132 9.205l-.974-2.027a.526.526 0 0 0-.153-.185.718.718 0 0 0-.279-.135c-.331-.08-1.052-.282-1.443-.3a.295.295 0 0 0-.242.108L4.46 7.829 5.503 9.81l.63-.605h-.001z"/>
+        <path fill="#A5A1AC" d="M4.46 7.829L3.04 6.666a.27.27 0 0 0-.039.29l1.69 3.387c.029.053.066.1.11.142l.702-.675L4.46 7.83z"/>
+        <path fill="#C3C0C7" d="M8.891 11.94c-.018-.375-.228-1.068-.312-1.385a.668.668 0 0 0-.14-.268.54.54 0 0 0-.193-.147l-2.111-.935v-.002l-.631.606 2.064 1.001 1.211 1.363a.275.275 0 0 0 .112-.233"/>
+        <path fill="#A5A1AC" d="M7.568 10.81l1.211 1.363a.3.3 0 0 1-.301.037l-3.53-1.622a.588.588 0 0 1-.147-.105l.703-.674 2.064 1.001z"/>
+        <mask id="b" fill="#fff">
+            <use xlink:href="#a"/>
+        </mask>
+        <path fill="#FFF" d="M9.824 7.45h.329V1.865h-.329zM8.2 8.862h.974V3.277H8.2z" mask="url(#b)"/>
+    </g>
+</svg>

website/client/components/groups/questSidebarSection.vue

@@ -53,12 +53,12 @@ div
                 .grey-progress-bar
                   .boss-health-bar(:style="{width: (group.quest.progress.hp / questData.boss.hp) * 100 + '%'}")
             .row.boss-details
-                .col-6
+              .col-6
-                  span.float-left
+                span.float-left
-                    | {{parseFloat(group.quest.progress.hp).toFixed(2)}} / {{parseFloat(questData.boss.hp).toFixed(2)}}
+                  | {{parseFloat(group.quest.progress.hp).toFixed(2)}} / {{parseFloat(questData.boss.hp).toFixed(2)}}
-                .col-6(v-if='userIsOnQuest')
+              .col-6(v-if='userIsOnQuest')
-                  // @TODO: Why do we not sync quset progress on the group doc? Each user could have different progress
+                // @TODO: Why do we not sync quset progress on the group doc? Each user could have different progress
-                  span.float-right {{parseFloat(user.party.quest.progress.up).toFixed(1) || 0}} pending damage
+                span.float-right {{parseFloat(user.party.quest.progress.up).toFixed(1) || 0}} pending damage
             .row.rage-bar-row(v-if='questData.boss.rage')
               .col-12
                 .grey-progress-bar

website/client/components/groups/tavern.vue

@@ -1,5 +1,6 @@
 <template lang="pug">
 .row
+  world-boss-info-modal
   .col-12.col-sm-8.clearfix.standard-page
     .row
       .col-6.title-details
@@ -25,12 +26,65 @@
         .row
           .hr.col-12
           chat-message(:chat.sync='group.chat', :group-id='group._id', :group-name='group.name')
-
   .col-12.col-sm-4.sidebar
     .section
       .grassy-meadow-backdrop
         .daniel_front
 
+      .boss-section
+        .world-boss(v-if='group && group.quest && group.quest.active', :style="{background: questData.colors.dark, 'border-color': questData.colors.extralight, 'outline-color': questData.colors.light}")
+          .corner-decoration(:style="{top: '-2px', right: '-2px'}")
+          .corner-decoration(:style="{top: '-2px', left: '-2px'}")
+          .corner-decoration(:style="{bottom: '-2px', right: '-2px'}")
+          .corner-decoration(:style="{bottom: '-2px', left: '-2px'}")
+          .text-center.float-bar
+            strong.reduce.boss-event(:style="{background: questData.colors.dark}") {{ $t('worldBossEvent') }}
+          .boss-gradient.pb-3.pt-3
+            p.text-center.reduce(:style="{color: questData.colors.extralight}") {{ $t(`${questData.key}ArtCredit`) }}
+            .quest-boss(:class="'background_' + questData.key")
+              .quest-boss(:class="'quest_' + questData.key")
+          .p-3
+            .row.d-flex.align-items-center.mb-2
+              .col-sm-6
+                strong.float-left {{ questData.boss.name() }}
+              .col-sm-6
+                span.d-flex.float-right
+                  .svg-icon.boss-icon(v-html="icons.swordIcon")
+                  span.ml-1.reduce(:style="{color: questData.colors.extralight}") {{ $t('pendingDamage', {damage: pendingDamage()}) }}
+            .grey-progress-bar.mb-1
+              .boss-health-bar(:style="{width: (group.quest.progress.hp / questData.boss.hp) * 100 + '%'}")
+            span.d-flex.align-items-center
+              .svg-icon.boss-icon(v-html="icons.healthIcon")
+              span.reduce.ml-1.pt-1 {{ $t('bossHealth', {currentHealth: bossCurrentHealth(), maxHealth: questData.boss.hp.toLocaleString()}) }}
+            .mt-3.mb-2
+              strong.mr-1 {{ $t('rageAttack') }}
+              span {{ questData.boss.rage.title() }}
+            .grey-progress-bar.mb-1
+              .boss-health-bar.rage-bar(:style="{width: (group.quest.progress.rage / questData.boss.rage.value) * 100 + '%'}")
+            span.d-flex.align-items-center
+              .svg-icon.boss-icon(v-html="icons.rageIcon")
+              span.reduce.ml-1.pt-1 {{ $t('bossRage', {currentRage: bossCurrentRage(), maxRage: questData.boss.rage.value.toLocaleString()}) }}
+            .row.d-flex.align-items-center.mb-2.mt-2
+              .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
+                img.rage-strike(src="~assets/images/rage_strike2x.png")
+              .col-sm-2
+                img.rage-strike(src="~assets/images/rage_strike2x.png")
+              .col-sm-2
+                img.rage-strike(src="~assets/images/rage_strike2x.png")
+            .boss-description.p-3(:style="{'border-color': questData.colors.extralight}", @click="sections.worldBoss = !sections.worldBoss")
+              strong.float-left {{ $t('worldBossDescription') }}
+              .float-right
+                .toggle-down(v-if="!sections.worldBoss")
+                  .svg-icon.boss-icon(v-html="icons.chevronIcon")
+                .toggle-up(v-if="sections.worldBoss")
+                  .svg-icon.boss-icon.reverse(v-html="icons.chevronIcon")
+            .mt-3(v-if="sections.worldBoss", v-html="questData.notes()")
+        .text-center.mt-4
+          .world-boss-info-button(@click="showWorldBossInfo()") {{$t('whatIsWorldBoss') }}
+
       .sleep.below-header-sections
         strong(v-once) {{ $t('sleepDescription') }}
         ul
@@ -194,7 +248,7 @@
     padding: 0em;
 
     .below-header-sections {
-      padding: 1em;
+      padding: 1em 1.75em 1em 1.75em;
     }
   }
 
@@ -223,10 +277,6 @@
     margin: 0 auto;
   }
 
-  .sleep {
-    margin-top: 1em;
-  }
-
   .svg-icon {
     width: 10px;
     display: inline-block;
@@ -253,6 +303,16 @@
     width: 8px;
   }
 
+  .boss-icon {
+    width: 16px;
+    margin-top: .1em;
+    margin-left: 0;
+  }
+
+  .boss-icon-large {
+    width: 48px;
+  }
+
   .staff {
     margin-bottom: 1em;
 
@@ -335,6 +395,97 @@
     color: $black;
   }
 
+  .boss-section {
+    padding: 1.75em;
+  }
+
+  .world-boss {
+    color: $white;
+    border-style: solid;
+    border-width: 2px;
+    outline-style: solid;
+    outline-width: 2px;
+    margin: 2px;
+    position: relative;
+  }
+
+  .quest-boss {
+    margin: 1em auto;
+  }
+
+  .grey-progress-bar {
+    width: 100%;
+    height: 15px;
+    background-color: rgba(255, 255, 255, 0.24);
+    border-radius: 2px;
+  }
+
+  .boss-health-bar {
+    width: 80%;
+    height: 15px;
+    margin-bottom: .5em;
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+    background-color: #f74e52;
+  }
+
+  .boss-health-bar.rage-bar {
+    background-color: #ff944c;
+  }
+
+  .boss-gradient {
+    background-image: linear-gradient(to bottom, #401f2a, #931f4d);
+    margin-top: -1.4em;
+  }
+
+  .boss-description {
+    border-top: 1px solid;
+    margin-left: -16px;
+    margin-right: -16px;
+    padding: .25em 0 0 .25em;
+  }
+
+  .float-bar {
+    position: relative;
+    top: -.75em;
+  }
+
+  .boss-event {
+    padding: .5em 3em .5em 3em;
+    border-radius: 2px;
+  }
+
+  .corner-decoration {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    background-color: inherit;
+    border: inherit;
+    outline: inherit;
+  }
+
+  .reverse {
+    transform: rotate(180deg);
+  }
+
+  .reduce {
+    font-size: 12px;
+  }
+
+  .rage-strike {
+    max-width: 50px;
+    height: auto;
+  }
+
+  .world-boss-info-button {
+    width: 100%;
+    background-color: $gray-500;
+    border-radius: 2px;
+    font-size: 14px;
+    color: $blue-10;
+    padding: 1em;
+  }
+
 </style>
 
 <script>
@@ -345,14 +496,18 @@ 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 gemIcon from 'assets/svg/gem.svg';
-import questIcon from 'assets/svg/quest.svg';
 import challengeIcon from 'assets/svg/challenge.svg';
-import informationIcon from 'assets/svg/information.svg';
+import chevronIcon from 'assets/svg/chevron-red.svg';
-import questBackground from 'assets/svg/quest-background-border.svg';
-import upIcon from 'assets/svg/up.svg';
 import downIcon from 'assets/svg/down.svg';
+import gemIcon from 'assets/svg/gem.svg';
+import healthIcon from 'assets/svg/health.svg';
+import informationIconRed from 'assets/svg/information-red.svg';
+import questBackground from 'assets/svg/quest-background-border.svg';
+import rageIcon from 'assets/svg/rage.svg';
+import swordIcon from 'assets/svg/sword.svg';
+import upIcon from 'assets/svg/up.svg';
 
 import tier1 from 'assets/svg/tier-1.svg';
 import tier2 from 'assets/svg/tier-2.svg';
@@ -365,16 +520,28 @@ import tierMod from 'assets/svg/tier-mod.svg';
 import tierNPC from 'assets/svg/tier-npc.svg';
 import tierStaff from 'assets/svg/tier-staff.svg';
 
+import quests from 'common/script/content/quests';
+
 export default {
   components: {
     chatMessage,
     autocomplete,
     communityGuidelines,
+    worldBossInfoModal,
   },
   data () {
     return {
       groupId: TAVERN_ID,
       icons: Object.freeze({
+        challengeIcon,
+        chevronIcon,
+        downIcon,
+        gem: gemIcon,
+        healthIcon,
+        informationIcon: informationIconRed,
+        questBackground,
+        rageIcon,
+        swordIcon,
         tier1,
         tier2,
         tier3,
@@ -385,13 +552,7 @@ export default {
         tierMod,
         tierNPC,
         tierStaff,
-        gem: gemIcon,
-        questIcon,
-        challengeIcon,
-        information: informationIcon,
-        questBackground,
         upIcon,
-        downIcon,
       }),
       group: {
         chat: [],
@@ -400,6 +561,7 @@ export default {
         staff: true,
         helpfulLinks: true,
         playerTiers: true,
+        worldBoss: true,
       },
       staff: [
         {
@@ -488,6 +650,10 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
+    questData () {
+      if (!this.group.quest) return {};
+      return quests.quests[this.group.quest.key];
+    },
   },
   async mounted () {
     this.group = await this.$store.dispatch('guilds:getGroup', {groupId: TAVERN_ID});
@@ -547,6 +713,23 @@ export default {
     reverseChat () {
       this.group.chat.reverse();
     },
+    pendingDamage () {
+      if (!this.user.party.quest.progress.up) return 0;
+      return parseFloat(this.user.party.quest.progress.up).toFixed(1);
+    },
+    bossCurrentHealth () {
+      if (!this.group.quest.progress.hp) return 0;
+
+      return Math.ceil(parseFloat(this.group.quest.progress.hp)).toLocaleString();
+    },
+    bossCurrentRage () {
+      if (!this.group.quest.progress.hp) return 0;
+
+      return Math.floor(parseFloat(this.group.quest.progress.rage)).toLocaleString();
+    },
+    showWorldBossInfo () {
+      this.$root.$emit('bv::show::modal', 'world-boss-info');
+    },
   },
 };
 </script>

website/client/components/worldBossInfoModal.vue

@@ -0,0 +1,135 @@
+<template lang="pug">
+  b-modal#world-boss-info(title="", size='md', :hide-footer="true", :hide-header="true")
+    .modal-header.d-flex
+      .left-hearts
+      .quest_dysheartener_modal
+      .right-hearts
+    .modal-body
+      .row
+        .col-12.text-center
+          h2 {{ $t('whatIsWorldBoss') }}
+          p.text-center {{ $t('worldBossDesc') }}
+      .row
+        .col-12
+          .bullet-point.d-flex.align-items-center.justify-content-left(v-for='bullet in bullets')
+            .check-icon
+              .svg-icon.red-check(v-html="icons.redCheck")
+            .info {{ $t(bullet) }}
+    .row
+      .col-12.text-center
+        a(href='http://habitica.wikia.com/wiki/World_Bosses' target='_blank').footer-link {{ $t('worldBossLink') }}
+</template>
+
+<style>
+  #world-boss-info .modal-body {
+    padding: 0;
+  }
+</style>
+
+<style scoped>
+  .modal-header {
+    background-image: linear-gradient(to right, #410f2a, #931f4d 50%, #410f2a);
+    margin-bottom: .25em;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  .modal-body {
+    padding: 1.5em !important;
+  }
+
+  h2 {
+    font-size: 24px;
+    font-weight: bold;
+    color: #931f4d;
+  }
+
+  p, .info {
+    font-size: 16px;
+    color: #4e4a57;
+  }
+
+  .info {
+    max-width: 400px;
+    margin-bottom: 1em;
+  }
+
+  .bullet-point {
+    margin: 0 auto;
+  }
+
+  .check-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 1000px;
+    border: solid 2px #e1e0e3;
+    margin-right: 1em;
+  }
+
+  .left-hearts, .right-hearts {
+    background-size: 100%;
+    margin: 1em;
+    width: 109px;
+    height: 70px;
+  }
+
+  .left-hearts {
+    background-image: url('~client/assets/images/world-boss/left-hearts@3x.png');
+  }
+
+  .right-hearts {
+    background-image: url('~client/assets/images/world-boss/right-hearts@3x.png');
+  }
+
+  .red-check {
+    width: 15px;
+    height: 10px;
+    margin-top: 0.6em;
+    margin-left: .5em;
+  }
+
+  .quest_dysheartener_modal, .phobia_dysheartener_modal {
+    width: 219px;
+    height: 120px;
+    background-size: 100%;
+  }
+
+  .quest_dysheartener_modal {
+    background-image: url('~client/assets/images/world-boss/mantis-static@3x.png');
+  }
+
+  .phobia_dysheartener_modal {
+    background-image: url('~client/assets/images/world-boss/heart-translucent-shadow@3x.png');
+  }
+
+  .footer-link {
+    color: #2995cd;
+    margin-bottom: 1.5em;
+    display: block;
+  }
+</style>
+
+<script>
+import redCheck from 'assets/svg/check-red.svg';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        redCheck,
+      }),
+      bullets: [
+        'worldBossBullet1',
+        'worldBossBullet2',
+        'worldBossBullet3',
+        'worldBossBullet4',
+      ],
+    };
+  },
+  methods: {
+    close () {
+      this.$root.$emit('bv::hide::modal', 'world-boss-info');
+    },
+  },
+};
+</script>

website/common/locales/en/groups.json

@@ -421,5 +421,13 @@
   "wouldYouParticipate": "Would you like to participate?",
   "managerAdded": "Manager added successfully",
   "managerRemoved": "Manager removed successfully",
-  "leaderChanged": "Leader has been changed"
+  "leaderChanged": "Leader has been changed",
+
+  "whatIsWorldBoss": "What is a World Boss?",
+  "worldBossDesc": "A World Boss is a special event that brings the Habitica community together to take down a powerful monster with their tasks! All Habitica users are rewarded upon its defeat, even those who have been resting in the Inn or have not used Habitica for the entirety of the quest.",
+  "worldBossLink": "Read more about the previous World Bosses of Habitica on the Wiki.",
+  "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"
 }

website/common/locales/en/npc.json

@@ -35,6 +35,9 @@
   "danielTextBroken": "Welcome to the Tavern... I guess... If you need to rest, I'll set you up at the Inn... While checked-in, your Dailies won't hurt you at the day's end, but you can still check them off... if you have the energy...",
   "danielText2Broken": "Oh... If you are participating in a boss quest, the boss will still damage you for your party mates' missed Dailies... Also, your own damage to the Boss (or items collected) will not be applied until you check out of the Inn...",
 
+  "worldBossEvent": "World Boss Event",
+  "worldBossDescription": "World Boss Description",
+
   "alexander": "Alexander the Merchant",
   "welcomeMarket": "Welcome to the Market! Buy hard-to-find eggs and potions! Sell your extras! Commission useful services! Come see what we have to offer.",
   "welcomeMarketMobile": "Welcome to the Market! Buy hard-to-find eggs and potions! Come see what we have to offer.",

website/common/locales/en/quests.json

@@ -121,5 +121,10 @@
   "createAccountQuest": "You received this quest when you joined Habitica! If a friend joins, they'll get one too.",
   "questBundles": "Discounted Quest Bundles",
   "buyQuestBundle": "Buy Quest Bundle",
-  "noQuestToStart": "Can’t find a quest to start? Try checking out the Quest Shop in the Market for new releases!"
+  "noQuestToStart": "Can’t find a quest to start? Try checking out the Quest Shop in the Market for new releases!",
+  "pendingDamage": "<%= damage %> pending damage",
+  "bossHealth": "<%= currentHealth %> / <%= maxHealth %> Health",
+  "rageAttack": "Rage Attack:",
+  "bossRage": "<%= currentRage %> / <%= maxRage %> Rage",
+  "rageStrikes": "Rage Strikes"
 }

website/common/locales/en/questsContent.json

@@ -661,10 +661,11 @@
   "questDysheartenerCompletion": "<strong>The Dysheartener is DEFEATED!</strong><br><br>Together, everyone in Habitica strikes a final blow to their tasks, and the Dysheartener rears back, shrieking with dismay. “What's wrong, Dysheartener?” AnnDeLune calls, eyes sparkling. “Feeling discouraged?”<br><br>Glowing pink fractures crack across the Dysheartener's carapace, and it shatters in a puff of pink smoke. As a renewed sense of vigor and determination sweeps across the land, a flurry of delightful sweets rains down upon everyone.<br><br>The crowd cheers wildly, hugging each other as their pets happily chew on the belated Valentine's treats. Suddenly, a joyful chorus of song cascades through the air, and gleaming silhouettes soar across the sky.<br><br>Our newly-invigorated optimism has attracted a flock of Hopeful Hippogriffs! The graceful creatures alight upon the ground, ruffling their feathers with interest and prancing about. “It looks like we've made some new friends to help keep our spirits high, even when our tasks are daunting,” Lemoness says.<br><br>Beffymaroo already has her arms full with feathered fluffballs. “Maybe they'll help us rebuild the damaged areas of Habitica!”<br><br>Crooning and singing, the Hippogriffs lead the way as all the Habitcans work together to restore our beloved home.",
   "questDysheartenerCompletionChat": "`The Dysheartener is DEFEATED!`\n\nTogether, everyone in Habitica strikes a final blow to their tasks, and the Dysheartener rears back, shrieking with dismay. “What's wrong, Dysheartener?” AnnDeLune calls, eyes sparkling. “Feeling discouraged?”\n\nGlowing pink fractures crack across the Dysheartener's carapace, and it shatters in a puff of pink smoke. As a renewed sense of vigor and determination sweeps across the land, a flurry of delightful sweets rains down upon everyone.\n\nThe crowd cheers wildly, hugging each other as their pets happily chew on the belated Valentine's treats. Suddenly, a joyful chorus of song cascades through the air, and gleaming silhouettes soar across the sky.\n\nOur newly-invigorated optimism has attracted a flock of Hopeful Hippogriffs! The graceful creatures alight upon the ground, ruffling their feathers with interest and prancing about. “It looks like we've made some new friends to help keep our spirits high, even when our tasks are daunting,” Lemoness says.\n\nBeffymaroo already has her arms full with feathered fluffballs. “Maybe they'll help us rebuild the damaged areas of Habitica!”\n\nCrooning and singing, the Hippogriffs lead the way as all the Habitcans work together to restore our beloved home.",
   "questDysheartenerBossRageTitle": "Shattering Heartbreak",
-  "questDysheartenerBossRageDescription": "When this gauge fills, the Dysheartener will unleash its Shattering Heartbreak on Habitica!",
+  "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 gazebo 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!",
   "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)",
-  "questDysheartenerDropHippogriffMount": "Hopeful Hippogriff (Mount)"
+  "questDysheartenerDropHippogriffMount": "Hopeful Hippogriff (Mount)",
+  "dysheartenerArtCredit": "Artwork by @AnnDeLune"
 }