[#1397 #1543 #1540] start adding in unlock notifications (working for some, not for all). Also some tour & header fixes

Gruntfile.js

@@ -81,7 +81,6 @@ module.exports = function(grunt) {
             'public/bower_components/bootstrap/docs/assets/js/bootstrap.min.js',
 
             'public/js/static.js',
-            'public/js/services/memberServices.js',
             'public/js/services/userServices.js',
             'public/js/controllers/authCtrl.js'
           ]

public/css/header.styl

@@ -8,7 +8,7 @@
   border-bottom: 1px solid rgba(0,0,0,0.2)
   // margin-top: -1px
   overflow: hidden
-  position relative
+  // position relative
 
 /* login/menu buttons
 --------------------- */

public/css/npcs.styl

@@ -18,10 +18,11 @@
     width: 54px
     height: 30px
     position: absolute
-    bottom: 0px
+    top: 117px // 147 (header-height) - 30 (bailey height)
     right: 50px
     cursor: pointer
 
+
 .static-popover
     z-index 0
     display block

public/js/controllers/notificationCtrl.js

@@ -3,8 +3,6 @@
 habitrpg.controller('NotificationCtrl',
   ['$scope', '$rootScope', 'User', 'Guide', 'Notification', function ($scope, $rootScope, User, Guide, Notification) {
 
-    Guide.initTour();
-
     $rootScope.$watch('user.stats.hp', function(after, before) {
       if (after == before) return;
       Notification.hp(after - before, 'hp');

public/js/controllers/tasksCtrl.js

@@ -35,7 +35,7 @@ habitrpg.controller("TasksCtrl", ['$scope', '$rootScope', '$location', 'User', '
       if (task.type === "reward" && User.user.stats.gp < task.value)
         return Notification.text('Not enough GP.');
       Algos.score(User.user, task, direction);
-      User.log({op: "score", data: task, dir: direction});
+      User.log({op: "score",data: task, dir: direction});
 
     };
 

public/js/services/guideServices.js

@@ -5,9 +5,14 @@
  */
 
 angular.module('guideServices', []).
-  factory('Guide', ['User', function(User) {
+  factory('Guide', ['$rootScope', 'User', function($rootScope, User) {
 
-    var initTour = function() {
+    /**
+     * Init and show the welcome tour. Note we do it listening to a $rootScope broadcasted 'userLoaded' message,
+     * this because we need to determine whether to show the tour *after* the user has been pulled from the server,
+     * otherwise it's always start off as true, and then get set to false later
+     */
+    $rootScope.$on('userUpdated', function(){
       if (User.user.flags.showTour === false) return;
       var tourSteps = [
         {
@@ -59,11 +64,87 @@ angular.module('guideServices', []).
       });
       tour.restart(); // Tour doesn't quite mesh with our handling of flags.showTour, just restart it on page load
       //tour.start(true);
+    })
+
+    var alreadyShown = function(before, after) {
+      return !(!before && after === true);
     };
 
-    return {
+    var showPopover = function(selector, title, html, placement) {
-      initTour: initTour
+      if (!placement) placement = 'bottom';
-    }
+      $(selector).popover('destroy');
+      html = "<div><div class='NPC-Justin'></div>" + html + "<a class='btn btn-default' href='#' onClick=\"$('" + selector + "').popover('hide');return false;\">[Close]</a></div>";
+      $(selector).popover({
+        title: title,
+        placement: placement,
+        trigger: 'manual',
+        html: true,
+        content: html
+      }).popover('show');
+    };
+
+    $rootScope.$watch('user.flags.customizationsNotification', function(after, before) {
+      if (alreadyShown(before, after)) return
+      $('.main-herobox').popover('destroy');
+      showPopover('.main-herobox', 'Customize Your Avatar', "Click your avatar to customize your appearance.", 'bottom');
+    });
+
+    $rootScope.$watch('user.flags.itemsEnabled', function(after, before) {
+      if (alreadyShown(before, after)) return;
+      var html = "Congratulations, you have unlocked the Item Store! You can now buy weapons, armor, potions, etc. Read each item's comment for more information.";
+      showPopover('div.rewards', 'Item Store Unlocked', html, 'left');
+    });
+
+    $rootScope.$watch('user.flags.petsEnabled', function(after, before) {
+      if (alreadyShown(before, after)) return;
+      var html = "You have unlocked Pets! You can now buy pets with Gems (note, you replenish Gems with real-life money - so chose your pets wisely!)";
+      showPopover('#rewardsTabs', 'Pets Unlocked', html, 'left');
+    });
+
+    $rootScope.$watch('user.flags.partyEnabled', function(after, before) {
+      if (alreadyShown(before, after)) return;
+      var html = "Be social, join a party and play Habit with your friends! You'll be better at your habits with accountability partners. Click User -> Options -> Party, and follow the instructions. LFG anyone?";
+      showPopover('.user-menu', 'Party System', html, 'bottom');
+    });
+
+    $rootScope.$watch('user.flags.dropsEnabled', function(after, before) {
+      if (alreadyShown(before, after)) return;
+      var drop = window.helpers.randomVal(window.items.items.pets);
+      var eggs = User.user.items.eggs = [];
+      eggs.push(drop); // FIXME put this on server instead
+      User.set('items.eggs', eggs);
+      $rootScope.modals.dropsEnabled = true;
+    });
+
+    $rootScope.$watch('user.items.pets', function(after, before) {
+      if (User.user.achievements && User.user.achievements.beastMaster) return;
+      if (before >= 90) {
+        User.set('achievements.beastMaster', true);
+        $('#beastmaster-achievement-modal').modal('show'); // FIXME
+      }
+    });
+
+    $rootScope.$watch('user.items', function(after, before) {
+      if (User.user.achievements && User.user.achievements.ultimateGear) return;
+      var items = User.user.items;
+      if (+items.weapon >= 6 && +items.armor >= 5 && +items.head >= 5 && +items.shield >= 5) {
+        User.set('achievements.ultimateGear', true); // FIXME
+        $('#max-gear-achievement-modal').modal('show'); // FIXME
+      }
+    });
+
+    // FIXME how to handle tasks.*.streak?
+    // FIXME move to tasksCtrl
+    /*$rootScope.$watch('user.tasks.*.streak', function(id, after, before) {
+      if (after > 0) {
+        if ((after % 21) === 0) {
+          user.incr('achievements.streak', 1)
+          return $('#streak-achievement-modal').modal('show');
+        } else if ((before - after === 1) && (before % 21 === 0)) {
+          return user.incr('achievements.streak', -1);
+        }
+      }
+    });*/
 
   }
 ]);

public/js/services/memberServices.js

@@ -5,11 +5,11 @@
  */
 
 angular.module('memberServices', ['ngResource']).
-    factory('Members', ['API_URL', '$resource',
+    factory('Members', ['$rootScope', 'API_URL', '$resource',
-      function(API_URL, $resource) {
+      function($rootScope, API_URL, $resource) {
         var members = {};
         var Member = $resource(API_URL + '/api/v1/members/:uid', {uid:'@_id'});
-        return {
+        var memberServices = {
 
           members: members,
 
@@ -69,5 +69,11 @@ angular.module('memberServices', ['ngResource']).
             }
           }
         }
+
+        $rootScope.$on('userUpdated', function(event, user){
+          memberServices.populate(user);
+        })
+
+        return memberServices;
       }
 ]);

public/js/services/userServices.js

@@ -5,8 +5,8 @@
  */
 
 angular.module('userServices', []).
-  factory('User', ['$http', '$location', 'API_URL', 'STORAGE_USER_ID', 'STORAGE_SETTINGS_ID', 'Members',
+  factory('User', ['$rootScope', '$http', '$location', 'API_URL', 'STORAGE_USER_ID', 'STORAGE_SETTINGS_ID',
-    function($http, $location, API_URL, STORAGE_USER_ID, STORAGE_SETTINGS_ID, Members) {
+    function($rootScope, $http, $location, API_URL, STORAGE_USER_ID, STORAGE_SETTINGS_ID) {
       var authenticated = false,
         defaultSettings = {
           auth: { apiId: '', apiToken: ''},
@@ -67,9 +67,9 @@ angular.module('userServices', []).
               if(data.wasModified) {
                 delete data.wasModified;
                 _.extend(user, data);
+                $rootScope.$emit('userUpdated', user);
               }
               user._v = data._v;
-              Members.populate(user);
 
               // FIXME handle this somewhere else, we don't need to check every single time
               var offset = moment().zone(); // eg, 240 - this will be converted on server as -(offset/60)

public/js/static.js

@@ -1,6 +1,6 @@
 "use strict";
 
-window.habitrpg = angular.module('habitrpg', ['userServices', 'memberServices'])
+window.habitrpg = angular.module('habitrpg', ['userServices'])
   .constant("API_URL", "")
   .constant("STORAGE_USER_ID", 'habitrpg-user')
   .constant("STORAGE_SETTINGS_ID", 'habit-mobile-settings')

views/static/layout.jade

@@ -32,7 +32,6 @@ html
       script(type='text/javascript', src='/bower_components/bootstrap/docs/assets/js/bootstrap.min.js')
 
       script(type='text/javascript', src='/js/static.js')
-      script(type='text/javascript', src='/js/services/memberServices.js')
       script(type='text/javascript', src='/js/services/userServices.js')
       script(type='text/javascript', src='/js/controllers/authCtrl.js')
     -}