From 658a02bfc3640d6c468f3fbb5729f76bb3d853f1 Mon Sep 17 00:00:00 2001
From: CuriousMagpie <eilatan@gmail.com>
Date: Tue, 6 Jun 2023 15:26:31 -0400
Subject: [PATCH] WIP(faq): add Daniel to sidebar

---
 .../src/components/static/chatSunsetFaq.vue   | 332 +++++++++++-------
 website/common/locales/en/faq.json            |   5 +-
 2 files changed, 201 insertions(+), 136 deletions(-)

diff --git a/website/client/src/components/static/chatSunsetFaq.vue b/website/client/src/components/static/chatSunsetFaq.vue
index bc0647c783..20a81d411e 100644
--- a/website/client/src/components/static/chatSunsetFaq.vue
+++ b/website/client/src/components/static/chatSunsetFaq.vue
@@ -154,141 +154,160 @@
     <div class="sidebar">
       <div class="section sidebar-content">
         <div class="px-4">
-          <sidebar-section :title="$t('staff')">
-            <div class="staff-header">
-              {{ $t('staff') }}
+          <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 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>
+          <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
-                    v-if="user.type === 'Staff'"
                     class="svg-icon staff-icon"
                     v-html="icons.tierStaff"
                   ></div>
-                </div>
-              </div>
+                </li>
+                <li
+                  v-once
+                  class="npc"
+                >
+                  {{ $t('tierNPC') }}
+                </li>
+              </ul>
             </div>
-          </sidebar-section>
-          <sidebar-section :title="$t('playerTiers')">
             <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 class="gradient">
+              </div>
+              <div
+                class="grassy-meadow-backdrop"
+                :style="{'background-image': imageURLs.background}"
+              >
+                <div
+                  class="daniel_front"
+                  :style="{'background-image': imageURLs.npc}"
+                ></div>
               </div>
             </div>
-          </sidebar-section>
+            <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>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -460,17 +479,45 @@
     }
   }
 
-  .staff .title {
-    color: $purple-300;
+  .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%);
   }
 
-  .moderator .title {
-    color: #277eab;
+  .grassy-meadow-backdrop {
+    background-repeat: repeat-x;
+    width: 330px;
+    height: 246px;
+  }
+
+  .daniel_front {
+    height: 246px;
+    width: 330px;
+    background-repeat: no-repeat;
+    margin: 0 auto;
+  }
+
+  .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 sidebarSection from '../sidebarSection';
+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';
@@ -484,10 +531,6 @@ import tierStaff from '@/assets/svg/tier-staff.svg';
 import staffList from '../../libs/staffList';
 
 export default {
-  componenets: {
-    sidebarSection,
-  },
-
   data () {
     return {
       icons: Object.freeze({
@@ -512,6 +555,25 @@ export default {
     };
   },
 
+  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)',
+        };
+      }
+      return {
+        background: `url(/static/npc/${currentEvent.season}/tavern_background.png)`,
+        npc: `url(/static/npc/${currentEvent.season}/tavern_npc.png)`,
+      };
+    },
+  },
+
   async mounted () {
     this.$store.dispatch('common:setTitle', {
       subSection: this.$t('faq/taverns-and-guilds'),
diff --git a/website/common/locales/en/faq.json b/website/common/locales/en/faq.json
index c4e2ff47b6..9a921088fb 100644
--- a/website/common/locales/en/faq.json
+++ b/website/common/locales/en/faq.json
@@ -186,6 +186,9 @@
   "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."
+  "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>"
 
 } 
\ No newline at end of file