Refactored game ranking buttons into a LadderSubmissionView.

app/locale/en.coffee

@@ -233,8 +233,6 @@
     victory_sign_up: "Sign Up to Save Progress"
     victory_sign_up_poke: "Want to save your code? Create a free account!"
     victory_rate_the_level: "Rate the level: "
-    victory_rank_my_game: "Rank My Game"
-    victory_ranking_game: "Submitting..."
     victory_return_to_ladder: "Return to Ladder"
     victory_play_next_level: "Play Next Level"
     victory_go_home: "Go Home"

app/styles/play/common/ladder_submission.sass

@@ -0,0 +1,3 @@
+.ladder-submission-view
+  h3
+    text-decoration: underline

app/templates/play/common/ladder_submission.jade

@@ -0,0 +1,7 @@
+button.btn.btn-success.rank-button
+  span(data-i18n="ladder.rank_no_code").unavailable.hidden No New Code to Rank
+  span(data-i18n="ladder.rank_my_game").rank.hidden Rank My Game!
+  span(data-i18n="ladder.rank_submitting").submitting.hidden Submitting...
+  span(data-i18n="ladder.rank_submitted").submitted.hidden Submitted for Ranking
+  span(data-i18n="ladder.rank_failed").failed.hidden Failed to Rank
+  span(data-i18n="ladder.rank_being_ranked").ranking.hidden Game Being Ranked

app/templates/play/ladder/my_matches_tab.jade

@@ -1,9 +1,3 @@
-//if matches.length
-//  p#your-score
-//    span Your Current Score:
-//    span  
-//    strong= score
-
 div#columns.row
   for team in teams
     div.matches-column.col-md-6
@@ -23,21 +17,13 @@ div#columns.row
         if team.session
           tr
             th(colspan=4)
-              button.btn.btn-warning.btn-block.rank-button(data-session-id=team.session.id)
-                span(data-i18n="ladder.rank_no_code").unavailable.hidden No New Code to Rank
-                span(data-i18n="ladder.rank_my_game").rank.hidden Rank My Game!
-                span(data-i18n="ladder.rank_submitting").submitting.hidden Submitting...
-                span(data-i18n="ladder.rank_submitted").submitted.hidden Submitted for Ranking
-                span(data-i18n="ladder.rank_failed").failed.hidden Failed to Rank
-                span(data-i18n="ladder.rank_being_ranked").ranking.hidden Game Being Ranked
+              .ladder-submission-view(data-session-id=team.session.id)
 
-        if team.chartData
+        if team.scoreHistory
           tr
             th(colspan=4, style="color: #{team.primaryColor}")
               div(class="score-chart-wrapper", data-team-name=team.name, id="score-chart-#{team.name}")
 
-
-
         tr
           th(data-i18n="general.result") Result
           th(data-i18n="general.opponent") Opponent

app/templates/play/level/modal/multiplayer.jade

@@ -29,7 +29,7 @@ block modal-body-content
     if me.get('anonymous')
       p(data-i18n="play_level.multiplayer_sign_in_leaderboard") Sign in or create an account and get your solution on the leaderboard.
     else if readyToRank
-      button.btn.btn-success.rank-game-button(data-i18n="play_level.victory_rank_my_game") Rank My Game
+      .ladder-submission-view
     else
       a.btn.btn-primary(href="/play/ladder/#{levelSlug}#my-matches", data-i18n="play_level.victory_go_ladder") Return to Ladder
 

app/templates/play/level/modal/victory.jade

@@ -12,7 +12,7 @@ block modal-body-content
   
 block modal-footer-content
   if readyToRank
-    button.btn.btn-success.rank-game-button(data-i18n="play_level.victory_rank_my_game") Rank My Game
+    .ladder-submission-view
   else if level.get('type') === 'ladder'
     a.btn.btn-primary(href="/play/ladder/#{level.get('slug')}#my-matches", data-dismiss="modal", data-i18n="play_level.victory_go_ladder") Return to Ladder
   else if hasNextLevel

app/views/play/common/ladder_submission_view.coffee

@@ -0,0 +1,88 @@
+CocoView = require 'views/kinds/CocoView'
+template = require 'templates/play/common/ladder_submission'
+
+module.exports = class LadderSubmissionView extends CocoView
+  class: "ladder-submission-view"
+  template: template
+
+  events:
+    'click .rank-button': 'rankSession'
+
+  constructor: (options) ->
+    super options
+    @session = options.session
+    @level = options.level
+
+  getRenderData: ->
+    ctx = super()
+    ctx.readyToRank = @session?.readyToRank()
+    ctx.isRanking = @ession?.get('isRanking')
+    ctx
+      
+  afterRender: ->
+    super()
+    return unless @supermodel.finished()
+    @rankButton = @$el.find('.rank-button')
+    @updateButton()
+
+  updateButton: ->
+    rankingState = 'unavailable'
+    if @session?.readyToRank()
+      rankingState = 'rank'
+    else if @session?.get 'isRanking'
+      rankingState = 'ranking'
+    @setRankingButtonText rankingState
+
+  setRankingButtonText: (spanClass) ->
+    @rankButton.find('span').addClass('hidden')
+    @rankButton.find(".#{spanClass}").removeClass('hidden')
+    @rankButton.toggleClass 'disabled', spanClass isnt 'rank'
+
+  rankSession: (e) ->
+    return unless @session.readyToRank()
+    @setRankingButtonText 'submitting'
+    success = =>
+      @setRankingButtonText 'submitted' unless @destroyed
+      Backbone.Mediator.publish 'ladder:game-submitted', session: @session, level: @level
+    failure = (jqxhr, textStatus, errorThrown) =>
+      console.log jqxhr.responseText
+      @setRankingButtonText 'failed' unless @destroyed
+    transpiledCode = @transpileSession()
+
+    ajaxData =
+      session: @session.id
+      levelID: @level.id
+      originalLevelID: @level.get('original')
+      levelMajorVersion: @level.get('version').major
+      transpiledCode: transpiledCode
+
+    $.ajax '/queue/scoring', {
+      type: 'POST'
+      data: ajaxData
+      success: success
+      error: failure
+    }
+
+  transpileSession: ->
+    submittedCode = @session.get('code')
+    transpiledCode = {}
+    for thang, spells of submittedCode
+      transpiledCode[thang] = {}
+      for spellID, spell of spells
+        unless _.contains(@session.get('teamSpells')[@session.get('team')], thang + "/" + spellID) then continue
+        #DRY this
+        aetherOptions =
+          problems: {}
+          language: "javascript"
+          functionName: spellID
+          functionParameters: []
+          yieldConditionally: spellID is "plan"
+          globals: ['Vector', '_']
+          protectAPI: true
+          includeFlow: false
+        if spellID is "hear" then aetherOptions["functionParameters"] = ["speaker","message","data"]
+
+        aether = new Aether aetherOptions
+        transpiledCode[thang][spellID] = aether.transpile spell
+    transpiledCode
+

app/views/play/ladder/my_matches_tab.coffee

@@ -2,6 +2,7 @@ CocoView = require 'views/kinds/CocoView'
 Level = require 'models/Level'
 LevelSession = require 'models/LevelSession'
 LeaderboardCollection  = require 'collections/LeaderboardCollection'
+LadderSubmissionView = require 'views/play/common/ladder_submission_view'
 {teamDataFromLevel} = require './utils'
 
 module.exports = class MyMatchesTabView extends CocoView
@@ -9,9 +10,6 @@ module.exports = class MyMatchesTabView extends CocoView
   template: require 'templates/play/ladder/my_matches_tab'
   startsLoading: true
 
-  events:
-    'click .rank-button': 'rankSession'
-
   constructor: (options, @level, @sessions) ->
     super(options)
     @nameMap = {}
@@ -49,8 +47,6 @@ module.exports = class MyMatchesTabView extends CocoView
     @startsLoading = false
     @render()
 
-
-
   getRenderData: ->
     ctx = super()
     ctx.level = @level
@@ -84,36 +80,18 @@ module.exports = class MyMatchesTabView extends CocoView
       scoreHistory = team.session?.get('scoreHistory')
       if scoreHistory?.length > 1
         team.scoreHistory = scoreHistory
-        scoreHistory = _.last scoreHistory, 100  # Chart URL needs to be under 2048 characters for GET
-
-        team.currentScore = Math.round scoreHistory[scoreHistory.length - 1][1] * 100
-        team.chartColor = team.primaryColor.replace '#', ''
-        #times = (s[0] for s in scoreHistory)
-        #times = ((100 * (t - times[0]) / (times[times.length - 1] - times[0])).toFixed(1) for t in times)
-        # Let's try being independent of time.
-        times = (i for s, i in scoreHistory)
-        scores = (s[1] for s in scoreHistory)
-        lowest = _.min scores  #.concat([0])
-        highest = _.max scores  #.concat(50)
-        scores = (Math.round(100 * (s - lowest) / (highest - lowest)) for s in scores)
-        team.chartData = times.join(',') + '|' + scores.join(',')
-        team.minScore = Math.round(100 * lowest)
-        team.maxScore = Math.round(100 * highest)
 
     ctx
 
   afterRender: ->
     super()
-    @$el.find('.rank-button').each (i, el) =>
-      button = $(el)
-      sessionID = button.data('session-id')
+    @$el.find('.ladder-submission-view').each (i, el) =>
+      placeholder = $(el)
+      sessionID = placeholder.data('session-id')
       session = _.find @sessions.models, {id: sessionID}
-      rankingState = 'unavailable'
-      if session.readyToRank()
-        rankingState = 'rank'
-      else if session.get 'isRanking'
-        rankingState = 'ranking'
-      @setRankingButtonText button, rankingState
+      ladderSubmissionView = new LadderSubmissionView session: session, level: @level
+      @insertSubView ladderSubmissionView, placeholder
+      ladderSubmissionView.$el.find('.rank-button').addClass 'btn-block'
 
     @$el.find('.score-chart-wrapper').each (i, el) =>
       scoreWrapper = $(el)
@@ -170,59 +148,3 @@ module.exports = class MyMatchesTabView extends CocoView
       .datum(data)
       .attr("class",lineClass)
       .attr("d",line)
-
-  rankSession: (e) ->
-    button = $(e.target).closest('.rank-button')
-    sessionID = button.data('session-id')
-    session = _.find @sessions.models, {id: sessionID}
-    return unless session.readyToRank()
-
-    @setRankingButtonText(button, 'submitting')
-    success = =>
-      @setRankingButtonText(button, 'submitted') unless @destroyed
-    failure = (jqxhr, textStatus, errorThrown) =>
-      console.log jqxhr.responseText
-      @setRankingButtonText(button, 'failed') unless @destroyed
-    transpiledCode = @transpileSession session
-
-    ajaxData =
-      session: sessionID
-      levelID: @level.id
-      originalLevelID: @level.attributes.original
-      levelMajorVersion: @level.attributes.version.major
-      transpiledCode: transpiledCode
-
-    $.ajax '/queue/scoring', {
-      type: 'POST'
-      data: ajaxData
-      success: success
-      error: failure
-    }
-
-  transpileSession: (session) ->
-    submittedCode = session.get('code')
-    transpiledCode = {}
-    for thang, spells of submittedCode
-      transpiledCode[thang] = {}
-      for spellID, spell of spells
-        unless _.contains(session.get('teamSpells')[session.get('team')], thang + "/" + spellID) then continue
-        #DRY this
-        aetherOptions =
-          problems: {}
-          language: "javascript"
-          functionName: spellID
-          functionParameters: []
-          yieldConditionally: spellID is "plan"
-          globals: ['Vector', '_']
-          protectAPI: true
-          includeFlow: false
-        if spellID is "hear" then aetherOptions["functionParameters"] = ["speaker","message","data"]
-
-        aether = new Aether aetherOptions
-        transpiledCode[thang][spellID] = aether.transpile spell
-    transpiledCode
-
-  setRankingButtonText: (rankButton, spanClass) ->
-    rankButton.find('span').addClass('hidden')
-    rankButton.find(".#{spanClass}").removeClass('hidden')
-    rankButton.toggleClass 'disabled', spanClass isnt 'rank'

app/views/play/level/modal/multiplayer_modal.coffee

@@ -1,15 +1,18 @@
 View = require 'views/kinds/ModalView'
 template = require 'templates/play/level/modal/multiplayer'
-{me} = require('lib/auth')
+{me} = require 'lib/auth'
+LadderSubmissionView = require 'views/play/common/ladder_submission_view'
 
 module.exports = class MultiplayerModal extends View
   id: 'level-multiplayer-modal'
   template: template
 
+  subscriptions:
+    'ladder:game-submitted': 'onGameSubmitted'
+
   events:
     'click textarea': 'onClickLink'
     'change #multiplayer': 'updateLinkSection'
-    'click .rank-game-button': 'onRankGame'
 
   constructor: (options) ->
     super(options)
@@ -36,10 +39,16 @@ module.exports = class MultiplayerModal extends View
   afterRender: ->
     super()
     @updateLinkSection()
+    @ladderSubmissionView = new LadderSubmissionView session: @session, level: @level
+    @insertSubView @ladderSubmissionView, @$el.find('.ladder-submission-view')
 
   onClickLink: (e) ->
     e.target.select()
 
+  onGameSubmitted: (e) ->
+    ladderURL = "/play/ladder/#{@level.get('slug')}#my-matches"
+    Backbone.Mediator.publish 'router:navigate', route: ladderURL
+
   updateLinkSection: ->
     multiplayer = @$el.find('#multiplayer').prop('checked')
     la = @$el.find('#link-area')
@@ -50,48 +59,5 @@ module.exports = class MultiplayerModal extends View
     multiplayer = Boolean(@$el.find('#multiplayer').prop('checked'))
     @session.set('multiplayer', multiplayer)
 
-  onRankGame: (e) ->
-    button = @$el.find('.rank-game-button')
-    button.text($.i18n.t('play_level.victory_ranking_game', defaultValue: 'Submitting...'))
-    button.prop 'disabled', true
-    ajaxData = 
-      session: @session.id
-      levelID: @level.id
-      originalLevelID: @level.get('original')
-      levelMajorVersion: @level.get('version').major
-      transpiledCode: @transpileSession(@session)
-    ladderURL = "/play/ladder/#{@level.get('slug')}#my-matches"
-    goToLadder = -> Backbone.Mediator.publish 'router:navigate', route: ladderURL
-    $.ajax '/queue/scoring',
-      type: 'POST'
-      data: ajaxData
-      success: goToLadder
-      failure: (response) ->
-        console.error "Couldn't submit game for ranking:", response
-        goToLadder()
-  
-  transpileSession: (session) ->
-    submittedCode = session.get('code')
-    transpiledCode = {}
-    for thang, spells of submittedCode
-      transpiledCode[thang] = {}
-      for spellID, spell of spells
-        unless _.contains(session.get('teamSpells')[session.get('team')], thang + "/" + spellID) then continue
-        #DRY this
-        aetherOptions =
-          problems: {}
-          language: "javascript"
-          functionName: spellID
-          functionParameters: []
-          yieldConditionally: spellID is "plan"
-          globals: ['Vector', '_']
-          protectAPI: true
-          includeFlow: false
-        if spellID is "hear" then aetherOptions["functionParameters"] = ["speaker","message","data"]
-
-        aether = new Aether aetherOptions
-        transpiledCode[thang][spellID] = aether.transpile spell
-    transpiledCode
-    
   destroy: ->
     super()

app/views/play/level/modal/victory_modal.coffee

@@ -1,6 +1,7 @@
 View = require 'views/kinds/ModalView'
 template = require 'templates/play/level/modal/victory'
 {me} = require 'lib/auth'
+LadderSubmissionView = require 'views/play/common/ladder_submission_view'
 LevelFeedback = require 'models/LevelFeedback'
 utils = require 'lib/utils'
 
@@ -8,9 +9,11 @@ module.exports = class VictoryModal extends View
   id: 'level-victory-modal'
   template: template
 
+  subscriptions:
+    'ladder:game-submitted': 'onGameSubmitted'
+
   events:
     'click .next-level-button': 'onPlayNextLevel'
-    'click .rank-game-button': 'onRankGame'
 
     # review events
     'mouseover .rating i': (e) -> @showStars(@starNum($(e.target)))
@@ -58,48 +61,9 @@ module.exports = class VictoryModal extends View
     @saveReview() if @$el.find('.review textarea').val()
     Backbone.Mediator.publish('play-next-level')
 
-  onRankGame: (e) ->
-    button = @$el.find('.rank-game-button')
-    button.text($.i18n.t('play_level.victory_ranking_game', defaultValue: 'Submitting...'))
-    button.prop 'disabled', true
-    ajaxData = 
-      session: @session.id
-      levelID: @level.id
-      originalLevelID: @level.get('original')
-      levelMajorVersion: @level.get('version').major
-      transpiledCode: @transpileSession @session
+  onGameSubmitted: (e) ->
     ladderURL = "/play/ladder/#{@level.get('slug')}#my-matches"
-    goToLadder = -> Backbone.Mediator.publish 'router:navigate', route: ladderURL
-    $.ajax '/queue/scoring',
-      type: 'POST'
-      data: ajaxData
-      success: goToLadder
-      failure: (response) ->
-        console.error "Couldn't submit game for ranking:", response
-        goToLadder()
-        
-  transpileSession: (session) ->
-    submittedCode = session.get('code')
-    transpiledCode = {}
-    for thang, spells of submittedCode
-      transpiledCode[thang] = {}
-      for spellID, spell of spells
-        #DRY this
-        unless _.contains(session.get('teamSpells')[session.get('team')], thang + "/" + spellID) then continue
-        aetherOptions =
-          problems: {}
-          language: "javascript"
-          functionName: spellID
-          functionParameters: []
-          yieldConditionally: spellID is "plan"
-          globals: ['Vector', '_']
-          protectAPI: true
-          includeFlow: false
-        if spellID is "hear" then aetherOptions["functionParameters"] = ["speaker","message","data"]
-
-        aether = new Aether aetherOptions
-        transpiledCode[thang][spellID] = aether.transpile spell
-    transpiledCode
+    Backbone.Mediator.publish 'router:navigate', route: ladderURL
 
   getRenderData: ->
     c = super()
@@ -126,6 +90,8 @@ module.exports = class VictoryModal extends View
 
   afterRender: ->
     super()
+    @ladderSubmissionView = new LadderSubmissionView session: @session, level: @level
+    @insertSubView @ladderSubmissionView, @$el.find('.ladder-submission-view')
 
   afterInsert: ->
     super()