classes: add just guide for classes unlock

public/js/controllers/userCtrl.js

@@ -1,7 +1,7 @@
 "use strict";
 
-habitrpg.controller("UserCtrl", ['$rootScope', '$scope', '$location', 'User', '$http', '$state',
-  function($rootScope, $scope, $location, User, $http, $state) {
+habitrpg.controller("UserCtrl", ['$rootScope', '$scope', '$location', 'User', '$http', '$state', 'Guide',
+  function($rootScope, $scope, $location, User, $http, $state, Guide) {
     $scope.profile = User.user;
     $scope.hideUserAvatar = function() {
       $(".userAvatar").hide();
@@ -26,6 +26,7 @@ habitrpg.controller("UserCtrl", ['$rootScope', '$scope', '$location', 'User', '$
       $scope.selectedClass = undefined;
       $rootScope.Shared.updateStore(User.user);
       $state.go('options.profile.stats');
+      Guide.classesTour();
     }
 
     $scope.save = function(){

public/js/services/guideServices.js

@@ -139,8 +139,64 @@ angular.module('guideServices', []).
       }
     });
 
+
+
+
+    /**
+     * Classes Tour
+     */
+    function classesTour(){
+      var tourSteps = [
+        {
+          element: ".allocate-stats",
+          title: "Stats",
+          content: "These are your class's stats, they effect the game-play. Each time you level up, you get one point to allocate to particular stat. Hover over each stat for more information.",
+        }, {
+          element: ".auto-allocate",
+          title: "Auto Allocate",
+          placement: 'left',
+          content: "If 'automatic allocation' is checked, you're avatar gains stats automatically based on your tasks' attributes, which you can find in <strong>TASK > Edit > Advanced > Attributes</strong>. Eg, if you hit the gym often, and your 'Gym' Daily is set to 'Physical', you'll gain STR auotmatically.",
+        }, {
+          element: ".auto-allocate",
+          title: "Auto Allocate",
+          placement: 'left',
+          content: "We recommend auto-allocate if you (a) want to 'role play' your avatar, or (b) can't be bothered with the class system (HabitRPG jumping the shark?). For other players who desire maximum control, leave 'auto allocate' unchecked.",
+        }, {
+          element: ".meter.mana",
+          title: "Spells",
+          content: "You can now unlock class-specific spells. You'll see your first at level 6."
+        }, {
+//          onShow: function(tour){
+//            $rootScope.$state.go('options.inventory.inventory');
+//          },
+          element: '.stats-equipment',
+          title: "Class Gear",
+          content: "Your old gear has been placed into your inventory, you're now wearing your apprentice " + User.user.stats.class + " equippment. Wearing your class's gear grants you a 1.5% bonus to stats. However, feel free to switch back to your old gear."
+        }, {
+          element: ".stats-equipment",
+            title: "Read More",
+            content: "For more information on the class-system, see <a href='http://habitrpg.wikia.com/wiki/Class_System' target='_blank'>Wikia</a>.",
+        }
+      ];
+      _.each(tourSteps, function(step){
+        step.content = "<div><div class='npc_justin float-left'></div>" + step.content + "</div>"; // add Justin NPC img
+      });
+      $('.allocate-stats').popover('destroy');
+      var tour = new Tour({
+//        onEnd: function(){
+//          User.set({'flags.showTour': false});
+//        }
+      });
+      tourSteps.forEach(function(step) {
+        tour.addStep(_.defaults(step, {html: true}));
+      });
+      tour.restart(); // Tour doesn't quite mesh with our handling of flags.showTour, just restart it on page load
+      //tour.start(true);
+    };
+
     return {
-      initTour:initTour
+      initTour: initTour,
+      classesTour: classesTour
     };
 
   }

views/options/inventory/inventory.jade

@@ -33,7 +33,7 @@ script(type='text/ng-template', id='partials/options.inventory.inventory.html')
         hr
 
         h4 Gear
-        li.customize-menu
+        li.customize-menu.inventory-gear
           menu.pets-menu(label='{{label}}', ng-repeat='(klass,label) in {base:"Base", warrior:"Warrior", wizard:"Wizard", rogue:"Rogue", special:"Special"}', ng-show='gear[klass]')
             div(ng-repeat='item in gear[klass]')
               button.customize-option(popover='{{item.notes}}', popover-title='{{item.text}}', popover-trigger='mouseenter', popover-placement='right', ng-click='user.ops.equip({params:{key:item.key}})', class='shop_{{item.key}}', ng-class='{selectableInventory: user.items.gear.equipped[item.type] == item.key}')

views/options/profile.jade

@@ -122,7 +122,7 @@ script(id='partials/options.profile.stats.html', type='text/ng-template')
   .row-fluid
     .border-right(ng-class='user.stats.lvl <  5 ? "span6" : "span4"')
       include ../shared/profiles/stats
-    .span4.border-right(ng-show='user.stats.lvl >= 5')
+    .span4.border-right.allocate-stats(ng-show='user.stats.lvl >= 5')
       h4
         | {{user.stats.class}}&nbsp;
         a.btn.btn-danger.btn-mini(ng-click='changeClass(null)')
@@ -130,7 +130,7 @@ script(id='partials/options.profile.stats.html', type='text/ng-template')
         small 3 <span class="Pet_Currency_Gem1x inline-gems"/>
 
       h6 Points: {{user.stats.points}}
-      fieldset
+      fieldset.auto-allocate
         label.checkbox
           input(type='checkbox', ng-model='user.preferences.automaticAllocation', ng-change='set({"preferences.automaticAllocation": user.preferences.automaticAllocation?true: false})')
           | Automatic Allocation

views/shared/profiles/stats.jade

@@ -1,4 +1,4 @@
-h4 Equipment
+h4.stats-equipment Equipment
 p(ng-repeat='(k,v) in user.items.gear.equipped', ng-init='piece=Content.gear.flat[v]', ng-show='piece')
   strong {{piece.text}}: 
   span(ng-repeat='stat in ["str","con","per","int"]', ng-show='piece[stat]') {{piece[stat]}}{{stat}}