diff --git a/app/styles/play/ladder/ladder-tab-view.sass b/app/styles/play/ladder/ladder-tab-view.sass index 2529f6280..264e56be7 100644 --- a/app/styles/play/ladder/ladder-tab-view.sass +++ b/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 + diff --git a/app/styles/play/spectate.sass b/app/styles/play/spectate.sass index ce7458c80..74b94a609 100644 --- a/app/styles/play/spectate.sass +++ b/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 diff --git a/app/templates/play/ladder/ladder-tab-view.jade b/app/templates/play/ladder/ladder-tab-view.jade index fbfd06c44..0c90c3794 100644 --- a/app/templates/play/ladder/ladder-tab-view.jade +++ b/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 diff --git a/app/views/ladder/LadderTabView.coffee b/app/views/ladder/LadderTabView.coffee index 09389fa9c..eda4ad279 100644 --- a/app/views/ladder/LadderTabView.coffee +++ b/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 diff --git a/app/views/ladder/LadderView.coffee b/app/views/ladder/LadderView.coffee index bc2873624..2984e2462 100644 --- a/app/views/ladder/LadderView.coffee +++ b/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]