2014-08-08 14:36:41 -04:00
|
|
|
CocoView = require 'views/kinds/CocoView'
|
|
|
|
template = require 'templates/game-menu/inventory-view'
|
|
|
|
{me} = require 'lib/auth'
|
|
|
|
ThangType = require 'models/ThangType'
|
2014-08-13 20:21:37 -04:00
|
|
|
CocoCollection = require 'collections/CocoCollection'
|
|
|
|
ItemView = require './ItemView'
|
|
|
|
|
2014-08-08 14:36:41 -04:00
|
|
|
module.exports = class InventoryView extends CocoView
|
|
|
|
id: 'inventory-view'
|
|
|
|
className: 'tab-pane'
|
|
|
|
template: template
|
2014-08-14 18:09:10 -04:00
|
|
|
slots: ['head', 'eyes', 'neck', 'torso', 'wrists', 'gloves', 'left-ring', 'right-ring', 'right-hand', 'left-hand', 'waist', 'feet', 'spellbook', 'programming-book', 'pet', 'minion', 'misc-0', 'misc-1', 'misc-2', 'misc-3', 'misc-4']
|
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
events:
|
|
|
|
'click .item-slot': 'onItemSlotClick'
|
|
|
|
'click #available-equipment .list-group-item': 'onAvailableItemClick'
|
|
|
|
'dblclick #available-equipment .list-group-item': 'onAvailableItemDoubleClick'
|
|
|
|
'dblclick .item-slot .item-view': 'onEquippedItemDoubleClick'
|
2014-08-14 16:41:32 -04:00
|
|
|
'click #swap-button': 'onClickSwapButton'
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
shortcuts:
|
|
|
|
'esc': 'clearSelection'
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
initialize: (options) ->
|
|
|
|
super(arguments...)
|
2014-08-14 18:09:10 -04:00
|
|
|
@items = new CocoCollection([], {model: ThangType})
|
|
|
|
@equipment = options.equipment or @options.session?.get('heroConfig')?.inventory or {}
|
2014-09-20 01:15:58 -04:00
|
|
|
@items.url = '/db/thang.type?view=items&project=name,components,original,rasterIcon'
|
2014-08-13 20:21:37 -04:00
|
|
|
@supermodel.loadCollection(@items, 'items')
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
onLoaded: ->
|
|
|
|
super()
|
2014-08-08 14:36:41 -04:00
|
|
|
|
|
|
|
getRenderData: (context={}) ->
|
|
|
|
context = super(context)
|
2014-08-13 20:21:37 -04:00
|
|
|
context.equipped = _.values(@equipment)
|
2014-08-14 18:09:10 -04:00
|
|
|
context.items = @items.models
|
2014-08-13 20:21:37 -04:00
|
|
|
|
|
|
|
for item in @items.models
|
|
|
|
item.classes = item.getAllowedSlots()
|
|
|
|
item.classes.push 'equipped' if item.get('original') in context.equipped
|
|
|
|
|
|
|
|
context.slots = @slots
|
|
|
|
context.equipment = _.clone @equipment
|
|
|
|
for slot, itemOriginal of context.equipment
|
|
|
|
item = _.find @items.models, (item) -> item.get('original') is itemOriginal
|
|
|
|
context.equipment[slot] = item
|
2014-08-08 14:36:41 -04:00
|
|
|
context
|
|
|
|
|
|
|
|
afterRender: ->
|
|
|
|
super()
|
2014-08-13 20:21:37 -04:00
|
|
|
return unless @supermodel.finished()
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
keys = (item.id for item in @items.models)
|
|
|
|
itemMap = _.zipObject keys, @items.models
|
|
|
|
|
|
|
|
# Fill in equipped items
|
|
|
|
for slottedItemStub in @$el.find('.replace-me')
|
|
|
|
itemID = $(slottedItemStub).data('item-id')
|
|
|
|
item = itemMap[itemID]
|
2014-08-14 18:09:10 -04:00
|
|
|
itemView = new ItemView({item: item, includes: {name: true}})
|
2014-08-13 20:21:37 -04:00
|
|
|
itemView.render()
|
|
|
|
$(slottedItemStub).replaceWith(itemView.$el)
|
|
|
|
@registerSubView(itemView)
|
|
|
|
|
|
|
|
for availableItemEl in @$el.find('#available-equipment .list-group-item')
|
|
|
|
itemID = $(availableItemEl).data('item-id')
|
|
|
|
item = itemMap[itemID]
|
2014-08-14 18:09:10 -04:00
|
|
|
itemView = new ItemView({item: item, includes: {name: true}})
|
2014-08-13 20:21:37 -04:00
|
|
|
itemView.render()
|
|
|
|
$(availableItemEl).append(itemView.$el)
|
|
|
|
@registerSubView(itemView)
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
@delegateEvents()
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
clearSelection: ->
|
|
|
|
@$el.find('.panel-info').removeClass('panel-info')
|
|
|
|
@$el.find('.list-group-item').removeClass('active')
|
|
|
|
@onSelectionChanged()
|
|
|
|
|
|
|
|
onItemSlotClick: (e) ->
|
|
|
|
slot = $(e.target).closest('.panel')
|
|
|
|
wasActive = slot.hasClass('panel-info')
|
2014-08-14 16:41:32 -04:00
|
|
|
@unselectAllSlots()
|
|
|
|
@unselectAllAvailableEquipment() if slot.hasClass('disabled')
|
|
|
|
@selectSlot(slot) unless wasActive and not $(e.target).closest('.item-view')[0]
|
2014-08-13 20:21:37 -04:00
|
|
|
@onSelectionChanged()
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
onAvailableItemClick: (e) ->
|
2014-08-14 16:41:32 -04:00
|
|
|
itemContainer = $(e.target).closest('.list-group-item')
|
|
|
|
@unselectAllAvailableEquipment()
|
|
|
|
@selectAvailableItem(itemContainer)
|
2014-08-13 20:21:37 -04:00
|
|
|
@onSelectionChanged()
|
|
|
|
|
2014-08-14 16:41:32 -04:00
|
|
|
onAvailableItemDoubleClick: (e) ->
|
|
|
|
slot = @getSelectedSlot()
|
|
|
|
slot = @$el.find('.panel:not(.disabled):first') if not slot.length
|
2014-08-13 20:21:37 -04:00
|
|
|
@unequipItemFromSlot(slot)
|
|
|
|
@equipSelectedItemToSlot(slot)
|
|
|
|
@onSelectionChanged()
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
onEquippedItemDoubleClick: (e) ->
|
2014-08-14 16:41:32 -04:00
|
|
|
@unselectAllAvailableEquipment()
|
2014-08-13 20:21:37 -04:00
|
|
|
slot = $(e.target).closest('.item-slot')
|
2014-08-14 16:41:32 -04:00
|
|
|
@selectAvailableItem(@unequipItemFromSlot(slot))
|
|
|
|
@onSelectionChanged()
|
|
|
|
|
|
|
|
onClickSwapButton: ->
|
|
|
|
slot = @getSelectedSlot()
|
|
|
|
selectedItemContainer = @$el.find('#available-equipment .list-group-item.active')
|
|
|
|
return unless slot[0] or selectedItemContainer[0]
|
|
|
|
slot = @$el.find('.panel:not(.disabled):first') if not slot.length
|
|
|
|
itemContainer = @unequipItemFromSlot(slot)
|
|
|
|
@equipSelectedItemToSlot(slot)
|
|
|
|
@selectAvailableItem(itemContainer)
|
|
|
|
@selectSlot(slot)
|
2014-08-13 20:21:37 -04:00
|
|
|
@onSelectionChanged()
|
2014-08-14 18:09:10 -04:00
|
|
|
|
|
|
|
getSelectedSlot: ->
|
2014-08-14 16:41:32 -04:00
|
|
|
@$el.find('#equipped .item-slot.panel-info')
|
2014-08-14 18:09:10 -04:00
|
|
|
|
|
|
|
unselectAllAvailableEquipment: ->
|
2014-08-14 16:41:32 -04:00
|
|
|
@$el.find('#available-equipment .list-group-item').removeClass('active')
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-14 16:41:32 -04:00
|
|
|
unselectAllSlots: ->
|
|
|
|
@$el.find('#equipped .panel').removeClass('panel-info')
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-14 16:41:32 -04:00
|
|
|
selectSlot: (slot) ->
|
|
|
|
slot.addClass('panel-info')
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-14 16:41:32 -04:00
|
|
|
getSlot: (name) ->
|
|
|
|
@$el.find(".item-slot[data-slot=#{name}]")
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-14 16:41:32 -04:00
|
|
|
getSelectedAvailableItemContainer: ->
|
|
|
|
@$el.find('#available-equipment .list-group-item.active')
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-14 16:41:32 -04:00
|
|
|
getAvailableItemContainer: (itemID) ->
|
|
|
|
@$el.find("#available-equipment .list-group-item[data-item-id='#{itemID}']")
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-14 16:41:32 -04:00
|
|
|
selectAvailableItem: (itemContainer) ->
|
|
|
|
itemContainer?.addClass('active')
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
unequipItemFromSlot: (slot) ->
|
|
|
|
itemIDToUnequip = slot.find('.item-view').data('item-id')
|
|
|
|
return unless itemIDToUnequip
|
|
|
|
slot.find('.item-view').detach()
|
|
|
|
for el in @$el.find('#available-equipment .list-group-item')
|
|
|
|
itemID = $(el).find('.item-view').data('item-id')
|
|
|
|
if itemID is itemIDToUnequip
|
2014-08-14 16:41:32 -04:00
|
|
|
return $(el).removeClass('equipped')
|
2014-08-13 20:21:37 -04:00
|
|
|
|
|
|
|
equipSelectedItemToSlot: (slot) ->
|
2014-08-14 16:41:32 -04:00
|
|
|
selectedItemContainer = @getSelectedAvailableItemContainer()
|
2014-08-13 20:21:37 -04:00
|
|
|
newItemHTML = selectedItemContainer.html()
|
2014-08-14 16:41:32 -04:00
|
|
|
selectedItemContainer .addClass('equipped')
|
|
|
|
slotContainer = slot.find('.panel-body')
|
|
|
|
slotContainer.html(newItemHTML)
|
|
|
|
slotContainer.find('.item-view').data('item-id', selectedItemContainer.find('.item-view').data('item-id'))
|
2014-08-13 20:21:37 -04:00
|
|
|
@$el.find('.list-group-item').removeClass('active')
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
onSelectionChanged: ->
|
|
|
|
@$el.find('.item-slot').show()
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
selectedSlot = @$el.find('.panel.panel-info')
|
|
|
|
selectedItem = @$el.find('#available-equipment .list-group-item.active')
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
if selectedSlot.length
|
|
|
|
@$el.find('#available-equipment .list-group-item').hide()
|
|
|
|
@$el.find("#available-equipment .list-group-item.#{selectedSlot.data('slot')}").show()
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
selectedSlotItemID = selectedSlot.find('.item-view').data('item-id')
|
|
|
|
if selectedSlotItemID
|
|
|
|
item = _.find @items.models, {id:selectedSlotItemID}
|
2014-08-14 16:41:32 -04:00
|
|
|
@showSelectedSlotItem(item)
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
else
|
2014-08-14 16:41:32 -04:00
|
|
|
@hideSelectedSlotItem()
|
2014-08-13 20:21:37 -04:00
|
|
|
|
|
|
|
else
|
|
|
|
@$el.find('#available-equipment .list-group-item').show()
|
|
|
|
@$el.find('#available-equipment .list-group-item.equipped').hide()
|
|
|
|
|
|
|
|
@$el.find('.item-slot').removeClass('disabled')
|
|
|
|
if selectedItem.length
|
|
|
|
item = _.find @items.models, {id:selectedItem.find('.item-view').data('item-id')}
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
# update which slots are enabled
|
|
|
|
allowedSlots = item.getAllowedSlots()
|
|
|
|
for slotEl in @$el.find('.item-slot')
|
|
|
|
slotName = $(slotEl).data('slot')
|
|
|
|
if slotName not in allowedSlots
|
|
|
|
$(slotEl).addClass('disabled')
|
|
|
|
|
2014-08-14 16:41:32 -04:00
|
|
|
@showSelectedAvailableItem(item)
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
else
|
2014-08-14 16:41:32 -04:00
|
|
|
@hideSelectedAvailableItem()
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-13 20:21:37 -04:00
|
|
|
@delegateEvents()
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-14 16:41:32 -04:00
|
|
|
showSelectedSlotItem: (item) ->
|
|
|
|
if not @selectedEquippedItemView
|
|
|
|
@selectedEquippedItemView = new ItemView({
|
2014-08-31 15:21:25 -04:00
|
|
|
item: item, includes: {name: true, stats: true, props: true}})
|
2014-08-14 16:41:32 -04:00
|
|
|
@insertSubView(@selectedEquippedItemView, @$el.find('#selected-equipped-item .item-view-stub'))
|
|
|
|
|
|
|
|
else
|
|
|
|
@selectedEquippedItemView.$el.show()
|
|
|
|
@selectedEquippedItemView.item = item
|
|
|
|
@selectedEquippedItemView.render()
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-14 16:41:32 -04:00
|
|
|
hideSelectedSlotItem: ->
|
|
|
|
@selectedEquippedItemView?.$el.hide()
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-14 16:41:32 -04:00
|
|
|
showSelectedAvailableItem: (item) ->
|
|
|
|
if not @selectedAvailableItemView
|
|
|
|
@selectedAvailableItemView = new ItemView({
|
2014-08-31 15:21:25 -04:00
|
|
|
item: item, includes: {name: true, stats: true, props: true}})
|
2014-08-14 16:41:32 -04:00
|
|
|
@insertSubView(@selectedAvailableItemView, @$el.find('#selected-available-item .item-view-stub'))
|
|
|
|
|
|
|
|
else
|
|
|
|
@selectedAvailableItemView.$el.show()
|
|
|
|
@selectedAvailableItemView.item = item
|
|
|
|
@selectedAvailableItemView.render()
|
2014-08-14 18:09:10 -04:00
|
|
|
|
2014-08-14 16:41:32 -04:00
|
|
|
hideSelectedAvailableItem: ->
|
|
|
|
@selectedAvailableItemView?.$el.hide()
|
2014-08-13 20:21:37 -04:00
|
|
|
|
|
|
|
getCurrentEquipmentConfig: ->
|
|
|
|
config = {}
|
|
|
|
for slot in @$el.find('.item-slot')
|
|
|
|
slotName = $(slot).data('slot')
|
|
|
|
slotItemID = $(slot).find('.item-view').data('item-id')
|
|
|
|
continue unless slotItemID
|
|
|
|
item = _.find @items.models, {id:slotItemID}
|
|
|
|
config[slotName] = item.get('original')
|
2014-08-14 18:09:10 -04:00
|
|
|
|
|
|
|
config
|
|
|
|
|
|
|
|
onHidden: ->
|
|
|
|
inventory = @getCurrentEquipmentConfig()
|
|
|
|
heroConfig = @options.session.get('heroConfig') ? {}
|
2014-09-03 19:14:33 -04:00
|
|
|
return if _.isEqual inventory, (heroConfig.inventory ? {})
|
2014-08-31 18:08:52 -04:00
|
|
|
heroConfig.inventory = inventory
|
|
|
|
heroConfig.thangType ?= '529ffbf1cf1818f2be000001' # Temp: assign Tharin as the hero
|
|
|
|
@options.session.set 'heroConfig', heroConfig
|
|
|
|
@options.session.patch success: ->
|
|
|
|
_.defer ->
|
|
|
|
Backbone.Mediator.publish 'level:inventory-changed', {}
|