[WIP] Added initial inapp loading screen with tips (#9710)

* Added initial inapp loading screen with tips * Added new tips and styles * Removed unrelated readme
2025-12-18 07:07:35 +01:00 · 2017-12-14 09:35:10 -06:00
parent 05640f513e
commit e7fd2b4c79
4 changed files with 100 additions and 54 deletions
--- a/website/client/app.vue
+++ b/website/client/app.vue
@@ -1,38 +1,68 @@
 <template lang="pug">
-#app(:class='{"casting-spell": castingSpell}')
-  amazon-payments-modal
-  snackbars
-  router-view(v-if="!isUserLoggedIn || isStaticPage")
-  template(v-else)
-    template(v-if="isUserLoaded")
-      notifications-display
-      app-menu
-      .container-fluid
-        app-header
-        buyModal(
-          :item="selectedItemToBuy || {}",
-          :withPin="true",
-          @change="resetItemToBuy($event)",
-          @buyPressed="customPurchase($event)",
-          :genericPurchase="genericPurchase(selectedItemToBuy)",
+div
+  #loading-screen-inapp(v-if='loading')
+    .row
+      .col-12.text-center
+        svg#melior(xmlns='http://www.w3.org/2000/svg', viewbox='0 0 61.91 64')
+          path(d='M61.82,64H51.59c-3.08,0-3.72.37-3.67-1,0.07-1.87.67-1.94,2.63-2.49,1.63-.45,1-3.35-0.8-5.88-1.28-1.76-3.89-3.81-7.31-2.22a10.75,10.75,0,0,0-4.56,3.52c-1.68,2.33-1.59,4.54,1,4.54s5.39-1.5,6.23.64c1,2.64.33,2.89-.18,2.89H28.55v0C19.77,64,11,63.93,9,58.38c-2.82-7.68,7.43-10.64,7.75-15.46,0.13-2-1-2.85-2.34-2.85h-6V36.41H4.7v-11H8.36V29.1H12v3.65h3.65v5.08a5.76,5.76,0,0,1,3.07,5.05c-0.17,5.51-9.5,8.57-7.79,14.35,1.56,5.29,13.37,4,13,.74L23.7,56.1c-0.06-2.62-.47-6.12.08-9.22C24.64,42,27.67,37.78,33,37.74c1,0,1.78-.21,1.78-1s-1.55-.84-2.64-0.95a23.35,23.35,0,0,1-12.56-5c-2.43-2-6.21-8.3-3.74-7.83a21.74,21.74,0,0,0,4.06.4c1.24,0,4.44-.35,4.44-1.11,0-1-1.85-.42-4.57-0.68C16.48,21.22,9.6,19.83,6,9.35,4.71,5.43,3.83-1.91,6,.46c12.46,13.7,16.69,11.47,23.84,16.16,3.15,2.06,5.19,7,7,6.58,1.2-.27.46-1.37,0.64-3.93C37.66,17,38.75,16.48,36,15.79c-3.26-.81-6.52-4.38-4.39-4.33a11.89,11.89,0,0,0,5.53-.76c1.87-.81,6.43-4.28,9.18-2.89s5.08-.6,6.94-0.25c2.71,0.51,3.41,4.24,3.05,6.42-0.22,1.38-.22,1.38-2,1.28-3.61-.21-4.53,2.67-2,4.25,3.87,2.42,5.51,4.23,6.56,9.58,0.51,2.6.1,3.2-.76,2.72s-2.34-.72-0.29,4-1.29,10.28-2.39,10.9a1.3,1.3,0,0,0-.91,1.34c0,11.42,0,12.27,1.92,12.48,2.9,0.31,4.14-1.44,5.27.06C63.29,62.73,63.41,64,61.82,64ZM4.7,21.28H1v3.65H4.7V21.28Z', transform='translate(-1.05)', fill='#fff')
+      .col-12.text-center
+        h2 {{$t('tipTitle', {tipNumber: currentTipNumber})}}
+        p {{currentTip}}
+  #app(:class='{"casting-spell": castingSpell}')
+    amazon-payments-modal
+    snackbars
+    router-view(v-if="!isUserLoggedIn || isStaticPage")
+    template(v-else)
+        template(v-if="isUserLoaded")
+          notifications-display
+          app-menu
+          .container-fluid
+            app-header
+            buyModal(
+              :item="selectedItemToBuy || {}",
+              :withPin="true",
+              @change="resetItemToBuy($event)",
+              @buyPressed="customPurchase($event)",
+              :genericPurchase="genericPurchase(selectedItemToBuy)",

-        )
-        selectMembersModal(
-          :item="selectedSpellToBuy || {}",
-          :group="user.party",
-          @memberSelected="memberSelected($event)",
-        )
+            )
+            selectMembersModal(
+              :item="selectedSpellToBuy || {}",
+              :group="user.party",
+              @memberSelected="memberSelected($event)",
+            )

-        div(:class='{sticky: user.preferences.stickyHeader}')
-          router-view
-        app-footer
+            div(:class='{sticky: user.preferences.stickyHeader}')
+              router-view
+            app-footer

-        audio#sound(autoplay, ref="sound")
-          source#oggSource(type="audio/ogg", :src="sound.oggSource")
-          source#mp3Source(type="audio/mp3", :src="sound.mp3Source")
+            audio#sound(autoplay, ref="sound")
+              source#oggSource(type="audio/ogg", :src="sound.oggSource")
+              source#mp3Source(type="audio/mp3", :src="sound.mp3Source")
 </template>

-<style scoped>
+<style lang='scss' scoped>
+  #loading-screen-inapp {
+    #melior {
+      margin: 0 auto;
+      width: 70.9px;
+      margin-bottom: 1em;
+    }
+
+    h2 {
+      color: #fff;
+      font-size: 32px;
+      font-weight: bold;
+    }
+
+    p {
+      margin: 0 auto;
+      width: 448px;
+      font-size: 24px;
+      color: #d5c8ff;
+    }
+  }
+
  .casting-spell {
    cursor: crosshair;
  }
@@ -107,6 +137,8 @@ export default {
        oggSource: '',
        mp3Source: '',
      },
+      loading: true,
+      currentTipNumber: 0,
    };
  },
  computed: {
@@ -118,6 +150,15 @@ export default {
    castingSpell () {
      return this.$store.state.spellOptions.castingSpell;
    },
+    currentTip () {
+      const numberOfTips = 35 + 1;
+      const min = 1;
+      const randomNumber = Math.random() * (numberOfTips - min) + min;
+      const tipNumber = Math.floor(randomNumber);
+      this.currentTipNumber = tipNumber;
+
+      return this.$t(`tip${tipNumber}`);
+    },
  },
  created () {
    this.$root.$on('playSound', (sound) => {
@@ -314,6 +355,11 @@ export default {
      if (modalOnTop) this.$root.$emit('bv::show::modal', modalOnTop, {fromRoot: true});
    });
  },
+  mounted () {
+    // Remove the index.html loading screen and now show the inapp loading
+    const loadingScreen = document.getElementById('loading-screen');
+    if (loadingScreen) document.body.removeChild(loadingScreen);
+  },
  methods: {
    resetItemToBuy ($event) {
      // @TODO: Do we need this? I think selecting a new item
@@ -353,8 +399,7 @@ export default {
      this.$root.$emit('bv::hide::modal', 'select-member-modal');
    },
    hideLoadingScreen () {
-      const loadingScreen = document.getElementById('loading-screen');
-      if (loadingScreen) document.body.removeChild(loadingScreen);
+      this.loading = false;
    },
  },
 };
--- a/website/client/assets/scss/loading-screen.scss
+++ b/website/client/assets/scss/loading-screen.scss
@@ -1,4 +1,4 @@
-#loading-screen {
+#loading-screen, #loading-screen-inapp {
  z-index: 1050;
  position: absolute;
  top: 0;
@@ -32,4 +32,4 @@
  animation: fadeColor 2.4s infinite;
  height: 4rem;
  margin-left: -1rem;
-}
+}
--- a/website/client/index.html
+++ b/website/client/index.html
@@ -13,10 +13,9 @@
  </head>
  <body>
    <div id="loading-screen">
-      <!-- Loading Screen logo, inlined to avoid flashing of content -->
      <svg id="melior" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.91 64">
        <path d="M61.82,64H51.59c-3.08,0-3.72.37-3.67-1,0.07-1.87.67-1.94,2.63-2.49,1.63-.45,1-3.35-0.8-5.88-1.28-1.76-3.89-3.81-7.31-2.22a10.75,10.75,0,0,0-4.56,3.52c-1.68,2.33-1.59,4.54,1,4.54s5.39-1.5,6.23.64c1,2.64.33,2.89-.18,2.89H28.55v0C19.77,64,11,63.93,9,58.38c-2.82-7.68,7.43-10.64,7.75-15.46,0.13-2-1-2.85-2.34-2.85h-6V36.41H4.7v-11H8.36V29.1H12v3.65h3.65v5.08a5.76,5.76,0,0,1,3.07,5.05c-0.17,5.51-9.5,8.57-7.79,14.35,1.56,5.29,13.37,4,13,.74L23.7,56.1c-0.06-2.62-.47-6.12.08-9.22C24.64,42,27.67,37.78,33,37.74c1,0,1.78-.21,1.78-1s-1.55-.84-2.64-0.95a23.35,23.35,0,0,1-12.56-5c-2.43-2-6.21-8.3-3.74-7.83a21.74,21.74,0,0,0,4.06.4c1.24,0,4.44-.35,4.44-1.11,0-1-1.85-.42-4.57-0.68C16.48,21.22,9.6,19.83,6,9.35,4.71,5.43,3.83-1.91,6,.46c12.46,13.7,16.69,11.47,23.84,16.16,3.15,2.06,5.19,7,7,6.58,1.2-.27.46-1.37,0.64-3.93C37.66,17,38.75,16.48,36,15.79c-3.26-.81-6.52-4.38-4.39-4.33a11.89,11.89,0,0,0,5.53-.76c1.87-.81,6.43-4.28,9.18-2.89s5.08-.6,6.94-0.25c2.71,0.51,3.41,4.24,3.05,6.42-0.22,1.38-.22,1.38-2,1.28-3.61-.21-4.53,2.67-2,4.25,3.87,2.42,5.51,4.23,6.56,9.58,0.51,2.6.1,3.2-.76,2.72s-2.34-.72-0.29,4-1.29,10.28-2.39,10.9a1.3,1.3,0,0,0-.91,1.34c0,11.42,0,12.27,1.92,12.48,2.9,0.31,4.14-1.44,5.27.06C63.29,62.73,63.41,64,61.82,64ZM4.7,21.28H1v3.65H4.7V21.28Z" transform="translate(-1.05)" fill="#fff" />
-    </svg>
+      </svg>
    </div>

    <div id="app"></div>
--- a/website/common/locales/en/loadingScreenTips.json
+++ b/website/common/locales/en/loadingScreenTips.json
@@ -1,36 +1,38 @@
 {
  "tipTitle": "Tip #<%= tipNumber %>",
  "tip1": "Check tasks on the go with the Habitica mobile apps.",
-  "tip2": "Reach level 100 to unlock the Orb of Rebirth for free and start a new adventure!",
+  "tip2": "Click any equipment to see a preview, or equip it instantly by clicking the star in its upper-left corner!",
  "tip3": "Use emoji to quickly differentiate between your tasks.",
  "tip4": "Use the # sign before a task name to make it really big!",
-  "tip5": "It’s best to cast buffs in the morning so they last longer.",
-  "tip6": "Occasionally re-evaluate your tasks to make sure they’re up-to-date!",
-  "tip7": "Some backgrounds connect perfectly if party members use the same background. Ex: Mountain Lake, Pagodas, and Rolling Hills.",
-  "tip8": "Send a PM to someone by clicking the envelope near their name in chat!",
-  "tip9": "Visit the Guild Leaders & Challenge Creators Guild for advice on starting a Guild.",
+  "tip5": "It’s best to use skills that cause buffs in the morning so they last longer.",
+  "tip6": "Hover over a task and click the dots to access advanced task controls, such as the ability to push tasks to the top/bottom of your list.",
+  "tip7": "Some backgrounds connect perfectly if Party members use the same background. Ex: Mountain Lake, Pagodas, and Rolling Hills.",
+  "tip8": "Send a Message to someone by clicking their name in chat and the clicking the envelope icon at the top of their profile!",
+  "tip9": "Use the filters + search bar in the Inventories, Shops, Guilds, and Challenges to quickly find what you want.",
  "tip10": "You can win gems by competing in Challenges. New ones are added every day!",
-  "tip11": "If you enjoy dressing up your avatar, check out the Costume Carnival Guild.",
-  "tip12": "Join the “Challenge... Accepted” Guild for regularly scheduled random challenges.",
-  "tip13": "Having more than four Party members increases accountability!",
+  "tip11": "Having more than four Party members increases accountability!",
+  "tip12": "Add checklists to your To-Dos to multiply your rewards!",
+  "tip13": "Click “Filters” on your task page to make an unwieldy task list very manageable!",
  "tip14": "You can add headers or inspirational quotes to your list as Habits with no (+/-).",
-  "tip15": "Add checklists to your To-Dos to increase your rewards!",
-  "tip16": "Check out the Data tab for valuable insights on your progress.",
-  "tip17": "Using Tags can make an unwieldy task list very manageable!",
+  "tip15": "Complete all the Masterclasser Quest-lines to learn about Habitica’s secret lore.",
+  "tip16": "Click the link to the Data Display Tool in the footer for valuable insights on your progress.",
+  "tip17": "Use the mobile apps to set reminders for your tasks.",
  "tip18": "Habits that are just positive or just negative gradually “fade” and return to yellow.",
-  "tip19": "Boost your Intelligence Stat to gain more XP when you complete a task.",
+  "tip19": "Boost your Intelligence Stat to gain more experience when you complete a task.",
  "tip20": "Boost your Perception Stat to get more drops and gold.",
  "tip21": "Boost your Strength Stat to do more boss damage or get critical hits.",
  "tip22": "Boost your Constitution Stat to lessen the damage from incomplete Dailies.",
-  "tip23": "Click the bar graph icon on your tasks to see a graph showing your progress.",
-  "tip24": "Habitica is Open Source! Ask in the Aspiring Legends Guild if you want to contribute.",
+  "tip23": "Reach level 100 to unlock the Orb of Rebirth for free and start a new adventure!",
+  "tip24": "Have a question? Ask in the Habitica Help Guild!",
  "tip25": "The four seasonal Grand Galas start near the solstices and equinoxes.",
-  "tip26": "An arrow to the left of someone’s level number means they’re currently buffed.",
+  "tip26": "An arrow to the right of someone’s name means they’re currently buffed.",
  "tip27": "Did a Daily yesterday, but forgot to check it off? Don't worry! With Record Yesterday's Activity, you'll have a chance to record what you did before starting your new day.",
-  "tip28": "Set a Custom Day Start under Settings > Site to control when your day restarts.",
+  "tip28": "Set a Custom Day Start under User Icon > Settings to control when your day restarts.",
  "tip29": "Complete all your Dailies to get a Perfect Day Buff that increases your stats!",
  "tip30": "You can invite people to Guilds, not just Parties.",
  "tip31": "Check out the pre-made lists in the Library of Tasks and Challenges Guild for example tasks.",
-  "tip32": "Lots of Habitica’s code, art, and writing is made by volunteer contributors! Anyone can help.",
-  "tip33": "Check out The Bulletin Board guild for news about guilds, challenges, and other player-created events - and announce your own there!"
+  "tip32": "Lots of Habitica’s code, art, and writing is made by volunteer contributors! Head to the Aspiring Legends Guild to help.",
+  "tip33": "Check out The Bulletin Board Guild for news about Guilds, Challenges, and other player-created events - and announce your own there!",
+  "tip34": "Occasionally re-evaluate your tasks to make sure they’re up-to-date!",
+  "tip35": "Users who are part of a Group Plan gain the ability to assign tasks to other users in that Group for extra task management and accountability."
 }