Added rough army power indicator to DuelStatsView.

app/lib/surface/Label.coffee

@@ -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]

app/lib/surface/Lank.coffee

@@ -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
+    # Let's try just using the DuelStatsView instead of this.
-      @setNameLabel @options.playerName
+    #else if @options.playerName
+    #  @setNameLabel @options.playerName
 
   configureMouse: ->
     @sprite.cursor = 'pointer' if @thang?.isSelectable

app/styles/play/level/duel-stats-view.sass

@@ -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
+      .name-and-power
-        text-align: right
+        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
+    $iconSize: 16px
-      //width: 100px
+    .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
+    .player-health
-        $iconSize: 16px
+      line-height: 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
 
       .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)

app/templates/play/level/duel-stats-view.jade

@@ -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
 
 

app/views/play/level/DuelStatsView.coffee

@@ -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 = _.find @options.thangs, id: @avatars[player.team].thang.id
-      thang = @avatars[player.team].thang
       @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)