Add hero icons to clan details page

app/styles/clans/clan-details.sass

@@ -7,5 +7,36 @@
     font-weight: bold
 
   .stats-table
-    width: 200px
+    width: 240px
     background: rgba(0, 0, 0, 0.0)
+
+  $spriteSheetSize: 30px
+
+  .player-hero-icon
+    background: transparent url(/images/pages/play/play-spritesheet.png)
+    background-size: cover
+    background-position: (-2 * $spriteSheetSize) 0
+    display: inline-block
+    width: 30px
+    height: 30px
+    margin: 0px 2px
+
+  .player-hero-icon
+    background-position: (-4 * $spriteSheetSize) 0
+
+    &.knight
+      background-position: (-5 * $spriteSheetSize) 0
+    &.librarian
+      background-position: (-6 * $spriteSheetSize) 0
+    &.ninja
+      background-position: (-7 * $spriteSheetSize) 0
+    &.potion-master
+      background-position: (-8 * $spriteSheetSize) 0
+    &.samurai
+      background-position: (-9 * $spriteSheetSize) 0
+    &.trapper
+      background-position: (-10 * $spriteSheetSize) 0
+    &.forest-archer
+      background-position: (-11 * $spriteSheetSize) 0
+    &.sorcerer
+      background-position: (-12 * $spriteSheetSize) 0

app/templates/clans/clan-details.jade

@@ -16,6 +16,7 @@ block content
         td
           span.spr Chieftain
         td
+          span.spr.player-hero-icon(data-memberid="#{clan.get('ownerID')}")
           a(href="/user/#{clan.get('ownerID')}")= owner.get('name')
     if stats.averageLevel
       tr
@@ -44,7 +45,7 @@ block content
     table.table.table-striped.table-condensed
       thead
         tr
-          th Name
+          th
           th Level
           th Achievements
           th Favorite Language
@@ -53,6 +54,7 @@ block content
         each member in members
           tr
             td
+              span.spr.player-hero-icon(data-memberid="#{member.id}")
               a(href="/user/#{member.id}")= member.get('name') || 'Anoner'
             td= member.level()
             td

app/views/clans/ClanDetailsView.coffee

@@ -6,6 +6,7 @@ CocoCollection = require 'collections/CocoCollection'
 Clan = require 'models/Clan'
 EarnedAchievement = require 'models/EarnedAchievement'
 LevelSession = require 'models/LevelSession'
+ThangType = require 'models/ThangType'
 User = require 'models/User'
 
 # TODO: Message for clan not found
@@ -28,22 +29,6 @@ module.exports = class ClanDetailsView extends RootView
   destroy: ->
     @stopListening?()
 
-  getRenderData: ->
-    context = super()
-    context.clan = @clan
-    if application.isProduction()
-      context.joinClanLink = "https://codecombat.com/clans/#{@clanID}"
-    else
-      context.joinClanLink = "http://localhost:3000/clans/#{@clanID}"
-    context.owner = @owner
-    context.memberAchievementsMap = @memberAchievementsMap
-    context.memberLanguageMap = @memberLanguageMap
-    context.members = @members?.models
-    context.isOwner = @clan.get('ownerID') is me.id
-    context.isMember = @clanID in (me.get('clans') ? [])
-    context.stats = @stats
-    context
-
   initData: ->
     @stats = {}
 
@@ -63,11 +48,38 @@ module.exports = class ClanDetailsView extends RootView
     @supermodel.loadCollection(@memberAchievements, 'member_achievements', {cache: false})
     @supermodel.loadCollection(@memberSessions, 'member_sessions', {cache: false})
 
+  getRenderData: ->
+    context = super()
+    context.clan = @clan
+    if application.isProduction()
+      context.joinClanLink = "https://codecombat.com/clans/#{@clanID}"
+    else
+      context.joinClanLink = "http://localhost:3000/clans/#{@clanID}"
+    context.owner = @owner
+    context.memberAchievementsMap = @memberAchievementsMap
+    context.memberLanguageMap = @memberLanguageMap
+    context.members = @members?.models
+    context.isOwner = @clan.get('ownerID') is me.id
+    context.isMember = @clanID in (me.get('clans') ? [])
+    context.stats = @stats
+    context
+
+  afterRender: ->
+    super()
+    @updateHeroIcons()
+
   refreshData: ->
     me.fetch cache: false
     @members.fetch cache: false
     @memberAchievements.fetch cache: false
 
+  updateHeroIcons: ->
+    return unless @members?.models?
+    for member in @members.models
+      continue unless hero = member.get('heroConfig')?.thangType
+      for slug, original of ThangType.heroes when original is hero
+        @$el.find(".player-hero-icon[data-memberID=#{member.id}]").removeClass('.player-hero-icon').addClass('player-hero-icon ' + slug)
+
   onClanSync: ->
     unless @owner?
       @owner = new User _id: @clan.get('ownerID')