Upgraded level info popover; made it a click instead of a hover; added view scores button to it when level has been completed.

app/locale/en.coffee

@@ -344,6 +344,7 @@
   leaderboard:
     leaderboard: "Leaderboard"
     view_other_solutions: "View Other Solutions"
+    scores: "Scores"
     top_solutions: "Top Solutions"
     day: "Today"
     week: "This Week"

app/styles/play/campaign-view.sass

@@ -201,37 +201,61 @@ $gameControlMargin: 30px
       display: none
       position: absolute
       z-index: 3
-      padding: 10px
-      border-width: 16px 12px
-      // Using modernizr-mixin for compat detection
-      @include yep(borderimage)
-        border-style: solid
-        border-image: url(/images/level/popover_border_background.png) 16 12 fill round
-      @include nope(borderimage)
-        background-color: rgb(247, 242, 218)
+      width: 362px
+      //min-height: 179px
+      padding: 17px 20px 20px 20px
+      border: 0
+      background: transparent url(/images/pages/play/level-info-background.png) no-repeat center center
+      background-size: 100% 100%
 
-      .level-info.complete h3:after
-        content: " - Complete!"
-        color: green
-    
-      .level-info.started h3:after
-        content: " - Started"
-        color: desaturate(green, 50%)
-    
       .level-info
+
         h3
-          margin-top: 0
-          margin-bottom: 0px
+          color: rgb(232, 217, 87)
+          text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0
+          padding: 0 2px
+          margin: 0 0 10px 31px
+          white-space: nowrap
+          overflow: hidden
+          text-overflow: ellipsis
 
         .level-description
           color: black
-          text-shadow: 0 1px 0 white
 
-      .start-level
-        display: block
-        margin: 10px auto 0 auto
-        width: 200px
-      
+        .level-status
+          background: transparent url(/images/pages/play/level-info-status-spritesheet.png) no-repeat 0 0
+          width: 60px
+          height: 60px
+          position: absolute
+          left: -15px
+          top: -15px
+
+        &.complete .level-status
+          background-position: -60px 0
+
+        &.premium .level-status
+          background-position: -120px 0
+
+        &.complete.premium .level-status
+          background-position: -180px 0
+
+        .start-level
+          min-width: 200px
+          display: block
+          margin: 10px auto 0 auto
+  
+        &.complete
+          .start-level, .view-solutions
+            min-width: initial
+            display: inline-block
+            width: calc(50% - 5px)
+
+          .start-level
+            margin: 10px 0 0 5px
+
+          .view-solutions
+            margin: 10px 5px 0 0
+
     .campaign-switch
       color: purple
       position: absolute
@@ -440,16 +464,7 @@ $gameControlMargin: 30px
     z-index: 2
 
 
-body:not(.ipad) #campaign-view
-  .level-info-container
-    pointer-events: none
-
-  
-
 body.ipad #campaign-view
   // iPad only supports up to Kithgard Gates for now.
   .campaign-switch
     display: none
-
-  .old-levels
-    display: none

app/templates/play/campaign-view.jade

@@ -19,7 +19,9 @@
           img.banner(src="/images/pages/play/level-banner-started.png")
       div(style="left: #{level.position.x}%; bottom: #{level.position.y}%", class="level-shadow" + (level.next ? " next" : "") + " " + (levelStatusMap[level.slug] || ""))
       .level-info-container(data-level-slug=level.slug, data-level-path=level.levelPath || 'level', data-level-name=level.name)
-        div(class="level-info " + (levelStatusMap[level.slug] || ""))
+        - var playCount = levelPlayCountMap[level.slug]
+        div(class="level-info " + (levelStatusMap[level.slug] || "") + (level.requiresSubscription ? " premium" : ""))
+          .level-status
           h3= i18n(level, 'name') + (level.disabled ? " (Coming soon!)" : (level.locked ? " (Locked)" : ""))
           - var description = i18n(level, 'description') || level.description || ""
           .level-description!= marked(description)
@@ -30,16 +32,17 @@
                 strong(data-i18n="play.awaiting_levels_adventurer") Sign up as an Adventurer
               span.spl(data-i18n="play.awaiting_levels_adventurer_suffix") to be the first to play new levels.
               
-          - var playCount = levelPlayCountMap[level.slug]
-          if playCount && playCount.sessions > 20
-            div
-              span.spr #{playCount.sessions}
-              span(data-i18n="play.players") players
-              span.spr , #{Math.round(playCount.playtime / 3600)}
-              span(data-i18n="play.hours_played") hours played
-
-        if isIPadApp && !level.disabled && !level.locked
-          button.btn.btn-success.btn-lg.start-level(data-i18n="common.play") Play
+          if !level.disabled && !level.locked
+            if playCount && playCount.sessions
+              .play-counts.hidden
+                span.spl.spr= playCount.sessions
+                span(data-i18n="play.players") players
+                span.spr , #{Math.round(playCount.playtime / 3600)}
+                span(data-i18n="play.hours_played") hours played
+            if levelStatusMap[level.slug] === 'complete'
+              button.btn.btn-warning.btn.btn-lg.btn-illustrated.view-solutions(data-level-slug=level.slug)
+                span(data-i18n="leaderboard.scores")
+            button.btn.btn-success.btn.btn-lg.btn-illustrated.start-level(data-i18n="common.play") Play
     else if level.unlocksHero && !level.purchasedHero
       img.hero-portrait(src="/file/db/thang.type/#{level.unlocksHero}/portrait.png", style="left: #{level.position.x}%; bottom: #{level.position.y}%;")
   

app/views/play/CampaignView.coffee

@@ -39,9 +39,7 @@ module.exports = class CampaignView extends RootView
     'click .level a': 'onClickLevel'
     'dblclick .level a': 'onDoubleClickLevel'
     'click .level-info-container .start-level': 'onClickStartLevel'
-    'mouseenter .level a': 'onMouseEnterLevel'
-    'mouseleave .level a': 'onMouseLeaveLevel'
-    'mousemove .map': 'onMouseMoveMap'
+    'click .level-info-container .view-solutions': 'onClickViewSolutions'
     'click #volume-button': 'onToggleVolume'
 
   constructor: (options, @terrain='dungeon') ->
@@ -105,6 +103,7 @@ module.exports = class CampaignView extends RootView
 
   getLevelPlayCounts: ->
     return unless me.isAdmin()
+    return  # TODO: get rid of all this? It's redundant with new campaign editor analytics, unless we want to show player counts on leaderboards buttons.
     success = (levelPlayCounts) =>
       return if @destroyed
       for level in levelPlayCounts
@@ -302,23 +301,9 @@ module.exports = class CampaignView extends RootView
     levelOriginal = levelElement.data('level-original')
     if @editorMode
       return @trigger 'level-clicked', levelOriginal
-    level = _.find _.values(@campaign.get('levels')), slug: levelSlug
-    if application.isIPadApp
-      @$levelInfo = @$el.find(".level-info-container[data-level-slug=#{levelSlug}]").show()
-      @adjustLevelInfoPosition e
-      @endHighlight()
-    else
-      if level.requiresSubscription and @requiresSubscription and not @levelStatusMap[level.slug] and not level.adventurer
-        @openModalView new SubscribeModal()
-        window.tracker?.trackEvent 'Show subscription modal', category: 'Subscription', label: 'map level clicked', level: levelSlug
-      else if $(e.target).attr('disabled') and not me.isAdmin()
-        Backbone.Mediator.publish 'router:navigate', route: '/contribute/adventurer'
-        return
-      else if $(e.target).parent().hasClass 'locked'
-        return
-      else
-        @startLevel levelElement
-        window.tracker?.trackEvent 'Clicked Level', category: 'World Map', levelID: levelSlug, ['Google Analytics']
+    @$levelInfo = @$el.find(".level-info-container[data-level-slug=#{levelSlug}]").show()
+    @adjustLevelInfoPosition e
+    @endHighlight()
 
   onDoubleClickLevel: (e) ->
     return unless @editorMode
@@ -328,8 +313,16 @@ module.exports = class CampaignView extends RootView
 
   onClickStartLevel: (e) ->
     levelElement = $(e.target).parents('.level-info-container')
-    @startLevel levelElement
-    window.tracker?.trackEvent 'Clicked Start Level', category: 'World Map', levelID: levelElement.data('level-slug'), ['Google Analytics']
+    levelSlug = levelElement.data('level-slug')
+    levelOriginal = levelElement.data('level-original')
+    level = _.find _.values(@campaign.get('levels')), slug: levelSlug
+
+    if level.requiresSubscription and @requiresSubscription and not @levelStatusMap[level.slug] and not level.adventurer
+      @openModalView new SubscribeModal()
+      window.tracker?.trackEvent 'Show subscription modal', category: 'Subscription', label: 'map level clicked', level: levelSlug
+    else
+      @startLevel levelElement
+      window.tracker?.trackEvent 'Clicked Start Level', category: 'World Map', levelID: levelSlug, ['Google Analytics']
 
   startLevel: (levelElement) ->
     @setupManager?.destroy()
@@ -337,23 +330,10 @@ module.exports = class CampaignView extends RootView
     @setupManager.open()
     @$levelInfo?.hide()
 
-  onMouseEnterLevel: (e) ->
-    return if application.isIPadApp
-    return if @editorMode
-    levelSlug = $(e.target).parents('.level').data('level-slug')
-    @$levelInfo = @$el.find(".level-info-container[data-level-slug=#{levelSlug}]").show()
-    @adjustLevelInfoPosition e
-    @endHighlight()
-
-  onMouseLeaveLevel: (e) ->
-    return if application.isIPadApp
-    levelSlug = $(e.target).parents('.level').data('level-slug')
-    @$el.find(".level-info-container[data-level-slug='#{levelSlug}']").hide()
-    @$levelInfo = null
-
-  onMouseMoveMap: (e) ->
-    return if application.isIPadApp
-    @adjustLevelInfoPosition e
+  onClickViewSolutions: (e) ->
+    levelElement = $(e.target).parents('.level-info-container')
+    levelSlug = levelElement.data('level-slug')
+    @showLeaderboard levelSlug
 
   adjustLevelInfoPosition: (e) ->
     return unless @$levelInfo
@@ -366,7 +346,7 @@ module.exports = class CampaignView extends RootView
     @$levelInfo.css('left', Math.min(Math.max(margin, mapX - width / 2), @$map.width() - width - margin))
     height = @$levelInfo.outerHeight()
     top = mapY - @$levelInfo.outerHeight() - 60
-    if top < 20
+    if top < 100
       top = mapY + 60
     @$levelInfo.css('top', top)