Added an equip button to every piece of available equipment.

app/styles/game-menu/inventory-modal.sass

@@ -106,11 +106,11 @@ $itemSlotGridHeight: 70px
       //  opacity: 0.5
 
       &.selected
-        .placeholder, img.item
+        .placeholder, .item
           border-color: rgb(81,153,236)
           background-color: rgb(81,153,236)
           @include box-shadow(0 0 10px rgb(81,153,236))
-        img.item
+        .item
           background: rgb(81,153,236)
   
       &.should-equip
@@ -269,7 +269,7 @@ $itemSlotGridHeight: 70px
         .placeholder
           background-position: (-2 * $itemSlotInnerWidth) 0px
   
-      img.item
+      .item
         position: absolute
         left: -2px
         top: -2px
@@ -299,7 +299,7 @@ $itemSlotGridHeight: 70px
     
   //- Available equipment
    
-  &.Warrior #unequipped img.item:not(.Warrior), &.Ranger #unequipped img.item:not(.Ranger), &.Wizard #unequipped img.item:not(.Wizard)
+  &.Warrior #unequipped .item:not(.Warrior), &.Ranger #unequipped .item:not(.Ranger), &.Wizard #unequipped .item:not(.Wizard)
     // Our code hides and shows (modifies display), but we can be invisible this other way.
     visibility: hidden
     position: absolute
@@ -323,14 +323,28 @@ $itemSlotGridHeight: 70px
       text-transform: uppercase
       font-weight: bold
  
-    img.item
+    .item 
       float: left
       border: 1px solid black
       margin: 3px
       padding: 1px
+      position: relative
       width: 60px
-      height: 60px
-      cursor: pointer
+
+      img
+        width: 56px
+        height: 56px
+        display: block
+      
+      button
+        width: 100%
+        height: 17px
+        border: 1px solid rgb(46,46,46)
+        background: white
+        font-size: 11px
+        border-radius: 1px
+        padding: 0
+
 
       &.active
         background-color: rgb(81,153,236)

app/templates/game-menu/inventory-modal.jade

@@ -25,7 +25,9 @@
             if itemGroups.availableItems.models.length
               h4#available-description(data-i18n="inventory.available_item")
               for item in itemGroups.availableItems.models
-                img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
+                .item(class=item.classes, data-item-id=item.id)
+                  img(src=item.getPortraitURL())
+                  button.btn.equip-item(data-i18n="inventory.equip")
               .clearfix
             
             #double-click-hint.alert.alert-info.secret(data-i18n="inventory.should_equip")
@@ -33,13 +35,15 @@
             if itemGroups.restrictedItems.models.length
               h4#restricted-description(data-i18n="inventory.restricted_title")
               for item in itemGroups.restrictedItems.models
-                img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
+                .item(class=item.classes, data-item-id=item.id)
+                  img(src=item.getPortraitURL())
               .clearfix
-      
+            
             if itemGroups.lockedItems.models.length
               h4#locked-description(data-i18n="play.locked")
               for item in itemGroups.lockedItems.models
-                img.item(src=item.getPortraitURL(), class=item.classes, data-item-id=item.id)
+                .item(class=item.classes, data-item-id=item.id)
+                  img(src=item.getPortraitURL())
               .clearfix
 
     #item-details-view

app/views/game-menu/InventoryModal.coffee

@@ -20,9 +20,10 @@ module.exports = class InventoryModal extends ModalView
 
   events:
     'click .item-slot': 'onItemSlotClick'
-    'click #unequipped img.item': 'onUnequippedItemClick'
-    'doubletap #unequipped img.item': 'onUnequippedItemDoubleClick'
-    'doubletap .item-slot img.item': 'onEquippedItemDoubleClick'
+    'click #unequipped .item': 'onUnequippedItemClick'
+    'doubletap #unequipped .item': 'onUnequippedItemDoubleClick'
+    'doubletap .item-slot .item': 'onEquippedItemDoubleClick'
+    'click button.equip-item': 'onClickEquipItemButton'
     'shown.bs.modal': 'onShown'
     'click #choose-hero-button': 'onClickChooseHero'
     'click #play-level-button': 'onClickPlayLevel'
@@ -137,7 +138,7 @@ module.exports = class InventoryModal extends ModalView
   #- Draggable logic
 
   setUpDraggableEventsForAvailableEquipment: ->
-    for availableItemEl in @$el.find('#unequipped img.item')
+    for availableItemEl in @$el.find('#unequipped .item')
       availableItemEl = $(availableItemEl)
       continue if availableItemEl.hasClass('locked') or availableItemEl.hasClass('restricted')
       dragHelper = availableItemEl.clone().addClass('draggable-item')
@@ -201,12 +202,12 @@ module.exports = class InventoryModal extends ModalView
 
   onUnequippedItemClick: (e) ->
     return if @justDoubleClicked
-    itemEl = $(e.target).closest('img.item')
+    itemEl = $(e.target).closest('.item')
     @selectUnequippedItem(itemEl)
 
   onUnequippedItemDoubleClick: (e) ->
-    item = $(e.target).closest('img.item')
-    return if item.hasClass('locked') or item.hasClass('restricted')
+    itemEl = $(e.target).closest('.item')
+    return if itemEl.hasClass('locked') or itemEl.hasClass('restricted')
     @equipSelectedItem()
     @justDoubleClicked = true
     _.defer => @justDoubleClicked = false
@@ -215,6 +216,11 @@ module.exports = class InventoryModal extends ModalView
   onClickEquipItemViewed: -> @equipSelectedItem()
   onClickUnequipItemViewed: -> @unequipSelectedItem()
 
+  onClickEquipItemButton: (e) ->
+    itemEl = $(e.target).closest('.item')
+    @selectUnequippedItem(itemEl)
+    @equipSelectedItem()
+
   onUnlockButtonClicked: (e) ->
     button = $(e.target).closest('button')
     if button.hasClass('confirm')
@@ -249,7 +255,7 @@ module.exports = class InventoryModal extends ModalView
   selectItemSlot: (slotEl) ->
     @clearSelection()
     slotEl.addClass('selected')
-    selectedSlotItemID = slotEl.find('img.item').data('item-id')
+    selectedSlotItemID = slotEl.find('.item').data('item-id')
     item = @items.get(selectedSlotItemID)
     if item then @showItemDetails(item, 'unequip')
     @onSelectionChanged()
@@ -270,7 +276,7 @@ module.exports = class InventoryModal extends ModalView
     selectedItemEl.effect('transfer', to: slotEl, duration: 500, easing: 'easeOutCubic')
     unequipped = @unequipItemFromSlot(slotEl)
     selectedItemEl.addClass('equipped')
-    slotEl.append(selectedItemEl.clone())
+    slotEl.append(selectedItemEl.find('img').clone().addClass('item').data('item-id', selectedItem.id))
     @clearSelection()
     @showItemDetails(selectedItem, 'unequip')
     slotEl.addClass('selected')
@@ -302,17 +308,17 @@ module.exports = class InventoryModal extends ModalView
     @hideItemDetails()
 
   unequipItemFromSlot: (slotEl) ->
-    itemEl = slotEl.find('img.item')
+    itemEl = slotEl.find('.item')
     itemIDToUnequip = itemEl.data('item-id')
     return unless itemIDToUnequip
     itemEl.remove()
-    @$el.find("#unequipped img.item[data-item-id=#{itemIDToUnequip}]").removeClass('equipped')
+    @$el.find("#unequipped .item[data-item-id=#{itemIDToUnequip}]").removeClass('equipped')
 
   deselectAllSlots: ->
     @$el.find('#equipped .item-slot.selected').removeClass('selected')
 
   deselectAllUnequippedItems: ->
-    @$el.find('#unequipped img.item').removeClass('active')
+    @$el.find('#unequipped .item').removeClass('active')
 
   getSlot: (name) ->
     @$el.find(".item-slot[data-slot=#{name}]")
@@ -321,7 +327,7 @@ module.exports = class InventoryModal extends ModalView
     @$el.find('#equipped .item-slot.selected')
 
   getSelectedUnequippedItem: ->
-    @$el.find('#unequipped img.item.active')
+    @$el.find('#unequipped .item.active')
 
   onSelectionChanged: ->
     @delegateEvents()
@@ -340,7 +346,7 @@ module.exports = class InventoryModal extends ModalView
     config = {}
     for slot in @$el.find('.item-slot')
       slotName = $(slot).data('slot')
-      slotItemID = $(slot).find('img.item').data('item-id')
+      slotItemID = $(slot).find('.item').data('item-id')
       continue unless slotItemID
       item = _.find @items.models, {id:slotItemID}
       config[slotName] = item.get('original')