mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-04-26 05:53:39 -04:00
Working on paper doll equipping.
This commit is contained in:
Nick Winter
parent
7a7d82e8e4
commit
4c900b8870
3 changed files with 226 additions and 70 deletions
app
styles/game-menu
templates/game-menu
views/game-menu
|
|
@ -1,8 +1,9 @@
|
|||
@import "app/styles/mixins"
|
||||
|
||||
$itemSlotSize: 55px
|
||||
$itemSlotSize: 48px
|
||||
$itemSlotInnerWidth: $itemSlotSize - 4
|
||||
$itemSlotGridHeight: 70px
|
||||
$itemSlotGridWidth: 51px
|
||||
$itemSlotGridHeight: 51px
|
||||
|
||||
.ui-effects-transfer
|
||||
outline: 2px solid #28f
|
||||
|
|
@ -83,15 +84,6 @@ $itemSlotGridHeight: 70px
|
|||
height: 450px
|
||||
overflow: hidden
|
||||
|
||||
#hero-image
|
||||
@include filter(contrast(0%) brightness(0%))
|
||||
opacity: 0.4
|
||||
width: 225px
|
||||
height: 410px
|
||||
position: absolute
|
||||
left: 10px
|
||||
top: 20px
|
||||
|
||||
.item-slot
|
||||
width: $itemSlotSize
|
||||
height: $itemSlotSize
|
||||
|
|
@ -101,6 +93,7 @@ $itemSlotGridHeight: 70px
|
|||
position: relative
|
||||
cursor: pointer
|
||||
@include transition(0.5s ease)
|
||||
z-index: 20
|
||||
|
||||
//&.disabled
|
||||
// opacity: 0.5
|
||||
|
|
@ -134,36 +127,36 @@ $itemSlotGridHeight: 70px
|
|||
background-image: url(/images/pages/game-menu/slot-icons.png)
|
||||
|
||||
|
||||
// A terrible awful bit of styling, but will be gone or messed around with soon anyway
|
||||
// Positioning the slots manually
|
||||
|
||||
&[data-slot]
|
||||
position: absolute
|
||||
top: 10px
|
||||
left: 10px
|
||||
|
||||
&[data-slot="misc-1"]
|
||||
display: none // hiding for now
|
||||
position: absolute
|
||||
left: 250px
|
||||
top: 20px + ($itemSlotGridHeight * 3)
|
||||
left: 10px + ($itemSlotGridWidth * 0)
|
||||
top: 15px + ($itemSlotGridHeight * 3)
|
||||
.placeholder
|
||||
background-position: (-0 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="misc-0"]
|
||||
display: none // hiding for now
|
||||
position: absolute
|
||||
left: 250px
|
||||
top: 20px + ($itemSlotGridHeight * 2)
|
||||
left: 10px + ($itemSlotGridWidth * 0)
|
||||
top: 15px + ($itemSlotGridHeight * 2)
|
||||
.placeholder
|
||||
background-position: (-4 * $itemSlotInnerWidth) 0px
|
||||
|
||||
|
||||
&[data-slot="minion"]
|
||||
position: absolute
|
||||
left: 250px
|
||||
top: 20px + ($itemSlotGridHeight * 1)
|
||||
left: 10px + ($itemSlotGridWidth * 0)
|
||||
top: 15px + ($itemSlotGridHeight * 0)
|
||||
.placeholder
|
||||
background-position: (-1 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="programming-book"]
|
||||
position: absolute
|
||||
left: 250px
|
||||
top: 20px + ($itemSlotGridHeight * 4)
|
||||
left: 10px + ($itemSlotGridWidth * 0)
|
||||
top: 15px + ($itemSlotGridHeight * 0)
|
||||
.placeholder
|
||||
background-position: (-3 * $itemSlotInnerWidth) 0px
|
||||
|
||||
|
|
@ -172,100 +165,86 @@ $itemSlotGridHeight: 70px
|
|||
// background-position: (-2 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="wrists"]
|
||||
position: absolute
|
||||
left: 20px
|
||||
top: 20px + ($itemSlotGridHeight * 2.5)
|
||||
left: 10px + ($itemSlotGridWidth * 0)
|
||||
top: 15px + ($itemSlotGridHeight * 0)
|
||||
.placeholder
|
||||
background-position: (-5 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="left-ring"]
|
||||
position: absolute
|
||||
left: 250px
|
||||
top: 20px + ($itemSlotGridHeight * 2)
|
||||
left: 10px + ($itemSlotGridWidth * 4)
|
||||
top: 15px + ($itemSlotGridHeight * 0)
|
||||
.placeholder
|
||||
background-position: (-6 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="right-ring"]
|
||||
position: absolute
|
||||
left: 250px
|
||||
top: 20px + ($itemSlotGridHeight * 3)
|
||||
left: 10px + ($itemSlotGridWidth * 1)
|
||||
top: 15px + ($itemSlotGridHeight * 0)
|
||||
.placeholder
|
||||
background-position: (-7 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="torso"]
|
||||
position: absolute
|
||||
left: 90px
|
||||
top: 20px + ($itemSlotGridHeight * 3)
|
||||
left: 10px + ($itemSlotGridWidth * 5)
|
||||
top: 15px + ($itemSlotGridHeight * 2)
|
||||
.placeholder
|
||||
background-position: (-8 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="feet"]
|
||||
position: absolute
|
||||
left: 90px
|
||||
top: 20px + ($itemSlotGridHeight * 5)
|
||||
left: 10px + ($itemSlotGridWidth * 0)
|
||||
top: 15px + ($itemSlotGridHeight * 7.2)
|
||||
.placeholder
|
||||
background-position: (-9 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="neck"]
|
||||
position: absolute
|
||||
left: 90px
|
||||
top: 20px + ($itemSlotGridHeight * 2)
|
||||
left: 10px + ($itemSlotGridWidth * 3)
|
||||
top: 15px + ($itemSlotGridHeight * 0)
|
||||
.placeholder
|
||||
background-position: (-10 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="waist"]
|
||||
position: absolute
|
||||
left: 90px
|
||||
top: 20px + ($itemSlotGridHeight * 4)
|
||||
left: 10px + ($itemSlotGridWidth * 0)
|
||||
top: 15px + ($itemSlotGridHeight * 1)
|
||||
.placeholder
|
||||
background-position: (-11 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="eyes"]
|
||||
position: absolute
|
||||
left: 90px
|
||||
top: 20px + $itemSlotGridHeight
|
||||
left: 10px + ($itemSlotGridWidth * 2)
|
||||
top: 15px + ($itemSlotGridHeight * 0)
|
||||
.placeholder
|
||||
background-position: (-12 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="head"]
|
||||
position: absolute
|
||||
left: 90px
|
||||
top: 20px
|
||||
left: 10px + ($itemSlotGridWidth * 5)
|
||||
top: 15px + ($itemSlotGridHeight * 1)
|
||||
.placeholder
|
||||
background-position: (-13 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="pet"]
|
||||
position: absolute
|
||||
left: 250px
|
||||
top: 20px
|
||||
left: 10px + ($itemSlotGridWidth * 5)
|
||||
top: 15px + ($itemSlotGridHeight * 7.2)
|
||||
.placeholder
|
||||
background-position: (-14 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="gloves"]
|
||||
position: absolute
|
||||
left: 160px
|
||||
top: 20px + ($itemSlotGridHeight * 2.5)
|
||||
left: 10px + ($itemSlotGridWidth * 0)
|
||||
top: 15px + ($itemSlotGridHeight * 2)
|
||||
.placeholder
|
||||
background-position: (-15 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="left-hand"]
|
||||
position: absolute
|
||||
left: 160px
|
||||
top: 20px + ($itemSlotGridHeight * 3.5)
|
||||
left: 10px + ($itemSlotGridWidth * 5)
|
||||
top: 15px + ($itemSlotGridHeight * 3)
|
||||
.placeholder
|
||||
background-position: (-16 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="right-hand"]
|
||||
position: absolute
|
||||
left: 20px
|
||||
top: 20px + ($itemSlotGridHeight * 3.5)
|
||||
left: 10px + ($itemSlotGridWidth * 0)
|
||||
top: 15px + ($itemSlotGridHeight * 3)
|
||||
.placeholder
|
||||
background-position: (-17 * $itemSlotInnerWidth) 0px
|
||||
|
||||
&[data-slot="flag"]
|
||||
position: absolute
|
||||
left: 250px
|
||||
top: 20px + ($itemSlotGridHeight * 5)
|
||||
left: 10px + ($itemSlotGridWidth * 5)
|
||||
top: 15px + ($itemSlotGridHeight * 0)
|
||||
.placeholder
|
||||
background-position: (-2 * $itemSlotInnerWidth) 0px
|
||||
|
||||
|
|
@ -498,3 +477,130 @@ $itemSlotGridHeight: 70px
|
|||
#equip-item-viewed
|
||||
background: rgb(84,128,44)
|
||||
color: white
|
||||
|
||||
//- Paper doll positioning
|
||||
|
||||
#hero-image
|
||||
//@include filter(contrast(0%) brightness(0%))
|
||||
//opacity: 0.4
|
||||
//width: 225px
|
||||
display: block
|
||||
position: absolute
|
||||
z-index: 12
|
||||
|
||||
&.male
|
||||
left: 65px
|
||||
bottom: 31px
|
||||
|
||||
&.female
|
||||
left: 80px
|
||||
bottom: 31px
|
||||
|
||||
#hero-image-hair
|
||||
position: absolute
|
||||
z-index: 16
|
||||
|
||||
&.female
|
||||
left: 103px
|
||||
bottom: 218px
|
||||
|
||||
&.male
|
||||
left: 124px
|
||||
bottom: 228px
|
||||
|
||||
#hero-image-thumb
|
||||
position: absolute
|
||||
z-index: 16
|
||||
|
||||
&.female
|
||||
left: 81px
|
||||
bottom: 150px
|
||||
@include rotate(-15deg)
|
||||
|
||||
&.male
|
||||
left: 68px
|
||||
bottom: 121px
|
||||
@include rotate(-15deg)
|
||||
|
||||
.doll-image
|
||||
position: absolute
|
||||
z-index: 15
|
||||
|
||||
&.feet
|
||||
z-index: 13
|
||||
|
||||
&.female
|
||||
left: 101px
|
||||
bottom: 37px
|
||||
|
||||
&.male
|
||||
left: 98px
|
||||
bottom: 37px
|
||||
|
||||
&.right-hand
|
||||
&.female
|
||||
left: 48px
|
||||
bottom: 132px
|
||||
@include rotate(-15deg)
|
||||
|
||||
&.male
|
||||
left: 40px
|
||||
bottom: 111px
|
||||
@include rotate(-15deg)
|
||||
|
||||
&.left-hand
|
||||
z-index: 17
|
||||
&.female
|
||||
left: 193px
|
||||
bottom: 72px
|
||||
|
||||
&.male
|
||||
left: 193px
|
||||
bottom: 72px
|
||||
|
||||
&.torso
|
||||
z-index: 14
|
||||
|
||||
&.female
|
||||
left: 72px
|
||||
bottom: 105px
|
||||
|
||||
&.male
|
||||
left: 55px
|
||||
bottom: 69px
|
||||
|
||||
&.gloves
|
||||
z-index: 15
|
||||
|
||||
&.female
|
||||
left: 78px
|
||||
bottom: 133px
|
||||
|
||||
&.female-thumb
|
||||
z-index: 16
|
||||
left: 81px
|
||||
bottom: 150px
|
||||
@include rotate(-15deg)
|
||||
|
||||
&.male
|
||||
left: 65px
|
||||
bottom: 109px
|
||||
|
||||
&.male-thumb
|
||||
z-index: 16
|
||||
left: 68px
|
||||
bottom: 121px
|
||||
@include rotate(-15deg)
|
||||
|
||||
&.head
|
||||
z-index: 16
|
||||
|
||||
&.female
|
||||
left: 72px
|
||||
bottom: 105px
|
||||
|
||||
&.male
|
||||
left: 119px
|
||||
bottom: 180px
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,11 @@
|
|||
|
||||
#equipped
|
||||
if selectedHero && selectedHero.get('featureImage')
|
||||
img(src="/file/"+selectedHero.get('featureImage'))#hero-image
|
||||
img(src="/file/"+selectedHero.get('featureImage'), draggable="false")#hero-image
|
||||
if selectedHero.get('featureImageHair')
|
||||
img(src="/file/"+selectedHero.get('featureImageHair'), draggable="false")#hero-image-hair
|
||||
if selectedHero.get('featureImageThumb')
|
||||
img(src="/file/"+selectedHero.get('featureImageThumb'), draggable="false")#hero-image-thumb
|
||||
|
||||
for slot in ['head', 'eyes', 'neck', 'torso', 'gloves', 'wrists', 'left-hand', 'right-hand', 'waist', 'feet', 'left-ring', 'right-ring', 'minion', 'flag', 'pet', 'programming-book', 'misc-0', 'misc-1']
|
||||
.item-slot(data-slot=slot)
|
||||
|
|
|
|||
|
|
@ -145,6 +145,7 @@ module.exports = class InventoryModal extends ModalView
|
|||
@canvasHeight = @$el.find('canvas').innerHeight()
|
||||
@inserted = true
|
||||
@requireLevelEquipment()
|
||||
@onEquipmentChanged()
|
||||
|
||||
#- Draggable logic
|
||||
|
||||
|
|
@ -270,6 +271,7 @@ module.exports = class InventoryModal extends ModalView
|
|||
@makeEquippedSlotDraggable slotEl
|
||||
@requireLevelEquipment()
|
||||
@onSelectionChanged()
|
||||
@onEquipmentChanged()
|
||||
|
||||
unequipSelectedItem: ->
|
||||
slotEl = @getSelectedSlot()
|
||||
|
|
@ -284,7 +286,7 @@ module.exports = class InventoryModal extends ModalView
|
|||
@showItemDetails(item, 'equip')
|
||||
@requireLevelEquipment()
|
||||
@onSelectionChanged()
|
||||
|
||||
@onEquipmentChanged()
|
||||
|
||||
#- Select/equip helpers
|
||||
|
||||
|
|
@ -400,6 +402,7 @@ module.exports = class InventoryModal extends ModalView
|
|||
@$el.removeClass('Warrior Ranger Wizard').addClass(@selectedHero.get('heroClass'))
|
||||
@requireLevelEquipment()
|
||||
@render()
|
||||
@onEquipmentChanged()
|
||||
|
||||
onShown: ->
|
||||
# Called when we switch tabs to this within the modal
|
||||
|
|
@ -516,13 +519,56 @@ module.exports = class InventoryModal extends ModalView
|
|||
return if @destroyed
|
||||
@$el.find('.unlock-button').popover 'destroy'
|
||||
|
||||
|
||||
#- Paper doll equipment updating
|
||||
onEquipmentChanged: ->
|
||||
@removeDollImages()
|
||||
heroClass = @selectedHero?.get('heroClass') ? 'Warrior'
|
||||
gender = if @selectedHero?.get('slug') in heroGenders.male then 'male' else 'female'
|
||||
equipment = @getCurrentEquipmentConfig()
|
||||
slotsWithImages = []
|
||||
for slot, original of equipment
|
||||
item = _.find @items.models, (item) -> item.get('original') is original
|
||||
continue unless dollImages = item?.get('dollImages')
|
||||
didAdd = @addDollImage slot, dollImages, heroClass, gender
|
||||
slotsWithImages.push slot if didAdd
|
||||
@$el.find('#hero-image, #hero-image-hair, #hero-image-thumb').removeClass().addClass "#{gender} #{heroClass}"
|
||||
@$el.find('#hero-image-hair').toggle not ('head' in slotsWithImages)
|
||||
@$el.find('#hero-image-thumb').toggle not ('gloves' in slotsWithImages)
|
||||
|
||||
removeDollImages: ->
|
||||
@$el.find('.doll-image').remove()
|
||||
|
||||
addDollImage: (slot, dollImages, heroClass, gender) ->
|
||||
heroClass = @selectedHero?.get('heroClass') ? 'Warrior'
|
||||
gender = if @selectedHero?.get('slug') in heroGenders.male then 'male' else 'female'
|
||||
didAdd = false
|
||||
if slot is 'gloves'
|
||||
if heroClass is 'Ranger'
|
||||
imageKeys = ["#{gender}#{heroClass}", "#{gender}#{heroClass}Thumb"]
|
||||
else
|
||||
imageKeys = ["#{gender}", "#{gender}Thumb"]
|
||||
else
|
||||
imageKeys = [gender]
|
||||
for imageKey in imageKeys
|
||||
imageURL = dollImages[imageKey]
|
||||
if not imageURL
|
||||
console.log "Hmm, should have #{slot} #{imageKey} paper doll image, but don't have it."
|
||||
else
|
||||
imageEl = $('<img>').attr('src', "/file/#{imageURL}").addClass("doll-image #{slot} #{heroClass} #{gender} #{_.string.underscored(imageKey).replace(/_/g, '-')}").attr('draggable', false)
|
||||
@$el.find('#equipped').append imageEl
|
||||
didAdd = true
|
||||
didAdd
|
||||
|
||||
destroy: ->
|
||||
@$el.find('.unlock-button').popover 'destroy'
|
||||
@stage?.removeAllChildren()
|
||||
super()
|
||||
|
||||
|
||||
|
||||
heroGenders =
|
||||
male: ['knight', 'samurai', 'trapper', 'potion-master']
|
||||
female: ['captain', 'ninja', 'forest-archer', 'librarian', 'sorcerer']
|
||||
|
||||
gear =
|
||||
'simple-boots': '53e237bf53457600003e3f05'
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue