From b7fd2a89ee1a8afd94132f81e596f08f810c854c Mon Sep 17 00:00:00 2001
From: Matt Lott <mattlott@live.com>
Date: Fri, 3 Apr 2015 16:44:35 -0700
Subject: [PATCH] Add hero icons to clan details page

---
 app/styles/clans/clan-details.sass     | 33 ++++++++++++++++++-
 app/templates/clans/clan-details.jade  |  4 ++-
 app/views/clans/ClanDetailsView.coffee | 44 ++++++++++++++++----------
 3 files changed, 63 insertions(+), 18 deletions(-)

diff --git a/app/styles/clans/clan-details.sass b/app/styles/clans/clan-details.sass
index 3bb2b9f76..5a3015e22 100644
--- a/app/styles/clans/clan-details.sass
+++ b/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
diff --git a/app/templates/clans/clan-details.jade b/app/templates/clans/clan-details.jade
index 2e4f62e29..e9f6686ab 100644
--- a/app/templates/clans/clan-details.jade
+++ b/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
diff --git a/app/views/clans/ClanDetailsView.coffee b/app/views/clans/ClanDetailsView.coffee
index 02fef00a9..533cc8942 100644
--- a/app/views/clans/ClanDetailsView.coffee
+++ b/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')