feat: Add group by button to equipment page

Closes #7636
Closes #7651

This commit creates a new button on the equipment page that allows the user to group their equipment type (body location) instead of simply by class.

common/locales/en/gear.json

@@ -1,7 +1,11 @@
 {
   "set": "Set",
+  "equipmentType" : "Type",
+  "klass": "Class",
+  "groupBy": "Group By <%= type %>",
 
   "weapon": "weapon",
+  "waeaponCapitalized" : "Weapon",
 
   "weaponBase0Text": "No Weapon",
   "weaponBase0Notes": "No Weapon.",
@@ -214,6 +218,7 @@
   "weaponArmoireSandySpadeNotes": "A tool for digging, as well as flicking sand into the eyes of enemy monsters. Increases Strength by <%= str %>. Enchanted Armoire: Seaside Set (Item 1 of 3).",
 
   "armor": "armor",
+  "armorCapitalized": "Armor",
 
   "armorBase0Text": "Plain Clothing",
   "armorBase0Notes": "Ordinary clothing. Confers no benefit.",
@@ -447,6 +452,7 @@
   "armorArmoireStripedSwimsuitNotes": "What could be more fun than battling sea monsters on the beach? Increases Constitution by <%= con %>. Enchanted Armoire: Seaside Set (Item 2 of 3).",
 
   "headgear": "headgear",
+  "headgearCapitalized": "Headgear",
 
   "headBase0Text": "No Helm",
   "headBase0Notes": "No headgear.",
@@ -694,6 +700,7 @@
   "headArmoireGreenFloppyHatNotes": "Many spells have been sewn into this simple hat, giving it a gorgeous green color. Increases Constitution, Intelligence, and Perception by <%= attrs %> each. Enchanted Armoire: Independent Item.",
 
   "offhand": "shield-hand item",
+  "offhandCapitalized": "Shield-Hand Item",
 
   "shieldBase0Text": "No Shield-Hand Equipment",
   "shieldBase0Notes": "No shield or second weapon.",
@@ -868,6 +875,7 @@
   "bodySpecialSummer2015HealerNotes": "Yo ho ho? No, no, no! Confers no benefit. Limited Edition 2015 Summer Gear.",
 
   "headAccessory": "head accessory",
+  "headAccessoryCapitalizaed": "Head Accessory",
   "accessories": "Accessories",
   "animalEars": "Animal Ears",
 

website/client/js/controllers/inventoryCtrl.js

@@ -53,12 +53,25 @@ habitrpg.controller("InventoryCtrl",
     $scope.$watch('user.items.quests', function(quest){ $scope.questCount = countStacks(quest); }, true);
 
     $scope.$watch('user.items.gear', function(gear){
-      $scope.gear = {};
+      $scope.gearByClass = {};
+      $scope.gearByType = {};
       _.each(gear.owned, function(v,key){
-        if (v === false) return;
+        if (v === false) {
+          return;
+        }
+
         var item = Content.gear.flat[key];
-        if (!$scope.gear[item.klass]) $scope.gear[item.klass] = [];
-        $scope.gear[item.klass].push(item);
+
+        if (!$scope.gearByClass[item.klass]) {
+          $scope.gearByClass[item.klass] = [];
+        }
+        $scope.gearByClass[item.klass].push(item);
+
+        if (!$scope.gearByType[item.type]) {
+          $scope.gearByType[item.type] = [];
+        }
+
+        $scope.gearByType[item.type].push(item);
       })
     }, true);
 

website/client/js/controllers/sortableInventoryCtrl.js

@@ -15,6 +15,10 @@ habitrpg.controller('SortableInventoryController', ['$scope',
       }
     };
 
+    $scope.setGrouping = function (grouping) {
+      $scope.groupingChoice = grouping;
+    };
+    
     $scope.orderChoice = 'set';
     $scope.setOrder($scope.orderChoice);
 }]);

website/views/options/inventory/equipment.jade

@@ -13,10 +13,16 @@ mixin orderByButton
       - each attr in ["constitution", "intelligence", "perception", "strength"]
         +choice(attr)
 
-mixin equipmentList(type)
-  menu.pets-menu(label='{{::label}}', ng-show='gear[klass]',
-    ng-repeat='(klass,label) in {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer"), special:env.t("special"), mystery:env.t("mystery"), armoire:env.t("armoireText")}')
-    div(ng-repeat='item in gear[klass] | orderBy: order')
+mixin groupingButton
+  .btn-group
+    button.btn.btn-default.dropdown-toggle(type='button', data-toggle='dropdown', ng-init='setGrouping("klass")')
+      | {{env.t('groupBy', { type: env.t(groupingChoice) })}} #[span.caret]
+    ul.dropdown-menu
+      - each grouping in ["klass", "equipmentType"]
+          li(ng-class="{ 'active': groupingChoice === '#{grouping}' }")
+            a(ng-click="setGrouping('#{grouping}')")=env.t(grouping)
+
+mixin equipmentButton(type)
       button.customize-option(class='shop_{{::item.key}}',
         ng-class='{selectableInventory: user.items.gear.#{type}[item.type] == item.key}',
         ng-click='equip(item.key, "#{type}")',
@@ -24,6 +30,16 @@ mixin equipmentList(type)
         popover-trigger='mouseenter', popover-placement='right',
         popover-append-to-body='true')
 
+mixin equipmentList(equipmentType)
+  menu.pets-menu(label='{{::label}}', ng-show='gearByClass[klass]', ng-if='groupingChoice === "klass"',
+    ng-repeat='(klass,label) in {warrior:env.t("warrior"), wizard:env.t("mage"), rogue:env.t("rogue"), healer:env.t("healer"), special:env.t("special"), mystery:env.t("mystery"), armoire:env.t("armoireText")}')
+    div(ng-repeat='item in gearByClass[klass] | orderBy: order')
+      +equipmentButton(equipmentType)
+  menu.pets-menu(label='{{::label}}', ng-show='gearByType[type]', ng-if='groupingChoice === "equipmentType"',
+    ng-repeat='(type,label) in {headAccessory:env.t("headAccessoryCapitalized"), head:env.t("headgearCapitalized"), eyewear:env.t("eyewear"), weapon:env.t("weaponCapitalized"), shield:env.t("offhandCapitalized"), armor:env.t("armorCapitalized"), body:env.t("body"), back:env.t("back")}')
+    div(ng-repeat='item in gearByType[type] | orderBy: order', ng-show='item.klass !== "base"')
+      +equipmentButton(equipmentType)
+
 .container-fluid
   .row
     .col-md-6.border-right(ng-controller="SortableInventoryController")
@@ -41,6 +57,11 @@ mixin equipmentList(type)
       .btn-toolbar
         .btn-group
           button.btn.btn-default(type="button", ng-click='dequip("battleGear");') {{env.t("unequipBattleGear")}}
+
+      br
+
+      .btn-toolbar
+        +groupingButton
         +orderByButton
 
       li.customize-menu.inventory-gear
@@ -62,6 +83,11 @@ mixin equipmentList(type)
         .btn-group
           button.btn.btn-default(type="button", ng-click='dequip("costume");') {{env.t("unequipCostume")}}
           button.btn.btn-default(type="button", ng-click='dequip("petMountBackground");') {{env.t("unequipPetMountBackground")}}
+
+      br
+
+      .btn-toolbar(ng-if='user.preferences.costume')
+        +groupingButton
         +orderByButton
 
       li.customize-menu(ng-if='!user.preferences.costume')