mounts: counting bug fixes, put pets & mounts in tabs

public/js/app.js

@@ -24,6 +24,7 @@ window.habitrpg = angular.module('habitrpg',
         .when('/options/groups', '/options/groups/tavern')
         .when('/options/groups/guilds', '/options/groups/guilds/public')
         .when('/options/inventory', '/options/inventory/inventory')
+        .when('/options/inventory/stable', '/options/inventory/stable/pets')
 
         // redirect states that don't match
         .otherwise("/tasks");
@@ -139,6 +140,14 @@ window.habitrpg = angular.module('habitrpg',
           url: '/stable',
           templateUrl: "partials/options.inventory.stable.html"
         })
+        .state('options.inventory.stable.pets', {
+          url: '/pets',
+          templateUrl: "partials/options.inventory.stable.pets.html"
+        })
+        .state('options.inventory.stable.mounts', {
+          url: '/mounts',
+          templateUrl: "partials/options.inventory.stable.mounts.html"
+        })
 
         // Options > Settings
         .state('options.settings', {

public/js/controllers/inventoryCtrl.js

@@ -10,12 +10,16 @@ habitrpg.controller("InventoryCtrl", ['$rootScope', '$scope', 'User', 'API_URL',
     $scope.petCount = _.size(User.user.items.pets);
     $scope.totalPets = _.size($scope.Items.eggs) * _.size($scope.Items.hatchingPotions);
 
-    var countItems = function(items) {
+    // count egg, food, hatchingPotion stack totals
-      return _.reduce(items,function(m,v){return m+v;},0);
+    var countStacks = function(items) { return _.reduce(items,function(m,v){return m+v;},0);}
-    }
+    // count pets, mounts collected totals
-    $scope.$watch('user.items.pets', function(pets){ $scope.petCount = countItems(pets); });
+    var countExists = function(items) { return _.reduce(items,function(m,v){return m+(v ? 1 : 0);},0);}
-    $scope.$watch('user.items.eggs', function(eggs){ $scope.eggCount = countItems(eggs); });
+
-    $scope.$watch('user.items.hatchingPotions', function(pots){ $scope.potCount = countItems(pots); });
+    $scope.$watch('user.items.pets', function(pets){ $scope.petCount = countExists(pets); });
+    $scope.$watch('user.items.mounts', function(mounts){ $scope.mountCount = countExists(mounts); });
+    $scope.$watch('user.items.eggs', function(eggs){ $scope.eggCount = countStacks(eggs); });
+    $scope.$watch('user.items.hatchingPotions', function(pots){ $scope.potCount = countStacks(pots); });
+    $scope.$watch('user.items.food', function(food){ $scope.foodCount = countStacks(food); });
 
     $scope.chooseEgg = function(egg){
       if ($scope.selectedEgg && $scope.selectedEgg.name == egg) {

views/options/inventory/stable.jade

@@ -1,4 +1,16 @@
 script(type='text/ng-template', id='partials/options.inventory.stable.html')
+  ul.nav.nav-tabs
+    li(ng-class="{ active: $state.includes('options.inventory.stable.pets') }")
+      a(ui-sref='options.inventory.stable.pets')
+        | Pets
+    li(ng-class="{ active: $state.includes('options.inventory.stable.mounts') }")
+      a(ui-sref='options.inventory.stable.mounts')
+        | Mounts
+  .tab-content
+    .tab-pane.active
+      div(ui-view)
+
+script(type='text/ng-template', id='partials/options.inventory.stable.mounts.html')
   .stable
     .NPC-Matt
       .popover.static-popover.fade.right.in(style='max-width: 550px; margin-left: 10px;')
@@ -7,7 +19,26 @@ script(type='text/ng-template', id='partials/options.inventory.stable.html')
           a(target='_blank', href='http://www.kickstarter.com/profile/mattboch') Matt Boch
         .popover-content
           p.
-            Welcome to the Stable! I'm Matt, the beast master. Choose a pet here to venture at your side. They aren't much help yet, but I forsee a time when they're able to <a href='https://trello.com/card/mounts/50e5d3684fe3a7266b0036d6/221' target='_blank'>grow into powerful steeds</a>! Until that day, <a target='_blank' href='https://f.cloud.github.com/assets/2374703/164631/3ed5fa6c-78cd-11e2-8743-f65ac477b55e.png'>have a look-see</a> at all the pets you can collect.
+            Shall I bring you your steed, {{user.profile.name}}? Click a mount to saddle up.
+          h4 {{mountCount}} / {{totalPets}} Mounts Tamed
+    menu.pets(type='list')
+      li.customize-menu(ng-repeat='egg in Items.eggs')
+        menu
+          div(ng-repeat='potion in Items.hatchingPotions', tooltip='{{potion.name}} {{egg.name}}', ng-init='mount = egg.name+"-"+potion.name')
+            button(class="pet-button Pet-{{mount}}", ng-show='user.items.mounts[mount]', ng-class='{active: user.items.currentMount == mount}', ng-click='chooseMount(egg.name, potion.name)')
+            button(class="pet-button pet-not-owned", ng-hide='user.items.mounts[mount]')
+              img(src='/bower_components/habitrpg-shared/img/PixelPaw.png')
+
+script(type='text/ng-template', id='partials/options.inventory.stable.pets.html')
+  .stable
+    .NPC-Matt
+      .popover.static-popover.fade.right.in(style='max-width: 550px; margin-left: 10px;')
+        .arrow
+        h3.popover-title
+          a(target='_blank', href='http://www.kickstarter.com/profile/mattboch') Matt Boch
+        .popover-content
+          p.
+            Welcome to the Stable! I'm Matt, the beast master. Choose a pet here to venture at your side. Feed them and they'll grow into powerful steeds. <a target='_blank' href='https://f.cloud.github.com/assets/2374703/164631/3ed5fa6c-78cd-11e2-8743-f65ac477b55e.png'>Have a look-see</a> at all the pets you can collect.
           h4 {{petCount}} / {{totalPets}} Pets Found
 
     menu.pets(type='list')
@@ -30,16 +61,6 @@ script(type='text/ng-template', id='partials/options.inventory.stable.html')
           button(ng-if='!user.items.pets["Dragon-Hydra"]', class="pet-button pet-not-owned", popover-trigger='mouseenter', popover-placement='right', popover="Click the gold paw to learn more about how you can obtain this rare pet through contributing to HabitRPG!", popover-title='How to Get this Pet!')
             img(src='/bower_components/habitrpg-shared/img/PixelPaw-Gold.png')
 
-    hr
-    h4 Mounts
-    menu.pets(type='list')
-      li.customize-menu(ng-repeat='egg in Items.eggs')
-        menu
-          div(ng-repeat='potion in Items.hatchingPotions', tooltip='{{potion.name}} {{egg.name}}', ng-init='mount = egg.name+"-"+potion.name')
-            button(class="pet-button Pet-{{mount}}", ng-show='user.items.mounts[mount]', ng-class='{active: user.items.currentMount == mount}', ng-click='chooseMount(egg.name, potion.name)')
-            button(class="pet-button pet-not-owned", ng-hide='user.items.mounts[mount]')
-              img(src='/bower_components/habitrpg-shared/img/PixelPaw.png')
-
   .well(style='position:fixed;right:0px;top:50%;width:200px')
     menu.inventory-list(type='list')
       li.customize-menu