From e48fa5f0b781ac722a2f214f9cac792c0f8f45b3 Mon Sep 17 00:00:00 2001
From: Nick Winter <livelily@gmail.com>
Date: Wed, 24 Sep 2014 19:14:22 -0700
Subject: [PATCH] Fixed bug with slow-mo heroes in ChooseHeroView. Added lock
 silhouette portraits.

---
 app/styles/game-menu/choose-hero-view.sass    | 16 ++++++++++++++--
 app/styles/mixins.sass                        |  5 +++++
 app/templates/game-menu/choose-hero-view.jade |  3 +++
 app/views/game-menu/ChooseHeroView.coffee     |  3 ++-
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/app/styles/game-menu/choose-hero-view.sass b/app/styles/game-menu/choose-hero-view.sass
index e6d6e4435..020a56fa7 100644
--- a/app/styles/game-menu/choose-hero-view.sass
+++ b/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
 
diff --git a/app/styles/mixins.sass b/app/styles/mixins.sass
index 160178cef..70fc52b54 100644
--- a/app/styles/mixins.sass
+++ b/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
diff --git a/app/templates/game-menu/choose-hero-view.jade b/app/templates/game-menu/choose-hero-view.jade
index 0356e4611..1e5fe4f4e 100644
--- a/app/templates/game-menu/choose-hero-view.jade
+++ b/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
diff --git a/app/views/game-menu/ChooseHeroView.coffee b/app/views/game-menu/ChooseHeroView.coffee
index 7f3c32fcd..11fdc8e4d 100644
--- a/app/views/game-menu/ChooseHeroView.coffee
+++ b/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.