Quest Sidebar: Boss Pending Health inside the normal Bar (#13317)

website/client/config/storybook/config.js

@@ -38,6 +38,7 @@ import Vue from 'vue';
 import BootstrapVue from 'bootstrap-vue';
 import StoreModule from '@/libs/store';
 import getStore from '@/store';
+import '../../src/filters/registerGlobals';
 
 import i18n from '../../../common/script/i18n';
 
@@ -65,6 +66,9 @@ store.state.user.data = {
 
     },
   },
+  preferences: {
+
+  },
 };
 
 Vue.prototype.$store = store;

website/client/src/components/groups/group.stories.js

@@ -37,6 +37,9 @@ storiesOf('Group Components|Party/Quest States', module)
         _id: 'some-user',
         party: {
 
+        },
+        preferences: {
+
         },
       },
     },
@@ -68,6 +71,9 @@ storiesOf('Group Components|Party/Quest States', module)
         _id: 'some-user',
         party: {
 
+        },
+        preferences: {
+
         },
       },
     },
@@ -101,6 +107,9 @@ storiesOf('Group Components|Party/Quest States', module)
         _id: 'some-user',
         party: {
 
+        },
+        preferences: {
+
         },
       },
     },
@@ -122,6 +131,9 @@ storiesOf('Group Components|Party/Quest States', module)
         _id: '05ca98f4-4706-47b5-8d02-142e6e78ba2e',
         party: {
 
+        },
+        preferences: {
+
         },
       },
     },
@@ -143,6 +155,9 @@ storiesOf('Group Components|Party/Quest States', module)
         _id: 'just-a-member',
         party: {
 
+        },
+        preferences: {
+
         },
       },
     },
@@ -164,6 +179,9 @@ storiesOf('Group Components|Party/Quest States', module)
         _id: 'just-a-member',
         party: {
 
+        },
+        preferences: {
+
         },
       },
     },
@@ -190,6 +208,9 @@ storiesOf('Group Components|Party/Quest States', module)
             RSVPNeeded: true,
           },
         },
+        preferences: {
+
+        },
       },
     },
     challengeOptions: {},
@@ -218,6 +239,9 @@ storiesOf('Group Components|Party/Quest States', module)
             },
           },
         },
+        preferences: {
+
+        },
       },
     },
     challengeOptions: {},
@@ -246,6 +270,9 @@ storiesOf('Group Components|Party/Quest States', module)
             },
           },
         },
+        preferences: {
+
+        },
       },
     },
     challengeOptions: {},
@@ -274,6 +301,9 @@ storiesOf('Group Components|Party/Quest States', module)
             },
           },
         },
+        preferences: {
+
+        },
       },
     },
     challengeOptions: {},
@@ -302,6 +332,9 @@ storiesOf('Group Components|Party/Quest States', module)
             },
           },
         },
+        preferences: {
+
+        },
       },
     },
     challengeOptions: {},
@@ -330,6 +363,9 @@ storiesOf('Group Components|Party/Quest States', module)
             },
           },
         },
+        preferences: {
+
+        },
       },
     },
     challengeOptions: {},
@@ -355,6 +391,9 @@ storiesOf('Group Components|Party/Quest States', module)
         _id: 'some-user',
         party: {
 
+        },
+        preferences: {
+
         },
       },
     },

website/client/src/components/groups/questSidebarSection.vue

@@ -113,11 +113,11 @@
                   <div
                     class="boss-health-bar"
                     :style="{width: bossHpPercent + '%'}"
-                  ></div>
-                  <div
-                    class="pending-health-bar"
-                    :style="{width: pendingHpPercent + '%'}"
                   >
+                    <div
+                      class="pending-health-bar"
+                      :style="{width: pendingHpInBossHpPercent + '%'}"
+                    ></div>
                   </div>
                 </div>
               </div>
@@ -291,12 +291,16 @@
     height: 0.75rem;
 
     display: inline-block;
+    position: relative;
   }
 
   .pending-health-bar {
     height: 0.75rem;
     background-color: $yellow-50;
     display: inline-block;
+
+    position: absolute;
+    right: 0;
   }
 
   .rage-details {
@@ -677,6 +681,15 @@ export default {
     pendingHpPercent () {
       return percent(this.user.party.quest.progress.up, this.questData.boss.hp);
     },
+    pendingHpInBossHpPercent () {
+      // Pending more than the current hp left, it is the full % of the pending bar
+      if (this.user.party.quest.progress.up > this.group.quest.progress.hp) {
+        return 100;
+      }
+
+      // otherwise the percent inside that hp bar is needed
+      return percent(this.user.party.quest.progress.up, this.group.quest.progress.hp);
+    },
     questData () {
       if (!this.group.quest) return {};
       return quests.quests[this.group.quest.key];