codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-04-26 05:53:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Added rough army power indicator to DuelStatsView.

Browse source
This commit is contained in:
Nick Winter 2015-08-20 15:20:52 -07:00
parent 69fd4a55e7
commit 20c6248dba
5 changed files with 76 additions and 25 deletions
app
lib/surface
Label.coffeeLank.coffee
styles/play/level
duel-stats-view.sass
templates/play/level
duel-stats-view.jade
views/play/level
DuelStatsView.coffee

6
app/lib/surface/Label.coffee
View file

@ -78,7 +78,11 @@ module.exports = class Label extends CocoClass
o.fontSize = {D: 25, S: 12, N: 24}[st]
fontFamily = {D: 'Arial', S: 'Arial', N: 'Arial'}[st]
o.fontDescriptor = "#{o.fontWeight} #{o.fontSize}px #{fontFamily}"
o.fontColor = {D: '#000', S: '#FFF', N: '#00a'}[st]
o.fontColor = {D: '#000', S: '#FFF', N: '#0a0'}[st]
if @style is 'name' and @sprite?.thang?.team is 'humans'
o.fontColor = '#a00'
else if @style is 'name' and @sprite?.thang?.team is 'ogres'
o.fontColor = '#00a'
o.backgroundFillColor = {D: 'white', S: 'rgba(0,0,0,0.4)', N: 'rgba(255,255,255,0.5)'}[st]
o.backgroundStrokeColor = {D: 'black', S: 'rgba(0,0,0,0.6)', N: 'rgba(0,0,0,0)'}[st]
o.backgroundStrokeStyle = {D: 2, S: 1, N: 1}[st]

5
app/lib/surface/Lank.coffee
View file

@ -476,8 +476,9 @@ module.exports = Lank = class Lank extends CocoClass
bar.scaleX = healthPct / @options.floatingLayer.resolutionFactor
if @thang.showsName
@setNameLabel(if @thang.health <= 0 then '' else @thang.id)
else if @options.playerName
@setNameLabel @options.playerName
# Let's try just using the DuelStatsView instead of this.
#else if @options.playerName
# @setNameLabel @options.playerName
configureMouse: ->
@sprite.cursor = 'pointer' if @thang?.isSelectable

57
app/styles/play/level/duel-stats-view.sass
View file

@ -37,13 +37,24 @@
&.team-humans
padding-right: 10px
.player-power
margin-right: 5px
&.team-ogres
padding-left: 10px
flex-direction: row-reverse
color: hsla(205,100%,51%,1)
.player-name
text-align: right
.name-and-power
flex-direction: row-reverse
.player-name
text-align: right
.player-power
margin-left: 5px
flex-direction: row-reverse
text-align: right
.player-health
flex-direction: row-reverse
@ -51,6 +62,9 @@
.health-bar-container .health-bar
background: hsla(205,100%,51%,1)
.name-and-power
display: flex
flex-direction: row
.player-portrait
margin: 0 12px
@ -61,26 +75,27 @@
.player-name
height: 50%
text-align: left
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
max-width: 130px
.player-health
//width: 100px
$iconSize: 16px
.health-icon, .power-icon
display: inline-block
width: $iconSize
height: $iconSize
background: transparent url(/images/level/hud_info_icons.png) no-repeat
background-size: auto $iconSize
.player-health, .player-power
height: 50%
display: flex
flex-direction: row
line-height: 16px
height: 18px
//position: absolute
//right: 35px
//top: 23px
.health-icon
$iconSize: 16px
display: inline-block
width: $iconSize
height: $iconSize
background: transparent url(/images/level/hud_info_icons.png) no-repeat
background-size: auto $iconSize
//float: left
.player-health
line-height: 16px
.health-bar-container
width: 100px
@ -101,6 +116,16 @@
.health-value
vertical-align: top
.player-power
.power-icon
margin-top: 4px
background-position: (-5 * $iconSize) 0px
.power-value
min-width: 20px
margin: 0px 5px
//&.team-humans .team-gold
// color: hsla(4,80%,51%,1)

7
app/templates/play/level/duel-stats-view.jade
View file

@ -3,7 +3,11 @@ for player in players
.player-portrait
.thang-avatar-placeholder
.player-info
.player-name= player.name
.name-and-power
.player-power
.power-icon
.power-value
.player-name= player.name
.player-health
.health-icon
.health-bar-container
@ -13,6 +17,5 @@ for player in players
// .team-gold
// img(src="/images/level/gold_icon.png", alt="", draggable="false")
// .gold-amount
.player-power

26
app/views/play/level/DuelStatsView.coffee
View file

@ -17,6 +17,7 @@ module.exports = class DuelStatsView extends CocoView
subscriptions:
#'surface:gold-changed': 'onGoldChanged'
'god:new-world-created': 'onNewWorld'
'god:streaming-world-updated': 'onNewWorld'
'surface:frame-changed': 'onFrameChanged'
constructor: (options) ->
@ -58,23 +59,40 @@ module.exports = class DuelStatsView extends CocoView
avatar.render()
onNewWorld: (e) ->
@thangs = _.filter e.world.thangs, 'inThangList'
@options.thangs = _.filter e.world.thangs, 'inThangList'
onFrameChanged: (e) ->
@update()
update: ->
for player in @players
# etc.
thang = @avatars[player.team].thang
thang = _.find @options.thangs, id: @avatars[player.team].thang.id
@updateHealth thang
@updatePower()
updateHealth: (thang) ->
$health = @$find thang.team, '.player-health'
console.log 'updating health for', thang.id, thang.health, thang.maxHealth, 'with el', $health
$health.find('.health-bar').css 'width', Math.max(0, Math.min(100, 100 * thang.health / thang.maxHealth)) + '%'
utils.replaceText $health.find('.health-value'), Math.round thang.health
updatePower: ->
# Right now we just display the army cost of all living units as opposed to doing something more sophisticate to measure power.
@costTable ?=
soldier: 20
archer: 25
decoy: 25
'griffin-rider': 50
paladin: 80
artillery: 75
'arrow-tower': 75
palisade: 10
peasant: 50
powers = humans: 0, ogres: 0
for thang in @options.thangs when thang.health > 0
powers[thang.team] += @costTable[thang.type] or 0 if powers[thang.team]?
for player in @players
utils.replaceText @$find(player.team, '.power-value'), powers[player.team]
$find: (team, selector) ->
@$el.find(".player-container.team-#{team} " + selector)