codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-04-26 05:53:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

InventoryModal loads item portraits when they are visible, getting rid of dozens of unnecessary web requests.

Browse source
This commit is contained in:
Scott Erickson 2014-12-06 14:21:56 -08:00
parent b976a11d65
commit 83e1fe8bfe
2 changed files with 29 additions and 7 deletions
app
templates/play/menu
inventory-modal.jade
views/play/menu
InventoryModal.coffee

17
app/templates/play/menu/inventory-modal.jade
View file

@ -31,9 +31,10 @@
if itemGroups.availableItems.models.length
h4#available-description(data-i18n="inventory.available_item")
for item in itemGroups.availableItems.models
.item.available(class=item.classes, data-item-id=item.id)
img(src=item.getPortraitURL())
button.btn.equip-item(data-i18n="inventory.equip")
if selectedHeroClass && item.classes.indexOf(selectedHeroClass) > -1
.item.available(class=item.classes, data-item-id=item.id)
img
button.btn.equip-item(data-i18n="inventory.equip")
.clearfix
#double-click-hint.alert.alert-info
@ -43,15 +44,17 @@
if itemGroups.restrictedItems.models.length
h4#restricted-description(data-i18n="inventory.restricted_title")
for item in itemGroups.restrictedItems.models
.item(class=item.classes, data-item-id=item.id)
img(src=item.getPortraitURL(), draggable="false")
if selectedHeroClass && item.classes.indexOf(selectedHeroClass) > -1
.item(class=item.classes, data-item-id=item.id)
img(draggable="false")
.clearfix
if itemGroups.lockedItems.models.length
h4#locked-description(data-i18n="play.locked")
for item in itemGroups.lockedItems.models
.item(class=item.classes, data-item-id=item.id)
img(src=item.getPortraitURL(), draggable="false")
if selectedHeroClass && item.classes.indexOf(selectedHeroClass) > -1
.item(class=item.classes, data-item-id=item.id)
img(draggable="false")
.clearfix
#item-details-view

19
app/views/play/menu/InventoryModal.coffee
View file

@ -35,6 +35,7 @@ module.exports = class InventoryModal extends ModalView
'click #close-modal': 'hide'
'click .buy-gems-prompt-button': 'onBuyGemsPromptButtonClicked'
'click': 'onClickedSomewhere'
'update #unequipped .nano': 'onScrollUnequipped'
shortcuts:
'esc': 'clearSelection'
@ -44,6 +45,7 @@ module.exports = class InventoryModal extends ModalView
#- Setup
initialize: (options) ->
@onScrollUnequipped = _.throttle(_.bind(@onScrollUnequipped, @), 200)
super(arguments...)
@items = new CocoCollection([], {model: ThangType})
# TODO: switch to item store loading system?
@ -121,6 +123,7 @@ module.exports = class InventoryModal extends ModalView
context.itemGroups = @itemGroups
context.slots = @slots
context.selectedHero = @selectedHero
context.selectedHeroClass = @selectedHero?.get('heroClass')
context.equipment = _.clone @equipment
context.equipment[slot] = @items.findWhere {original: itemOriginal} for slot, itemOriginal of context.equipment
context.gems = me.gems()
@ -524,6 +527,21 @@ module.exports = class InventoryModal extends ModalView
onClickedSomewhere: (e) ->
return if @destroyed
@$el.find('.unlock-button').popover 'destroy'
#- Dynamic portrait loading
onScrollUnequipped: ->
# dynamically load visible items when the user scrolls enough to see them
nanoContent = @$el.find('#unequipped .nano-content')
items = nanoContent.find('.item:visible:not(.loaded)')
threshold = nanoContent.height() + 100
for itemEl in items
itemEl = $(itemEl)
if itemEl.position().top < threshold
itemEl.addClass('loaded')
item = @items.get(itemEl.data('item-id'))
itemEl.find('img').attr('src', item.getPortraitURL())
#- Paper doll equipment updating
@ -544,6 +562,7 @@ module.exports = class InventoryModal extends ModalView
@$el.find('#hero-image-thumb').toggle not ('gloves' in slotsWithImages)
@equipment = @options.equipment = equipment
@onScrollUnequipped()
removeDollImages: ->
@$el.find('.doll-image').remove()