Implemented George's WorldMapView user status line design.

app/styles/common/common.sass

@@ -216,6 +216,10 @@ kbd
     width: 25px
     height: 25px
 
+  &.gem-30
+    width: 30px
+    height: 30px
+
   &.gem-40
     width: 40px
     height: 40px

app/styles/play/world-map-view.sass

@@ -321,15 +321,69 @@ $gameControlMargin: 30px
 
   .user-status
     position: absolute
-    bottom: 1%
-    left: 1%
+    bottom: 16px
+    left: 8px
     text-align: center
     font-size: 24px
     color: white
-    text-shadow: 1px 1px 0px black
+    text-shadow: 0px 2px 1px black, 0px -2px 1px black, -2px 0px 1px black, 2px 0px 1px black
+    height: 32px
+    line-height: 32px
 
-    button
-      margin-left: 10px
+    .user-status-line
+      position: relative
+  
+      button.btn.btn-illustrated
+        margin-left: 10px
+        min-width: 90px
+        height: 32px
+        color: white
+
+      .gem, .player-level-icon, .player-hero-icon
+        position: absolute
+        top: 1px
+
+      #gems-count
+        margin-left: 40px
+
+      .player-level
+        margin-left: 34px
+
+      .player-name
+        margin-left: 45px
+
+      $spriteSheetSize: 30px
+  
+      .player-level-icon, .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
+        margin-left: 10px
+        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
+      
 
   #volume-button
     position: absolute

app/templates/play/world-map-view.jade

@@ -63,16 +63,19 @@
   //  a.btn.settings(href='/account', data-i18n="[title]play.settings")
   
 .user-status.header-font
-  span.gem.gem-20
-  span#gems-count.spr= me.gems()
-  span.spl.spr(data-i18n="general.player_level")
-  span.spr= me.level()
-  if me.get('anonymous')
-    span.spr(data-i18n="play.anonymous") Anonymous Player
-    button.btn.btn-default.btn-flat.btn-sm(data-toggle='coco-modal', data-target='core/AuthModal', data-i18n="login.log_in")
-  else
-    span.spr= me.get('name')
-    button#logout-button.btn.btn-default.btn-flat.btn-sm(data-i18n="login.log_out") Log Out
+  .user-status-line
+    span.gem.gem-30
+    span#gems-count.spr= me.gems()
+    span.player-level-icon
+    span.player-level.spr= me.level()
+    span.player-hero-icon
+    if me.get('anonymous')
+      span.player-name.spr(data-i18n="play.anonymous") Anonymous Player
+      button.btn.btn-illustrated.login-button.btn-warning(data-i18n="login.log_in")
+      button.btn.btn-illustrated.signup-button.btn-danger(data-i18n="signup.sign_up")
+    else
+      span.player-name.spr= me.get('name')
+      button#logout-button.btn.btn-default.btn-flat.btn-sm(data-i18n="login.log_out") Log Out
 
 button.btn.btn-lg.btn-inverse#volume-button(title="Adjust volume")
   .glyphicon.glyphicon-volume-off

app/views/play/WorldMapView.coffee

@@ -74,6 +74,7 @@ module.exports = class WorldMapView extends RootView
     @hadEverChosenHero = me.get('heroConfig')?.thangType
     @listenTo me, 'change:purchased', -> @renderSelectors('#gems-count')
     @listenTo me, 'change:spent', -> @renderSelectors('#gems-count')
+    @listenTo me, 'change:heroConfig', -> @updateHero()
     window.tracker?.trackEvent 'Loaded World Map', category: 'World Map', ['Google Analytics']
 
     # If it's a new player who didn't appear to come from Hour of Code, we register her here without setting the hourOfCode property.
@@ -169,6 +170,7 @@ module.exports = class WorldMapView extends RootView
           console.log "#{$(@).data('level-id')}\n    x: #{(100 * x).toFixed(2)}\n    y: #{(100 * y).toFixed(2)}\n"
     @$el.addClass _.string.slugify @terrain
     @updateVolume()
+    @updateHero()
     unless window.currentModal or not @fullyRendered
       @highlightElement '.level.next', delay: 500, duration: 60000, rotation: 0, sides: ['top']
       if levelID = @$el.find('.level.next').data('level-id')
@@ -347,6 +349,12 @@ module.exports = class WorldMapView extends RootView
         newI = 2
     @updateVolume volumes[newI]
 
+  updateHero: ->
+    return unless hero = me.get('heroConfig')?.thangType
+    for slug, original of ThangType.heroes when original is hero
+      @$el.find('.player-hero-icon').removeClass().addClass('player-hero-icon ' + slug)
+      return
+    console.error "WorldMapView hero update couldn't find hero slug for original:", hero
 
 dungeon = [
   {