From 1e9b403ce5bf6e2a9fb99eb9a6eea3d9c5c6dd30 Mon Sep 17 00:00:00 2001
From: Nick Winter <livelily@gmail.com>
Date: Thu, 19 Jun 2014 14:55:16 -0700
Subject: [PATCH] More zazz for home page code language selection.

---
 .../pages/home/language_logo_javascript.png   | Bin 0 -> 3828 bytes
 app/styles/home.sass                          |  22 ++++++++++++++----
 app/templates/home.jade                       |   2 ++
 app/views/home_view.coffee                    |   9 +++++++
 4 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/images/pages/home/language_logo_javascript.png

diff --git a/app/assets/images/pages/home/language_logo_javascript.png b/app/assets/images/pages/home/language_logo_javascript.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec8b134ae20775085642757fb04bcee548e1e15a
GIT binary patch
literal 3828
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

literal 0
HcmV?d00001

diff --git a/app/styles/home.sass b/app/styles/home.sass
index 2e0d77fdd..c58133fb8 100644
--- a/app/styles/home.sass
+++ b/app/styles/home.sass
@@ -32,6 +32,7 @@
     img
       display: block
       margin: 0 auto
+      @include transition(box-shadow .50s ease-in-out)
 
     text-shadow: 2px 2px 5px black
     
@@ -58,14 +59,27 @@
       color: $yellow
       font-size: 90px
       font-family: Bangers
-      @include transition(color .10s linear)
+      @include transition(color .25s ease-in-out)
           
-    &:hover div
+    &:hover div, &.hovered div
       color: lighten($yellow, 20%)
-    &:hover img
+    &:hover img, &.hovered img
       filter: brightness(1.2)
       -webkit-filter: brightness(1.2)
-      box-shadow: 0 0 5px black
+      box-shadow: 0 0 15px black
+
+    .code-language-logo
+      background-color: transparent
+      background-repeat: no-repeat
+      position: absolute
+      right: 35px
+      top: 15px
+      width: 50px
+      height: 50px
+
+      &.inverted
+        filter: invert(100%)
+        -webkit-filter: invert(100%)
 
   .code-languages
     margin: 10px 0 30px 0
diff --git a/app/templates/home.jade b/app/templates/home.jade
index d854013fc..217a40df2 100644
--- a/app/templates/home.jade
+++ b/app/templates/home.jade
@@ -74,6 +74,7 @@ block content
         h3(data-i18n="home.campaign") Campaign
         h4(data-i18n="home.for_beginners") For Beginners
       .play-text(data-i18n="home.play") Play
+      .code-language-logo
 
   a#multiplayer(href="/play/ladder")
     div.game-mode-wrapper
@@ -84,5 +85,6 @@ block content
         h3(data-i18n="home.multiplayer") Multiplayer
         h4(data-i18n="home.for_developers") For Developers
       .play-text(data-i18n="home.play") Play
+      .code-language-logo
 
   .clearfix
diff --git a/app/views/home_view.coffee b/app/views/home_view.coffee
index a117d9469..7899d7bf4 100644
--- a/app/views/home_view.coffee
+++ b/app/views/home_view.coffee
@@ -49,6 +49,10 @@ module.exports = class HomeView extends View
 
     codeLanguage = (me.get('aceConfig') ? {}).language or 'javascript'
     @$el.find(".code-language[data-code-language=#{codeLanguage}]").addClass 'selected-language'
+    @updateLanguageLogos codeLanguage
+
+  updateLanguageLogos: (codeLanguage) ->
+    @$el.find('.game-mode-wrapper .code-language-logo').css('background-image', "url(/images/pages/home/language_logo_#{codeLanguage}.png)").toggleClass 'inverted', (codeLanguage in ['io', 'coffeescript'])
 
   onCodeLanguageSelected: (e) ->
     target = $(e.target).closest('.code-language')
@@ -60,3 +64,8 @@ module.exports = class HomeView extends View
     aceConfig.language = codeLanguage
     me.set 'aceConfig', aceConfig
     me.save()  # me.patch() doesn't work if aceConfig previously existed and we switched just once
+
+    firstButton = @$el.find('#beginner-campaign .game-mode-wrapper').delay(500).addClass('hovered', 500).delay(500).removeClass('hovered', 500)
+    lastButton = @$el.find('#multiplayer .game-mode-wrapper').delay(1000).addClass('hovered', 500).delay(500).removeClass('hovered', 500)
+    $('#page-container').animate {scrollTop: firstButton.offset().top - 100, easing: 'easeInOutCubic'}, 500
+    @updateLanguageLogos codeLanguage