diff --git a/app/styles/game-menu/inventory-modal.sass b/app/styles/game-menu/inventory-modal.sass
index 1aab744f6..5c19397e9 100644
--- a/app/styles/game-menu/inventory-modal.sass
+++ b/app/styles/game-menu/inventory-modal.sass
@@ -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
+
+
diff --git a/app/templates/game-menu/inventory-modal.jade b/app/templates/game-menu/inventory-modal.jade
index f1d45ca8e..b06d91793 100644
--- a/app/templates/game-menu/inventory-modal.jade
+++ b/app/templates/game-menu/inventory-modal.jade
@@ -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)
diff --git a/app/views/game-menu/InventoryModal.coffee b/app/views/game-menu/InventoryModal.coffee
index 0b2fafcb4..3f7bfb16b 100644
--- a/app/views/game-menu/InventoryModal.coffee
+++ b/app/views/game-menu/InventoryModal.coffee
@@ -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'