Fixed bug with slow-mo heroes in ChooseHeroView. Added lock silhouette portraits.

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

@@ -31,10 +31,14 @@ $heroCanvasHeight: 330px
           width: $maxHeroPortraitSize
           height: $maxHeroPortraitSize
           margin: 0px 3px
-          background-size: contain
           border: 2px solid black
           border-radius: 2px
           position: relative
+
+          .hero-avatar
+            width: 100%
+            height: 100%
+            background-size: contain
   
           &.initialized
             @include transition(0.5s ease)
@@ -43,7 +47,15 @@ $heroCanvasHeight: 330px
             border-color: gold
 
           &.locked
-            @include opacity(0.6)
+            .hero-avatar
+              @include filter(contrast(0%) brightness(50%))
+
+            .lock-indicator
+              position: absolute
+              width: 50%
+              left: 25%
+              top: 25%
+              @include filter(invert(100%))
             
     .hero-item
 

app/styles/mixins.sass

@@ -52,3 +52,8 @@
   @keyframes #{$name}
     @content
 
+@mixin filter($filters)
+  -webkit-filter: $filters
+  -moz-filter: $filters
+  -o-filter: $filters
+  filter: $filters

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

@@ -4,6 +4,9 @@
       for hero, index in heroes
         - var info = heroInfo[hero.get('slug')]
         li(data-hero-id=hero.get('original'), title=hero.get('name'), data-slide-to=index, data-target="#hero-carousel", class="hero-indicator" + (info.status == "Locked" ? " locked" : ""))
+          .hero-avatar
+          if info.status == "Locked"
+            img.lock-indicator(src="/images/pages/game-menu/lock.png")
 
   .carousel-inner
     for hero in heroes

app/views/game-menu/ChooseHeroView.coffee

@@ -56,7 +56,7 @@ module.exports = class ChooseHeroView extends CocoView
     @$el.find('.hero-indicator').each ->
       heroID = $(@).data('hero-id')
       hero = _.find heroes, (hero) -> hero.get('original') is heroID
-      $(@).css('background-image', "url(#{hero.getPortraitURL()})").tooltip()
+      $(@).find('.hero-avatar').css('background-image', "url(#{hero.getPortraitURL()})").tooltip()
       _.defer => $(@).addClass 'initialized'
     @canvasWidth = 313  # @$el.find('canvas').width() # unreliable, whatever
     @canvasHeight = @$el.find('canvas').height()
@@ -99,6 +99,7 @@ module.exports = class ChooseHeroView extends CocoView
 
   loadHero: (hero, heroIndex, preloading=false) ->
     createjs.Ticker.removeEventListener 'tick', stage for stage in _.values @stages
+    createjs.Ticker.setFPS 30  # In case we paused it from being inactive somewhere else
     if stage = @stages[heroIndex]
       unless preloading
         _.defer -> createjs.Ticker.addEventListener 'tick', stage  # Deferred, otherwise it won't start updating for some reason.