Merge b682c13 into f794caf

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,7 +26,6 @@
         .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
@@ -485,6 +485,7 @@ 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 challengeIcon from 'assets/svg/challenge.svg';
 import chevronIcon from 'assets/svg/chevron-red.svg';
@@ -515,6 +516,7 @@ export default {
     chatMessage,
     autocomplete,
     communityGuidelines,
+    worldBossInfoModal,
   },
   data () {
     return {
@@ -714,6 +716,9 @@ export default {
 
       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').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/images/world-boss/check.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"
 }