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
2025-12-19 07:37:25 +01:00 · 2018-02-14 13:43:10 -06:00
parent fd5ab32c43
commit cdcee8d169
21 changed files with 421 additions and 42 deletions
--- a/website/client/components/worldBossInfoModal.vue
+++ b/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>