From efeb2c1c8e5ecdd2eafb940f792388813f75d45f Mon Sep 17 00:00:00 2001 From: Matteo Pagliazzi Date: Fri, 10 Jun 2016 12:25:09 +0200 Subject: [PATCH] implement tips for loading screen (#7632) * implement tips for loading screen * fix typo in tip 22 --- common/locales/en/loadingScreenTips.json | 35 +++++++++++++++++++ website/client/css/loading-screen.styl | 17 ++++++++- website/server/controllers/top-level/pages.js | 2 ++ website/views/index.jade | 3 ++ 4 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 common/locales/en/loadingScreenTips.json diff --git a/common/locales/en/loadingScreenTips.json b/common/locales/en/loadingScreenTips.json new file mode 100644 index 0000000000..728c0d165f --- /dev/null +++ b/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." +} \ No newline at end of file diff --git a/website/client/css/loading-screen.styl b/website/client/css/loading-screen.styl index b2c4212ab3..2d39337421 100644 --- a/website/client/css/loading-screen.styl +++ b/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 diff --git a/website/server/controllers/top-level/pages.js b/website/server/controllers/top-level/pages.js index 0af5bb5f9c..67e8381701 100644 --- a/website/server/controllers/top-level/pages.js +++ b/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 }); }, }; diff --git a/website/views/index.jade b/website/views/index.jade index 4966ebf5ce..5e04451e2d 100644 --- a/website/views/index.jade +++ b/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