Added team icons to the ladder play view.

app/styles/play/ladder/play_modal.sass

@@ -21,14 +21,45 @@
     opacity: 0.4
     
     border-radius: 5px
+    .only-one
+      -webkit-transition: opacity 0.3s ease-in-out
+      -moz-transition: opacity 0.3s ease-in-out
+      -ms-transition: opacity 0.3s ease-in-out
+      -o-transition: opacity 0.3s ease-in-out
+      transition: opacity 0.3s ease-in-out
+      opacity: 0
     
   .play-option:hover
     opacity: 1
+    .only-one
+      opacity: 1
     
   .my-icon
     position: relative
     left: 0
     top: -10px
+    z-index: 1
+    
+  .my-team-icon
+    height: 60px
+    position: relative
+    top: -10px
+    left: 10px
+    z-index: 0
+    
+  .opponent-team-icon
+    height: 60px
+    position: relative
+    top: 10px
+    right: 10px
+    z-index: 0
+    float: right
+    -moz-transform: scaleX(-1)
+    -o-transform: scaleX(-1)
+    -webkit-transform: scaleX(-1)
+    transform: scaleX(-1)
+    filter: FlipH
+    -ms-filter: "FlipH"
     
   .opponent-icon
     position: relative
@@ -41,6 +72,7 @@
     transform: scaleX(-1)
     filter: FlipH
     -ms-filter: "FlipH"
+    z-index: 1
     
   .name-label
     border-bottom: 20px solid lightslategray
@@ -51,6 +83,7 @@
     color: black
     font-weight: bold
     text-align: center
+    z-index: 2
     
     span
       position: relative

app/templates/play/ladder/play_modal.jade

@@ -12,9 +12,11 @@ block modal-body-content
 
   a(href="/play/level/#{levelID}?team=#{teamID}")
     div.play-option
-      img(src=myPortrait).my-icon
+      img(src=myPortrait).my-icon.only-one
+      img(src="/images/pages/play/ladder/"+teamID+"_ladder_tutorial.png", style="border: 1px solid #{teamColor}; background: #{teamBackgroundColor}").my-team-icon.img-circle.only-one
       img(src=genericPortrait).opponent-icon
-      div.my-name.name-label
+      img(src="/images/pages/play/ladder/"+otherTeamID+"_ladder_tutorial.png", style="border: 1px solid #{opponentTeamColor}; background: #{opponentTeamBackgroundColor}").opponent-team-icon.img-circle
+      div.my-name.name-label.only-one
         span= myName
       div.opponent-name.name-label
         span Simple AI
@@ -25,9 +27,11 @@ block modal-body-content
   if challengers.easy
     a(href="/play/level/#{levelID}?team=#{teamID}&opponent=#{challengers.easy.sessionID}")
       div.play-option.easy-option
-        img(src=myPortrait).my-icon
+        img(src=myPortrait).my-icon.only-one
+        img(src="/images/pages/play/ladder/"+teamID+"_ladder_easy.png", style="border: 1px solid #{teamColor}; background: #{teamBackgroundColor}").my-team-icon.img-circle.only-one
         img(src=challengers.easy.opponentImageSource||genericPortrait).opponent-icon
-        div.my-name.name-label
+        img(src="/images/pages/play/ladder/"+otherTeamID+"_ladder_easy.png", style="border: 1px solid #{opponentTeamColor}; background: #{opponentTeamBackgroundColor}").opponent-team-icon.img-circle
+        div.my-name.name-label.only-one
           span= myName
         div.opponent-name.name-label
           span= challengers.easy.opponentName
@@ -38,9 +42,11 @@ block modal-body-content
   if challengers.medium
     a(href="/play/level/#{levelID}?team=#{teamID}&opponent=#{challengers.medium.sessionID}")
       div.play-option.medium-option
-        img(src=myPortrait).my-icon
+        img(src=myPortrait).my-icon.only-one
+        img(src="/images/pages/play/ladder/"+teamID+"_ladder_medium.png", style="border: 1px solid #{teamColor}; background: #{teamBackgroundColor}").my-team-icon.img-circle.only-one
         img(src=challengers.medium.opponentImageSource||genericPortrait).opponent-icon
-        div.my-name.name-label
+        img(src="/images/pages/play/ladder/"+otherTeamID+"_ladder_medium.png", style="border: 1px solid #{opponentTeamColor}; background: #{opponentTeamBackgroundColor}").opponent-team-icon.img-circle
+        div.my-name.name-label.only-one
           span= myName
         div.opponent-name.name-label
           span= challengers.medium.opponentName
@@ -51,9 +57,11 @@ block modal-body-content
   if challengers.hard
     a(href="/play/level/#{levelID}?team=#{teamID}&opponent=#{challengers.hard.sessionID}")
       div.play-option.hard-option
-        img(src=myPortrait).my-icon
+        img(src=myPortrait).my-icon.only-one
+        img(src="/images/pages/play/ladder/"+teamID+"_ladder_hard.png", style="border: 1px solid #{teamColor}; background: #{teamBackgroundColor}").my-team-icon.img-circle.only-one
         img(src=challengers.hard.opponentImageSource||genericPortrait).opponent-icon
-        div.my-name.name-label
+        img(src="/images/pages/play/ladder/"+otherTeamID+"_ladder_hard.png", style="border: 1px solid #{opponentTeamColor}; background: #{opponentTeamBackgroundColor}").opponent-team-icon.img-circle
+        div.my-name.name-label.only-one
           span= myName
         div.opponent-name.name-label
           span= challengers.hard.opponentName

app/views/play/ladder/play_modal.coffee

@@ -3,6 +3,7 @@ template = require 'templates/play/ladder/play_modal'
 ThangType = require 'models/ThangType'
 {me} = require 'lib/auth'
 LeaderboardCollection = require 'collections/LeaderboardCollection'
+{teamDataFromLevel} = require './utils'
 
 module.exports = class LadderPlayModal extends View
   id: "ladder-play-modal"
@@ -63,6 +64,14 @@ module.exports = class LadderPlayModal extends View
     ctx.teamName = _.string.titleize @team
     ctx.teamID = @team
     ctx.otherTeamID = @otherTeam
+    
+    teamsList = teamDataFromLevel @level
+    teams = {}
+    teams[team.id] = team for team in teamsList
+    ctx.teamColor = teams[@team].primaryColor
+    ctx.teamBackgroundColor = teams[@team].bgColor
+    ctx.opponentTeamColor = teams[@otherTeam].primaryColor
+    ctx.opponentTeamBackgroundColor = teams[@otherTeam].bgColor
 
     ctx.challengers = @challengers or {}
     for challenger in _.values ctx.challengers