codeninjasllc/codecombat
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improvements to lock state of items, differentiating between locked and unlocked and equipped vs. available better.

Browse source
This commit is contained in:
Nick Winter 2014-09-24 20:15:17 -07:00
parent e48fa5f0b7
commit 6441a753d5
6 changed files with 89 additions and 73 deletions
app
assets/images/pages/game-menu
lock.png
styles/game-menu
choose-hero-view.sassinventory-view.sassitem-view.sass
templates/game-menu
inventory-view.jade
views/game-menu
InventoryView.coffee

BIN
app/assets/images/pages/game-menu/lock.png Normal file
View file

Binary file not shown.
Side by side

After

(image error) Size: 5.4 KiB

10
app/styles/game-menu/choose-hero-view.sass
View file

@ -48,14 +48,14 @@ $heroCanvasHeight: 330px
&.locked &.locked
.hero-avatar .hero-avatar
@include filter(contrast(0%) brightness(50%)) @include filter(contrast(50%) brightness(65%))
.lock-indicator .lock-indicator
position: absolute position: absolute
width: 50% width: 40%
left: 25% left: 30%
top: 25% top: 30%
@include filter(invert(100%)) @include filter(invert(90%))
.hero-item .hero-item

70
app/styles/game-menu/inventory-view.sass
View file

@ -1,4 +1,4 @@
@import "../bootstrap/mixins" @import "app/styles/mixins"
$totalWidth: 706px - 2 * 20px $totalWidth: 706px - 2 * 20px
// We get 666px to play with from our parent modals. // We get 666px to play with from our parent modals.
@ -134,22 +134,38 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
background-color: white background-color: white
.list-group-item .list-group-item
padding: 8px 0 padding: 4px 0
img
width: 50px
height: 50px
margin-right: 5px
&.active &.active
background-color: #e0f0f5 background-color: #e0f0f5
&.equipped
display: none
&.restricted
@include opacity(0.5)
.item-info:after .item-info:after
content: ' (locked)' content: ' (available)'
&.equipped
background-color: #ff5
.item-view
cursor: default
.item-info:after
content: ' (equipped)'
&.locked
background-image: url(/images/pages/game-menu/lock.png)
background-size: 25px 25px
background-repeat: no-repeat
background-position: 98% 90%
.item-view
cursor: default
h4, img
//@include filter(contrast(50%) brightness(65%))
@include opacity(0.6)
.item-info:after
content: ' (locked)'
.item-view .item-view
cursor: pointer cursor: pointer
@ -157,8 +173,6 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
$selectedItemsContainerMargin: 20px $selectedItemsContainerMargin: 20px
$selectedItemMargin: 10px $selectedItemMargin: 10px
$selectedItemImageSize: 75px $selectedItemImageSize: 75px
$swapItemHeight: 40px
$swapItemWidth: 60px
position: absolute position: absolute
top: $selectedItemsContainerMargin top: $selectedItemsContainerMargin
@ -169,37 +183,39 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
#selected-equipped-item, #selected-available-item #selected-equipped-item, #selected-available-item
text-align: left text-align: left
overflow: scroll overflow-y: scroll
margin: 0 margin: 0
height: 48.4% height: 48.4%
height: -webkit-calc(50% - $selectedItemMargin / 2) height: -webkit-calc(50% - $selectedItemMargin / 2)
height: calc(50% - $selectedItemMargin / 2) height: calc(50% - $selectedItemMargin / 2)
width: 100% width: 100%
padding: 10px 5px 10px 10px padding: 10px 5px 10px 10px
position: relative
display: none
img img
margin-top: 21px margin-top: 21px
width: $selectedItemImageSize width: $selectedItemImageSize
height: $selectedItemImageSize height: $selectedItemImageSize
margin-right: 10px
.item-info .item-info
margin-left: $selectedItemImageSize + 10px width: 110px
width: -webkit-calc(100% - 75px - 10px)
width: calc(100% - 75px - 10px)
> h3
position: absolute
left: 0px
top: 0px
padding: 5px
#selected-equipped-item #selected-equipped-item
margin-bottom: $selectedItemMargin margin-bottom: $selectedItemMargin
padding-bottom: 20px padding-bottom: 20px
background-color: #ff5
#selected-available-item #selected-available-item
padding-top: 15px padding-top: 15px
background-color: #e0f0f5
#swap-button bottom: 0
position: absolute
top: 50%
left: 50%
margin-top: -($swapItemHeight / 2)
margin-left: -($swapItemWidth / 2)
width: $swapItemWidth
height: $swapItemHeight
font-size: 24px
line-height: 24px
display: inline-block

10
app/styles/game-menu/item-view.sass
View file

@ -3,11 +3,15 @@
img img
float: left float: left
width: 40px width: 50px
height: 40px height: 50px
margin-right: 5px
.item-info .item-info
margin-left: 45px float: left
width: 110px
width: -webkit-calc(100% - 50px - 5px)
width: calc(100% - 50px - 5px)
ul ul
margin-top: 5px margin-top: 5px

12
app/templates/game-menu/inventory-view.jade
View file

@ -19,11 +19,11 @@
canvas.equipped-hero-canvas canvas.equipped-hero-canvas
#selected-items #selected-items
#selected-equipped-item.well #selected-equipped-item.well
h3(data-i18n="inventory.equipped") Equipped
.item-view-stub .item-view-stub
#selected-available-item.well #selected-available-item.well
h3(data-i18n="inventory.equipped") Available
.item-view-stub .item-view-stub
button#swap-button.btn.btn-danger
span.glyphicon.glyphicon-transfer
.item-slot-column.pull-right .item-slot-column.pull-right
for slot in ['pet', 'waist', 'feet', 'right-hand'] for slot in ['pet', 'waist', 'feet', 'right-hand']
@ -44,8 +44,12 @@
.replace-me(data-item-id=equipment[slot].get('original')) .replace-me(data-item-id=equipment[slot].get('original'))
#available-equipment #available-equipment
h4#stash-description h4#unlocked-description
ul.list-group ul.list-group
for item in items for item in unlockedItems
li.list-group-item(class=item.classes, data-item-id=item.get('original'))
h4#locked-description
ul.list-group
for item in lockedItems
li.list-group-item(class=item.classes, data-item-id=item.get('original')) li.list-group-item(class=item.classes, data-item-id=item.get('original'))

60
app/views/game-menu/InventoryView.coffee
View file

@ -14,10 +14,9 @@ module.exports = class InventoryView extends CocoView
events: events:
'click .item-slot': 'onItemSlotClick' 'click .item-slot': 'onItemSlotClick'
'click #available-equipment .list-group-item': 'onAvailableItemClick' 'click #available-equipment .list-group-item:not(.equipped)': 'onAvailableItemClick'
'dblclick #available-equipment .list-group-item': 'onAvailableItemDoubleClick' 'dblclick #available-equipment .list-group-item:not(.equipped)': 'onAvailableItemDoubleClick'
'dblclick .item-slot .item-view': 'onEquippedItemDoubleClick' 'dblclick .item-slot .item-view': 'onEquippedItemDoubleClick'
'click #swap-button': 'onClickSwapButton'
subscriptions: subscriptions:
'level:hero-selection-updated': 'onHeroSelectionUpdated' 'level:hero-selection-updated': 'onHeroSelectionUpdated'
@ -47,11 +46,15 @@ module.exports = class InventoryView extends CocoView
context.equipped = _.values(@equipment) context.equipped = _.values(@equipment)
context.items = @items.models context.items = @items.models
context.unlockedItems = []
context.lockedItems = []
for item in @items.models for item in @items.models
item.classes = item.getAllowedSlots() item.classes = item.getAllowedSlots()
item.classes.push 'equipped' if item.get('original') in context.equipped item.classes.push 'equipped' if item.get('original') in context.equipped
item.classes.push 'restricted' if @allowedItems and not (item.get('original') in @allowedItems) locked = @allowedItems and not (item.get('original') in @allowedItems)
@items.models.sort (a, b) -> ('restricted' in a.classes) - ('restricted' in b.classes) item.classes.push 'locked' if locked
(if locked then context.lockedItems else context.unlockedItems).push item
@items.models.sort (a, b) -> ('locked' in a.classes) - ('locked' in b.classes)
context.slots = @slots context.slots = @slots
context.equipment = _.clone @equipment context.equipment = _.clone @equipment
@ -83,7 +86,7 @@ module.exports = class InventoryView extends CocoView
itemView.render() itemView.render()
$(availableItemEl).append(itemView.$el) $(availableItemEl).append(itemView.$el)
@registerSubView(itemView) @registerSubView(itemView)
continue if $(availableItemEl).hasClass 'restricted' continue if $(availableItemEl).hasClass 'locked'
dragHelper = itemView.$el.find('img').clone().addClass('draggable-item') dragHelper = itemView.$el.find('img').clone().addClass('draggable-item')
do (dragHelper, itemView) => do (dragHelper, itemView) =>
itemView.$el.draggable itemView.$el.draggable
@ -136,7 +139,7 @@ module.exports = class InventoryView extends CocoView
onAvailableItemClick: (e) -> onAvailableItemClick: (e) ->
itemContainer = $(e.target).closest('.list-group-item') itemContainer = $(e.target).closest('.list-group-item')
return if itemContainer.hasClass 'restricted' return if itemContainer.hasClass 'locked'
wasActive = itemContainer.hasClass 'active' wasActive = itemContainer.hasClass 'active'
@unselectAllAvailableEquipment() @unselectAllAvailableEquipment()
@selectAvailableItem(itemContainer) unless wasActive @selectAvailableItem(itemContainer) unless wasActive
@ -145,7 +148,7 @@ module.exports = class InventoryView extends CocoView
onAvailableItemDoubleClick: (e) -> onAvailableItemDoubleClick: (e) ->
if e if e
itemContainer = $(e.target).closest('.list-group-item') itemContainer = $(e.target).closest('.list-group-item')
return if itemContainer.hasClass 'restricted' return if itemContainer.hasClass 'locked'
@selectAvailableItem itemContainer @selectAvailableItem itemContainer
@onSelectionChanged() @onSelectionChanged()
slot = @getSelectedSlot() slot = @getSelectedSlot()
@ -160,17 +163,6 @@ module.exports = class InventoryView extends CocoView
@selectAvailableItem(@unequipItemFromSlot(slot)) @selectAvailableItem(@unequipItemFromSlot(slot))
@onSelectionChanged() @onSelectionChanged()
onClickSwapButton: ->
slot = @getSelectedSlot()
selectedItemContainer = @$el.find('#available-equipment .list-group-item.active')
return unless slot[0] or selectedItemContainer[0]
slot = @$el.find('.item-slot:not(.disabled):first') if not slot.length
itemContainer = @unequipItemFromSlot(slot)
@equipSelectedItemToSlot(slot)
@selectAvailableItem(itemContainer)
@selectSlot(slot)
@onSelectionChanged()
getSelectedSlot: -> getSelectedSlot: ->
@$el.find('#equipped .item-slot.selected') @$el.find('#equipped .item-slot.selected')
@ -221,35 +213,33 @@ module.exports = class InventoryView extends CocoView
if selectedSlot.length if selectedSlot.length
@$el.find('#available-equipment .list-group-item').hide() @$el.find('#available-equipment .list-group-item').hide()
count = @$el.find("#available-equipment .list-group-item.#{selectedSlot.data('slot')}").show().length unlockedCount = @$el.find("#available-equipment .list-group-item.#{selectedSlot.data('slot')}:not(.locked)").show().length
@$el.find('#stash-description').text "#{count} #{selectedSlot.data('slot')} items owned" lockedCount = @$el.find("#available-equipment .list-group-item.#{selectedSlot.data('slot')}.locked").show().length
@$el.find('#unlocked-description').text("#{unlockedCount} #{selectedSlot.data('slot')} items owned").toggle unlockedCount > 0
@$el.find('#locked-description').text("#{lockedCount} #{selectedSlot.data('slot')} items locked").toggle lockedCount > 0
selectedSlotItemID = selectedSlot.find('.item-view').data('item-id') selectedSlotItemID = selectedSlot.find('.item-view').data('item-id')
if selectedSlotItemID if selectedSlotItemID
item = _.find @items.models, {id:selectedSlotItemID} item = _.find @items.models, {id: selectedSlotItemID}
@showSelectedSlotItem(item) @showSelectedSlotItem(item)
else else
@hideSelectedSlotItem() @hideSelectedSlotItem()
else else
count = @$el.find('#available-equipment .list-group-item').show().length unlockedCount = @$el.find('#available-equipment .list-group-item:not(.locked)').show().length
@$el.find('#stash-description').text "#{count} items owned" lockedCount = @$el.find('#available-equipment .list-group-item.locked').show().length
@$el.find('#available-equipment .list-group-item.equipped').hide() @$el.find('#unlocked-description').text("#{unlockedCount} items owned").toggle unlockedCount > 0
@$el.find('#locked-description').text("#{lockedCount} items locked").toggle lockedCount > 0
#@$el.find('#available-equipment .list-group-item.equipped').hide()
@$el.find('.item-slot').removeClass('disabled') @$el.find('.item-slot').removeClass('disabled')
if selectedItem.length if selectedItem.length
item = _.find @items.models, {id:selectedItem.find('.item-view').data('item-id')} item = _.find @items.models, {id:selectedItem.find('.item-view').data('item-id')}
# update which slots are enabled # update which slots are enabled
allowedSlots = item.getAllowedSlots() allowedSlots = item.getAllowedSlots()
for slotEl in @$el.find('.item-slot') for slotEl in @$el.find('.item-slot')
slotName = $(slotEl).data('slot') slotName = $(slotEl).data('slot')
if slotName not in allowedSlots if slotName not in allowedSlots
$(slotEl).addClass('disabled') $(slotEl).addClass('disabled')
@showSelectedAvailableItem(item) @showSelectedAvailableItem(item)
else else
@hideSelectedAvailableItem() @hideSelectedAvailableItem()
@ -265,9 +255,10 @@ module.exports = class InventoryView extends CocoView
@selectedEquippedItemView.item = item @selectedEquippedItemView.item = item
@selectedEquippedItemView.render() @selectedEquippedItemView.render()
@$el.find('#selected-items').show() @$el.find('#selected-items').show()
@$el.find('#selected-equipped-item').show()
hideSelectedSlotItem: -> hideSelectedSlotItem: ->
@selectedEquippedItemView?.$el.hide() @selectedEquippedItemView?.$el.hide().parent().hide()
@$el.find('#selected-items').hide() unless @selectedEquippedItemView?.$el?.is(':visible') @$el.find('#selected-items').hide() unless @selectedEquippedItemView?.$el?.is(':visible')
showSelectedAvailableItem: (item) -> showSelectedAvailableItem: (item) ->
@ -280,9 +271,10 @@ module.exports = class InventoryView extends CocoView
@selectedAvailableItemView.item = item @selectedAvailableItemView.item = item
@selectedAvailableItemView.render() @selectedAvailableItemView.render()
@$el.find('#selected-items').show() @$el.find('#selected-items').show()
@$el.find('#selected-available-item').show()
hideSelectedAvailableItem: -> hideSelectedAvailableItem: ->
@selectedAvailableItemView?.$el.hide() @selectedAvailableItemView?.$el.hide().parent().hide()
@$el.find('#selected-items').hide() unless @selectedEquippedItemView?.$el?.is(':visible') @$el.find('#selected-items').hide() unless @selectedEquippedItemView?.$el?.is(':visible')
getCurrentEquipmentConfig: -> getCurrentEquipmentConfig: ->
@ -296,7 +288,7 @@ module.exports = class InventoryView extends CocoView
config config
assignLevelEquipment: -> assignLevelEquipment: ->
# This is temporary, until we have a more general way of awarding items and configuring needed/restricted items per level. # This is temporary, until we have a more general way of awarding items and configuring needed/locked items per level.
gear = gear =
'simple-boots': '53e237bf53457600003e3f05' 'simple-boots': '53e237bf53457600003e3f05'
'longsword': '53e218d853457600003e3ebe' 'longsword': '53e218d853457600003e3ebe'