chore: update time travelers shop to display seasonal backgrounds

website/client/src/assets/scss/shops.scss

@@ -46,13 +46,10 @@
 
     .background {
       background-repeat: repeat-x;
-
       width: 100%;
       position: absolute;
-
       top: 0;
       left: 0;
-
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -67,6 +64,12 @@
       flex-direction: column;
     }
 
+    .shop-message {
+      position: relative;
+      height: 76px;
+      margin: 71px auto;
+    }
+
     .npc {
       position: absolute;
       left: 0;

website/client/src/components/shops/timeTravelers/index.vue

@@ -42,29 +42,36 @@
       <div class="featuredItems">
         <div
           class="background"
-          :class="{'background-closed': closed, 'background-open': !closed }"
+          :class="{'background-open': open }"
           :style="{'background-image': imageURLs.background}"
         >
           <div
             class="npc"
-            :class="{'closed': closed }"
             :style="{'background-image': imageURLs.npc}"
           >
-            <div class="featured-label">
+            <div
+              class="featured-label">
               <span class="rectangle"></span><span
                 v-once
                 class="text"
               >{{ $t('timeTravelers') }}</span><span class="rectangle"></span>
             </div>
-          </div><div
-            v-if="closed"
+          </div>
+          <div
             class="content"
-          >
-            <div class="featured-label with-border closed">
-              <span class="rectangle"></span><span
+            >
+            <div
+            v-if="!open || !subscriber"
+              :class="{'background-open': !open }"
+              class="shop-message featured-label with-border closed">
+              <span
+                class="rectangle">
+              </span>
+              <span
                 v-once
                 class="text"
-              >{{ $t('timeTravelersPopoverNoSubMobile') }}</span><span class="rectangle"></span>
+              >{{ $t('timeTravelersPopoverNoSubMobile') }}</span><span class="rectangle">
+              </span>
             </div>
           </div>
         </div>
@@ -234,8 +241,12 @@ export default {
       currentEventList: 'worldState.data.currentEventList',
     }),
 
-    closed () {
-      return this.user.purchased.plan.consecutive.trinkets === 0;
+    open () {
+      return this.user.purchased.plan.consecutive.trinkets > 0;
+    },
+
+    subscriber () {
+      return this.user.purchased.plan.consecutive.count >= 1;
     },
 
     shop () {
@@ -302,10 +313,8 @@ export default {
       }
     });
     this.currentEvent = _find(this.currentEventList, event => Boolean(['winter', 'spring', 'summer', 'fall'].includes(event.season)));
-    if (!this.currentEvent || !this.currentEvent.season || this.currentEvent.season === 'thanksgiving' || this.closed) {
+    if (!this.currentEvent || !this.currentEvent.season || this.currentEvent.season === 'thanksgiving') {
       this.imageURLs.background = 'url(/static/npc/normal/time_travelers_background.png)';
-      this.imageURLs.npc = this.closed ? 'url(/static/npc/normal/time_travelers_closed_banner.png)'
-        : 'url(/static/npc/normal/time_travelers_open_banner.png)';
     } else {
       this.imageURLs.background = `url(/static/npc/${this.currentEvent.season}/time_travelers_background.png)`;
       this.imageURLs.npc = `url(/static/npc/${this.currentEvent.season}/time_travelers_open_banner.png)`;

website/common/locales/en/subscriber.json

@@ -32,7 +32,7 @@
     "subGemName": "Subscriber Gems",
     "maxBuyGems": "You have bought all the Gems you can this month. More become available within the first three days of each month. Thanks for subscribing!",
     "timeTravelers": "Time Travelers",
-    "timeTravelersPopoverNoSubMobile": "Looks like you’ll need a Mystic Hourglass to open the time portal and summon the Mysterious Time Travelers.",
+    "timeTravelersPopoverNoSubMobile": "Subscribers receive a rare Mystic Hourglass every month to use in the Time Travelers Shop!",
     "timeTravelersPopover": "Your Mystic Hourglass has opened our time portal! Choose what you’d like us to fetch from the past or future.",
     "mysticHourglassNeededNoSub": "This item requires a Mystic Hourglass. You earn Mystic Hourglasses by being a Habitica subscriber.",
     "mysterySetNotFound": "Mystery set not found, or set already owned.",