implement tips for loading screen (#7632)

* implement tips for loading screen

* fix typo in tip 22

common/locales/en/loadingScreenTips.json

@@ -0,0 +1,35 @@
+{
+  "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!",
+  "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 tile, like the Mountain Lake, Pagoda, Rolling Hills, Winter Twinkly Lights and Harvest Festival.",
+  "tip8": "Send a PM to someone by clicking the envelope near their name in chat!",
+  "tip9": "Visit the Pirate Cove Guild for advice on starting a Guild.",
+  "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!",
+  "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!",
+  "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.",
+  "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.",
+  "tip25": "Items that give you stat bonuses will never cost real money.",
+  "tip26": "An arrow to the left of someone’s level number means they’re currently buffed.",
+  "tip27": "Make late-night Dailies refer to the night before (such as “flossed last night”) so you can check them off in the morning.",
+  "tip28": "Set a Custom Day Start under Settings > Site 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 Shared Lists Guild for example tasks.",
+  "tip32": "Lots of Habitica’s code, art, and writing is made by volunteer contributors! Anyone can help."
+}

website/client/css/loading-screen.styl

@@ -3,11 +3,26 @@
   width: 100%
   height: 100%
   padding-top: 150px
+  text-align: center
 
-@media (max-device-width: 768px), (orientation: landscape)
+#loadingScreen h2
+  margin-top: 60px
+
+#loadingScreen h3
+  margin-top: 20px
+
+@media (max-device-width: 768px) and (orientation: landscape)
   #loadingScreen
     padding-top: 75px
 
+@media (max-device-width: 768px)
+  #loadingScreen h3
+    padding-left: 10px
+    padding-right: 10px
+
+  #loadingScreen h2
+    margin-top: 30px
+
 #loadingScreen img
   display: block
   margin: 0 auto

website/server/controllers/top-level/pages.js

@@ -9,6 +9,7 @@ const md = markdownIt({
 let api = {};
 
 const TOTAL_USER_COUNT = '1,100,000';
+const LOADING_SCREEN_TIPS = 32;
 
 api.getFrontPage = {
   method: 'GET',
@@ -23,6 +24,7 @@ api.getFrontPage = {
     return res.render('index.jade', {
       title: 'Habitica | Your Life The Role Playing Game',
       env: res.locals.habitrpg,
+      loadingScreenTip: Math.floor(Math.random() * LOADING_SCREEN_TIPS) + 1, // Random tip between 1 and LOADING_SCREEN_TIPS
     });
   },
 };

website/views/index.jade

@@ -33,6 +33,9 @@ html(ng-app='habitrpg', ng-controller='RootCtrl', ng-class='{"applying-action":a
         .spinner__item2
         .spinner__item3
         .spinner__item4
+
+      h2=env.t('tipTitle', {tipNumber: loadingScreenTip})
+      h3=env.t("tip" + loadingScreenTip)
     .ng-cloak(ng-if='appLoaded', ng-controller='GroupsCtrl')
       include ./shared/mixins
       include ./shared/avatar/index