codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-04-26 14:03:28 -04:00
Code Issues 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
.hero-avatar
@include filter(contrast(0%) brightness(50%))
@include filter(contrast(50%) brightness(65%))
.lock-indicator
position: absolute
width: 50%
left: 25%
top: 25%
@include filter(invert(100%))
width: 40%
left: 30%
top: 30%
@include filter(invert(90%))
.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
// We get 666px to play with from our parent modals.
@ -134,22 +134,38 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
background-color: white
.list-group-item
padding: 8px 0
img
width: 50px
height: 50px
margin-right: 5px
padding: 4px 0
&.active
background-color: #e0f0f5
&.equipped
display: none
&.restricted
@include opacity(0.5)
.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
cursor: pointer
@ -157,8 +173,6 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
$selectedItemsContainerMargin: 20px
$selectedItemMargin: 10px
$selectedItemImageSize: 75px
$swapItemHeight: 40px
$swapItemWidth: 60px
position: absolute
top: $selectedItemsContainerMargin
@ -169,37 +183,39 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
#selected-equipped-item, #selected-available-item
text-align: left
overflow: scroll
overflow-y: scroll
margin: 0
height: 48.4%
height: -webkit-calc(50% - $selectedItemMargin / 2)
height: calc(50% - $selectedItemMargin / 2)
width: 100%
padding: 10px 5px 10px 10px
position: relative
display: none
img
margin-top: 21px
width: $selectedItemImageSize
height: $selectedItemImageSize
margin-right: 10px
.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
margin-bottom: $selectedItemMargin
padding-bottom: 20px
background-color: #ff5
#selected-available-item
padding-top: 15px
#swap-button
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
background-color: #e0f0f5
bottom: 0

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

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

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

@ -19,11 +19,11 @@
canvas.equipped-hero-canvas
#selected-items
#selected-equipped-item.well
h3(data-i18n="inventory.equipped") Equipped
.item-view-stub
#selected-available-item.well
h3(data-i18n="inventory.equipped") Available
.item-view-stub
button#swap-button.btn.btn-danger
span.glyphicon.glyphicon-transfer
.item-slot-column.pull-right
for slot in ['pet', 'waist', 'feet', 'right-hand']
@ -44,8 +44,12 @@
.replace-me(data-item-id=equipment[slot].get('original'))
#available-equipment
h4#stash-description
h4#unlocked-description
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'))

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

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