Leahnaya/pokemon-showdown-client
1
0
Fork 0
mirror of https://github.com/smogon/pokemon-showdown-client.git synced 2026-08-25 20:41:57 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add support for tree-type tournaments

Browse Source
This commit is contained in:
小太
2013-09-15 15:36:37 +10:00
parent 799d4c90ac
commit ffcd67478e
3 changed files with 182 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
js/client-tournament.js
View File

@@ -272,8 +272,138 @@
TournamentBox.prototype.generateBracket = function (data) {
if (data.type === 'tree') {
// TODO
if (!data.rootNode)
return;
var id = 'tournament-bracket-tree-' + Math.floor(Math.random() * 0x100000000);
// Change tree format to infovis-compatible
var stack = [data.rootNode];
var n = 0;
while (stack.length > 0) {
var node = stack.pop();
node.data = {};
for (var key in node)
if (key !== 'children' && key !== 'data') {
node.data[key] = node[key];
delete node[key];
}
node.data.children = node.children;
node.id = id + "-" + n;
node.name = n;
node.children.forEach(function (child) {
stack.push(child);
});
++n;
}
var $div = $('<div class="tournament-bracket-tree" id="' + id + '"></div>');
setTimeout(function () {
$div.parent().css('overflow', 'hidden');
var st = new $jit.ST({
injectInto: id,
constrained: false,
levelsToShow: 999,
orientation: 'right',
duration: 0,
fps: 60,
transition: $jit.Trans.linear,
Navigation: {enable: true, panning: true},
Node: {height: 30, width: 150, type: 'rectangle', CanvasStyles: {fillStyle: 'rgba(0, 0, 0, 0)'}, overridable: true},
Edge: {type: "bezier", overridable: true},
onBeforePlotNode: function (node) {
if (node.data.children.length === 0)
node.data.$height = 20;
else
delete node.data.$height;
},
onBeforePlotLine: function (edge){
if (edge.nodeTo.data.team && edge.nodeTo.data.team === edge.nodeFrom.data.team) {
edge.data.$color = '#ee0';
edge.data.$lineWidth = 3;
} else {
delete edge.data.$color;
delete edge.data.$lineWidth;
}
},
onCreateLabel: function (label, node) {
var $label = $(label);
if (node.data.children.length === 0) {
$label.addClass('tournament-bracket-tree-node-team');
$label.text(node.data.team || "Unavailable");
} else {
$label.addClass('tournament-bracket-tree-node-match');
$label.addClass('tournament-bracket-tree-node-match-' + node.data.state);
if (node.data.state === 'unavailable')
$label.text("Unavailable");
else {
var $teams = $('<div></div>');
$teams.addClass('tournament-bracket-tree-node-match-teams');
var $teamA = $('<span></span>');
$teamA.addClass('tournament-bracket-tree-node-match-team');
var $teamB = $teamA.clone();
$teamA.text(node.data.children[0].data.team);
$teamB.text(node.data.children[1].data.team);
$teams.append($teamA).append(" vs ").append($teamB);
if (node.data.state === 'available')
$label.append("Waiting");
else if (node.data.state === 'inprogress')
$label.append('<a href="' + app.root + toRoomid(node.data.room).toLowerCase() + '" class="ilink">In-progress</a>');
else if (node.data.state === 'finished') {
if (node.data.result === 'win') {
$teamA.addClass('tournament-bracket-tree-node-match-team-win');
$teamB.addClass('tournament-bracket-tree-node-match-team-loss');
} else if (node.data.result === 'loss') {
$teamA.addClass('tournament-bracket-tree-node-match-team-loss');
$teamB.addClass('tournament-bracket-tree-node-match-team-win');
} else {
$teamA.addClass('tournament-bracket-tree-node-match-team-draw');
$teamB.addClass('tournament-bracket-tree-node-match-team-draw');
}
$label.addClass('tournament-bracket-tree-node-match-result-' + node.data.result);
$label.append(Tools.escapeHTML(node.data.score.join(" - ")));
}
$label.prepend($teams)
}
}
var parentNode = null;
for (var a in node.adjacencies)
if (node.adjacencies[a].nodeFrom === node) {
parentNode = node.adjacencies[a].nodeTo;
break;
}
if (parentNode && parentNode.data.state === 'finished')
if (parentNode.data.result === 'draw')
$label.addClass("tournament-bracket-tree-node-draw");
else if (node.data.team === parentNode.data.team)
$label.addClass("tournament-bracket-tree-node-win");
else
$label.addClass("tournament-bracket-tree-node-loss");
}
});
st.loadJSON(data.rootNode);
st.compute();
st.onClick(st.root);
}, 0);
return $div;
} else if (data.type === 'table') {
if (data.tableContents.length === 0)
return;
var $table = $('<table class="tournament-bracket-table"></table>');
var $colHeaders = $('<tr><td class="empty"></td></tr>');
@@ -294,13 +424,13 @@
return;
}
$cell.addClass('tournament-bracket-table-cell-' + cell.state);
if (cell.state === 'unavailable') {
if (cell.state === 'unavailable')
$cell.text("Unavailable");
} else if (cell.state === 'available') {
else if (cell.state === 'available')
$cell.text("Waiting");
} else if (cell.state === "inprogress") {
else if (cell.state === "inprogress")
$cell.html('<a href="' + app.root + toRoomid(cell.room).toLowerCase() + '" class="ilink">In-progress</a>');
} else if (cell.state === 'finished') {
else if (cell.state === 'finished') {
$cell.addClass('tournament-bracket-table-cell-result-' + cell.result);
$cell.text(cell.score.join(" - "));
}
@@ -308,8 +438,7 @@
$row.append($('<th class="tournament-bracket-row-score"></th>').text(data.scores[r]));
});
if (data.tableContents.length > 0)
return $table;
return $table;
}
},

45
style/client.css
View File

@@ -1009,6 +1009,7 @@ a.ilink:hover {
overflow: auto;
font-size: 8pt;
}
.tournament-bracket-table {
margin: 10px auto;
empty-cells: hide;
@@ -1036,6 +1037,50 @@ a.ilink:hover {
background-color: rgba(255, 0, 0, 0.2)
}
.tournament-bracket-tree {
width: 100%;
height: 200px;
}
.tournament-bracket-tree-node-match, .tournament-bracket-tree-node-team {
height: 27px;
width: 148px;
border: 1px solid rgba(178, 183, 191, 0.7);
border-radius: 5px 5px 5px 5px;
background-color: rgba(225, 232, 242, 0.7);
color: #000;
font-size: 0.8em;
line-height: 1.5em;
text-align: center;
cursor: default;
user-select: none;
}
.tournament-bracket-tree-node-team {
height: 17px;
line-height: 17px;
}
.tournament-bracket-tree-node-match-unavailable {
line-height: 27px;
}
.tournament-bracket-tree-node-match-team {
font-weight: bold;
}
.tournament-bracket-tree-node-match-team-draw, .tournament-bracket-tree-node-match-team-loss {
color: #aaa;
}
.tournament-bracket-tree-node-win {
background-color: rgba(0, 255, 0, 0.2);
border-color: rgba(0, 255, 0, 0.5);
}
.tournament-bracket-tree-node-draw {
background-color: rgba(255, 255, 0, 0.2);
border-color: rgba(255, 255, 0, 0.5);
}
.tournament-bracket-tree-node-loss {
background-color: rgba(255, 0, 0, 0.2);
border-color: rgba(255, 0, 0, 0.5);
}
.tournament-tools {
padding: 10px;
display: none;

1
testclient.html
View File

@@ -73,6 +73,7 @@
<script src="js/lib/html-sanitizer-minified.js"></script>
<script src="js/lib/lodash.compat.js"></script>
<script src="js/lib/backbone.js"></script>
<script src="js/lib/infovis-spacetree-2.0.1.js"></script>
<script>
document.getElementById('loading-message').innerHTML += ' DONE<br />Loading client...';