From a68f22c766792e98371693a856a26bc6f67c59ce Mon Sep 17 00:00:00 2001 From: emkael Date: Fri, 6 Jul 2018 01:21:43 +0200 Subject: Adding drawing methods for starting position connectors --- playoff.js | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 72 insertions(+), 2 deletions(-) (limited to 'playoff.js') diff --git a/playoff.js b/playoff.js index 613bf66..c118f58 100644 --- a/playoff.js +++ b/playoff.js @@ -6,7 +6,13 @@ var playoff = { 'winner_v_offset': -10, 'loser_v_offset': 10, 'loser_colour': '#ff0000', - 'winner_colour': '#00ff00' + 'winner_colour': '#00ff00', + 'place_winner_h_offset': 10, + 'place_loser_h_offset': 15, + 'place_winner_v_offset': 8, + 'place_loser_v_offset': 14, + 'place_loser_colour': '#dddd00', + 'place_winner_colour': '#00dddd' }, drawLine: function(ctx, line) { @@ -31,7 +37,9 @@ var playoff = { var boxes = document.getElementsByClassName('playoff_matchbox'); var lines = { 'winner': {}, - 'loser': {} + 'loser': {}, + 'place-winner': {}, + 'place-loser': {} }; var boxes_idx = {}; for (var b = 0; b < boxes.length; b++) { @@ -50,6 +58,8 @@ var playoff = { var canvas = document.getElementById('playoff_canvas'); this.settings = this.loadSettings(canvas, this.settings); var lineMethods = { + 'place-winner': 'to', + 'place-loser': 'to', 'winner': 'midpoint', 'loser': 'midpoint' }; @@ -76,6 +86,66 @@ var playoff = { midpoints: [] } }, + from: function(from, to, hOffset, vOffset) { + var lines = this.template(); + for (var f = 0; f < from.length; f++) { + var box = boxes_idx[from[f]]; + var line = [ + Math.floor(parseInt(box.style.left) + parseInt(box.clientWidth)), + Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + vOffset), + Math.floor(parseInt(box.style.left) + parseInt(box.clientWidth) + hOffset), + Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + vOffset) + ]; + lines.hFrom.push(line); + } + this.correctLines(lines.hFrom, lines.vFrom, Math.max); + for (var t = 0; t < to.length; t++) { + var box = boxes_idx[to[t]]; + var line = [ + lines.vFrom[0], + Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + vOffset), + Math.floor(parseInt(box.style.left) - hOffset), + Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + vOffset) + ]; + lines.hTo.push(line); + } + this.correctLines(lines.hTo, lines.vTo, Math.min); + lines.midpoints = [ + [lines.vFrom[0], lines.vFrom[1]], + [lines.vTo[0], lines.vTo[1]] + ]; + return lines; + }, + to: function(from, to, hOffset, vOffset) { + var lines = this.template(); + for (var t = 0; t < to.length; t++) { + var box = boxes_idx[to[t]]; + var line = [ + parseInt(box.style.left), + Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + vOffset), + Math.floor(parseInt(box.style.left) - hOffset), + Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + vOffset) + ]; + lines.hTo.push(line); + } + this.correctLines(lines.hTo, lines.vTo, Math.min); + for (var f = 0; f < from.length; f++) { + var box = boxes_idx[from[f]]; + var line = [ + Math.floor(parseInt(box.style.left) + parseInt(box.clientWidth)), + Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + vOffset), + lines.vTo[0], + Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + vOffset) + ]; + lines.hFrom.push(line); + } + this.correctLines(lines.hFrom, lines.vFrom, Math.max); + lines.midpoints = [ + [lines.vFrom[0], lines.vFrom[1]], + [lines.vTo[0], lines.vTo[1]] + ]; + return lines; + }, midpoint: function(from, to, hOffset, vOffset) { var lines = this.template(); for (var f = 0; f < from.length; f++) { -- cgit v1.2.3