Moved spellbooks to right hand. Put full-body hero feature images in. Saved some height on ChooseHeroView and InventoryView for smaller screens. Hid level play counts unless admin.

This commit is contained in:
Nick Winter 2014-10-14 09:54:18 -07:00
parent 69a3f78594
commit d79d40b98c
12 changed files with 60 additions and 39 deletions

View file

@ -111,7 +111,6 @@
armor: "Armor"
hands: "Hands"
accessories: "Accessories"
books: "Books"
minions: "Minions"
misc: "Misc"

View file

@ -127,6 +127,7 @@ _.extend ThangTypeSchema.properties,
positions: PositionsSchema
raster: {type: 'string', format: 'image-file', title: 'Raster Image'}
rasterIcon: { type: 'string', format: 'image-file', title: 'Raster Image Icon' }
featureImage: { type: 'string', format: 'image-file', title: 'Feature Image' }
colorGroups: c.object
title: 'Color Groups'
additionalProperties:

View file

@ -4,7 +4,7 @@
$maxHeroPortraitSize: 100px
$minHeroPortraitSize: 50px
$heroCanvasHeight: 330px
$heroCanvasHeight: 265px
#choose-hero-view
@ -62,13 +62,20 @@ $heroCanvasHeight: 330px
&.locked
@include opacity(0.6)
canvas, .hero-stats
canvas, .hero-feature-image, .hero-stats
width: 45%
height: $heroCanvasHeight
float: left
canvas
canvas, .hero-feature-image
margin-left: 5%
.hero-feature-image
display: none
text-align: center
img
height: $heroCanvasHeight
.hero-stats
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6)
@ -84,7 +91,7 @@ $heroCanvasHeight: 330px
.carousel-control
height: 75%
top: 25%
top: 30%
width: 10%
.select-group

View file

@ -1,17 +1,15 @@
@import "app/styles/mixins"
$totalWidth: 706px - 2 * 20px
// We get 666px to play with from our parent modals.
$inventoryHeight: 530px
$inventoryHeight: 445px
$equippedWidth: 450px
$itemSlotMargin: 5px
$itemSlotSize: ($equippedWidth - 6 * 2 * $itemSlotMargin) / 6
$itemSlotSizeWithMargin: $itemSlotSize + 2 * $itemSlotMargin
$itemSlotBorderWidth: 2px
$itemSlotInnerWidth: $itemSlotSize - 2 * $itemSlotBorderWidth
$heroContainerBottomMargin: 10px
$heroContainerWidth: 4 * $itemSlotSizeWithMargin
$heroContainerHeight: $inventoryHeight - 2 * $itemSlotSizeWithMargin - $heroContainerBottomMargin
$heroContainerHeight: $inventoryHeight - $itemSlotSizeWithMargin
$selectedAreaHeight: 150px
$stashMargin: 20px
$stashWidth: $totalWidth - $equippedWidth - $stashMargin
@ -50,9 +48,9 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
.item-slot-column
//background-color: rgba(112, 124, 35, 0.5)
width: $itemSlotSizeWithMargin
height: 4 * $itemSlotSizeWithMargin
height: 5 * $itemSlotSizeWithMargin
float: left
margin-top: 30px
//margin-top: 30px
.item-slot
width: $itemSlotSize
@ -93,11 +91,12 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
background-position: (-1 * $itemSlotInnerWidth) 0px
&[data-slot="programming-book"] .placeholder
background-position: (-2 * $itemSlotInnerWidth) 0px
&[data-slot="spellbook"] .placeholder
background-position: (-3 * $itemSlotInnerWidth) 0px
// Only for wizards...
//&[data-slot="spellbook"] .placeholder
// background-position: (-2 * $itemSlotInnerWidth) 0px
&[data-slot="misc-0"] .placeholder
background-position: (-4 * $itemSlotInnerWidth) 0px
@ -163,15 +162,15 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
float: left
position: relative
.equipped-hero-canvas
.equipped-hero-canvas, .hero-feature-image
width: $heroContainerWidth
height: $heroContainerHeight
hr.slot-row-separator
clear: both
margin-top: 0
margin-bottom: $heroContainerBottomMargin / 2 - 1
border-top: 1px solid #aaa
.hero-feature-image
text-align: center
img
height: $heroContainerHeight
#available-equipment
width: $stashWidth
@ -236,7 +235,7 @@ $stashWidth: $totalWidth - $equippedWidth - $stashMargin
position: absolute
top: $selectedItemsContainerMargin
right: $selectedItemsContainerMargin
bottom: $selectedItemsContainerMargin + $heroContainerBottomMargin
bottom: $selectedItemsContainerMargin
left: $selectedItemsContainerMargin
text-align: center

View file

@ -9,4 +9,4 @@
.modal-body
width: 726px - 20px
height: 550px
height: 435px

View file

@ -12,6 +12,8 @@
- var info = heroInfo[hero.get('slug')]
div(class="item hero-item" + (hero.locked ? " locked" : ""), data-hero-id=hero.get('original'))
canvas.hero-canvas
.hero-feature-image
img
.hero-stats
h2= info.fullName
p

View file

@ -8,7 +8,7 @@
.replace-me(data-item-id=equipment[slot].get('original'))
.item-slot-column.pull-left
for slot in ['minion', 'torso', 'gloves', 'left-hand']
for slot in ['minion', 'torso', 'gloves', 'left-hand', 'misc-0']
.item-slot(data-slot=slot)
.placeholder
.item-container
@ -17,6 +17,8 @@
.hero-container
canvas.equipped-hero-canvas
.hero-feature-image
img
#selected-items
#selected-equipped-item.well
h3(data-i18n="inventory.equipped") Equipped
@ -26,22 +28,23 @@
.item-view-stub
.item-slot-column.pull-right
for slot in ['pet', 'waist', 'feet', 'right-hand']
for slot in ['pet', 'waist', 'feet', 'right-hand', 'programming-book']
.item-slot(data-slot=slot)
.placeholder
.item-container
if equipment[slot]
.replace-me(data-item-id=equipment[slot].get('original'))
hr.slot-row-separator
.item-slot-row.row-4
for slot in ['programming-book', 'spellbook', 'misc-0', 'misc-1']
.item-slot(data-slot=slot)
.placeholder
.item-container
if equipment[slot]
.replace-me(data-item-id=equipment[slot].get('original'))
// TODO: work in misc 1 again
//hr.slot-row-separator
//
//.item-slot-row.row-4
// for slot in ['misc-1']
// .item-slot(data-slot=slot)
// .placeholder
// .item-container
// if equipment[slot]
// .replace-me(data-item-id=equipment[slot].get('original'))
#available-equipment
h4#unlocked-description

View file

@ -23,7 +23,7 @@ module.exports = class ChooseHeroView extends CocoView
constructor: (options) ->
super options
@heroes = new CocoCollection([], {model: ThangType})
@heroes.url = '/db/thang.type?view=heroes&project=original,name,slug,soundTriggers'
@heroes.url = '/db/thang.type?view=heroes&project=original,name,slug,soundTriggers,featureImage'
@supermodel.loadCollection(@heroes, 'heroes')
@stages = {}
@ -100,6 +100,11 @@ module.exports = class ChooseHeroView extends CocoView
loadHero: (hero, heroIndex, preloading=false) ->
createjs.Ticker.removeEventListener 'tick', stage for stage in _.values @stages
if featureImage = hero.get 'featureImage'
$(".hero-item[data-hero-id='#{hero.get('original')}'] canvas").hide()
$(".hero-item[data-hero-id='#{hero.get('original')}'] .hero-feature-image").show().find('img').prop('src', '/file/' + featureImage)
@playSelectionSound hero unless preloading
return hero
createjs.Ticker.setFPS 30 # In case we paused it from being inactive somewhere else
if stage = @stages[heroIndex]
unless preloading
@ -109,7 +114,7 @@ module.exports = class ChooseHeroView extends CocoView
fullHero = @getFullHero hero.get 'original'
onLoaded = =>
return unless canvas = $(".hero-item[data-hero-id='#{fullHero.get('original')}'] canvas")
canvas.prop width: @canvasWidth, height: @canvasHeight
canvas.show().prop width: @canvasWidth, height: @canvasHeight
builder = new SpriteBuilder(fullHero)
movieClip = builder.buildMovieClip(fullHero.get('actions').attack?.animation ? fullHero.get('actions').idle.animation)
movieClip.scaleX = movieClip.scaleY = canvas.prop('height') / 120 # Average hero height is ~110px tall at normal resolution

View file

@ -10,7 +10,7 @@ module.exports = class InventoryView extends CocoView
id: 'inventory-view'
className: 'tab-pane'
template: template
slots: ['head', 'eyes', 'neck', 'torso', 'wrists', 'gloves', 'left-ring', 'right-ring', 'right-hand', 'left-hand', 'waist', 'feet', 'spellbook', 'programming-book', 'pet', 'minion', 'misc-0', 'misc-1', 'misc-2', 'misc-3', 'misc-4']
slots: ['head', 'eyes', 'neck', 'torso', 'wrists', 'gloves', 'left-ring', 'right-ring', 'right-hand', 'left-hand', 'waist', 'feet', 'programming-book', 'pet', 'minion', 'misc-0', 'misc-1']
events:
'click .item-slot': 'onItemSlotClick'
@ -379,12 +379,16 @@ module.exports = class InventoryView extends CocoView
return unless @supermodel.finished() and @selectedHero and not @$el.hasClass 'secret'
@startedLoadingFirstHero = true
@stage?.removeAllChildren()
if featureImage = @selectedHero.get 'featureImage'
@$el.find(".equipped-hero-canvas").hide()
@$el.find(".hero-feature-image").show().find('img').prop('src', '/file/' + featureImage)
return
if @selectedHero.loaded and movieClip = @movieClips?[@selectedHero.get('original')]
@stage.addChild(movieClip)
@stage.update()
return
onLoaded = =>
return unless canvas = $(".equipped-hero-canvas")
return unless canvas = @$el.find(".equipped-hero-canvas")
@canvasWidth ||= canvas.width()
@canvasHeight ||= canvas.height()
canvas.prop width: @canvasWidth, height: @canvasHeight

View file

@ -48,6 +48,7 @@ module.exports = class WorldMapView extends RootView
super()
getLevelPlayCounts: ->
return unless me.isAdmin()
success = (levelPlayCounts) =>
return if @destroyed
for level in levelPlayCounts

View file

@ -14,9 +14,8 @@ module.exports = class PlayItemsModal extends ModalView
armor: ['torso', 'head', 'gloves', 'feet']
hands: ['right-hand', 'left-hand']
accessories: ['eyes', 'neck', 'left-ring', 'right-ring', 'waist']
books: ['programming-book', 'spellbook']
minions: ['minion', 'pet']
misc: ['misc-0', 'misc-1', 'misc-2', 'misc-3', 'misc-4']
misc: ['programming-book', 'misc-0', 'misc-1']
#events:
# 'change input.select': 'onSelectionChanged'

View file

@ -33,6 +33,7 @@ ThangTypeHandler = class ThangTypeHandler extends Handler
'kind'
'raster'
'rasterIcon'
'featureImage'
'spriteType'
]