Implemented stat comparison bars on ChooseHeroView.

app/locale/en.coffee

@@ -297,8 +297,10 @@
     programming_language_description: "Which programming language do you want to use?"
     status: "Status"
     weapons: "Weapons"
+    attack: "Damage"  # Can also translate as "Attack"
     health: "Health"
     speed: "Speed"
+    skills: "Skills"
 
   save_load:
     granularity_saved_games: "Saved"

app/styles/game-menu/choose-hero-view.sass

@@ -79,7 +79,27 @@ $heroCanvasHeight: 265px
   
       .hero-stats
         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6)
-        font-size: 24px
+
+        .hero-class, .hero-status, .hero-skills
+          font-size: 14px
+
+        .hero-stat
+          margin: 10px 0
+
+          .progress
+            width: 90%
+            text-align: center
+            height: 26px
+            position: relative
+            margin: 0
+
+            .hero-stat-label
+              position: absolute
+              width: 100%
+              font-size: 18px
+              text-transform: uppercase
+              color: white
+              text-shadow: 0px 1px 0px black, 0px -1px 0px black, -1px 0px 0px black, 1px 0px 0px black
   
     .carousel-control.left
       border-top-left-radius: 10px

app/templates/game-menu/choose-hero-view.jade

@@ -16,25 +16,40 @@
           img
         .hero-stats
           h2= info.fullName
-          p
+          //.hero-description= info.description  // Not until we have written the descriptions.
+          .hero-status
             span(data-i18n="choose_hero.status") Status
             span.spr :
             if hero.locked
               | #{info.status}
             else
               | Available
-          p
+          .hero-class
             span(data-i18n="choose_hero.weapons") Weapons
             span.spr :
             | #{info.weapons}
-          p
+          for statInfo in [{name: 'attack', color: 'danger'}, {name: 'health', color: 'info'}, {name: 'speed', color: 'success'}]
-            span(data-i18n="choose_hero.health") Health
+            - var tooltip = "";
-            span.spr :
+            - if (statInfo.name == 'attack')
-            | #{info.health}
+            -   tooltip = Math.round(100 * info[statInfo.name + 'Factor']) + '% ' + info.class.toLowerCase() + ' weapon damage';
-          p
+            - else if (statInfo.name == 'health')
-            span(data-i18n="choose_hero.speed") Speed
+            -   tooltip = Math.round(100 * info[statInfo.name + 'Factor']) + '% ' + info.class.toLowerCase() + ' armor health';
-            span.spr :
+            - else if (statInfo.name == 'speed')
-            | #{info.speed}
+            -   tooltip = info.speedAbsolute + ' meters per second';
+            .hero-stat(title=tooltip)
+              .progress
+                div(class="progress-bar progress-bar-" + statInfo.color, style="width: " + (10 * info[statInfo.name]) + "%")
+                .hero-stat-label
+                  span(data-i18n="choose_hero." + statInfo.name)
+                  span.spr :
+                  | #{info[statInfo.name]}
+
+          if info.skills
+            .hero-skills
+              span(data-i18n="choose_hero.skills") Skills
+              span.spr :
+              for skill in info.skills
+                code.spl.spr= skill
   a.carousel-control.left(role="button", data-slide="prev", href="#hero-carousel")
     span.glyphicon.glyphicon-chevron-left
   a.carousel-control.right(role="button", data-slide="next", href="#hero-carousel")

app/views/game-menu/ChooseHeroView.coffee

@@ -65,6 +65,7 @@ module.exports = class ChooseHeroView extends CocoView
     heroIndex = Math.max 0, _.findIndex(heroes, ((hero) -> hero.get('original') is heroConfig.thangType))
     @$el.find(".hero-item:nth-child(#{heroIndex + 1}), .hero-indicator:nth-child(#{heroIndex + 1})").addClass('active')
     @onHeroChanged direction: null, relatedTarget: @$el.find('.hero-item')[heroIndex]
+    @$el.find('.hero-stat').tooltip()
 
   onHeroChanged: (e) ->
     direction = e.direction  # 'left' or 'right'
@@ -161,65 +162,125 @@ module.exports = class ChooseHeroView extends CocoView
 
 
 temporaryHeroInfo =
-  captain:
-    fullName: 'Captain Anya Weston'
-    weapons: 'Razor Discs'
-    status: 'Available'
-    health: '35'
-    speed: '4 m/s'
-
   knight:
     fullName: 'Tharin Thunderfist'
-    weapons: 'Swords'
+    weapons: 'Swords - Short Range, No Magic'
+    class: 'Warrior'
+    description: 'Beefcake! Beefcaaake!'
     status: 'Available'
-    health: '35'
+    attack: 8
-    speed: '4 m/s'
+    attackFactor: 1.2
+    health: 8.5
+    healthFactor: 1.4
+    speed: 1.5
+    speedAbsolute: 6
+
+  captain:
+    fullName: 'Captain Anya Weston'
+    weapons: 'Swords - Short Range, No Magic'
+    class: 'Warrior'
+    description: 'Don\'t bother me, I\'m winning this fight for you.'
+    status: 'Available'
+    attack: 8
+    attackFactor: 1.2
+    health: 8.5
+    healthFactor: 1.4
+    speed: 1.5
+    speedAbsolute: 6
 
   thoktar:
     fullName: 'Thoktar the Devourer'
-    weapons: 'Magic'
+    weapons: 'Wands, Staffs - Long Range, Magic'
+    class: 'Wizard'
+    description: '???'
     status: 'Locked'
-    health: '???'
+    attack: 5
-    speed: '???'
+    attackFactor: 2
+    health: 4.5
+    healthFactor: 1.4
+    speed: 2.5
+    speedAbsolute: 7
+    skills: ['summonElemental', 'devour']
 
   equestrian:
     fullName: 'Rider Reynaldo'
-    weapons: 'Axes'
+    weapons: 'Crossbows, Guns - Long Range, No Magic'
+    class: 'Ranger'
+    description: '???'
     status: 'Locked'
-    health: '???'
+    attack: 6
-    speed: '???'
+    attackFactor: 1.4
+    health: 7
+    healthFactor: 1.8
+    speed: 1.5
+    speedAbsolute: 6
+    skills: ['hide']
 
   'potion-master':
     fullName: 'Master Snake'
-    weapons: 'Magic'
+    weapons: 'Wands, Staffs - Long Range, Magic'
+    class: 'Wizard'
+    description: '???'
     status: 'Locked'
-    health: '???'
+    attack: 2
-    speed: '???'
+    attackFactor: 0.833
+    health: 4
+    healthFactor: 1.2
+    speed: 6
+    speedAbsolute: 11
+    skills: ['brewPotion']
 
   librarian:
     fullName: 'Hushbaum'
-    weapons: 'Magic'
+    weapons: 'Wands, Staffs - Long Range, Magic'
+    class: 'Wizard'
+    description: '???'
     status: 'Locked'
-    health: '???'
+    attack: 3
-    speed: '???'
+    attackFactor: 1.2
+    health: 4.5
+    healthFactor: 1.4
+    speed: 2.5
+    speedAbsolute: 7
 
   'robot-walker':
     fullName: '???'
     weapons: '???'
+    class: 'Ranger'
+    description: '???'
     status: 'Locked'
-    health: '???'
+    attack: 6.5
-    speed: '???'
+    attackFactor: 1.6
+    health: 5.5
+    healthFactor: 1.2
+    speed: 6
+    speedAbsolute: 11
+    skills: ['???', '???', '???']
 
   'michael-heasell':
     fullName: '???'
     weapons: '???'
+    class: 'Ranger'
+    description: '???'
     status: 'Locked'
-    health: '???'
+    attack: 4
-    speed: '???'
+    attackFactor: 0.714
+    health: 5
+    healthFactor: 1
+    speed: 10
+    speedAbsolute: 16
+    skills: ['???', '???']
 
   'ian-elliott':
     fullName: '???'
-    weapons: '???'
+    weapons: 'Swords - Short Range, No Magic'
+    class: 'Warrior'
+    description: '???'
     status: 'Locked'
-    health: '???'
+    attack: 9.5
-    speed: '???'
+    attackFactor: 1.8
+    health: 6.5
+    healthFactor: 0.714
+    speed: 3.5
+    speedAbsolute: 8
+    skills: ['trueStrike']