inventory sorting

Add inventory sorting buttons based on name, attribute, and set (armoire):
-  Each gear[klass] has its own sorting buttons and sorting state including costume classes
-  The attributes sort descending when selected, then by sum of all attributes
-  There is no default sort
-  The armoire also sorts by set which sorts by item[set] descending, it does not sort within a set (ex "1 of 3" vs "2 of 3")
-  Name sorts by .text() ascending

common/locales/en/gear.json

@@ -1,4 +1,6 @@
 {
+  "set": "Set",
+
   "weapon": "weapon",
 
   "weaponBase0Text": "No Weapon",

common/locales/en/generic.json

@@ -177,5 +177,6 @@
     "hatchPetShare": "I hatched a new pet by completing my real-life tasks!",
     "raisePetShare": "I raised a pet into a mount by completing my real-life tasks!",
     "wonChallengeShare": "I won a challenge in Habitica!",
-    "achievementShare": "I earned a new achievement in Habitica!"
+    "achievementShare": "I earned a new achievement in Habitica!",
+    "orderBy": "Order By"
 }

test/spec/controllers/sortableInventoryCtrlSpec.js

@@ -0,0 +1,32 @@
+'use strict';
+
+describe('Sortable Inventory Controller', function() {
+  var scope;
+
+  beforeEach(inject(function($rootScope, $controller) {
+    scope = $rootScope.$new();
+    $controller('SortableInventoryController', {$scope: scope});
+  }));
+
+  it('has no default sort order', function(){
+    expect(scope.order).to.not.exist;
+  });
+
+  it('sets sort criteria for all standard attributes', function(){
+    var oldOrder = scope.order;
+
+    var attrs = ['con', 'int', 'per', 'str', 'name', 'set'];
+
+    attrs.forEach(function (attribute) {
+      scope.setOrder(attribute);
+      expect(scope.order).to.exist;
+      expect(scope.order).to.not.eql(oldOrder);
+      oldOrder = scope.order;
+    });
+  });
+
+  it('does nothing when missing sort criteria', function(){
+    scope.setOrder('foooo');
+    expect(scope.order).to.not.exist;
+  });
+});

website/public/css/inventory.styl

@@ -32,6 +32,13 @@ menu.pets div
   display: inline-block
   vertical-align: top
 
+span.sort-menu
+  width: 100%
+  display: block
+
+span.sort-menu > span.btn-group
+  margin-left: 10px
+
 .current-pet
     left: 0px
     bottom: 0px

website/public/js/controllers/sortableInventoryCtrl.js

@@ -0,0 +1,19 @@
+habitrpg.controller('SortableInventoryController', ['$scope',
+  function ($scope) {
+
+    // doing this in a function causes 10 $digest iteration error
+    attributeSort = {
+      con: ['-con', '-(con+int+per+str)'],
+      int: ['-int', '-(con+int+per+str)'],
+      per: ['-per', '-(con+int+per+str)'],
+      str: ['-str', '-(con+int+per+str)'],
+      name: 'text()',
+      set: 'set'
+    }
+
+    $scope.setOrder = function(order) {
+      if (order in attributeSort) {
+        $scope.order = attributeSort[order];
+      }
+    };
+}]);

website/public/manifest.json

@@ -91,6 +91,7 @@
             "js/controllers/partyCtrl.js",
             "js/controllers/rootCtrl.js",
             "js/controllers/settingsCtrl.js",
+            "js/controllers/sortableInventoryCtrl.js",
             "js/controllers/tavernCtrl.js",
             "js/controllers/tasksCtrl.js",
             "js/controllers/userCtrl.js"

website/views/options/inventory/equipment.jade

@@ -17,8 +17,14 @@
 
       li.customize-menu.inventory-gear
         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")}')
+          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")}', ng-controller="SortableInventoryController")
-          div(ng-repeat='item in gear[klass]')
+          span(class="sort-menu") {{env.t('orderBy')}}
+            span.btn-group.btn-group-xs
+              button.btn.btn-default(ng-click='setOrder("name")')=env.t('name')
+              button.btn.btn-default(ng-if='klass == "armoire"' ng-click='setOrder("set")')=env.t('set')
+            span.btn-group.btn-group-xs
+              button.btn.btn-default(ng-repeat='attr in ["con", "int", "per", "str"]', ng-click='setOrder(attr)') {{env.t(attr)}}
+          div(ng-repeat='item in gear[klass] | orderBy:order')
             button.customize-option(, class='shop_{{::item.key}}',
               ng-class='{selectableInventory: user.items.gear.equipped[item.type] == item.key}',
               ng-click='equip(item.key, "equipped")',
@@ -50,8 +56,14 @@
 
       li.customize-menu(ng-if='user.preferences.costume')
         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")}')
+          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")}', ng-controller="SortableInventoryController")
-          div(ng-repeat='item in gear[klass]')
+          span(class="sort-menu") {{env.t('orderBy')}}
+            span.btn-group.btn-group-xs
+              button.btn.btn-default(ng-click='setOrder("name")')=env.t('name')
+              button.btn.btn-default(ng-if='klass == "armoire"' ng-click='setOrder("set")')=env.t('set')
+            span.btn-group.btn-group-xs
+              button.btn.btn-default(ng-repeat='attr in ["con", "int", "per", "str"]', ng-click='setOrder(attr)') {{env.t(attr)}}
+          div(ng-repeat='item in gear[klass] | orderBy:order')
             button.customize-option(class='shop_{{::item.key}}',
               ng-class='{selectableInventory: user.items.gear.costume[item.type] == item.key}',
               ng-click='equip(item.key, "costume")',