From ffcd67478eba552d81a7d66a4977fb71faf07ce4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=8F=E5=A4=AA?= Date: Sun, 15 Sep 2013 15:36:37 +1000 Subject: [PATCH] Add support for tree-type tournaments --- js/client-tournament.js | 143 ++++++++++++++++++++++++++++++++++++++-- style/client.css | 45 +++++++++++++ testclient.html | 1 + 3 files changed, 182 insertions(+), 7 deletions(-) diff --git a/js/client-tournament.js b/js/client-tournament.js index 1968e5f82..0fd0ef2c0 100644 --- a/js/client-tournament.js +++ b/js/client-tournament.js @@ -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 = $('
'); + 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 = $('
'); + $teams.addClass('tournament-bracket-tree-node-match-teams'); + var $teamA = $(''); + $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('In-progress'); + 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 = $('
'); var $colHeaders = $(''); @@ -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('In-progress'); - } 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($('').text(data.scores[r])); }); - if (data.tableContents.length > 0) - return $table; + return $table; } }, diff --git a/style/client.css b/style/client.css index 1780fa791..30a36c213 100644 --- a/style/client.css +++ b/style/client.css @@ -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; diff --git a/testclient.html b/testclient.html index 04a1601b2..edef66435 100644 --- a/testclient.html +++ b/testclient.html @@ -73,6 +73,7 @@ +