Merge pull request #5307 from HabitRPG/tutorial

Tutorial overhaul

common/dist/sprites/spritesmith0.css

@@ -3750,395 +3750,407 @@
 }
 .hair_bangs_3_pyellow {
   background-image: url(spritesmith0.png);
-  background-position: -1444px -1001px;
+  background-position: -1183px -1798px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_pyellow {
   background-image: url(spritesmith0.png);
-  background-position: -1469px -1016px;
+  background-position: -1208px -1813px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_pyellow2 {
   background-image: url(spritesmith0.png);
-  background-position: 0px -979px;
+  background-position: -1444px -1001px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_pyellow2 {
   background-image: url(spritesmith0.png);
-  background-position: -25px -994px;
+  background-position: -1469px -1016px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_rainbow {
   background-image: url(spritesmith0.png);
-  background-position: -989px -819px;
+  background-position: 0px -979px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_rainbow {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -834px;
+  background-position: -25px -994px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_red {
   background-image: url(spritesmith0.png);
-  background-position: -989px -728px;
+  background-position: -989px -819px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_red {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -743px;
+  background-position: -1014px -834px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_snowy {
   background-image: url(spritesmith0.png);
-  background-position: -989px -637px;
+  background-position: -989px -728px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_snowy {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -652px;
+  background-position: -1014px -743px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_white {
   background-image: url(spritesmith0.png);
-  background-position: -989px -546px;
+  background-position: -989px -637px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_white {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -561px;
+  background-position: -1014px -652px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_winternight {
   background-image: url(spritesmith0.png);
-  background-position: -989px -455px;
+  background-position: -989px -546px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_winternight {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -470px;
+  background-position: -1014px -561px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_winterstar {
   background-image: url(spritesmith0.png);
-  background-position: -989px -364px;
+  background-position: -989px -455px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_winterstar {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -379px;
+  background-position: -1014px -470px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_yellow {
   background-image: url(spritesmith0.png);
-  background-position: -989px -273px;
+  background-position: -989px -364px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_yellow {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -288px;
+  background-position: -1014px -379px;
   width: 60px;
   height: 60px;
 }
 .hair_bangs_3_zombie {
   background-image: url(spritesmith0.png);
-  background-position: -989px -182px;
+  background-position: -989px -273px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_bangs_3_zombie {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -197px;
+  background-position: -1014px -288px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_TRUred {
   background-image: url(spritesmith0.png);
-  background-position: -989px -91px;
+  background-position: -989px -182px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_TRUred {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -106px;
+  background-position: -1014px -197px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_aurora {
   background-image: url(spritesmith0.png);
-  background-position: -989px 0px;
+  background-position: -989px -91px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_aurora {
   background-image: url(spritesmith0.png);
-  background-position: -1014px -15px;
+  background-position: -1014px -106px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_black {
   background-image: url(spritesmith0.png);
-  background-position: -819px -888px;
+  background-position: -989px 0px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_black {
   background-image: url(spritesmith0.png);
-  background-position: -844px -903px;
+  background-position: -1014px -15px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_blond {
   background-image: url(spritesmith0.png);
-  background-position: -728px -888px;
+  background-position: -819px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_blond {
   background-image: url(spritesmith0.png);
-  background-position: -753px -903px;
+  background-position: -844px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_blue {
   background-image: url(spritesmith0.png);
-  background-position: -637px -888px;
+  background-position: -728px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_blue {
   background-image: url(spritesmith0.png);
-  background-position: -662px -903px;
+  background-position: -753px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_brown {
   background-image: url(spritesmith0.png);
-  background-position: -546px -888px;
+  background-position: -637px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_brown {
   background-image: url(spritesmith0.png);
-  background-position: -571px -903px;
+  background-position: -662px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_candycane {
   background-image: url(spritesmith0.png);
-  background-position: -455px -888px;
+  background-position: -546px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_candycane {
   background-image: url(spritesmith0.png);
-  background-position: -480px -903px;
+  background-position: -571px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_candycorn {
   background-image: url(spritesmith0.png);
-  background-position: -364px -888px;
+  background-position: -455px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_candycorn {
   background-image: url(spritesmith0.png);
-  background-position: -389px -903px;
+  background-position: -480px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_festive {
   background-image: url(spritesmith0.png);
-  background-position: -273px -888px;
+  background-position: -364px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_festive {
   background-image: url(spritesmith0.png);
-  background-position: -298px -903px;
+  background-position: -389px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_frost {
   background-image: url(spritesmith0.png);
-  background-position: -182px -888px;
+  background-position: -273px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_frost {
   background-image: url(spritesmith0.png);
-  background-position: -207px -903px;
+  background-position: -298px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_ghostwhite {
   background-image: url(spritesmith0.png);
-  background-position: -91px -888px;
+  background-position: -182px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_ghostwhite {
   background-image: url(spritesmith0.png);
-  background-position: -116px -903px;
+  background-position: -207px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_green {
   background-image: url(spritesmith0.png);
-  background-position: 0px -888px;
+  background-position: -91px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_green {
   background-image: url(spritesmith0.png);
-  background-position: -25px -903px;
+  background-position: -116px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_halloween {
   background-image: url(spritesmith0.png);
-  background-position: -830px -740px;
+  background-position: 0px -888px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_halloween {
   background-image: url(spritesmith0.png);
-  background-position: -855px -755px;
+  background-position: -25px -903px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_holly {
   background-image: url(spritesmith0.png);
-  background-position: -739px -740px;
+  background-position: -830px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_holly {
   background-image: url(spritesmith0.png);
-  background-position: -764px -755px;
+  background-position: -855px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_hollygreen {
   background-image: url(spritesmith0.png);
-  background-position: -648px -740px;
+  background-position: -739px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_hollygreen {
   background-image: url(spritesmith0.png);
-  background-position: -673px -755px;
+  background-position: -764px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_midnight {
   background-image: url(spritesmith0.png);
-  background-position: -557px -740px;
+  background-position: -648px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_midnight {
   background-image: url(spritesmith0.png);
-  background-position: -582px -755px;
+  background-position: -673px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_pblue {
   background-image: url(spritesmith0.png);
-  background-position: -466px -740px;
+  background-position: -557px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_pblue {
   background-image: url(spritesmith0.png);
-  background-position: -491px -755px;
+  background-position: -582px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_pblue2 {
   background-image: url(spritesmith0.png);
-  background-position: -375px -740px;
+  background-position: -466px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_pblue2 {
   background-image: url(spritesmith0.png);
-  background-position: -400px -755px;
+  background-position: -491px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_peppermint {
   background-image: url(spritesmith0.png);
-  background-position: -284px -740px;
+  background-position: -375px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_peppermint {
   background-image: url(spritesmith0.png);
-  background-position: -309px -755px;
+  background-position: -400px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_pgreen {
   background-image: url(spritesmith0.png);
-  background-position: -364px -979px;
+  background-position: -284px -740px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_pgreen {
   background-image: url(spritesmith0.png);
-  background-position: -389px -994px;
+  background-position: -309px -755px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_pgreen2 {
   background-image: url(spritesmith0.png);
-  background-position: -273px -979px;
+  background-position: -364px -979px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_pgreen2 {
   background-image: url(spritesmith0.png);
-  background-position: -298px -994px;
+  background-position: -389px -994px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_porange {
   background-image: url(spritesmith0.png);
-  background-position: -182px -979px;
+  background-position: -273px -979px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_porange {
   background-image: url(spritesmith0.png);
-  background-position: -207px -994px;
+  background-position: -298px -994px;
   width: 60px;
   height: 60px;
 }
 .hair_base_10_porange2 {
   background-image: url(spritesmith0.png);
-  background-position: -91px -979px;
+  background-position: -182px -979px;
   width: 90px;
   height: 90px;
 }
 .customize-option.hair_base_10_porange2 {
+  background-image: url(spritesmith0.png);
+  background-position: -207px -994px;
+  width: 60px;
+  height: 60px;
+}
+.hair_base_10_ppink {
+  background-image: url(spritesmith0.png);
+  background-position: -91px -979px;
+  width: 90px;
+  height: 90px;
+}
+.customize-option.hair_base_10_ppink {
   background-image: url(spritesmith0.png);
   background-position: -116px -994px;
   width: 60px;

common/locales/en/defaultTasks.json

@@ -1,11 +1,12 @@
 {
-  "defaultHabit1Text": "Good Habit",
+  "defaultTaskNotes": " ",
+  "defaultHabit1Text": "Productive Work (Click the pencil to edit)",
   "defaultHabit1Notes": "Sample Good Habits: + Eat a vegetable +15 minutes productive work",
 
-  "defaultHabit2Text": "Bad Habit",
+  "defaultHabit2Text": "Eat Junk Food (Click the pencil to edit)",
   "defaultHabit2Notes": "Sample Bad Habits: - Smoke - Procrastinate",
 
-  "defaultHabit3Text": "Good or Bad Habit",
+  "defaultHabit3Text": "Take the Stairs/Elevator (Click the pencil to edit)",
   "defaultHabit3Notes": "Sample Good or Bad Habits: +/- Took Stairs/Elevator ; +/- Drank Water/Soda",
 
   "defaultDaily1Text": "1h Personal Project",
@@ -44,7 +45,7 @@
 
   "defaultTodo5Text": "Start a Party (private group) with your friends (Social > Party)",
 
-  "defaultReward1Text": "1 Episode of Game of Thrones",
+  "defaultReward1Text": "15 minute break",
   "defaultReward1Notes": "Custom rewards can come in many forms. Some people will hold off watching their favorite show unless they have the gold to pay for it.",
 
   "defaultReward2Text": "Cake",

common/locales/en/generic.json

@@ -54,7 +54,7 @@
     "gems": "Gems",
     "gemButton": "You have <%= number %> Gems.",
     "moreInfo": "More Info",
-    "gemsWhatFor": "Purchased using real money. Used for buying special items and services (eggs, hatching potions, Fortify, etc.). You'll need to unlock those features before being able to use Gems.",
+    "gemsWhatFor": "Click to buy Gems! Gems let you purchase special items like Quests, avatar customizations, and seasonal equipment.",
     "veteran": "Veteran",
     "veteranText": "Has weathered Habit The Grey (our pre Angular website), and has gained many battle-scars from its bugs.",
     "originalUser": "Original User!",

common/locales/en/npc.json

@@ -48,10 +48,36 @@
     "tourMuchMore": "When you're done with tasks, you can form a Party with friends, chat in the shared-interest Guilds, join Challenges, and more!",
 
     "tourStatsPage": "This is your Stats page! Earn achievements by completing the listed tasks.",
-    "tourTavernPage": "Welcome to the Tavern, an all-ages chatroom! You can keep your Dailies from hurting you in case of illness or travel by clicking \"Rest in the Inn.\" Come say hi!",
+    "tourTavernPage": "Welcome to the Tavern, an all-ages chat room! You can keep your Dailies from hurting you in case of illness or travel by clicking \"Rest in the Inn.\" Come say hi!",
     "tourPartyPage": "Your Party will help you stay accountable. Invite friends to unlock a Quest Scroll!",
-    "tourGuildsPage": "Guilds are social groups with common themes. Search for the subjects that interest you! We recommend the Newbies Guild.",
-    "tourChallengesPage": "Challenges are themed task lists created by users! Joining a Challenge will add its tasks to your account. Compete against other users to win gem prizes!",
-    "tourMarketPage": "Starting at Level 4, eggs and hatching potions drop randomly when you complete tasks. They appear here - use them to hatch pets! You can also buy items from the Market."
+    "tourGuildsPage": "Guilds are common-interest chat groups created by the players, for the players. Browse through the list and join the Guilds that interest you. Be sure to check out the popular Newbies Guild, where anyone can ask questions about HabitRPG!",
+    "tourChallengesPage": "Challenges are themed task lists created by users! Joining a Challenge will add its tasks to your account. Compete against other users to win Gem prizes!",
+    "tourMarketPage": "Starting at Level 4, eggs and hatching potions drop randomly when you complete tasks. They appear here - use them to hatch pets! You can also buy items from the Market.",
+    "tourHallPage": "Welcome to the Hall of Heroes, where open-source contributors to HabitRPG are honored. Whether through code, art, music, writing, or even just helpfulness, they have earned Gems, exclusive equipment, and prestigious titles. You can contribute to HabitRPG, too!",
+    "tourPetsPage": "This is the Stable! After level 4, you can hatch pets using eggs and potions. When you hatch a pet in the Market, it will appear here! Click a pet's image to add it to your avatar. Feed them with the food you find after level 4, and they'll grow into powerful mounts.",
+    "tourMountsPage": "Once you've fed a pet enough food to turn it into a mount, it will appear here. (Pets, mounts, and food are available after level 4.) Click a mount to saddle up!",
+    "tourEquipmentPage": "This is where your Equipment is stored! Your Battle Gear affects your stats. If you want to show different Equipment on your avatar without changing your stats, click \"Enable Costume.\"",
 
+    "tourOkay": "Okay!",
+    "tourAwesome": "Awesome!",
+    "tourSplendid": "Splendid!",
+    "tourNifty": "Nifty!",
+
+    "tourAvatar": "<strong>Customize Your Avatar</strong><ul><li>Your avatar represents you.</li><li>Customize now, or return later.</li><li>Your avatar starts plain until you've earned Equipment!</li></ul>",
+    "tourAvatarProceed": "Show me my tasks!",
+    "tourToDosBrief": "<strong>To-Do List</strong><ul><li>Check off To-Dos to earn Gold & Experience!</li><li>To-Dos never make your avatar lose Health.</li></ul>",
+    "tourDailiesBrief": "<strong>Daily Tasks</strong><ul><li>Dailies repeat every day.</li><li>You lose Health if you skip Dailies.</li></ul>",
+    "tourDailiesProceed": "I'll be careful!",
+    "tourHabitsBrief": "<strong>Good & Bad Habits</strong><ul><li>Good Habits award Gold & Experience.</li><li>Bad Habits make you lose Health.</li></ul>",
+    "tourHabitsProceed": "Makes sense!",
+    "tourRewardsBrief": "<strong>Reward List</strong><ul><li>Spend your hard-earned Gold here!</li><li>Purchase Equipment for your avatar, or set custom Rewards.</li></ul>",
+    "tourRewardsProceed": "That's all!",
+
+    "welcomeToHabit": "Welcome to HabitRPG, a game to improve your life!",
+    "welcome1": "Create and customize an in-game avatar to represent you.",
+    "welcome2": "Your real-life tasks affect your avatar's Health (HP), Experience (XP), and Gold!",
+    "welcome3": "Complete tasks to earn Experience (XP) and Gold, which unlock awesome features and rewards!",
+    "welcome4": "Avoid bad habits that drain Health (HP), or your avatar will die!",
+    "welcome5": "Now you'll customize your avatar and set up your tasks...",
+    "imReady": "I'm Ready!"
 }

common/locales/en/tasks.json

@@ -78,5 +78,22 @@
     "pushTaskToTop": "Push task to top",
     "pushTaskToBottom": "Push task to bottom",
     "emptyTask": "Enter the task's title first.",
-    "dailiesRestingInInn": "You're Resting in the Inn! Your Dailies will NOT hurt you tonight, but they WILL still refresh every day. If you're in a quest, you won't deal damage/collect items until you check out of the Inn, but you can still be injured by a Boss if your Party mates skip their own Dailies."
+    "dailiesRestingInInn": "You're Resting in the Inn! Your Dailies will NOT hurt you tonight, but they WILL still refresh every day. If you're in a quest, you won't deal damage/collect items until you check out of the Inn, but you can still be injured by a Boss if your Party mates skip their own Dailies.",
+    "habitHelp1": "Good Habits are things that you do often. They award Gold and Experience every time you click the <%= plusIcon %>.",
+    "habitHelp2": "Bad Habits are things you want to avoid doing. They remove Health every time you click the <%= minusIcon %>.",
+    "habitHelp3": "For inspiration, check out <%= linkStart %>these sample Habits<%= linkEnd %>.",
+    "newbieGuild": "More questions? Ask in the <%= linkStart %>Newbies Guild<%= linkEnd %>!",
+    "dailyHelp1": "Dailies repeat <%= emphasisStart %>every day<%= emphasisEnd %> that they are active. Click the <%= pencilIcon %> to change the days a Daily is active.",
+    "dailyHelp2": "If you don't complete active Dailies, you lose Health when your day rolls over.",
+    "dailyHelp3": "Dailies turn <%= emphasisStart %>redder<%= emphasisEnd %> when you miss them, and <%= emphasisStart %>bluer<%= emphasisEnd %> when you complete them. The redder the Daily, the more it will reward you... or hurt you.",
+    "dailyHelp4": "To change when your day rolls over, go to <%= linkStart %> Settings > Site<%= linkEnd %> > Custom Day Start.",
+    "dailyHelp5": "For inspiration, check out these <%= linkStart %>sample Dailies<%= linkEnd %>!",
+    "toDoHelp1": "To-Dos start yellow, and get redder (more valuable) the longer it takes to complete them.",
+    "toDoHelp2": "To-Dos never hurt you! They only award Gold and Experience.",
+    "toDoHelp3": "Breaking a To-Do down into a checklist of smaller items will make it less scary, and will increase your points!",
+    "toDoHelp4": "For inspiration, check out these <%= linkStart %>sample To-Dos<%= linkEnd %>!",
+    "rewardHelp1": "The Equipment you buy for your avatar is stored in <%= linkStart %>Inventory > Equipment<%= linkEnd %>.",
+    "rewardHelp2": "Equipment affects your stats (<%= linkStart %>Avatar > Stats<%= linkEnd %>).",
+    "rewardHelp3": "Special equipment will appear here during World Events.",
+    "rewardHelp4": "Don't be afraid to set custom Rewards! Check out some samples <%= linkStart %>here<%= linkEnd %>."
 }

common/script/content.coffee

@@ -1852,9 +1852,9 @@ _.each api.subscriptionBlocks, (b,k)->b.key = k
 repeat = {m:true,t:true,w:true,th:true,f:true,s:true,su:true}
 api.userDefaults =
   habits: [
-    {type: 'habit', text: t('defaultHabit1Text'), notes: t('defaultHabit1Notes'), value: 0, up: true, down: false, attribute: 'str' }
-    {type: 'habit', text: t('defaultHabit2Text'), notes: t('defaultHabit2Notes'), value: 0, up: false, down: true, attribute: 'str'}
-    {type: 'habit', text: t('defaultHabit3Text'), notes: t('defaultHabit3Notes'), value: 0, up: true, down: true, attribute: 'str'}
+    {type: 'habit', text: t('defaultHabit1Text'), notes: t('defaultTaskNotes'), value: 0, up: true, down: false, attribute: 'per' }
+    {type: 'habit', text: t('defaultHabit2Text'), notes: t('defaultTaskNotes'), value: 0, up: false, down: true, attribute: 'str'}
+    {type: 'habit', text: t('defaultHabit3Text'), notes: t('defaultTaskNotes'), value: 0, up: true, down: true, attribute: 'str'}
   ]
 
   dailys: [
@@ -1873,7 +1873,7 @@ api.userDefaults =
   ]
 
   rewards: [
-#    {type: 'reward', text: t('defaultReward1Text'), notes: t('defaultReward1Notes'), value: 20 }
+    {type: 'reward', text: t('defaultReward1Text'), notes: t('defaultTaskNotes'), value: 10 }
 #    {type: 'reward', text: t('defaultReward2Text'), notes: t('defaultReward2Notes'), value: 10 }
   ]
 

website/public/js/controllers/tasksCtrl.js

@@ -15,7 +15,6 @@ habitrpg.controller("TasksCtrl", ['$scope', '$rootScope', '$location', 'User','N
               break;
           case 'todo':
               $rootScope.playSound('ToDo');
-              Guide.goto('intro', 1);
               break;
           default:
               if (direction === 'down') $rootScope.playSound('Minus_Habit');

website/public/js/services/guideServices.js

@@ -10,73 +10,44 @@ function($rootScope, User, $timeout, $state) {
 
   var chapters = {
     intro: [
-      [ //0
+      [
+        {
+          state: 'options.profile.avatar',
+          element: '.tab-content.ng-scope',
+          content: window.env.t('tourAvatar'),
+          placement: "top",
+          proceed: window.env.t('tourAvatarProceed'),
+          backdrop: false,
+          orphan: true
+        },
         {
           state: 'tasks',
           element: ".task-column.todos",
-          content: window.env.t('tourWelcome'),
-          placement: "top"
-        }
-      ], [ //1
+          content: window.env.t('tourToDosBrief'),
+          placement: "top",
+          proceed: window.env.t('tourOkay')
+        },
         {
-          state: 'tasks',
-          element: '.sticky-wrapper',
-          content: window.env.t('tourExp'),
-          placement: 'bottom'
-        }, {
           state: 'tasks',
           element: ".task-column.dailys",
-          content: window.env.t('tourDailies'),
-          placement: "top"
-        }
-      ], [ //2
+          content: window.env.t('tourDailiesBrief'),
+          placement: "top",
+          proceed: window.env.t('tourDailiesProceed')
+        },
         {
-          orphan: true,
-          content: window.env.t('tourCron'),
-          placement: 'bottom'
-        }, {
-          state: 'tasks',
-          element: '.meter.health',
-          content: window.env.t('tourHP'),
-          placement: 'bottom'
-        }, {
           state: 'tasks',
           element: ".task-column.habits",
-          content: window.env.t('tourHabits'),
-          placement: "right"
-        }
-      ], [ //3
+          content: window.env.t('tourHabitsBrief'),
+          placement: "right",
+          proceed: window.env.t('tourHabitsProceed')
+        },
         {
-          state: 'tasks',
-          element: ".hero-stats",
-          content: window.env.t('tourStats')
-        }, {
           state: 'tasks',
           element: ".task-column.rewards",
-          content: window.env.t('tourGP'),
-          placement: 'left'
-        }
-      ], [ //4
-        {
-          state: 'tasks',
-          element: '.main-herobox',
-          content: window.env.t('tourAvatar'),
-          placement: 'bottom'
-        }
-      ], [ //5
-        {
-          state: 'options.profile.avatar',
-          orphan: true,
-          content: window.env.t('tourScrollDown')
-        }, {
-          element: "ul.toolbar-nav",
-          backdrop:false,
-          content: window.env.t('tourMuchMore'),
-          placement: "bottom",
-          final: true,
-          //onHidden: function(){
-          //  $rootScope.$watch('user.flags.customizationsNotification', _.partial(goto, 'intro', 4));
-          //}
+          content: window.env.t('tourRewardsBrief'),
+          placement: "top",
+          proceed: window.env.t('tourRewardsProceed'),
+          final: true
         }
       ]
     ],
@@ -114,42 +85,90 @@ function($rootScope, User, $timeout, $state) {
       {
         orphan: true,
         content: window.env.t('tourStatsPage'),
-        final: true
+        final: true,
+        proceed: window.env.t('tourOkay'),
+        hideNavigation: true
       }
     ]],
     tavern: [[
       {
         orphan: true,
         content: window.env.t('tourTavernPage'),
-        final: true
+        final: true,
+        proceed: window.env.t('tourAwesome'),
+        hideNavigation: true
       }
     ]],
     party: [[
       {
         orphan: true,
         content: window.env.t('tourPartyPage'),
-        final: true
+        final: true,
+        proceed: window.env.t('tourSplendid'),
+        hideNavigation: true
       }
     ]],
     guilds: [[
       {
         orphan: true,
         content: window.env.t('tourGuildsPage'),
-        final: true
+        final: true,
+        proceed: window.env.t('tourNifty'),
+        hideNavigation: true
       }
     ]],
     challenges: [[
       {
         orphan: true,
         content: window.env.t('tourChallengesPage'),
-        final: true
+        final: true,
+        proceed: window.env.t('tourOkay'),
+        hideNavigation: true
       }
     ]],
     market: [[
       {
         orphan: true,
         content: window.env.t('tourMarketPage'),
-        final: true
+        final: true,
+        proceed: window.env.t('tourAwesome'),
+        hideNavigation: true
+      }
+    ]],
+    hall: [[
+      {
+        orphan: true,
+        content: window.env.t('tourHallPage'),
+        final: true,
+        proceed: window.env.t('tourSplendid'),
+        hideNavigation: true
+      }
+    ]],
+    pets: [[
+      {
+        orphan: true,
+        content: window.env.t('tourPetsPage'),
+        final: true,
+        proceed: window.env.t('tourNifty'),
+        hideNavigation: true
+      }
+    ]],
+    mounts: [[
+      {
+        orphan: true,
+        content: window.env.t('tourMountsPage'),
+        final: true,
+        proceed: window.env.t('tourOkay'),
+        hideNavigation: true
+      }
+    ]],
+    equipment: [[
+      {
+        orphan: true,
+        content: window.env.t('tourEquipmentPage'),
+        final: true,
+        proceed: window.env.t('tourAwesome'),
+        hideNavigation: true
       }
     ]]
   }
@@ -187,31 +206,23 @@ function($rootScope, User, $timeout, $state) {
         var showFinish = step.final || k == 'classes';
         var showCounter = k=='intro' && !step.final;
 
-        // Experiment wud1Ba5qT1m9qR3PP0-Mmg , remove this when experiment complete
-        // 0=No Finish; Yes Counter 1=No Finish; No Counter 2=Yes Finish; Yes Counter 3=Yes Finish; No Counter
-        showFinish = showFinish || $rootScope.variant==2 || $rootScope.variant==3;
-        showCounter = showCounter && ($rootScope.variant==0 || $rootScope.variant==2);
-
-        // FIXME temporarily set finish & counter on until we can get experiment working
-        showFinish=true;showCounter=true;
-
         return '<div class="popover" role="tooltip">' +
           '<div class="arrow"></div>' +
           '<h3 class="popover-title"></h3>' +
           '<div class="popover-content"></div>' +
           '<div class="popover-navigation"> ' +
             //'<button class="btn btn-sm btn-default" data-role="end" style="float:none;">' + (step.final ? 'Finish Tour' : 'Hide') + '</button>' +
-            (showFinish ? '<button class="btn btn-sm btn-default" data-role="end" style="float:none;">Finish Tour</button>' : '') +
             (showCounter ? '<span style="float:right;">'+ (i+1 +' of '+ _.flatten(chapters[k]).length) +'</span>' : '')+ // counter
             '<div class="btn-group">' +
-              '<button class="btn btn-sm btn-default" data-role="prev">&laquo; Prev</button>' +
-              '<button class="btn btn-sm btn-default" data-role="next">Next &raquo;</button>' +
+              (step.hideNavigation ? '' : '<button class="btn btn-sm btn-default" data-role="prev">&laquo; Previous</button>') +
+              (showFinish ? ('<button class="btn btn-sm btn-primary" data-role="end" style="float:none;">' + (step.proceed ? step.proceed : "Finish Tour") + '</button>') :
+                (step.hideNavigation ? '' : ('<button class="btn btn-sm btn-primary" data-role="next">' + (step.proceed ? step.proceed : "Next") + ' &raquo;</button>'))) +
               '<button class="btn btn-sm btn-default" data-role="pause-resume" data-pause-text="Pause" data-resume-text="Resume">Pause</button>' +
             '</div>' +
           '</div>' +
           '</div>';
       },
-      storage: false,
+      storage: false
       //onEnd: function(){
       //  User.set({'flags.showTour': false});
       //}
@@ -220,6 +231,7 @@ function($rootScope, User, $timeout, $state) {
 
   var goto = function(chapter, page, force) {
     //return; // TODO temporarily remove old tutorial system while experimenting with leslie's new gettup
+    if (chapter == 'intro') User.set({'flags.welcomed': true});
     var curr = User.user.flags.tour[chapter];
     if (page != curr+1 && !force) return;
     var updates = {};updates['flags.tour.'+chapter] = page;
@@ -245,21 +257,27 @@ function($rootScope, User, $timeout, $state) {
     if (!updateFn) return; // only run after user has been wrapped
     watcher(); // deregister watcher
     if (window.env.IS_MOBILE) return; // Don't show tour immediately on mobile devices
-    goto('intro', 0); // kick off first step on first visit
+    if (User.user.flags.welcomed == false) {
+      $rootScope.openModal('welcome', {size: 'lg', backdrop: 'static', keyboard: false});
+    }
 
     var alreadyShown = function(before, after) { return !(!before && after === true) };
     //$rootScope.$watch('user.flags.dropsEnabled', _.flow(alreadyShown, function(already) { //FIXME requires lodash@~3.2.0
     $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
       switch (toState.name) {
-        case 'options.profile.avatar':   return goto('intro', 5);
-        case 'options.profile.stats':    return goto('stats', 0);
-        case 'options.social.tavern':    return goto('tavern', 0);
-        case 'options.social.party':     return goto('party', 0);
-        case 'options.social.guilds':    return goto('guilds', 0);
-        case 'options.social.challenges':return goto('challenges', 0);
-        case 'options.inventory.drops':  return goto('market', 0);
+        // case 'options.profile.avatar':   return goto('intro', 5);
+        case 'options.profile.stats':        return goto('stats', 0);
+        case 'options.social.tavern':        return goto('tavern', 0);
+        case 'options.social.party':         return goto('party', 0);
+        case 'options.social.guilds.public': return goto('guilds', 0);
+        case 'options.social.challenges':    return goto('challenges', 0);
+        case 'options.social.hall.heroes':   return goto('hall', 0);
+        case 'options.inventory.drops':      return goto('market', 0);
+        case 'options.inventory.pets':       return goto('pets', 0);
+        case 'options.inventory.mounts':     return goto('mounts', 0);
+        case 'options.inventory.equipment':  return goto('equipment', 0);
       }
-    })
+    });
     $rootScope.$watch('user.flags.dropsEnabled', function(after, before) {
       if (alreadyShown(before,after)) return;
       var eggs = User.user.items.eggs || {};

website/src/models/user.js

@@ -129,7 +129,11 @@ var UserSchema = new Schema({
       party: {type: Number,       'default': -1},
       guilds: {type: Number,      'default': -1},
       challenges: {type: Number,  'default': -1},
-      market: {type: Number,      'default': -1}
+      market: {type: Number,      'default': -1},
+      pets: {type: Number,        'default': -1},
+      mounts: {type: Number,      'default': -1},
+      hall: {type: Number,        'default': -1},
+      equipment: {type: Number,   'default': -1}
     },
     dropsEnabled: {type: Boolean, 'default': false},
     itemsEnabled: {type: Boolean, 'default': false},
@@ -151,7 +155,8 @@ var UserSchema = new Schema({
     // Used to track when the next weekly recap should be sent
     lastWeeklyRecap: {type: Date, 'default': Date.now},
     communityGuidelinesAccepted: {type: Boolean, 'default': false},
-    cronCount: {type:Number, 'default':0}
+    cronCount: {type:Number, 'default':0},
+    welcomed: {type: Boolean, 'default': false}
   },
   history: {
     exp: Array, // [{date: Date, value: Number}], // big peformance issues if these are defined

website/views/shared/modals/index.jade

@@ -11,3 +11,4 @@ include ./quests
 include ./rebirth
 include ./limited
 include ./invite-friends
+include ./welcome.jade

website/views/shared/modals/welcome.jade

@@ -0,0 +1,18 @@
+// Created by sabrecat on 5/18/15.
+
+script(type='text/ng-template', id='modals/welcome.html')
+   .modal-header
+      h4=env.t('welcomeToHabit')
+   .modal-body.text-center
+      h4=env.t('welcome1')
+      .welcome_to_Habit_1.center-block
+      h4=env.t('welcome2')
+      .welcome_to_Habit_2.center-block
+      h4=env.t('welcome3')
+      .welcome_to_Habit_3.center-block
+      h4=env.t('welcome4')
+      .welcome_to_Habit_4.center-block
+   .modal-footer
+      span.h4=env.t('welcome5')
+      | 
+      span.button.btn.btn-primary(ng-click='$close(); Guide.goto("intro",0)')=env.t('imReady')

website/views/shared/tasks/lists.jade

@@ -16,7 +16,7 @@ script(id='templates/habitrpg-tasks.html', type="text/ng-template")
               span.glyphicon.glyphicon-calendar
             // <a href="https://www.google.com/calendar/render?cid={{encodeiCalLink(_user.id, _user.apiToken)}}" rel=tooltip title="Google Calendar"><i class=icon-calendar></i></a>
             a.option-action(ng-click='list.help=!list.help', tooltip='Click for help')
-              span.glyphicon.glyphicon-question-sign
+              span.glyphicon.glyphicon-question-sign(style={'zoom':1.5,'vertical-align':'-webkit-baseline-middle'})
 
           // Header
           h2.task-column_title
@@ -25,35 +25,32 @@ script(id='templates/habitrpg-tasks.html', type="text/ng-template")
           div(ng-if='list.help', ng-switch='::list.type')
             div(ng-switch-when='habit')
               ul
-                li Good Habits are things that you do often. They award gold and experience every time you click the <code>+</code>.
-                li Bad Habits are things you want to avoid doing. They remove health every time you click the <code>-</code>.
-                li For inspiration, check out these <a href='http://habitrpg.wikia.com/wiki/Sample_Habits#Business' target='_blank'>sample Habits</a>
-                li More questions? Ask in <a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>the Newbies Guild!</a>
+                li!=env.t('habitHelp1', {plusIcon:"<span class='glyphicon glyphicon-plus'></span>"})
+                li!=env.t('habitHelp2', {minusIcon:"<span class='glyphicon glyphicon-minus'></span>"})
+                li!=env.t('habitHelp3')
+                li!=env.t('newbieGuild', {linkStart:"<a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>", linkEnd: "</a>"})
             div(ng-switch-when='daily')
               ul
-                li Dailies repeat <strong>every day</strong> that they are active. Click the pencil icon to change the days a Daily is active.
-                li If you don’t complete active Dailies, they will hurt your avatar when your day rolls over.
-                li Dailies turn <strong>redder</strong> when you miss them, and <strong>bluer</strong> when you complete them. The redder the Daily, the more it will reward you... and hurt you.
-                li To change when your day rolls over, go to Settings > Site > Custom Day Start.
-                li For inspiration, check out these <a href='http://habitrpg.wikia.com/wiki/Sample_Dailies#Business' target='_blank'>sample Dailies</a>!
-                li More questions? Ask in <a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>the Newbies Guild!</a>
-
+                li!=env.t('dailyHelp1', {emphasisStart:"<strong>", emphasisEnd:"</strong>", pencilIcon:"<span class='glyphicon glyphicon-pencil'></span>"})
+                li!=env.t('dailyHelp2')
+                li!=env.t('dailyHelp3', {emphasisStart:"<strong>", emphasisEnd:"</strong>"})
+                li!=env.t('dailyHelp4', {linkStart:"<a href='/#/options/settings/settings' target='_blank'>", linkEnd:"</a>"})
+                li!=env.t('dailyHelp5')
+                li!=env.t('newbieGuild', {linkStart:"<a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>", linkEnd: "</a>"})
             div(ng-switch-when='todo')
               ul
-                li To-Dos start yellow, and get redder (more valuable) the longer it takes to complete them.
-                li To-Dos never hurt you! They only award gold and experience.
-                li Breaking a To-Do down into a small checklist will make it less scary, and will increase your points!
-                li For inspiration, check out these <a href='http://habitrpg.wikia.com/wiki/Sample_To-Dos#Finances' target='_blank'>sample To-Dos</a>!
-                li More questions? Ask in <a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>the Newbies Guild!</a>
-
+                li!=env.t('toDoHelp1')
+                li!=env.t('toDoHelp2')
+                li!=env.t('toDoHelp3')
+                li!=env.t('toDoHelp4')
+                li!=env.t('newbieGuild', {linkStart:"<a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>", linkEnd: "</a>"})
             div(ng-switch-when='reward')
               ul
-                li The Equipment you buy for your avatar is stored in Inventory > Equipment.
-                li Equipment affects your stats (Avatar > Stats).
-                li There will be special equipment here during World Events.
-                li Don't be afraid to set custom rewards! Check out some samples <a href='http://habitrpg.wikia.com/wiki/Sample_Custom_Rewards' target='_blank'>here</a>
-                li More questions? Ask in <a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>the Newbies Guild!</a>
-
+                li!=env.t('rewardHelp1', {linkStart:"<a href='/#/options/inventory/equipment' target='_blank'>", linkEnd: "</a>"})
+                li!=env.t('rewardHelp2', {linkStart:"<a href='/#/options/profile/stats' target='_blank'>", linkEnd: "</a>"})
+                li!=env.t('rewardHelp3')
+                li!=env.t('rewardHelp4')
+                li!=env.t('newbieGuild', {linkStart:"<a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>", linkEnd: "</a>"})
 
           // Todo Chart
           .todos-chart(ng-if='::list.type == "todo"', ng-show='charts.todos')
@@ -120,6 +117,13 @@ script(id='templates/habitrpg-tasks.html', type="text/ng-template")
 
           +taskColumnTabs('top')
 
+          // Actual List
+          ul(class='{{list.type}}s main-list', ng-show='obj[list.type + "s"].length > 0', hrpg-sort-tasks, ng-if='!$state.includes("options.social.challenges")')
+            include ./task
+          //Loads the non-sortable lists for challenges
+          ul(class='{{list.type}}s main-list', ng-show='obj[list.type + "s"].length > 0', ng-if='$state.includes("options.social.challenges")')
+            include ./task
+
           // Static Rewards
           ul.items.rewards(ng-if='main && list.type=="reward"')
             li.task.reward-item(ng-repeat='item in itemStore',popover-trigger='mouseenter', popover-placement='top', popover='{{item.notes()}}')
@@ -163,13 +167,6 @@ script(id='templates/habitrpg-tasks.html', type="text/ng-template")
             +specialSpell('opaquePotion','spookDust')
             +specialSpell('petalFreePotion','shinySeed')
 
-          // Actual List
-          ul(class='{{list.type}}s main-list', ng-show='obj[list.type + "s"].length > 0', hrpg-sort-tasks, ng-if='!$state.includes("options.social.challenges")')
-            include ./task
-          //Loads the non-sortable lists for challenges
-          ul(class='{{list.type}}s main-list', ng-show='obj[list.type + "s"].length > 0', ng-if='$state.includes("options.social.challenges")')
-            include ./task
-
           // Spells
           ul.items(ng-if='main && list.type=="reward" && user.stats.class && !user.preferences.disableClasses')
             li.task.reward-item(ng-repeat='(k,skill) in Content.spells[user.stats.class]', ng-if='user.stats.lvl >= skill.lvl',popover-trigger='mouseenter', popover-placement='top', popover='{{skill.notes()}}')