Improvements to spectate for big screens, allowing spectating of chosen top matches.

app/styles/play/ladder/ladder-tab-view.sass

@@ -55,3 +55,17 @@
     padding: 0 10px
     background: transparent url(/images/common/code_languages/javascript_icon.png) no-repeat center center
     height: 16px
+
+  .spectate-cell
+    cursor: pointer
+
+    &:not(.selected) .glyphicon
+      display: none
+      opacity: 0.75
+
+    &:hover .glyphicon
+      display: inline-block
+
+  .iconic-cell
+    text-align: center
+

app/styles/play/spectate.sass

@@ -25,15 +25,10 @@
       width: 60%
       text-align: center
 
-  max-width: 1920px
   margin: 0 auto
   @include user-select(none)
   
-  #level-loading-view
-    max-height: 1284px
-
   .level-content
-    //max-width: 1920px
     position: relative
     margin: 0px auto
 

app/templates/play/ladder/ladder-tab-view.jade

@@ -1,12 +1,12 @@
 div#columns.row
   for team, teamIndex in teams
     div.column.col-md-4
-      div(id="histogram-display-#{team.name}", class="histogram-display",data-team-name=team.name)
-      table.table.table-bordered.table-condensed.table-hover
+      div(id="histogram-display-#{team.name}", class="histogram-display", data-team-name=team.name)
+      table.table.table-bordered.table-condensed.table-hover(data-team=team.id)
         thead
           tr
             th(colspan=2)
-            th(colspan=3, style="color: #{team.primaryColor}")
+            th(colspan=4, style="color: #{team.primaryColor}")
               span= team.name
               span.spl(data-i18n="ladder.leaderboard") Leaderboard
           tr
@@ -14,6 +14,8 @@ div#columns.row
             th(data-i18n="general.score") Score
             th(data-i18n="general.name").name-col-cell Name
             th
+            th.iconic-cell
+              .glyphicon.glyphicon-eye-open
 
         tbody
           - var topSessions = team.leaderboard.topPlayers.models;
@@ -29,6 +31,8 @@ div#columns.row
               td.fight-cell
                 a(href="/play/level/#{level.get('slug') || level.id}?team=#{team.otherTeam}&opponent=#{session.id}")
                   span(data-i18n="ladder.fight") Fight!
+              td.spectate-cell.iconic-cell
+                .glyphicon.glyphicon-eye-open
 
           if !showJustTop && team.leaderboard.nearbySessions().length
             tr(class="active")
@@ -43,6 +47,8 @@ div#columns.row
                 td.fight-cell
                   a(href="/play/level/#{level.get('slug') || level.id}?team=#{team.otherTeam}&opponent=#{session.id}")
                     span(data-i18n="ladder.fight") Fight!
+                td.spectate-cell.iconic-cell
+                  .glyphicon.glyphicon-eye-open
       if teamIndex == 1
         .btn.btn-sm.load-more-ladder-entries(data-i18n="editor.more") More
 

app/views/ladder/LadderTabView.coffee

@@ -19,6 +19,7 @@ module.exports = class LadderTabView extends CocoView
     'click .connect-facebook': 'onConnectFacebook'
     'click .connect-google-plus': 'onConnectGPlus'
     'click .name-col-cell': 'onClickPlayerName'
+    'click .spectate-cell': 'onClickSpectateCell'
     'click .load-more-ladder-entries': 'onLoadMoreLadderEntries'
 
   subscriptions:
@@ -277,6 +278,19 @@ module.exports = class LadderTabView extends CocoView
     session = new LevelSession _id: row.data 'session-id'
     @openModalView new ModelModal models: [session, player]
 
+  onClickSpectateCell: (e) ->
+    cell = $(e.target).closest '.spectate-cell'
+    row = cell.parent()
+    table = row.closest('table')
+    wasSelected = cell.hasClass 'selected'
+    table.find('.spectate-cell.selected').removeClass 'selected'
+    cell = $(e.target).closest('.spectate-cell').toggleClass 'selected', not wasSelected
+    sessionID = row.data 'session-id'
+    teamID = table.data 'team'
+    @spectateTargets ?= {}
+    @spectateTargets[teamID] = if wasSelected then null else sessionID
+    console.log @spectateTargets, cell, row, table
+
   onLoadMoreLadderEntries: (e) ->
     @ladderLimit ?= 100
     @ladderLimit += 100

app/views/ladder/LadderView.coffee

@@ -33,6 +33,7 @@ module.exports = class LadderView extends RootView
   events:
     'click .play-button': 'onClickPlayButton'
     'click a:not([data-toggle])': 'onClickedLink'
+    'click .spectate-button': 'onClickSpectateButton'
 
   constructor: (options, @levelID) ->
     super(options)
@@ -86,6 +87,16 @@ module.exports = class LadderView extends RootView
   onClickPlayButton: (e) ->
     @showPlayModal($(e.target).closest('.play-button').data('team'))
 
+  onClickSpectateButton: (e) ->
+    humanSession = @ladderTab.spectateTargets?.humans
+    ogreSession = @ladderTab.spectateTargets?.ogres
+    console.log humanSession, ogreSession
+    return unless humanSession and ogreSession
+    e.preventDefault()
+    e.stopImmediatePropagation()
+    url = "/play/spectate/#{@level.get('slug')}?session-one=#{humanSession}&session-two=#{ogreSession}"
+    Backbone.Mediator.publish 'router:navigate', route: url
+
   showPlayModal: (teamID) ->
     return @showApologeticSignupModal() if me.get('anonymous')
     session = (s for s in @sessions.models when s.get('team') is teamID)[0]