diff --git a/app/locale/en.coffee b/app/locale/en.coffee index f83f7252b..6adbb9019 100644 --- a/app/locale/en.coffee +++ b/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" diff --git a/app/styles/play/modal/play-items-modal.sass b/app/styles/play/modal/play-items-modal.sass index 24862eb9e..c016b13a6 100644 --- a/app/styles/play/modal/play-items-modal.sass +++ b/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% diff --git a/app/templates/play/modal/play-items-modal.jade b/app/templates/play/modal/play-items-modal.jade index a41b1658e..455d103a6 100644 --- a/app/templates/play/modal/play-items-modal.jade +++ b/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 diff --git a/app/views/play/modal/PlayItemsModal.coffee b/app/views/play/modal/PlayItemsModal.coffee index 4a4ae7c04..b6ba1c346 100644 --- a/app/views/play/modal/PlayItemsModal.coffee +++ b/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')