From e7ea6b471be36f63451ebe27309341d3f87dabe9 Mon Sep 17 00:00:00 2001 From: Guangcong Luo Date: Sat, 4 May 2013 00:43:41 -0700 Subject: [PATCH] Stub formats/teams chooser --- js/client-mainmenu.js | 234 ++++++++++++++++++++++++++++++++++++------ js/client.js | 50 +++++---- style/client.css | 118 ++++++++++++++++++++- 3 files changed, 351 insertions(+), 51 deletions(-) diff --git a/js/client-mainmenu.js b/js/client-mainmenu.js index a1c411e75..399495390 100644 --- a/js/client-mainmenu.js +++ b/js/client-mainmenu.js @@ -9,16 +9,22 @@ 'click .closebutton': 'closePM', 'click .pm-window': 'clickPMBackground', 'focus textarea': 'onFocusPM', - 'blur textarea': 'onBlurPM' + 'blur textarea': 'onBlurPM', + 'click button.formatselect': 'selectFormat', + 'click button.teamselect': 'selectTeam' }, initialize: function() { + var buf = '
'; // left menu 2 (high-res: right, low-res: top) buf += '
'; // left menu 1 (high-res: left, low-res: bottom) - buf += '

'; + buf += '
'; + buf += '

'+this.renderFormats()+'

'; + buf += '

'+this.renderTeams()+'

'; + buf += '

'; buf += '

'; // right menu @@ -33,8 +39,8 @@ this.$activityMenu = this.$('.activitymenu'); this.$pmBox = this.$activityMenu.find('.pmbox'); - app.on('init:formats', this.updateSearch, this); - this.updateSearch(); + app.on('init:formats', this.updateFormats, this); + this.updateFormats(); }, /********************************************************* @@ -192,23 +198,18 @@ if (data.challengesFrom[userid]) { var challenge = data.challengesFrom[userid]; var $challenge = self.openChallenge(name, $pmWindow); - var buf = '

'+Tools.escapeHTML(name)+' wants to battle!

'; - buf += '

'+Tools.escapeFormat(challenge.format)+'

'; - if (challenge.format === 'randombattle') { - buf += '

random team

'; - buf += '

'; - } else { - buf += '

idk man

'; - buf += '

'; - } + var buf = '

'+Tools.escapeHTML(name)+' wants to battle!

'; + buf += '

'+self.renderFormats(challenge.format, true)+'

'; + buf += '

'+self.renderTeams(challenge.format)+'

'; + buf += '

'; $challenge.html(buf); } else { var $challenge = $pmWindow.find('.challenge'); if ($challenge.length) { if ($challenge.find('button[name=acceptChallenge]').length) { - $challenge.html('

The challenge was cancelled.

'); + $challenge.html('

The challenge was cancelled.

'); } else { - this.dismissChallenge(); + $challenge.remove(); } } } @@ -220,10 +221,9 @@ var userid = toId(name); var $challenge = this.openChallenge(name); - var buf = '

Waiting for '+Tools.escapeHTML(name)+'...

'; + var buf = '

Waiting for '+Tools.escapeHTML(name)+'...

'; buf += '

'+Tools.escapeFormat(challenge.format)+'

'; - buf += '

random team

'; - buf += '

'; + buf += '

'; $challenge.html(buf); } @@ -237,9 +237,16 @@ } return $challenge; }, - updateSearch: function() { + updateFormats: function() { if (window.BattleFormats) { this.$('.mainmenu button.big').html('Look for a battle').removeClass('disabled'); + var self = this; + this.$('button[name=format]').each(function(i, el) { + var val = el.value; + var $teamButton = $(el).closest('form').find('button[name=team]'); + $(el).replaceWith(self.renderFormats(val)); + $teamButton.replaceWith(self.renderTeams(val)); + }); } else { this.$('.mainmenu button.big').html('Connecting...').addClass('disabled'); } @@ -260,15 +267,22 @@ return; } $challenge = this.openChallenge(name); - var buf = '

Challenge '+Tools.escapeHTML(name)+'?

'; - buf += '

Random Battle

'; - buf += '

random team

'; - buf += '

'; + var buf = '

Challenge '+Tools.escapeHTML(name)+'?

'; + buf += '

'+this.renderFormats()+'

'; + buf += '

'+this.renderTeams()+'

'; + buf += '

'; $challenge.html(buf); }, acceptChallenge: function(i, target) { - var userid = $(target).closest('.pm-window').data('userid'); + var $pmWindow = $(target).closest('.pm-window'); + var userid = $pmWindow.data('userid'); + + var teamIndex = $pmWindow.find('button[name=team]').val(); + var team = null; + if (app.user.teams[teamIndex]) team = app.user.teams[teamIndex].team; + $(target).closest('.challenge').remove(); + if (team) app.send('/saveteam '+$.toJSON(team)); app.send('/accept '+userid); }, rejectChallenge: function(i, target) { @@ -277,16 +291,22 @@ app.send('/reject '+userid); }, makeChallenge: function(i, target) { - var userid = $(target).closest('.pm-window').data('userid'); - var name = $(target).closest('.pm-window').data('name'); + var $pmWindow = $(target).closest('.pm-window'); + var userid = $pmWindow.data('userid'); + var name = $pmWindow.data('name'); + var format = $pmWindow.find('button[name=format]').val(); - var buf = '

Challenging '+Tools.escapeHTML(name)+'...

'; - buf += '

Random Battle

'; - buf += '

random team

'; - buf += '

'; + var teamIndex = $pmWindow.find('button[name=team]').val(); + var team = null; + if (app.user.teams[teamIndex]) team = app.user.teams[teamIndex].team; + + var buf = '

Challenging '+Tools.escapeHTML(name)+'...

'; + buf += '

'+Tools.escapeFormat(format)+'

'; + buf += '

'; $(target).closest('.challenge').html(buf); - app.send('/challenge '+userid+', randombattle'); + if (team) app.send('/saveteam '+$.toJSON(team)); + app.send('/challenge '+userid+', '+format); }, cancelChallenge: function(i, target) { var userid = $(target).closest('.pm-window').data('userid'); @@ -296,13 +316,163 @@ dismissChallenge: function(i, target) { $(target).closest('.challenge').remove(); }, + format: function(format, button) { + app.addPopup('format', FormatPopup, {format: format, sourceEl: button}); + }, + team: function(team, button) { + var format = $(button).closest('form').find('button[name=format]').val(); + app.addPopup('team', TeamPopup, {team: team, format: format, sourceEl: button}); + }, + + // format/team selection + + curFormat: '', + renderFormats: function(formatid, noChoice) { + if (!window.BattleFormats) { + return ''; + } + if (_.isEmpty(BattleFormats)) { + return '' + } + if (!noChoice) { + this.curFormat = formatid; + if (!this.curFormat) { + if (BattleFormats['randombattle']) { + this.curFormat = 'randombattle'; + } else for (var i in BattleFormats) { + this.curFormat = i; + break; + } + } + formatid = this.curFormat; + } + return ''; + }, + curTeamFormat: '', + curTeamIndex: -1, + renderTeams: function(formatid) { + if (!app.user.teams || !window.BattleFormats) { + return ''; + } + if (!formatid) formatid = this.curFormat; + if (!window.BattleFormats[formatid]) { + return ''; + } + if (window.BattleFormats[formatid].team) { + return ''; + } + var teams = app.user.teams; + if (!teams.length) { + return '' + } + var teamIndex = 0; + if (this.curTeamIndex >= 0) { + teamIndex = this.curTeamIndex; + } + if (this.curTeamFormat !== formatid) { + for (var i=0; i'+TeamPopup.renderTeam(teamIndex)+''; + }, // buttons search: function() { alert('we don\'t support battles yet :('); }, joinRoom: function(room) { - app.joinRoom(room); + app.joinRoom(room); + } + }); + + var FormatPopup = this.FormatPopup = this.Popup.extend({ + initialize: function(data) { + var curFormat = data.format; + var selectType = (this.sourceEl.closest('form').data('search') ? 'search' : 'challenge'); + var bufs = ['','']; + var curBuf = 0; + var curSection = ''; + for (var i in BattleFormats) { + var format = BattleFormats[i]; + var selected = false; + if (format.effectType !== 'Format') continue; + if (selectType && !format[selectType + 'Show']) continue; + + if (format.section && format.section !== curSection) { + curSection = format.section; + curBuf = (curSection === 'Doubles' || curSection === 'Past Generations') ? 1 : 0; + bufs[curBuf] += '

  • '+Tools.escapeHTML(curSection)+'

    • '; + } + bufs[curBuf] += '
    • '; + } + if (bufs[1]) { + this.$el.html('
      '+bufs[0]+'
      '+bufs[1]+'
    '); + } else { + this.$el.html('
      '+bufs[0]+'
    '); + } + }, + selectFormat: function(format) { + var $teamButton = this.sourceEl.closest('form').find('button[name=team]'); + this.sourceEl.val(format).html(Tools.escapeFormat(format)); + $teamButton.replaceWith(app.rooms[''].renderTeams(format)); + app.rooms[''].curFormat = format; + this.close(); + } + }); + + var TeamPopup = this.TeamPopup = this.Popup.extend({ + initialize: function(data) { + var buf = ''; + var teams = app.user.teams; + if (!teams.length) { + buf = '
  • You have no teams
    • '; + } else { + var format = BattleFormats[data.format]; + var curTeam = +data.team; + var teamFormat = (format.teambuilderFormat || (format.isTeambuilderFormat ? data.format : false)); + buf = '

  • '+Tools.escapeFormat(teamFormat)+' teams

    • '; + var atLeastOne = false; + for (var i = 0; i < teams.length; i++) { + if ((!teams[i].format && !teamFormat) || teams[i].format === teamFormat) { + var selected = (i === curTeam); + buf += '
    • '; + atLeastOne = true; + } + } + if (!atLeastOne) buf += '
  • You have no '+Tools.escapeFormat(teamFormat)+' teams
    • '; + buf += '

  • Other teams

    • '; + for (var i = 0; i < teams.length; i++) { + if ((!teams[i].format && !teamFormat) || teams[i].format === teamFormat) continue; + var selected = (i === curTeam); + buf += '
    • '; + } + } + if (format.canUseRandomTeam) { + buf += '
    • '; + } + + this.$el.html('
      '+buf+'
    '); + }, + selectTeam: function(i) { + var formatid = this.sourceEl.closest('form').find('button[name=format]').val(); + i = +i; + this.sourceEl.val(i).html(TeamPopup.renderTeam(i)); + app.rooms[''].curTeamIndex = i; + app.rooms[''].curTeamFormat = formatid; + this.close(); + } + }, { + renderTeam: function(i) { + var team = app.user.teams[i]; + var buf = ''+Tools.escapeHTML(team.name)+'
    '; + for (var i=0; i'; + } + return buf; } }); diff --git a/js/client.js b/js/client.js index af5255238..95eb94c9f 100644 --- a/js/client.js +++ b/js/client.js @@ -1062,32 +1062,46 @@ // other than the popup will still be possible (and will dismiss // the popup). type: 'normal', - width: 300, constructor: function(data) { + var $el = $(data.el || data.$el); + var $measurer = $('
    ').appendTo('body'); + $el.appendTo($measurer); + $el.css('width', this.width - 22); + if (!this.events) this.events = {}; this.events['click button'] = 'dispatchClickButton'; if (data && data.sourceEl) { this.sourceEl = data.sourceEl = $(data.sourceEl); - var offset = this.sourceEl.offset(); - var $el = $(data.el || data.$el); - - var room = $(window).height(); - if (offset.top <= room*3/4) { - $el.css('top', offset.top + this.sourceEl.outerHeight()); - } else { - $el.css('bottom', room - offset.top); - } - - $el.css('width', this.width - 22); - room = $(window).width() - offset.left; - if (room < this.width + 10) { - $el.css('right', 10); - } else { - $el.css('left', offset.left); - } } + Backbone.View.apply(this, arguments); + + var offset = this.sourceEl.offset(); + + var room = $(window).height(); + var height = $el.outerHeight(); + var sourceHeight = this.sourceEl.outerHeight(); + if (room > offset.top + sourceHeight + height + 5) { + $el.css('top', offset.top + sourceHeight); + } else if (height + 5 <= offset.top) { + $el.css('bottom', room - offset.top); + } else if (height + 10 < room) { + $el.css('bottom', 5); + } else { + $el.css('top', 0); + } + + room = $(window).width() - offset.left; + var outerWidth = $el.outerWidth(); + if (room < outerWidth + 10) { + $el.css('right', 10); + } else { + $el.css('left', offset.left); + } + + $el.appendTo('body'); + $measurer.remove(); }, dispatchClickButton: function(e) { diff --git a/style/client.css b/style/client.css index b17169dce..dcb316471 100644 --- a/style/client.css +++ b/style/client.css @@ -281,6 +281,111 @@ body { border-radius: 6px; box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #DDDDDD, 2px 2px 3px rgba(0,0,0,.2); + z-index: 100; +} +.popupmenu, popupmenu li { + margin: -2px 0 -1px 0; + padding: 0; + list-style: none; + font-size: 8pt; +} +.popupmenu h3 { + margin: 5px 0 0 -2px; + padding: 1px 0; + font-size: 8pt; + color: #579; +} +.popupmenu li:first-child h3 { + margin-top: 0; +} +.popupmenu button { + display: block; + cursor: pointer; + font-size: 8pt; + font-family: Verdana, Helvetica, Arial, sans-serif; + margin: 0 0 0 6px; + padding: 0 4px; + border: 0; + border-radius: 2px; + background: transparent; + width: 204px; + height: 19px; + text-align: left; + + box-sizing: border-box; +} +@media (max-height:590px) { + .popupmenu button { + height: 17px; + } + .popupmenu h3 { + margin-top: 2px; + } + .popupmenu, popupmenu li { + margin: -3px 0 -2px 0; + } +} +@media (max-height:518px) { + .popupmenu button { + height: 16px; + } + .popupmenu h3 { + margin-top: 1px; + } +} + +.popupmenu button.sel { + padding: 0 3px; + border: 1px solid #BBBBBB; +} +.popupmenu button:hover, +.popupmenu button.sel:hover { + padding: 0 3px; + border: 1px solid #888888; + background: #D5D5D5; +} +.select { + cursor: pointer; + box-sizing: border-box; + width: 230px; + height: 28px; + padding: 0 5px; + font-size: 9pt; + text-align: left; + font-family: Verdana, Helvetica, Arial, sans-serif; + + border-radius: 3px; + border: 1px solid #555555; + background: #EEEEEE; + color: black; +} +.select.teamselect { + height: 43px; +} +.select:hover { + border-color: #888888; + background: #FFFFFF; +} +.select:after { + float: right; + margin-top: 1px; + font-size: 14px; + content: "\f0d7"; + font-family: FontAwesome; + -webkit-font-smoothing: antialiased; + color: #777777; +} +.select:disabled { + border-color: #999999; + background: rgba(187,187,187,.5); + color: #555555; +} +.select:disabled:after { + content: ""; +} +.select.preselected, +.select:disabled.preselected { + color: black; } /********************************************************* @@ -305,6 +410,15 @@ body { padding: 0 0 30px 0; } +.battleform { + width: 230px; + text-align: left; + margin: 0 auto; +} +.battleform .buttonbar { + text-align: center; +} + .mainmenuwrapper { position: relative; min-height: 100%; @@ -440,7 +554,8 @@ body { border-radius: 20px; background: rgba(201, 207, 219, .6); - color: black; + color: white; + text-shadow: 0 1px 0 black; } .menugroup { background: rgba(201, 207, 219, .4); @@ -564,6 +679,7 @@ body { .userdetails { min-height: 80px; + width: 191px; padding: 1px 1px 1px 86px; } .userdetails img {