Merge branch 'sabrecat/chat-warning' into sabrecat/unsociable

website/client/.eslintrc.js

@@ -14,6 +14,8 @@ module.exports = {
     // TODO find a way to let eslint understand webpack aliases
     'import/no-unresolved': 'off',
     'import/extensions': 'off',
+    'vue/component-tags-order': 'off',
+    'vue/no-mutating-props': 'off',
     'vue/no-v-html': 'off',
     'vue/html-self-closing': ['error', {
       html: {

website/client/src/app.vue

@@ -41,6 +41,7 @@
       <router-view v-if="!isUserLoggedIn || isStaticPage" />
       <template v-else>
         <template v-if="isUserLoaded">
+          <chat-banner />
           <damage-paused-banner />
           <gems-promo-banner />
           <gift-promo-banner />
@@ -159,6 +160,7 @@ import { loadProgressBar } from 'axios-progress-bar';
 import birthdayModal from '@/components/news/birthdayModal';
 import AppMenu from './components/header/menu';
 import AppHeader from './components/header/index';
+import ChatBanner from './components/header/banners/chatBanner';
 import DamagePausedBanner from './components/header/banners/damagePaused';
 import GemsPromoBanner from './components/header/banners/gemsPromo';
 import GiftPromoBanner from './components/header/banners/giftPromo';
@@ -198,6 +200,7 @@ export default {
     AppHeader,
     AppFooter,
     birthdayModal,
+    ChatBanner,
     DamagePausedBanner,
     GemsPromoBanner,
     GiftPromoBanner,

website/client/src/components/header/banners/base.vue

@@ -6,13 +6,10 @@
     :style="{height}"
   >
     <slot name="content"></slot>
-    <div
+    <close-x
       v-if="canClose"
-      class="close-icon svg-icon icon-12"
+      @close="close()"
-
+    />
-      @click="close()"
-      v-html="icons.close"
-    ></div>
   </div>
 </template>
 
@@ -30,32 +27,24 @@ body.modal-open .habitica-top-banner {
   padding-left: 1.5rem;
   padding-right: 1.625rem;
   z-index: 1300;
-}
 
-.close-icon.svg-icon {
+  .modal-close {
-  position: relative;
+    position: unset;
-  top: 0;
-  right: 0;
-  opacity: 0.48;
-
-  & ::v-deep svg path {
-    stroke: $white !important;
-  }
-
-  &:hover {
-    opacity: 0.75;
   }
 }
 </style>
 
 <script>
-import closeIcon from '@/assets/svg/close.svg';
+import closeX from '@/components/ui/closeX';
 import {
   clearBannerSetting, hideBanner, isBannerHidden, updateBannerHeight,
 } from '@/libs/banner.func';
 import { EVENTS } from '@/libs/events';
 
 export default {
+  components: {
+    closeX,
+  },
   props: {
     bannerId: {
       type: String,
@@ -82,9 +71,6 @@ export default {
   },
   data () {
     return {
-      icons: Object.freeze({
-        close: closeIcon,
-      }),
       hidden: false,
     };
   },
@@ -119,8 +105,6 @@ export default {
     close () {
       hideBanner(this.bannerId);
       this.hidden = true;
-
-      this.$root.$emit(EVENTS.BANNER_HIDDEN, this.bannerId);
     },
   },
 };

website/client/src/components/header/banners/chatBanner.vue

@@ -0,0 +1,67 @@
+<template>
+  <base-banner
+    banner-id="chat-warning"
+    banner-class="chat-banner"
+    class="chat-banner"
+    height="3rem"
+    v-if="showChatWarning"
+    :class="{faq: faqPage}"
+  >
+    <div
+      slot="content"
+      class="w-100 text-center"
+      v-html="$t('chatSunsetWarning')"
+    >
+    </div>
+  </base-banner>
+</template>
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .chat-banner {
+    width: 100%;
+    min-height: 48px;
+    padding: 8px;
+    color: $orange-1;
+    background-color: $orange-100;
+    line-height: 1.71;
+
+    a {
+      color: $orange-1;
+      text-decoration: underline;
+
+      &:hover {
+        color: $orange-1;
+      }
+    }
+
+    &.faq {
+      position: fixed;
+      top: 3.5rem;
+    }
+  }
+
+</style>
+
+<script>
+import BaseBanner from './base';
+
+export default {
+  components: {
+    BaseBanner,
+  },
+  computed: {
+    faqPage () {
+      return (this.$route.fullPath.indexOf('/faq')) !== -1;
+    },
+    showChatWarning () {
+      if (this.$route.fullPath.indexOf('/groups') !== -1) return true;
+      if (this.$route.fullPath.indexOf('/tavern-and-guilds') !== -1) return false;
+      if (this.$route.fullPath.indexOf('/tavern') !== -1) return true;
+      return this.faqPage;
+    },
+  },
+};
+
+</script>

website/client/src/components/header/menu.vue

@@ -784,9 +784,11 @@ export default {
   async mounted () {
     await this.getUserGroupPlans();
     await this.getUserParty();
-    Array.from(document.getElementById('menu_collapse').getElementsByTagName('a')).forEach(link => {
+    if (document.getElementById('menu_collapse')) {
-      link.addEventListener('click', this.closeMenu);
+      Array.from(document.getElementById('menu_collapse').getElementsByTagName('a')).forEach(link => {
-    });
+        link.addEventListener('click', this.closeMenu);
+      });
+    }
     Array.from(document.getElementsByClassName('topbar-item')).forEach(link => {
       link.addEventListener('mouseenter', this.dropdownDesktop);
       link.addEventListener('mouseleave', this.dropdownDesktop);

website/client/src/components/snackbars/notifications.vue

@@ -106,6 +106,7 @@ export default {
       preventMultipleWatchExecution: false,
       eventPromoBannerHeight: null,
       sleepingBannerHeight: null,
+      warningBannerHeight: null,
     };
   },
   computed: {
@@ -135,6 +136,10 @@ export default {
     notificationBannerHeight () {
       let scrollPosToCheck = 56;
 
+      if (this.warningBannerHeight) {
+        scrollPosToCheck += this.warningBannerHeight;
+      }
+
       if (this.sleepingBannerHeight) {
         scrollPosToCheck += this.sleepingBannerHeight;
       }
@@ -361,6 +366,7 @@ export default {
 
     updateBannerHeightAndScrollY () {
       this.updateEventBannerHeight();
+      this.warningBannerHeight = getBannerHeight('chat-warning');
       this.sleepingBannerHeight = getBannerHeight('damage-paused');
       this.updateScrollY();
     },

website/client/src/components/static/chatSunsetFaq.vue

@@ -0,0 +1,585 @@
+<template>
+  <div class="col-12 col-sm-8 container-fluid d-flex mx-auto main-bg">
+    <div class="col-12 col-sm-8">
+      <div class="row">
+        <!-- title goes here -->
+        <div class="title-details">
+          <h1 v-once>
+            {{ $t('sunsetFaqTitle') }}
+          </h1>
+        </div>
+        <div class="section">
+          <div class="body-text">
+            <p v-html="$t('sunsetFaqPara1')"></p>  <!-- there's html in here -->
+            <p>{{ $t('sunsetFaqPara2') }}</p>
+            <p>{{ $t('sunsetFaqPara3') }}</p>
+            <p>{{ $t('sunsetFaqPara4') }}</p>
+            <p>{{ $t('sunsetFaqPara5') }}</p>
+          </div>
+
+          <!-- Which services are ending -->
+          <div>
+            <h3 class="headings">
+              {{ $t('sunsetFaqHeader1') }}
+            </h3>
+          </div>
+          <div class="body-text">
+            <p v-html="$t('sunsetFaqPara6')"></p>
+          </div>
+
+          <!-- Why are tavern and guild ending? -->
+          <div>
+            <h3 class="headings">
+              {{ $t('sunsetFaqHeader2') }}
+            </h3>
+          </div>
+          <div class="body-text">
+            <ul>
+              <li>{{ $t('sunsetFaqList1') }}</li>
+              <li>{{ $t('sunsetFaqList2') }}</li>
+              <li>{{ $t('sunsetFaqList3') }}</li>
+            </ul>
+          </div>
+
+          <!-- Can I still talk to my party/group members? -->
+          <div>
+            <h3 class="headings">
+              {{ $t('sunsetFaqHeader3') }}
+            </h3>
+          </div>
+          <div class="body-text">
+            <p>{{ $t('sunsetFaqPara7') }}</p>
+          </div>
+
+          <!-- Pausing dailies -->
+          <div>
+            <h3 class="headings">
+              {{ $t('sunsetFaqHeader4') }}
+            </h3>
+          </div>
+          <div class="body-text">
+            <p>{{ $t('sunsetFaqPara8') }}</p>
+          </div>
+
+          <!-- Accessing group plans -->
+          <div>
+            <h3 class="headings">
+              {{ $t('sunsetFaqHeader5') }}
+            </h3>
+          </div>
+          <div class="body-text">
+            <p v-html="$t('sunsetFaqPara9')"></p> <!-- there's html in here -->
+          </div>
+
+          <!-- Can I access guild chats? -->
+          <div>
+            <h3 class="headings">
+              {{ $t('sunsetFaqHeader6') }}
+            </h3>
+          </div>
+          <div class="body-text">
+            <p>{{ $t('sunsetFaqPara10') }}</p>
+          </div>
+
+          <!-- How can players find groups? -->
+          <div>
+            <h3 class="headings">
+              {{ $t('sunsetFaqHeader7') }}
+            </h3>
+          </div>
+          <div class="body-text">
+            <p>{{ $t('sunsetFaqPara11') }}</p>
+          </div>
+
+          <!-- What about contributors? -->
+          <div>
+            <h3 class="headings">
+              {{ $t('sunsetFaqHeader8') }}
+            </h3>
+          </div>
+          <div class="body-text">
+            <p v-html="$t('sunsetFaqPara12')"></p> <!-- there's html in here -->
+            <p v-html="$t('sunsetFaqPara13')"></p> <!-- there's html in here -->
+            <p v-html="$t('sunsetFaqPara14')"></p> <!-- there's html in here -->
+            <p v-html="$t('sunsetFaqPara15')"></p> <!-- there's html in here -->
+            <p v-html="$t('sunsetFaqPara16')"></p> <!-- there's html in here -->
+            <p v-html="$t('sunsetFaqPara17')"></p> <!-- there's html in here -->
+            <p v-html="$t('sunsetFaqPara18')"></p> <!-- there's html in here -->
+            <p v-html="$t('sunsetFaqPara19')"></p> <!-- there's html in here -->
+          </div>
+
+          <!-- Challenges -->
+          <div>
+            <h3 class="headings">
+              {{ $t('sunsetFaqHeader9') }}
+            </h3>
+          </div>
+          <div class="body-text">
+            <ul>
+              <li>{{ $t('sunsetFaqList4') }}</li>
+              <li>{{ $t('sunsetFaqList5') }}</li>
+              <li>{{ $t('sunsetFaqList6') }}</li>
+              <li>{{ $t('sunsetFaqList7') }}</li>
+            </ul>
+          </div>
+
+          <!-- Questions about how to use Habitica -->
+          <div>
+            <h3 class="headings">
+              {{ $t('sunsetFaqHeader10') }}
+            </h3>
+          </div>
+          <div class="body-text">
+            <ul>
+              <li v-html="$t('sunsetFaqList8')"></li> <!-- there's html in here -->
+              <li v-html="$t('sunsetFaqList9')"></li> <!-- there's html in here -->
+              <li v-html="$t('sunsetFaqList10')"></li> <!-- there's html in here -->
+            </ul>
+          </div>
+
+          <!-- Community Guidelines and TOS -->
+          <div>
+            <h3 class="headings">
+              {{ $t('sunsetFaqHeader11') }}
+            </h3>
+          </div>
+          <div class="body-text">
+            <p v-html="$t('sunsetFaqPara20')"></p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- sidebar -->
+    <!-- staff -->
+    <div class="col-12 col-sm-4 sidebar">
+      <div class="section">
+        <div class="px-4">
+          <div class="staff-header">
+            {{ $t('staff') }}
+          </div>
+          <div class="row">
+            <div
+              v-for="user in staff"
+              :key="user.uuid"
+              class="col-6 staff"
+              :class="{
+                staff: user.type === 'Staff',}"
+            >
+              <div>
+                <router-link
+                  class="title"
+                  :to="{'name': 'userProfile', 'params': {'userId': user.uuid}}"
+                >
+                  {{ user.name }}
+                </router-link>
+                <div
+                  v-if="user.type === 'Staff'"
+                  class="svg-icon staff-icon"
+                  v-html="icons.tierStaff"
+                ></div>
+              </div>
+            </div>
+          </div>
+
+          <!-- player tiers -->
+          <div class="row">
+            <div class="col-12">
+              <div class="player-header">
+                {{ $t('playerTiers') }}
+              </div>
+              <ul class="tier-list">
+                <li
+                  v-once
+                  class="tier1"
+                >
+                  {{ $t('tier1') }}
+                  <div
+                    class="svg-icon tier1-icon"
+                    v-html="icons.tier1"
+                  ></div>
+                </li>
+                <li
+                  v-once
+                  class="tier2"
+                >
+                  {{ $t('tier2') }}
+                  <div
+                    class="svg-icon tier2-icon"
+                    v-html="icons.tier2"
+                  ></div>
+                </li>
+                <li
+                  v-once
+                  class="tier3"
+                >
+                  {{ $t('tier3') }}
+                  <div
+                    class="svg-icon tier3-icon"
+                    v-html="icons.tier3"
+                  ></div>
+                </li>
+                <li
+                  v-once
+                  class="tier4"
+                >
+                  {{ $t('tier4') }}
+                  <div
+                    class="svg-icon tier4-icon"
+                    v-html="icons.tier4"
+                  ></div>
+                </li>
+                <li
+                  v-once
+                  class="tier5"
+                >
+                  {{ $t('tier5') }}
+                  <div
+                    class="svg-icon tier5-icon"
+                    v-html="icons.tier5"
+                  ></div>
+                </li>
+                <li
+                  v-once
+                  class="tier6"
+                >
+                  {{ $t('tier6') }}
+                  <div
+                    class="svg-icon tier6-icon"
+                    v-html="icons.tier6"
+                  ></div>
+                </li>
+                <li
+                  v-once
+                  class="tier7"
+                >
+                  {{ $t('tier7') }}
+                  <div
+                    class="svg-icon tier7-icon"
+                    v-html="icons.tier7"
+                  ></div>
+                </li>
+                <li
+                  v-once
+                  class="moderator"
+                >
+                  {{ $t('tierModerator') }}
+                  <div
+                    class="svg-icon mod-icon"
+                    v-html="icons.tierMod"
+                  ></div>
+                </li>
+                <li
+                  v-once
+                  class="staff"
+                >
+                  {{ $t('tierStaff') }}
+                  <div
+                    class="svg-icon staff-icon"
+                    v-html="icons.tierStaff"
+                  ></div>
+                </li>
+                <li
+                  v-once
+                  class="npc"
+                >
+                  {{ $t('tierNPC') }}
+                </li>
+              </ul>
+            </div>
+
+            <!-- Daniel in sweet, sweet retirement with Jorts -->
+            <div class="row">
+              <div class="gradient">
+              </div>
+              <div
+                class="grassy-meadow-backdrop"
+                :style="{'background-image': imageURLs.background}"
+              >
+                <div
+                  class="daniel_front"
+                  :style="{'background-image': imageURLs.npc}"
+                ></div>
+                <div
+                  class="pixel-border"
+                  :style="{'background-image': imageURLs.pixel_border}"
+                ></div>
+              </div>
+            </div>
+
+            <!-- email admin -->
+            <div class="row d-flex mx-auto">
+              <div class="question d-flex mx-auto">
+                {{ $t('anotherQuestion') }}
+              </div>
+              <div
+                class="contact d-flex mx-auto"
+              >
+                <p v-html="$t('contactAdmin')"></p> <!-- there's html in here -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- final div! -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  .main-bg {
+    font-size: 16px !important;
+  }
+
+  .headings {
+    font-size: 1em; // for some reason, em doesn't give the desired result
+    font-weight: 400;
+    line-height: 1.75;
+    color: $purple-200;
+  }
+
+  .body-text {
+    font-size: 0.875em;
+    color: $gray-10;
+    line-height: 1.71;
+  }
+
+  p {
+    margin-bottom: 1.5em;
+  }
+
+  ul {
+    padding-left: 20px;
+  }
+
+  li::marker {
+    size: 0.5em;
+  }
+
+  .sidebar {
+    background-color: $gray-700;
+    padding: 24px 0;
+    margin: 0 0 22px 24px;
+    border-radius: 16px;
+  }
+.svg-icon {
+    width: 10px;
+    display: inline-block;
+    margin-left: .5em;
+  }
+
+  .tier1-icon, .tier2-icon {
+    width: 11px;
+  }
+
+  .tier5-icon, .tier6-icon {
+    width: 8px;
+  }
+
+  .tier7-icon {
+    width: 12px;
+  }
+
+  .mod-icon {
+    width: 13px;
+  }
+
+  .npc-icon {
+    width: 8px;
+  }
+
+  .staff-header {
+    font-size: 0.875em;
+    font-weight: bold;
+    line-height: 1.71;
+  }
+
+  .staff {
+    font-size: 0.875em;
+
+    .staff-icon {
+      width: 10px;
+      margin-left: 4px;
+    }
+
+    .title {
+      color: $purple-300;
+      font-weight: bold;
+      line-height: 1.71;
+      display: inline-block;
+      margin-top: 8px;
+    }
+  }
+    .tier-list {
+    list-style-type: none;
+    padding: 0;
+    width: 98%;
+
+    li {
+      border-radius: 2px;
+      background-color: #edecee;
+      border: solid 1px #c3c0c7;
+      text-align: center;
+      padding: 1em;
+      margin-bottom: 1em;
+      font-weight: bold;
+    }
+
+    .tier1 {
+      color: #c42870;
+    }
+
+    .tier2 {
+      color: #b01515;
+    }
+
+    .tier3 {
+      color: #d70e14;
+    }
+
+    .tier4 {
+      color: #c24d00;
+    }
+
+    .tier5 {
+      color: #9e650f;
+    }
+
+    .tier6 {
+      color: #2b8363;
+    }
+
+    .tier7 {
+      color: #167e87;
+    }
+
+    .tier8, .moderator {
+      color: #277eab;
+    }
+
+    .tier9, .staff {
+      color: #6133b4;
+    }
+
+    .npc {
+      color: $black;
+    }
+  }
+
+  .gradient {
+    position: absolute;
+    width: 330px;
+    height: 100px;
+    margin: 0 0 116px;
+    background-image: linear-gradient(to bottom, $gray-700 0%, rgba(249, 249, 249, 0) 100%);
+  }
+
+  .grassy-meadow-backdrop {
+    background-repeat: repeat-x;
+    width: 330px;
+    height: 246px;
+  }
+
+  .daniel_front {
+    height: 246px;
+    width: 330px;
+    background-repeat: no-repeat;
+    margin: 0 auto;
+  }
+
+  .pixel-border {
+    width: 330px;
+    height: 30px;
+    background-repeat: no-repeat;
+    position: absolute;
+    z-index: 0;
+    margin-top: -30px;
+  }
+
+  .question {
+    font-size: 0.875em;
+    font-weight: bold;
+    line-height: 1.71;
+    color: $gray-10;
+    margin-top: 24px;
+  }
+
+  .contact p {
+    font-size: 0.875em;
+    margin-bottom: 0px;
+  }
+</style>
+
+<script>
+import find from 'lodash/find';
+import { mapState } from '@/libs/store';
+
+import tier1 from '@/assets/svg/tier-1.svg';
+import tier2 from '@/assets/svg/tier-2.svg';
+import tier3 from '@/assets/svg/tier-3.svg';
+import tier4 from '@/assets/svg/tier-4.svg';
+import tier5 from '@/assets/svg/tier-5.svg';
+import tier6 from '@/assets/svg/tier-6.svg';
+import tier7 from '@/assets/svg/tier-7.svg';
+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 staffList from '../../libs/staffList';
+
+export default {
+  data () {
+    return {
+      icons: Object.freeze({
+        tier1,
+        tier2,
+        tier3,
+        tier4,
+        tier5,
+        tier6,
+        tier7,
+        tierMod,
+        tierNPC,
+        tierStaff,
+      }),
+      group: {
+        chat: [],
+      },
+      sections: {
+        worldBoss: true,
+      },
+      staff: staffList,
+    };
+  },
+
+  computed: {
+    ...mapState({
+      currentEventList: 'worldState.data.currentEventList',
+    }),
+    imageURLs () {
+      const currentEvent = find(this.currentEventList, event => Boolean(event.season));
+      if (!currentEvent) {
+        return {
+          background: 'url(/static/npc/normal/tavern_background.png)',
+          npc: 'url(/static/npc/normal/tavern_npc.png)',
+          pixel_border: 'url(/static/npc/normal/pixel_border.png)',
+        };
+      }
+      return {
+        background: `url(/static/npc/${currentEvent.season}/tavern_background.png)`,
+        npc: `url(/static/npc/${currentEvent.season}/tavern_npc.png)`,
+        pixel_border: 'url(/static/npc/normal/pixel_border.png)',
+      };
+    },
+  },
+
+  async mounted () {
+    this.$store.dispatch('common:setTitle', {
+      subSection: this.$t('faq/taverns-and-guilds'),
+    });
+    document.body.style.background = '#ffffff';
+  },
+};
+</script>

website/client/src/components/static/faq.vue

@@ -94,6 +94,11 @@
     }
   }
 
+  .container-fluid {
+    position: relative;
+    top: 2rem;
+  }
+
   @media only screen and (max-width: 768px) {
     .container-fluid {
       margin: auto;

website/client/src/components/static/staticWrapper.vue

@@ -1,11 +1,12 @@
 <template>
   <div>
+    <chat-banner />
     <static-header
-      v-if="showContentWrap"
+    v-if="showContentWrap"
-      :class="{
+    :class="{
-        'home-header': ['home', 'front'].indexOf($route.name) !== -1,
+      'home-header': ['home', 'front'].indexOf($route.name) !== -1,
-        'white-header': this.$route.name === 'plans'
+      'white-header': this.$route.name === 'plans'
-      }"
+    }"
     />
     <div class="static-wrapper">
       <router-view />
@@ -243,11 +244,13 @@
 
 <script>
 import AppFooter from '@/components/appFooter';
+import ChatBanner from '@/components/header/banners/chatBanner';
 import StaticHeader from './header.vue';
 
 export default {
   components: {
     AppFooter,
+    ChatBanner,
     StaticHeader,
   },
   computed: {

website/client/src/router/index.js

@@ -28,6 +28,7 @@ const NewsPage = () => import(/* webpackChunkName: "static" */'@/components/stat
 const OverviewPage = () => import(/* webpackChunkName: "static" */'@/components/static/overview');
 const PressKitPage = () => import(/* webpackChunkName: "static" */'@/components/static/pressKit');
 const PrivacyPage = () => import(/* webpackChunkName: "static" */'@/components/static/privacy');
+const ChatSunsetFaq = () => import(/* webpackChunkName: "static" */'@/components/static/chatSunsetFaq');
 const TermsPage = () => import(/* webpackChunkName: "static" */'@/components/static/terms');
 
 const RegisterLoginReset = () => import(/* webpackChunkName: "auth" */'@/components/auth/registerLoginReset');
@@ -305,6 +306,9 @@ const router = new VueRouter({
         {
           name: 'faq', path: 'faq', component: FAQPage, meta: { requiresLogin: false },
         },
+        {
+          name: 'chatSunsetFaq', path: 'faq/tavern-and-guilds', component: ChatSunsetFaq, meta: { requiresLogin: false },
+        },
         {
           name: 'features', path: 'features', component: FeaturesPage, meta: { requiresLogin: false },
         },
@@ -502,4 +506,10 @@ router.beforeEach(async (to, from, next) => {
   return next();
 });
 
+router.afterEach((to, from) => {
+  if (from.name === 'chatSunsetFaq') {
+    document.body.style.background = '#f9f9f9';
+  }
+});
+
 export default router;

website/common/locales/en/contrib.json

@@ -7,8 +7,8 @@
   "tier5": "Tier 5 (Champion)",
   "tier6": "Tier 6 (Champion)",
   "tier7": "Tier 7 (Legendary)",
-  "tierModerator": "Moderator (Guardian)",
+  "tierModerator": "Moderator",
-  "tierStaff": "Staff (Heroic)",
+  "tierStaff": "Staff",
   "tierNPC": "NPC",
   "friend": "Friend",
   "elite": "Elite",
@@ -16,7 +16,7 @@
   "legendary": "Legendary",
   "moderator": "Moderator",
   "guardian": "Guardian",
-  "staff": "Staff",
+  "staff": "Habitica Staff",
   "heroic": "Heroic",
   "modalContribAchievement": "Contributor Achievement!",
   "contribModal": "<%= name %>, you awesome person! You're now a tier <%= level %> contributor for helping Habitica.",

website/common/locales/en/faq.json

@@ -131,5 +131,64 @@
 
   "iosFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](https://habitica.fandom.com/wiki/FAQ), come ask in the Tavern chat under Menu > Tavern! We're happy to help.",
   "androidFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](https://habitica.fandom.com/wiki/FAQ), come ask in the Tavern chat under Menu > Tavern! We're happy to help.",
-  "webFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](https://habitica.fandom.com/wiki/FAQ), come ask in the [Habitica Help guild](https://habitica.com/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a)! We're happy to help."
+  "webFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](https://habitica.fandom.com/wiki/FAQ), come ask in the [Habitica Help guild](https://habitica.com/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a)! We're happy to help.",
-}
+
+  "sunsetFaqTitle": "Habitica Tavern and Guild Service Discontinuation FAQ",
+
+  "sunsetFaqPara1": "Due to a number of factors, including changes in how our player base interacts with Habitica and new content regulations, we are making the difficult decision to discontinue Tavern and Guild services on <strong>[date]</strong>.",
+  "sunsetFaqPara2": "Habitica’s primary purpose is and has always been to provide a gamified task management experience. Tavern and Guilds helped motivate players by helping them find others with similar goals. Some truly wonderful spaces were created and we had a chance to see the community thrive with helpful discussion. As the years passed, we noticed changes in how players use and rely on Habitica. Parties flourished, while Guilds and public spaces were used by less and less of our player base. In an ever changing internet landscape, the resources necessary to maintain these spaces became too disproportionate to the number of people actually participating in them.",
+  "sunsetFaqPara3": "We’re making this decision so we can better focus our resources on the parts of Habitica players rely on most without disrupting anyone’s access.",
+  "sunsetFaqPara4": "To celebrate the times we’ve had, we will be gifting everyone a Veteran Pet as we move forward into this new era. For our amazing contributors, we’ll also be sending out a special gear set to commemorate all their hard work in Habitica’s communities.",
+  "sunsetFaqPara5": "If you’d like to know more about what's changing, you can read the details below.",
+
+  "sunsetFaqHeader1": "Which services are ending?",
+  "sunsetFaqPara6": "Service for Tavern as well as public and private Guilds is ending and these spaces will be removed from Habitica on <strong>[date]</strong>.",
+
+  "sunsetFaqHeader2": "Why are the Tavern and Guild services ending?",
+  "sunsetFaqList1": "Habitica’s primary purpose is to provide motivation through a gamified task management experience. Guilds and Tavern are utilized by a disproportionately small percentage of our player base. The majority of players use outside services that are primarily intended for social interaction and are intentionally designed and maintained with those use cases in mind.",
+  "sunsetFaqList2": "New online safety laws require a level of active content oversight for public spaces that Habitica has historically not provided. Investing in the features that these new regulations would require would result in our limited resources being redirected towards parts of Habitica that the vast majority of players never touch.",
+  "sunsetFaqList3": "It’s important to us to continue offering worldwide access to Habitica’s ever-growing international player base. Removing these services allows us to continue that goal without having to consider restricting access in regions where more active content oversight than we can provide is required.",
+
+  "sunsetFaqHeader3": "Will I still be able to talk with my Party or Group Plan members?",
+  "sunsetFaqPara7": "Parties and Group Plans will remain and retain their chat spaces. You’ll also still be able to send private messages.",
+
+  "sunsetFaqHeader4": "Where do I go to pause my Dailies?",
+  "sunsetFaqPara8": "This feature has been relocated to Settings. The functions of Pause Damage will not be affected by the end of the Tavern and Guild services.",
+
+  "sunsetFaqHeader5": "How will I access my Group Plan if it’s an upgraded Guild?",
+  "sunsetFaqPara9": "<p><strong>Browser</strong>: Click on the Group Plan navigation in the top bar.</p><p><strong>Android:</strong> Tap your name at the top of the screen when viewing a task list to switch to your shared tasks. To access your chat, tap the chat icon in the header on that screen.</p><p><strong>iOS</strong>: Tap the name of your Group Plan in the menu.</p>",
+
+  "sunsetFaqHeader6": "Will players be able to retrieve their Guild chats after the services end?",
+  "sunsetFaqPara10": "Players will not be able to retrieve chat data from the Tavern and Guilds after the services end.",
+
+  "sunsetFaqHeader7": "How will players find Party members?",
+  "sunsetFaqPara11": "Our new Looking for Party feature is now available. Most players who look for a Party receive an invite within minutes! The team is working hard to add more platform support and improvements to this feature in the near future. You can learn more about how to search for Parties and Party members from our FAQ.",
+
+  "sunsetFaqHeader8": "How does this affect Habitica contributors?",
+  "sunsetFaqPara12": "As an open-source project, we welcome and encourage many types of contributions. To show our appreciation we will be sending the Heroic gear set to everyone that has a contributor tier as of <strong>[date]</strong>. When Tavern and Guild services end, there will be some changes to contributions as well. You can read more about the plan for each type below.",
+  "sunsetFaqPara13": "<strong>Blacksmiths</strong><br />We still welcome open-source help through our GitHub and will continue awarding tiers for qualifying contributions. Blacksmith collaboration and discussion has largely taken place over GitHub and that will continue.",
+  "sunsetFaqPara14": "<strong>Linguists</strong><br />We continue to welcome help with translating the apps and website and will still be awarding contributor tiers for qualifying contributions. Learn more about our updated procedures for translation here.",
+  "sunsetFaqPara15": "<strong>Challengers</strong><br />The team encourages you to continue creating high quality Challenges. We would like to explore new ways of promoting Challenge discoverability in and outside of the app.",
+  "sunsetFaqPara16": "<strong>Socialites</strong><br />This type of contribution will be ending with the Tavern and Guild discontinuation. We are extremely grateful for the work that our friendly and helpful players have done answering questions in our chat spaces.",
+  "sunsetFaqPara17": "<strong>Comrades</strong><br />Scripts and add-ons are helpful to a shrinking section of our user base as the mobile apps increasingly become the only way that most users access Habitica. Contributors wishing to create 3rd party tools to customize their Habitica experience can continue doing so, but we will no longer be awarding Comrade tiers as we focus on contributions that enhance Habitica in a way that is accessible to our player base as a whole.",
+  "sunsetFaqPara18": "<strong>Artisans</strong><br />We are discontinuing artisan contributions. Most art production has already been moved in-house to keep up with our content releases. We are deeply grateful for the fantastic art made over the years by our contributor community.",
+  "sunsetFaqPara19": "<strong>Wiki Wizards</strong><br />The Habitica Wiki is a wonderful tool created by players for players that has helped so many. We continue to support this effort, but will no longer be tracking or offering tiers for Wiki editing as we shift our focus towards Linguist, Blacksmith, and Challenger contributions within Habitica.",
+
+  "sunsetFaqHeader9": "How will Challenges be affected?",
+  "sunsetFaqList4": "Public Challenges will continue as a feature in Habitica and will be accessible via the Challenges section.",
+  "sunsetFaqList5": "Challenges based in Parties and Group Plans will remain and be unaffected by the end of Tavern and Guild services.",
+  "sunsetFaqList6": "Challenges that are currently hosted in Guilds will remain accessible to current participants from their Challenges list, but will not be discoverable in the public list due to privacy concerns. It will not be possible to create new Guild-based Challenges.",
+  "sunsetFaqList7": "Currently many Challenges have tasks that require posts in Habitica’s public chat spaces. Creators of those Challenges can adapt their tasks or move the chat requirement to posting on an outside service.",
+
+  "sunsetFaqHeader10": "Where will players go when they have questions about how to use Habitica?",
+  "sunsetFaqList8": "Our existing <a href='https://habitica.com/static/faq'>FAQ</a> is a great resource and can be found from the Help menu, or Support on mobile. We are in the process of creating a more comprehensive and improved FAQ to help guide players moving forward.",    
+  "sunsetFaqList9": "This blog post [NEED ACTUAL URL] also provides a handy guide for new players.",
+  "sunsetFaqList10": "Players are also encouraged to email <a href='mailto:admin@habitica.com'>admin@habitica.com</a> with any questions for which they cannot find answers in the above links.",
+
+  "sunsetFaqHeader11": "How does this affect Habitica’s Community Guidelines and Terms of Service?",
+  "sunsetFaqPara20": "Habitica’s Community Guidelines will be updated at the time Tavern and Guild service is discontinued. They will reflect that community rules for conduct are now in relation to player profiles, Challenges, and messages in private spaces. Our Terms of Service have always applied to both public and private spaces and do not require an immediate update in regard to this change.",
+
+  "anotherQuestion": "Have another question?",
+  "contactAdmin": "Contact <a href='mailto:admin@habitica.com'>admin@habitica.com</a>"
+
+} 

website/common/locales/en/groups.json

@@ -420,5 +420,6 @@
   "noOneLooking": "There’s no one looking for a Party right now.<br>You can check back later!",
   "tavernDiscontinued": "The Tavern and Guilds have been discontinued",
   "tavernDiscontinuedDetail": "Due to a number of factors, including changes in how our player base interacts with Habitica, the resources necessary to maintain these spaces became disproportionate to the number of people participating in them and unsustainable over the long term.",
-  "tavernDiscontinuedLinks": "Read more about the <a href='/static/faq/tavern-and-guilds'>Tavern and Guild Service Discontinuation</a> or head back to the <a href='/'>homepage</a>."
+  "tavernDiscontinuedLinks": "Read more about the <a href='/static/faq/tavern-and-guilds'>Tavern and Guild Service Discontinuation</a> or head back to the <a href='/'>homepage</a>.",
+  "chatSunsetWarning": "⚠️ <strong>Habitica Guilds and Tavern chat will be discontinued on MM/DD/YYYY.</strong> <a href='/static/faq/tavern-and-guilds'>Click here</a> to read more about this change."
 }