implement tips for loading screen (#7632)

* implement tips for loading screen

* fix typo in tip 22

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