diff --git a/app/assets/images/pages/play/play-spritesheet.png b/app/assets/images/pages/play/play-spritesheet.png new file mode 100644 index 000000000..f38e523e7 Binary files /dev/null and b/app/assets/images/pages/play/play-spritesheet.png differ diff --git a/app/styles/common/common.sass b/app/styles/common/common.sass index fae7f7afe..ef1dda935 100644 --- a/app/styles/common/common.sass +++ b/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 diff --git a/app/styles/play/world-map-view.sass b/app/styles/play/world-map-view.sass index 6af3a0684..09571c024 100644 --- a/app/styles/play/world-map-view.sass +++ b/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 diff --git a/app/templates/play/world-map-view.jade b/app/templates/play/world-map-view.jade index 6db3d5818..142631816 100644 --- a/app/templates/play/world-map-view.jade +++ b/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 diff --git a/app/views/play/WorldMapView.coffee b/app/views/play/WorldMapView.coffee index d0d72526e..024064e1e 100644 --- a/app/views/play/WorldMapView.coffee +++ b/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 = [ {