Merge pull request #3705 from duybkict/refactor-LadderView

refactor LadderView
This commit is contained in:
Scott Erickson 2016-06-03 10:21:28 -07:00
commit f6f941b13d
2 changed files with 63 additions and 74 deletions

View file

@ -4,10 +4,10 @@ block content
div#ladder-top div#ladder-top
if leagueType == 'course' && view.course.id if view.leagueType === 'course' && view.course
#course-header #course-header
#course-details-link #course-details-link
a(href="/courses/"+view.course.id+"/"+view.league.id) a(href="/courses/{#view.course.id}/{#view.league.id}")
span.glyphicon.glyphicon-arrow-left span.glyphicon.glyphicon-arrow-left
span.spl Levels span.spl Levels
@ -15,22 +15,21 @@ block content
span#course-name span#course-name
span= view.course.get('name') span= view.course.get('name')
span.spl - Arena span.spl - Arena
div#level-column div#level-column
if levelDescription if view.levelDescription
div!= levelDescription div!= view.levelDescription
if leagueType === 'clan' if view.leagueType === 'clan'
h1.league-header h1.league-header
a(href="/clans/#{league.id}")= league.get('name') a(href="/clans/#{view.league.id}")= view.league.get('name')
span.spl(data-i18n="ladder.league") League span.spl(data-i18n="ladder.league") League
if level.get('name') == 'Greed' if view.level.get('name') == 'Greed'
.tournament-blurb .tournament-blurb
h2 h2
span(data-i18n="ladder.tournament_ended") Tournament ended span(data-i18n="ladder.tournament_ended") Tournament ended
| #{tournamentTimeLeft} | #{view.tournamentTimeLeft}
p p
span(data-i18n="ladder.tournament_blurb") Write code, collect gold, build armies, crush foes, win prizes, and upgrade your career in our $40,000 Greed tournament! Check out the details span(data-i18n="ladder.tournament_blurb") Write code, collect gold, build armies, crush foes, win prizes, and upgrade your career in our $40,000 Greed tournament! Check out the details
| |
@ -63,11 +62,11 @@ block content
a(href="http://aws.amazon.com/") a(href="http://aws.amazon.com/")
img(src=base + "aws.png") img(src=base + "aws.png")
if level.get('name') == 'Criss-Cross' if view.level.get('name') == 'Criss-Cross'
.tournament-blurb .tournament-blurb
h2 h2
span(data-i18n="ladder.tournament_ended") Tournament ended span(data-i18n="ladder.tournament_ended") Tournament ended
| #{tournamentTimeLeft} | #{view.tournamentTimeLeft}
p p
span(data-i18n="ladder.tournament_blurb_criss_cross") Win bids, construct paths, outwit opponents, grab gems, and upgrade your career in our Criss-Cross tournament! Check out the details span(data-i18n="ladder.tournament_blurb_criss_cross") Win bids, construct paths, outwit opponents, grab gems, and upgrade your career in our Criss-Cross tournament! Check out the details
| |
@ -86,13 +85,13 @@ block content
a(href="http://discourse.codecombat.com/") the forum a(href="http://discourse.codecombat.com/") the forum
| and discuss your strategies, your triumphs, and your turmoils. | and discuss your strategies, your triumphs, and your turmoils.
if level.get('name') == 'Zero Sum' && !league if view.level.get('name') == 'Zero Sum' && !view.league
.tournament-blurb .tournament-blurb
h2 h2
span(data-i18n="ladder.tournament_ended") Tournament ended span(data-i18n="ladder.tournament_ended") Tournament ended
| #{tournamentTimeLeft} | #{view.tournamentTimeLeft}
//span(data-i18n="ladder.tournament_started") , started //span(data-i18n="ladder.tournament_started") , started
//| #{tournamentTimeElapsed} //| #{view.tournamentTimeElapsed}
p p
span(data-i18n="ladder.tournament_blurb_zero_sum") Unleash your coding creativity in both gold gathering and battle tactics in this alpine mirror match between red sorcerer and blue sorcerer. The tournament began on Friday, March 27 and will run until Monday, April 6 at 5PM PDT. Compete for fun and glory! Check out the details span(data-i18n="ladder.tournament_blurb_zero_sum") Unleash your coding creativity in both gold gathering and battle tactics in this alpine mirror match between red sorcerer and blue sorcerer. The tournament began on Friday, March 27 and will run until Monday, April 6 at 5PM PDT. Compete for fun and glory! Check out the details
| |
@ -109,14 +108,14 @@ block content
a(href="http://discourse.codecombat.com/") the forum a(href="http://discourse.codecombat.com/") the forum
| and discuss your strategies, your triumphs, and your turmoils. | and discuss your strategies, your triumphs, and your turmoils.
if level.get('name') == 'Ace of Coders' if view.level.get('name') == 'Ace of Coders'
.tournament-blurb .tournament-blurb
h2 h2
//span(data-i18n="ladder.tournament_ends") Tournament ends //span(data-i18n="ladder.tournament_ends") Tournament ends
span(data-i18n="ladder.tournament_ended") Tournament ended span(data-i18n="ladder.tournament_ended") Tournament ended
| #{tournamentTimeLeft} | #{view.tournamentTimeLeft}
span(data-i18n="ladder.tournament_started") , started span(data-i18n="ladder.tournament_started") , started
| #{tournamentTimeElapsed} | #{view.tournamentTimeElapsed}
p p
span(data-i18n="ladder.tournament_blurb_ace_of_coders") Battle it out in the frozen glacier in this domination-style mirror match! The tournament began on Wednesday, September 16 and will run until Wednesday, October 14 at 5PM PDT. Check out the details span(data-i18n="ladder.tournament_blurb_ace_of_coders") Battle it out in the frozen glacier in this domination-style mirror match! The tournament began on Wednesday, September 16 and will run until Wednesday, October 14 at 5PM PDT. Check out the details
| |
@ -135,17 +134,18 @@ block content
div#columns.row div#columns.row
div.column.col-md-2 div.column.col-md-2
for team in teams if view.teams
div.column.col-md-4 for team in view.teams
a(class="play-button btn btn-illustrated btn-block btn-lg " + (team.id == 'ogres' ? 'btn-primary' : 'btn-danger'), data-team=team.id) div.column.col-md-4
span(data-i18n="play.play_as") Play As a(class="play-button btn btn-illustrated btn-block btn-lg " + (team.id == 'ogres' ? 'btn-primary' : 'btn-danger'), data-team=team.id)
| span(data-i18n="play.play_as") Play As
span= team.displayName |
span= team.displayName
div.column.col-md-2 div.column.col-md-2
if leagueType !== 'course' if view.leagueType !== 'course'
.spectate-button-container .spectate-button-container
a(href="/play/spectate/#{level.get('slug')}" + (league ? "?league=" + league.id : "")).spectate-button.btn.btn-illustrated.btn-info.center a(href="/play/spectate/#{view.level.get('slug')}" + (view.league ? "?league=" + view.league.id : "")).spectate-button.btn.btn-illustrated.btn-info.center
span(data-i18n="play.spectate") Spectate span(data-i18n="play.spectate") Spectate
ul.nav.nav-pills ul.nav.nav-pills
@ -154,16 +154,16 @@ block content
if !me.get('anonymous') if !me.get('anonymous')
li li
a(href="#my-matches", data-toggle="tab", data-i18n="ladder.my_matches") My Matches a(href="#my-matches", data-toggle="tab", data-i18n="ladder.my_matches") My Matches
if leagueType !== 'course' if view.leagueType !== 'course'
li li
a(href="#simulate", data-toggle="tab", data-i18n="ladder.simulate") Simulate a(href="#simulate", data-toggle="tab", data-i18n="ladder.simulate") Simulate
if level.get('name') == 'Greed' if view.level.get('name') == 'Greed'
li li
a(href="#prizes", data-toggle="tab", data-i18n="ladder_prizes.prizes") Prizes a(href="#prizes", data-toggle="tab", data-i18n="ladder_prizes.prizes") Prizes
if level.get('name') == 'Greed' if view.level.get('name') == 'Greed'
li li
a(href="#rules", data-toggle="tab", data-i18n="ladder.rules") Rules a(href="#rules", data-toggle="tab", data-i18n="ladder.rules") Rules
if level.get('name') == 'Greed' || level.get('name') == 'Criss-Cross' || level.get('name') == 'Zero Sum' || level.get('name') == 'Ace of Coders' if view.level.get('name') == 'Greed' || view.level.get('name') == 'Criss-Cross' || view.level.get('name') == 'Zero Sum' || view.level.get('name') == 'Ace of Coders'
li li
a(href="#winners", data-toggle="tab", data-i18n="ladder.winners") Winners a(href="#winners", data-toggle="tab", data-i18n="ladder.winners") Winners
@ -174,7 +174,7 @@ block content
#my-matches-tab-view #my-matches-tab-view
.tab-pane.well#simulate .tab-pane.well#simulate
#simulate-tab-view #simulate-tab-view
if level.get('name') == 'Greed' if view.level.get('name') == 'Greed'
.tab-pane.well#prizes .tab-pane.well#prizes
h1(data-i18n="ladder_prizes.title") Tournament Prizes h1(data-i18n="ladder_prizes.title") Tournament Prizes
p p
@ -740,7 +740,7 @@ block content
| - $50 | - $50
td $50 td $50
if level.get('name') == 'Greed' if view.level.get('name') == 'Greed'
.tab-pane.well#rules .tab-pane.well#rules
h1(data-i18n="ladder.tournament_rules") Tournament Rules h1(data-i18n="ladder.tournament_rules") Tournament Rules
h2 General h2 General
@ -802,7 +802,7 @@ block content
a(href="http://discourse.codecombat.com/") Discourse forum a(href="http://discourse.codecombat.com/") Discourse forum
| . | .
if level.get('name') == 'Greed' || level.get('name') == 'Criss-Cross' || level.get('name') == 'Zero Sum' if view.level.get('name') == 'Greed' || view.level.get('name') == 'Criss-Cross' || view.level.get('name') == 'Zero Sum'
.tab-pane.well#winners .tab-pane.well#winners
h1(data-i18n="ladder.winners") Winners h1(data-i18n="ladder.winners") Winners
@ -810,71 +810,71 @@ block content
thead thead
tr tr
th(data-i18n="ladder_prizes.rank") Rank th(data-i18n="ladder_prizes.rank") Rank
if level.get('name') == 'Criss-Cross' || level.get('name') == 'Zero Sum' if view.level.get('name') == 'Criss-Cross' || view.level.get('name') == 'Zero Sum'
th th
th Human th Human
if level.get('name') == 'Greed' || level.get('name') == 'Zero Sum' if view.level.get('name') == 'Greed' || view.level.get('name') == 'Zero Sum'
th Human wins/losses/ties th Human wins/losses/ties
else else
th Human score th Human score
if level.get('name') == 'Zero Sum' if view.level.get('name') == 'Zero Sum'
th th
if level.get('name') == 'Criss-Cross' || level.get('name') == 'Zero Sum' if view.level.get('name') == 'Criss-Cross' || view.level.get('name') == 'Zero Sum'
th th
th Ogre th Ogre
if level.get('name') == 'Greed' || level.get('name') == 'Zero Sum' if view.level.get('name') == 'Greed' || view.level.get('name') == 'Zero Sum'
th Ogre wins/losses/ties th Ogre wins/losses/ties
else else
th Ogre score th Ogre score
th(data-i18n="play.spectate") Spectate th(data-i18n="play.spectate") Spectate
tbody tbody
each human, index in winners.humans each human, index in view.winners.humans
- var ogre = winners.ogres[index] - var ogre = view.winners.ogres[index]
tr tr
td= human.rank td= human.rank
if level.get('name') == 'Criss-Cross' || level.get('name') == 'Zero Sum' if view.level.get('name') == 'Criss-Cross' || view.level.get('name') == 'Zero Sum'
td.code-language-cell(style="background-image: url(/images/common/code_languages/" + human.codeLanguage + "_icon.png)" title=_.string.capitalize(human.codeLanguage)) td.code-language-cell(style="background-image: url(/images/common/code_languages/" + human.codeLanguage + "_icon.png)" title=_.string.capitalize(human.codeLanguage))
td= human.name td= human.name
if level.get('name') == 'Greed' || level.get('name') == 'Zero Sum' if view.level.get('name') == 'Greed' || view.level.get('name') == 'Zero Sum'
td td
span.win= human.wins span.win= human.wins
| - | -
span.loss= human.losses span.loss= human.losses
| - | -
if level.get('name') == 'Greed' if view.level.get('name') == 'Greed'
span.tie= 377 - human.wins - human.losses span.tie= 377 - human.wins - human.losses
else if level.get('name') == 'Zero Sum' else if view.level.get('name') == 'Zero Sum'
span.tie= 108 - human.wins - human.losses span.tie= 108 - human.wins - human.losses
else else
td td
span= Math.round(100 * human.score) span= Math.round(100 * human.score)
if ogre if ogre
if level.get('name') == 'Zero Sum' if view.level.get('name') == 'Zero Sum'
td= ogre.rank td= ogre.rank
if level.get('name') == 'Criss-Cross' || level.get('name') == 'Zero Sum' if view.level.get('name') == 'Criss-Cross' || view.level.get('name') == 'Zero Sum'
td.code-language-cell(style="background-image: url(/images/common/code_languages/" + ogre.codeLanguage + "_icon.png)" title=_.string.capitalize(ogre.codeLanguage)) td.code-language-cell(style="background-image: url(/images/common/code_languages/" + ogre.codeLanguage + "_icon.png)" title=_.string.capitalize(ogre.codeLanguage))
td= ogre.name td= ogre.name
if level.get('name') == 'Greed' || level.get('name') == 'Zero Sum' if view.level.get('name') == 'Greed' || view.level.get('name') == 'Zero Sum'
td td
span.win= ogre.wins span.win= ogre.wins
| - | -
span.loss= ogre.losses span.loss= ogre.losses
| - | -
if level.get('name') == 'Greed' if view.level.get('name') == 'Greed'
span.tie= 407 - ogre.wins - ogre.losses span.tie= 407 - ogre.wins - ogre.losses
else if level.get('name') == 'Zero Sum' else if view.level.get('name') == 'Zero Sum'
span.tie= Math.max(0, 163 - ogre.wins - ogre.losses) span.tie= Math.max(0, 163 - ogre.wins - ogre.losses)
else else
td td
span= Math.round(100 * ogre.score) span= Math.round(100 * ogre.score)
td td
a(href="/play/spectate/" + level.get('slug') + "?session-one=" + human.sessionID + "&session-two=" + ogre.sessionID, data-i18n="ladder.watch_battle") Watch the battle a(href="/play/spectate/" + view.level.get('slug') + "?session-one=" + human.sessionID + "&session-two=" + ogre.sessionID, data-i18n="ladder.watch_battle") Watch the battle
else else
td td
td td
td td
if level.get('name') == 'Ace of Coders' if view.level.get('name') == 'Ace of Coders'
.tab-pane.well#winners .tab-pane.well#winners
h1(data-i18n="ladder.winners") Winners h1(data-i18n="ladder.winners") Winners
@ -888,7 +888,7 @@ block content
th Losses th Losses
th(data-i18n="play.spectate") Spectate th(data-i18n="play.spectate") Spectate
tbody tbody
each player in winners.humans each player in view.winners.humans
tr tr
td= player.rank td= player.rank
td.code-language-cell(style="background-image: url(/images/common/code_languages/" + player.codeLanguage + "_icon.png)" title=_.string.capitalize(player.codeLanguage)) td.code-language-cell(style="background-image: url(/images/common/code_languages/" + player.codeLanguage + "_icon.png)" title=_.string.capitalize(player.codeLanguage))
@ -899,6 +899,6 @@ block content
span.loss= player.losses span.loss= player.losses
td td
if player.team == "ogres" if player.team == "ogres"
a(href="/play/spectate/" + level.get('slug') + "?session-one=55df8c9207d920b7e4262f33" + "&session-two=" + player.sessionID, data-i18n="ladder.watch_battle") Watch the battle a(href="/play/spectate/" + view.level.get('slug') + "?session-one=55df8c9207d920b7e4262f33" + "&session-two=" + player.sessionID, data-i18n="ladder.watch_battle") Watch the battle
else else
a(href="/play/spectate/" + level.get('slug') + "?session-one=" + player.sessionID + "&session-two=55e1d23686c019bc47b640fe", data-i18n="ladder.watch_battle") Watch the battle a(href="/play/spectate/" + view.level.get('slug') + "?session-one=" + player.sessionID + "&session-two=55e1d23686c019bc47b640fe", data-i18n="ladder.watch_battle") Watch the battle

View file

@ -39,13 +39,19 @@ module.exports = class LadderView extends RootView
'click a:not([data-toggle])': 'onClickedLink' 'click a:not([data-toggle])': 'onClickedLink'
'click .spectate-button': 'onClickSpectateButton' 'click .spectate-button': 'onClickSpectateButton'
constructor: (options, @levelID, @leagueType, @leagueID) -> initialize: (options, @levelID, @leagueType, @leagueID) ->
super(options)
@level = @supermodel.loadModel(new Level(_id: @levelID)).model @level = @supermodel.loadModel(new Level(_id: @levelID)).model
@level.once 'sync', =>
@levelDescription = marked(@level.get('description')) if @level.get('description')
@sessions = @supermodel.loadCollection(new LevelSessionsCollection(@levelID), 'your_sessions', {cache: false}).model @sessions = @supermodel.loadCollection(new LevelSessionsCollection(@levelID), 'your_sessions', {cache: false}).model
@teams = [] @winners = require('./tournament_results')[@levelID]
if tournamentEndDate = {greed: 1402444800000, 'criss-cross': 1410912000000, 'zero-sum': 1428364800000, 'ace-of-coders': 1444867200000}[@levelID]
@tournamentTimeLeft = moment(new Date(tournamentEndDate)).fromNow()
if tournamentStartDate = {'zero-sum': 1427472000000, 'ace-of-coders': 1442417400000}[@levelID]
@tournamentTimeElapsed = moment(new Date(tournamentStartDate)).fromNow()
@loadLeague() @loadLeague()
@course = new Course()
loadLeague: -> loadLeague: ->
@leagueID = @leagueType = null unless @leagueType in ['clan', 'course'] @leagueID = @leagueType = null unless @leagueType in ['clan', 'course']
@ -68,23 +74,6 @@ module.exports = class LadderView extends RootView
@teams = teamDataFromLevel @level @teams = teamDataFromLevel @level
super() super()
getRenderData: ->
ctx = super()
ctx.level = @level
ctx.link = "/play/level/#{@level.get('name')}"
ctx.teams = @teams
ctx.levelID = @levelID
ctx.levelDescription = marked(@level.get('description')) if @level.get('description')
ctx.leagueType = @leagueType
ctx.league = @league
ctx._ = _
if tournamentEndDate = {greed: 1402444800000, 'criss-cross': 1410912000000, 'zero-sum': 1428364800000, 'ace-of-coders': 1444867200000}[@levelID]
ctx.tournamentTimeLeft = moment(new Date(tournamentEndDate)).fromNow()
if tournamentStartDate = {'zero-sum': 1427472000000, 'ace-of-coders': 1442417400000}[@levelID]
ctx.tournamentTimeElapsed = moment(new Date(tournamentStartDate)).fromNow()
ctx.winners = require('./tournament_results')[@levelID]
ctx
afterRender: -> afterRender: ->
super() super()
return unless @supermodel.finished() return unless @supermodel.finished()