Added a rudimentary (aka programmer-designed) hero-type filter for the item store.

app/locale/en.coffee

@@ -197,6 +197,9 @@
     hard: "Hard"
     player: "Player"
     player_level: "Level"  # Like player level 5, not like level: Dungeons of Kithgard
+    warrior: "Warrior"
+    ranger: "Ranger"
+    wizard: "Wizard"
 
   units:
     second: "second"

app/styles/play/modal/play-items-modal.sass

@@ -111,6 +111,29 @@
         color: white
     
     
+  //- Hero Type Select
+  
+  #hero-type-select
+    position: absolute
+    top: 102px
+    left: 177px
+    background: rgb(26,21,17)
+    padding: 2px 0
+    z-index: 3
+    border-radius: 2px
+    
+    label
+      background: rgb(58,47,38)
+      color: rgb(195,153,124)
+      border: 2px solid rgb(85,70,57)
+      margin: 0 2px
+      
+      &.active
+        background: rgb(33,28,21)
+        border: 2px solid rgb(64,53,41)
+        color: white
+  
+    
   //- Item List
 
   .tab-content
@@ -120,7 +143,19 @@
     width: 669px
     height: 507px
     overflow: hidden
+    
+    &.filter-warrior
+      .item.Ranger, .item.Wizard
+        display: none
 
+    &.filter-ranger
+      .item.Warrior, .item.Wizard
+        display: none
+      
+    &.filter-wizard
+      .item.Ranger, .item.Warrior
+        display: none
+    
   .tab-pane
     height: 100%
     

app/templates/play/modal/play-items-modal.jade

@@ -17,8 +17,21 @@
           a.one-line(href="#item-category-" + category, data-toggle="tab")
             img.tab-icon(src="/images/pages/play/modal/item-icon-"+category+".png", draggable="false")
             span.big-font= itemCategoryNames[index]
-    
-    
+
+    #hero-type-select.btn-group(data-toggle="buttons")
+      label.btn.active#all
+        input(type="radio", name="hero-class-select", autocomplete="off")
+        span(data-i18n="editor.level_tab_thangs_all")
+      label.btn#warrior
+        input(type="radio", name="hero-class-select", autocomplete="off")
+        span(data-i18n="general.warrior")
+      label.btn#ranger
+        input(type="radio", name="hero-class-select", autocomplete="off")
+        span(data-i18n="general.ranger")
+      label.btn#wizard
+        input(type="radio", name="hero-class-select", autocomplete="off")
+        span(data-i18n="general.wizard")
+
     .tab-content
       for category, index in itemCategories
         .tab-pane(id="item-category-" + category, class=index ? "" : "active")
@@ -27,7 +40,7 @@
               for item in itemCategoryCollections[category].models
                 - var hidden = item.comingSoon && !me.isAdmin()
                 - hidden = hidden || (!item.get('gems') && !item.owned)
-                div(class="item" + (hidden ? " hide" : "") + (item.silhouetted && !item.owned ? " silhouetted" : ""), data-item-id=item.id)
+                div(class="item " + item.get('heroClass') + (hidden ? " hide" : "") + (item.silhouetted && !item.owned ? " silhouetted" : ""), data-item-id=item.id)
                   if item.silhouetted && !item.owned
                     span.glyphicon.glyphicon-lock.bolder
                     span.glyphicon.glyphicon-lock

app/views/play/modal/PlayItemsModal.coffee

@@ -52,6 +52,7 @@ module.exports = class PlayItemsModal extends ModalView
     'click #close-modal': 'hide'
     'click': 'onClickedSomewhere'
     'update .tab-pane .nano': 'onScrollItemPane'
+    'click #hero-type-select label': 'onClickHeroTypeSelect'
 
   constructor: (options) ->
     @onScrollItemPane = _.throttle(_.bind(@onScrollItemPane, @), 200)
@@ -162,6 +163,12 @@ module.exports = class PlayItemsModal extends ModalView
         item = @idToItem[itemEl.data('item-id')]
         itemEl.find('.item-silhouette, .item-img').attr('src', item.getPortraitURL())
 
+  onClickHeroTypeSelect: (e) ->
+    value = $(e.target).closest('label').attr('id')
+    tabContent = @$el.find('.tab-content')
+    tabContent.removeClass('filter-wizard filter-ranger filter-warrior')
+    tabContent.addClass("filter-#{value}") if value isnt 'all'
+
   onUnlockButtonClicked: (e) ->
     e.stopPropagation()
     button = $(e.target).closest('button')