mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-03-14 07:00:01 -04:00
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:
parent
69a3f78594
commit
d79d40b98c
12 changed files with 60 additions and 39 deletions
|
@ -111,7 +111,6 @@
|
|||
armor: "Armor"
|
||||
hands: "Hands"
|
||||
accessories: "Accessories"
|
||||
books: "Books"
|
||||
minions: "Minions"
|
||||
misc: "Misc"
|
||||
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -9,4 +9,4 @@
|
|||
|
||||
.modal-body
|
||||
width: 726px - 20px
|
||||
height: 550px
|
||||
height: 435px
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -33,6 +33,7 @@ ThangTypeHandler = class ThangTypeHandler extends Handler
|
|||
'kind'
|
||||
'raster'
|
||||
'rasterIcon'
|
||||
'featureImage'
|
||||
'spriteType'
|
||||
]
|
||||
|
||||
|
|
Loading…
Reference in a new issue