Updated code language logos. Added code language blurb i18n tags.

app/locale/en.coffee

@@ -100,6 +100,12 @@
     for_beginners: "For Beginners"
     multiplayer: "Multiplayer"
     for_developers: "For Developers"
+    javascript_blurb: "The language of the web. Great for writing websites, web apps, HTML5 games, and servers."
+    python_blurb: "Simple yet powerful, Python is a great general purpose programming language."
+    coffeescript_blurb: "Nicer JavaScript syntax."
+    clojure_blurb: "A modern Lisp."
+    lua_blurb: "Game scripting language."
+    io_blurb: "Simple but obscure."
 
   play:
     choose_your_level: "Choose Your Level"

app/styles/home.sass

@@ -167,6 +167,10 @@
         h2
           margin: 15px 0 5px
 
+        p
+          overflow: hidden
+          height: 40px
+
     .secondary-code-languages
       margin-left: -10px
 
@@ -201,17 +205,22 @@
           margin: 0
           padding: 0
 
+        p
+          white-space: nowrap
+          text-overflow: ellipsis
+          overflow: hidden
+
       #coffeescript .code-language-logo
-        background: transparent url(/images/pages/home/language_logo_coffeescript.png) no-repeat center
+        background: transparent url(/images/common/code_languages/coffeescript_small.png) no-repeat center
 
       #clojure .code-language-logo
-        background: transparent url(/images/pages/home/language_logo_clojure.png) no-repeat center
+        background: transparent url(/images/common/code_languages/clojure_small.png) no-repeat center
 
       #lua .code-language-logo
-        background: transparent url(/images/pages/home/language_logo_lua.png) no-repeat center
+        background: transparent url(/images/common/code_languages/lua_small.png) no-repeat center
 
       #io .code-language-logo
-        background: transparent url(/images/pages/home/language_logo_io.png) no-repeat center
+        background: transparent url(/images/common/code_languages/io_small.png) no-repeat center
 
   
 #multiplayer-launch-modal

app/styles/play/ladder/ladder_tab.sass

@@ -53,6 +53,5 @@
 
   .code-language-cell
     padding: 0 10px
-    background: transparent url(/images/pages/home/language_logo_javascript.png) no-repeat center center
-    background-size: contain
-    height: 19px
+    background: transparent url(/images/common/code_languages/javascript_icon.png) no-repeat center center
+    height: 16px

app/styles/play/ladder/my_matches_tab.sass

@@ -40,6 +40,5 @@
 
   .code-language-cell
     padding: 0 10px
-    background: transparent url(/images/pages/home/language_logo_javascript.png) no-repeat center center
-    background-size: contain
-    height: 19px
+    background: transparent url(/images/common/code_languages/javascript_icon.png) no-repeat center center
+    height: 16px

app/styles/play/ladder/play_modal.sass

@@ -98,12 +98,12 @@
 
     .code-language
       position: absolute
-      background: transparent url(/images/pages/home/language_logo_javascript.png) no-repeat center center
+      background: transparent url(/images/common/code_languages/javascript_small.png) no-repeat center center
       background-size: contain
-      width: 40px
-      height: 40px
-      right: -5px
-      top: -15px
+      width: 50px
+      height: 50px
+      right: -0px
+      top: -30px
       display: block
 
   .my-name

app/styles/play/level/tome/spell_palette.sass

@@ -70,10 +70,10 @@
 
   .code-language-logo
     position: absolute
-    width: 20px
-    height: 20px
-    left: 12px
-    top: 34px
+    width: 16px
+    height: 16px
+    left: 16px
+    top: 36px
     z-index: 10
     background-color: transparent
     background-repeat: no-repeat
@@ -81,21 +81,27 @@
     cursor: pointer
 
     &.javascript
-      background-image: url(/images/pages/home/language_logo_javascript.png)
+      background-image: url(/images/common/code_languages/javascript_icon.png)
     &.python
-      background-image: url(/images/pages/home/language_logo_python.png)
+      background-image: url(/images/common/code_languages/python_icon.png)
     &.coffeescript
-      background-image: url(/images/pages/home/language_logo_coffeescript.png)
+      background-image: url(/images/common/code_languages/coffeescript_icon.png)
     &.clojure
-      background-image: url(/images/pages/home/language_logo_clojure.png)
+      background-image: url(/images/common/code_languages/clojure_icon.png)
     &.lua
-      background-image: url(/images/pages/home/language_logo_lua.png)
+      background-image: url(/images/common/code_languages/lua_icon.png)
     &.io
-      background-image: url(/images/pages/home/language_logo_io.png)
+      background-image: url(/images/common/code_languages/io_icon.png)
+
+    &:hover
+      outline: 1px outset #ccc
+
+      &:active
+        outline: 1px inset #ccc
 
 html.no-borderimage
   #spell-palette-view
     span.code-palette-background
       display: none
     img.code-palette-background
-      display: block
+      display: block

app/templates/home.jade

@@ -10,14 +10,14 @@ block content
         .code-language#javascript(data-code-language='javascript')
           .code-wizard
           h2 JavaScript
-          p The language of the web. Great for writing websites, web apps, HTML5 games, and servers.
+          p(data-i18n="home.javascript_blurb") The language of the web. Great for writing websites, web apps, HTML5 games, and servers.
 
       .col-md-6
         .code-language.beta#python(data-code-language='python')
           .code-wizard
           .code-language-beta
           h2 Python
-          p Simple yet powerful, Python is a great general purpose programming language.
+          p(data-i18n="home.python_blurb") Simple yet powerful, Python is a great general purpose programming language.
 
     .secondary-code-languages.row
       .col-md-3
@@ -26,7 +26,7 @@ block content
           .code-wizard
           .code-language-beta
           h3 CoffeeScript
-          p Nicer JavaScript syntax
+          p(data-i18n="home.coffeescript_blurb") Nicer JavaScript syntax.
 
       .col-md-3
         .code-language.beta#clojure(data-code-language='clojure')
@@ -34,7 +34,7 @@ block content
           .code-wizard
           .code-language-beta
           h3 Clojure
-          p A modern Lisp
+          p(data-i18n="home.clojure_blurb") A modern Lisp.
 
       .col-md-3
         .code-language.beta#lua(data-code-language='lua')
@@ -42,7 +42,7 @@ block content
           .code-wizard
           .code-language-beta
           h3 Lua
-          p Game scripting language
+          p(data-i18n="home.lua_blurb") Game scripting language.
 
       .col-md-3
         .code-language.beta#io(data-code-language='io', title="Careful: Io is still quite buggy")
@@ -50,7 +50,7 @@ block content
           .code-wizard
           .code-language-beta
           h3 Io
-          p Simple but obscure
+          p(data-i18n="home.io_blurb") Simple but obscure.
 
   .alert.alert-danger.lt-ie10
     strong(data-i18n="home.no_ie") CodeCombat does not run in Internet Explorer 9 or older. Sorry!

app/templates/play/ladder/ladder_tab.jade

@@ -21,7 +21,7 @@ div#columns.row
         for session, rank in topSessions
           - var myRow = session.get('creator') == me.id
           tr(class=myRow ? "success" : "", data-player-id=session.get('creator'), data-session-id=session.id)
-            td.code-language-cell(style="background-image: url(/images/pages/home/language_logo_" + session.get('submittedCodeLanguage') + ".png)")
+            td.code-language-cell(style="background-image: url(/images/common/code_languages/" + session.get('submittedCodeLanguage') + "_icon.png)")
             td.rank-cell= rank + 1
             td.score-cell= Math.round(session.get('totalScore') * 100)
             td.name-col-cell= session.get('creatorName') || "Anonymous"
@@ -35,7 +35,7 @@ div#columns.row
           for session in team.leaderboard.nearbySessions()
             - var myRow = session.get('creator') == me.id
             tr(class=myRow ? "success" : "", data-player-id=session.get('creator'), data-session-id=session.id)
-              td.code-language-cell(style="background-image: url(/images/pages/home/language_logo_" + session.get('submittedCodeLanguage') + ".png)")
+              td.code-language-cell(style="background-image: url(/images/common/code_languages/" + session.get('submittedCodeLanguage') + "_icon.png)")
               td.rank-cell= session.rank
               td.score-cell= Math.round(session.get('totalScore') * 100)
               td.name-col-cell= session.get('creatorName') || "Anonymous"

app/templates/play/ladder/my_matches_tab.jade

@@ -39,7 +39,7 @@ div#columns.row
                 span(data-i18n="general.loss").loss Loss
               if match.state === 'tie'
                 span(data-i18n="general.tie").tie Tie
-            td.code-language-cell(style="background-image: url(/images/pages/home/language_logo_" + match.codeLanguage +  ".png)")
+            td.code-language-cell(style="background-image: url(/images/common/code_languages/" + match.codeLanguage +  "_icon.png)")
             td.name-cell= match.opponentName || "Anonymous"
             td.time-cell= match.when
             td.battle-cell

app/templates/play/ladder/play_modal.jade

@@ -33,7 +33,7 @@ block modal-body-content
           span= myName
         div.opponent-name.name-label
           span(data-i18n="ladder.simple_ai") Simple AI
-          //span.code-language(style="background-image: url(/images/pages/home/language_logo_javascript.png)")
+          //span.code-language(style="background-image: url(/images/common/code_languages/javascript_small.png)")
         div.difficulty
           span(data-i18n="ladder.warmup") Warmup
         div(data-i18n="ladder.vs").vs VS
@@ -50,7 +50,7 @@ block modal-body-content
           div.opponent-name.name-label
             span= challengers.easy.opponentName
             if challengers.easy.codeLanguage
-              span.code-language(style="background-image: url(/images/pages/home/language_logo_" + challengers.easy.codeLanguage + ".png)")
+              span.code-language(style="background-image: url(/images/common/code_languages/" + challengers.easy.codeLanguage + "_small.png)")
           div.difficulty
             span(data-i18n="general.easy") Easy
           div(data-i18n="ladder.vs").vs VS
@@ -67,7 +67,7 @@ block modal-body-content
           div.opponent-name.name-label
             span= challengers.medium.opponentName
             if challengers.medium.codeLanguage
-              span.code-language(style="background-image: url(/images/pages/home/language_logo_" + challengers.medium.codeLanguage + ".png)")
+              span.code-language(style="background-image: url(/images/common/code_languages/" + challengers.medium.codeLanguage + "_small.png)")
           div.difficulty
             span(data-i18n="general.medium") Medium
           div(data-i18n="ladder.vs").vs VS
@@ -84,7 +84,7 @@ block modal-body-content
           div.opponent-name.name-label
             span= challengers.hard.opponentName
             if challengers.hard.codeLanguage
-              span.code-language(style="background-image: url(/images/pages/home/language_logo_" + challengers.hard.codeLanguage + ".png)")
+              span.code-language(style="background-image: url(/images/common/code_languages/" + challengers.hard.codeLanguage + "_small.png)")
           div.difficulty
             span(data-i18n="general.hard") Hard
           div(data-i18n="ladder.vs").vs VS

app/views/home_view.coffee

@@ -52,7 +52,7 @@ module.exports = class HomeView extends View
     @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'])
+    @$el.find('.game-mode-wrapper .code-language-logo').css('background-image', "url(/images/common/code_languages/#{codeLanguage}_small.png)").toggleClass 'inverted', (codeLanguage in ['io', 'coffeescript'])
 
   onCodeLanguageSelected: (e) ->
     target = $(e.target).closest('.code-language')