diff --git a/client/app/css/teambuilder.styl b/client/app/css/teambuilder.styl index 20ed10a..61540d3 100644 --- a/client/app/css/teambuilder.styl +++ b/client/app/css/teambuilder.styl @@ -11,6 +11,34 @@ $pokemon-list-height = 50px box-sizing border-box height 28px +.arrow-up + width 0; + height 0; + border-left 7px solid transparent + border-right 7px solid transparent + border-bottom 12px solid #939393 + position absolute + left 88% + top 25% + &:hover + border-bottom-color #a8a8a8 + &:active + border-bottom-color #696969 + +.arrow-down + width 0 + height 0 + border-left 7px solid transparent + border-right 7px solid transparent + border-top 12px solid #939393 + position absolute + left 88% + top 40% + &:hover + border-top-color #a8a8a8 + &:active + border-top-color #696969 + .teambuilder .selectize-input input height 18px diff --git a/client/app/js/views/teambuilder/teambuilder_view.coffee b/client/app/js/views/teambuilder/teambuilder_view.coffee index 82cfb59..2357c72 100644 --- a/client/app/js/views/teambuilder/teambuilder_view.coffee +++ b/client/app/js/views/teambuilder/teambuilder_view.coffee @@ -13,6 +13,8 @@ class @TeambuilderView extends Backbone.View 'click .go-to-team' : 'clickTeam' 'click .import-team' : 'renderImportTeamModal' 'click .get-teams' : 'getAllTeamsAdmin' + 'click .arrow-up' : 'moveTeamUp' + 'click .arrow-down' : 'moveTeamDown' # Teambuild view 'click .change-format-dropdown a': 'changeTeamFormat' @@ -157,7 +159,6 @@ class @TeambuilderView extends Backbone.View @getTeam(id).replace(jint, jPkmn) jint = jint+1 @getTeam(id).save() - $modal.find('.imported-team').val("") $modal.modal('hide') return false $modal.find('.exported-team').first().focus() @@ -252,7 +253,8 @@ class @TeambuilderView extends Backbone.View @renderTeams() renderTeams: => - @$('.display_teams').html @teamsTemplate(teams: @getAllTeams(), window: window) + allteams = sortByKey(@getAllTeams(), "id") + @$('.display_teams').html @teamsTemplate(teams: allteams, window: window) @$('.display_teams').removeClass('hidden') @$('.display_pokemon').addClass('hidden') this @@ -344,4 +346,59 @@ class @TeambuilderView extends Backbone.View renderSaved: (team) => $team = $(".select-team[data-cid='#{team.cid}']") - $team.find('.show_spinner').addClass('hidden') \ No newline at end of file + $team.find('.show_spinner').addClass('hidden') + + moveTeamUp: (e) => + @resetTeams(PokeBattle.TeamStore) + $team = $(e.currentTarget).closest('.select-team') + id = $team.data('id') + for indexno, team_ of @getAllTeams() + if team_.id is id + team = team_ + allTeams = sortByKey(@getAllTeams(), "id") + index = -1 + for thisteam, num in allTeams + index = num if thisteam.id is id + if index is 0 + return + upTeam = allTeams[index - 1] + upID = upTeam.id + downID = team.id + upTeam.id = downID + team.id = upID + team.save() + upTeam.save() + @resetTeams(PokeBattle.TeamStore) + @renderTeams() + + moveTeamDown: (e) => + @resetTeams(PokeBattle.TeamStore) + $team = $(e.currentTarget).closest('.select-team') + id = $team.data('id') + for indexno, team_ of @getAllTeams() + if team_.id is id + team = team_ + allTeams = sortByKey(@getAllTeams(), "id") + index = -1 + for thisteam, num in allTeams + index = num if thisteam.id is id + if (index is (allTeams.length - 1)) + return + upTeam = allTeams[index + 1] + upID = upTeam.id + downID = team.id + upTeam.id = downID + team.id = upID + team.save() + upTeam.save() + @resetTeams(PokeBattle.TeamStore) + @renderTeams() + + sortByKey = (array, key) -> + array.sort (a,b) -> + if a[key] < b[key] + -1 + else if a[key] > b[key] + 1 + else + 0 \ No newline at end of file diff --git a/client/views/teambuilder/team.jade b/client/views/teambuilder/team.jade index 68899b4..c8675ca 100644 --- a/client/views/teambuilder/team.jade +++ b/client/views/teambuilder/team.jade @@ -1,5 +1,7 @@ .left.select-team.clickable-box.p1.mt1.ml1.relative(data-id=team.id, data-cid=team.cid) h2.go-to-team.fake_link= team.getName() + .arrow-up + .arrow-down != window.JST['team_small']({team: team, window: window}) .team-meta span.fake_link.export-team @@ -13,5 +15,6 @@ span.fake_link.delete-team span.icon-remove | Delete + .show_spinner.flex-center.fill.bg-faded-white.rounded.hidden != window.JST['spinner']() diff --git a/client/views/teambuilder/teams.jade b/client/views/teambuilder/teams.jade index f6e9a66..9a51ae5 100644 --- a/client/views/teambuilder/teams.jade +++ b/client/views/teambuilder/teams.jade @@ -1,5 +1,8 @@ h2 Your teams .teambuilder_teams.clearfix + each team in teams + if team.isDefault + != window.JST['teambuilder/team']({team: team, window: window}) each team in teams != window.JST['teambuilder/team']({team: team, window: window}) .button.button_blue.add-new-team Add new team diff --git a/public/css/main.css b/public/css/main.css index e1465e1..4951da6 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -452,6 +452,12 @@ h1{font-family:"PT Sans Narrow","Helvetica Neue",sans-serif;font-size:2em;font-w 100%{-webkit-transform:translate(200%,100%);-moz-transform:translate(200%,100%);-o-transform:translate(200%,100%);-ms-transform:translate(200%,100%);transform:translate(200%,100%)} }.Team-Admin{border:1px solid #000;width:40%;margin-left:10px} .teambuilder input,.teambuilder select{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:28px} +.arrow-up{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid #939393;position:absolute;left:88%;top:25%;} +.arrow-up:hover{border-bottom-color:#a8a8a8} +.arrow-up:active{border-bottom-color:#696969} +.arrow-down{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid #939393;position:absolute;left:88%;top:40%;} +.arrow-down:hover{border-top-color:#a8a8a8} +.arrow-down:active{border-top-color:#696969} .teambuilder .selectize-input input{height:18px} .teambuilder{position:absolute;top:0;bottom:0;left:0;right:0;} .teambuilder select,.teambuilder input{margin-bottom:0 !important;width:100%} diff --git a/public/js/app.js b/public/js/app.js index 18dcc13..a3faaec 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -6338,9 +6338,13 @@ __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; }; this.TeambuilderView = (function(_super) { + var sortByKey; + __extends(TeambuilderView, _super); function TeambuilderView() { + this.moveTeamDown = __bind(this.moveTeamDown, this); + this.moveTeamUp = __bind(this.moveTeamUp, this); this.renderSaved = __bind(this.renderSaved, this); this.renderSaving = __bind(this.renderSaving, this); this.validateImportedTeam = __bind(this.validateImportedTeam, this); @@ -6404,6 +6408,8 @@ 'click .go-to-team': 'clickTeam', 'click .import-team': 'renderImportTeamModal', 'click .get-teams': 'getAllTeamsAdmin', + 'click .arrow-up': 'moveTeamUp', + 'click .arrow-down': 'moveTeamDown', 'click .change-format-dropdown a': 'changeTeamFormat', 'blur .team_name': 'blurTeamName', 'keypress .team_name': 'keypressTeamName', @@ -6591,7 +6597,6 @@ jint = jint + 1; } _this.getTeam(id).save(); - $modal.find('.imported-team').val(""); $modal.modal('hide'); } return false; @@ -6716,8 +6721,10 @@ }; TeambuilderView.prototype.renderTeams = function() { + var allteams; + allteams = sortByKey(this.getAllTeams(), "id"); this.$('.display_teams').html(this.teamsTemplate({ - teams: this.getAllTeams(), + teams: allteams, window: window })); this.$('.display_teams').removeClass('hidden'); @@ -6860,6 +6867,86 @@ return $team.find('.show_spinner').addClass('hidden'); }; + TeambuilderView.prototype.moveTeamUp = function(e) { + var $team, allTeams, downID, id, index, indexno, num, team, team_, thisteam, upID, upTeam, _i, _len, _ref; + this.resetTeams(PokeBattle.TeamStore); + $team = $(e.currentTarget).closest('.select-team'); + id = $team.data('id'); + _ref = this.getAllTeams(); + for (indexno in _ref) { + team_ = _ref[indexno]; + if (team_.id === id) { + team = team_; + } + } + allTeams = sortByKey(this.getAllTeams(), "id"); + index = -1; + for (num = _i = 0, _len = allTeams.length; _i < _len; num = ++_i) { + thisteam = allTeams[num]; + if (thisteam.id === id) { + index = num; + } + } + if (index === 0) { + return; + } + upTeam = allTeams[index - 1]; + upID = upTeam.id; + downID = team.id; + upTeam.id = downID; + team.id = upID; + team.save(); + upTeam.save(); + this.resetTeams(PokeBattle.TeamStore); + return this.renderTeams(); + }; + + TeambuilderView.prototype.moveTeamDown = function(e) { + var $team, allTeams, downID, id, index, indexno, num, team, team_, thisteam, upID, upTeam, _i, _len, _ref; + this.resetTeams(PokeBattle.TeamStore); + $team = $(e.currentTarget).closest('.select-team'); + id = $team.data('id'); + _ref = this.getAllTeams(); + for (indexno in _ref) { + team_ = _ref[indexno]; + if (team_.id === id) { + team = team_; + } + } + allTeams = sortByKey(this.getAllTeams(), "id"); + index = -1; + for (num = _i = 0, _len = allTeams.length; _i < _len; num = ++_i) { + thisteam = allTeams[num]; + if (thisteam.id === id) { + index = num; + } + } + if (index === (allTeams.length - 1)) { + return; + } + upTeam = allTeams[index + 1]; + upID = upTeam.id; + downID = team.id; + upTeam.id = downID; + team.id = upID; + team.save(); + upTeam.save(); + this.resetTeams(PokeBattle.TeamStore); + return this.renderTeams(); + }; + + sortByKey = function(array, key) { + return array.sort(function(a, b) { + if (a[key] < b[key]) { + return -1; + } else if (a[key] > b[key]) { + return 1; + } else { + return 0; + } + }); + }; + return TeambuilderView; })(Backbone.View); diff --git a/public/js/templates.js b/public/js/templates.js index 723b7a5..d055619 100644 --- a/public/js/templates.js +++ b/public/js/templates.js @@ -1077,13 +1077,41 @@ buf.push(""); this["JST"]["teambuilder/team"] = function anonymous(locals /**/) { var buf = []; -var locals_ = (locals || {}),team = locals_.team,window = locals_.window;buf.push("

" + (jade.escape(null == (jade.interp = team.getName()) ? "" : jade.interp)) + "

" + (null == (jade.interp = window.JST['team_small']({team: team, window: window})) ? "" : jade.interp) + "
Text Editor | Clone | Delete
");;return buf.join(""); +var locals_ = (locals || {}),team = locals_.team,window = locals_.window;buf.push("

" + (jade.escape(null == (jade.interp = team.getName()) ? "" : jade.interp)) + "

" + (null == (jade.interp = window.JST['team_small']({team: team, window: window})) ? "" : jade.interp) + "
Text Editor | Clone | Delete
");;return buf.join(""); }; this["JST"]["teambuilder/teams"] = function anonymous(locals /**/) { var buf = []; var locals_ = (locals || {}),teams = locals_.teams,window = locals_.window;buf.push("

Your teams

"); +// iterate teams +;(function(){ + var $$obj = teams; + if ('number' == typeof $$obj.length) { + + for (var $index = 0, $$l = $$obj.length; $index < $$l; $index++) { + var team = $$obj[$index]; + +if ( team.isDefault) +{ +buf.push(null == (jade.interp = window.JST['teambuilder/team']({team: team, window: window})) ? "" : jade.interp); +} + } + + } else { + var $$l = 0; + for (var $index in $$obj) { + $$l++; var team = $$obj[$index]; + +if ( team.isDefault) +{ +buf.push(null == (jade.interp = window.JST['teambuilder/team']({team: team, window: window})) ? "" : jade.interp); +} + } + + } +}).call(this); + // iterate teams ;(function(){ var $$obj = teams;