From 48fac33c987be28c72e49509575e1622bfd96fc2 Mon Sep 17 00:00:00 2001 From: emkael Date: Fri, 6 Jul 2018 01:20:35 +0200 Subject: Tweaking connector offsets on canvas --- playoff.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'playoff.js') diff --git a/playoff.js b/playoff.js index a2cfa6a..890a2b6 100644 --- a/playoff.js +++ b/playoff.js @@ -1,10 +1,10 @@ var playoff = { settings: { - 'winner_h_offset': 8, - 'loser_h_offset': 14, - 'winner_v_offset': -6, - 'loser_v_offset': 6, + 'winner_h_offset': 5, + 'loser_h_offset': 20, + 'winner_v_offset': -10, + 'loser_v_offset': 10, 'loser_colour': '#ff0000', 'winner_colour': '#00ff00' }, -- cgit v1.2.3 From cf548484722bc83c18a9d771e45874cf59bc68f0 Mon Sep 17 00:00:00 2001 From: emkael Date: Fri, 6 Jul 2018 01:21:01 +0200 Subject: Refactoring of connector line drawing --- playoff.js | 139 +++++++++++++++++++++++++++++++------------------------------ 1 file changed, 70 insertions(+), 69 deletions(-) (limited to 'playoff.js') diff --git a/playoff.js b/playoff.js index 890a2b6..613bf66 100644 --- a/playoff.js +++ b/playoff.js @@ -49,99 +49,100 @@ var playoff = { } var canvas = document.getElementById('playoff_canvas'); this.settings = this.loadSettings(canvas, this.settings); - var ctx = canvas.getContext('2d'); - for (var type in lines) { - ctx.strokeStyle = this.settings[type + '_colour']; - for (var from in lines[type]) { - var to = lines[type][from]; - from = from.split(' '); - var horizontal_from = []; - var vertical_from = [0, canvas.height, 0, 0]; + var lineMethods = { + 'winner': 'midpoint', + 'loser': 'midpoint' + }; + var lineCalculator = { + correctLines: function(hLines, vLine, comparator) { + for (var l1 in hLines) { + for (var l2 in hLines) { + hLines[l1][2] = comparator(hLines[l1][2], hLines[l2][2]); + hLines[l2][2] = hLines[l1][2]; + } + } + for (var l1 in hLines) { + vLine[0] = vLine[2] = comparator(hLines[l1][2], vLine[2]); + vLine[1] = Math.min(vLine[1], hLines[l1][3]); + vLine[3] = Math.max(vLine[3], hLines[l1][3]); + } + }, + template: function() { + return { + hFrom: [], + vFrom: [0, canvas.height, 0, 0], + hTo: [], + vTo: [canvas.width, canvas.height, canvas.width, 0], + midpoints: [] + } + }, + midpoint: 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) + parseFloat(this.settings[type + '_v_offset'])), - Math.floor(parseInt(box.style.left) + parseInt(box.clientWidth) + parseFloat(this.settings[type + '_h_offset'])), - Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + parseFloat(this.settings[type + '_v_offset'])) + 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) ]; - horizontal_from.push(line); - for (var l in horizontal_from) { - if (horizontal_from[l][2] < line[2]) { - horizontal_from[l][2] = line[2]; - } else { - line[2] = horizontal_from[l][2]; - } - if (vertical_from[0] < horizontal_from[l][2]) { - vertical_from[0] = horizontal_from[l][2]; - vertical_from[2] = horizontal_from[l][2]; - } - if (vertical_from[1] > horizontal_from[l][3]) { - vertical_from[1] = horizontal_from[l][3]; - } - if (vertical_from[3] < horizontal_from[l][3]) { - vertical_from[3] = horizontal_from[l][3]; - } - } + lines.hFrom.push(line); } - var horizontal_to = []; - var vertical_to = [canvas.width, canvas.height, canvas.width, 0]; + this.correctLines(lines.hFrom, lines.vFrom, Math.max); 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) + parseFloat(this.settings[type + '_v_offset'])), - Math.floor(parseInt(box.style.left) - parseFloat(this.settings[type + '_h_offset'])), - Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + parseFloat(this.settings[type + '_v_offset'])) + 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) ]; - horizontal_to.push(line); - for (var l in horizontal_to) { - if (horizontal_to[l][2] > line[2]) { - horizontal_to[l][2] = line[2]; - } else { - line[2] = horizontal_to[l][2]; - } - if (vertical_to[0] > horizontal_to[l][2]) { - vertical_to[0] = horizontal_to[l][2]; - vertical_to[2] = horizontal_to[l][2]; - } - if (vertical_to[1] > horizontal_to[l][3]) { - vertical_to[1] = horizontal_to[l][3]; - } - if (vertical_to[3] < horizontal_to[l][3]) { - vertical_to[3] = horizontal_to[l][3]; - } - } + lines.hTo.push(line); } - var midpoints = [ + this.correctLines(lines.hTo, lines.vTo, Math.min); + lines.midpoints = [ [ - (vertical_from[0] + vertical_from[2]) / 2, - (vertical_from[1] + vertical_from[3]) / 2 + (lines.vFrom[0] + lines.vFrom[2]) / 2, + (lines.vFrom[1] + lines.vFrom[3]) / 2 ], [ - parseFloat(this.settings[type + '_h_offset']) / 2 + (vertical_from[0] + vertical_from[2] + vertical_to[0] + vertical_to[2]) / 4, - (vertical_from[1] + vertical_from[3]) / 2 + hOffset / 2 + (lines.vFrom[0] + lines.vFrom[2] + lines.vTo[0] + lines.vTo[2]) / 4, + (lines.vFrom[1] + lines.vFrom[3]) / 2 ], [ - parseFloat(this.settings[type + '_h_offset']) / 2 + (vertical_from[0] + vertical_from[2] + vertical_to[0] + vertical_to[2]) / 4, - (vertical_to[1] + vertical_to[3]) / 2 + hOffset / 2 + (lines.vFrom[0] + lines.vFrom[2] + lines.vTo[0] + lines.vTo[2]) / 4, + (lines.vTo[1] + lines.vTo[3]) / 2 ], [ - (vertical_to[0] + vertical_to[2]) / 2, - (vertical_to[1] + vertical_to[3]) / 2 + (lines.vTo[0] + lines.vTo[2]) / 2, + (lines.vTo[1] + lines.vTo[3]) / 2 ] ] - for (var l in horizontal_from) { - this.drawLine(ctx, horizontal_from[l]); + return lines; + } + }; + var ctx = canvas.getContext('2d'); + for (var type in lines) { + styleType = type.replace('-', '_'); + ctx.strokeStyle = this.settings[styleType + '_colour']; + for (var from in lines[type]) { + var to = lines[type][from]; + from = from.split(' '); + var linesToDraw = lineCalculator[lineMethods[type]]( + from, to, + this.settings[styleType + '_h_offset'], this.settings[styleType + '_v_offset']); + for (var l in linesToDraw.hFrom) { + this.drawLine(ctx, linesToDraw.hFrom[l]); } - this.drawLine(ctx, vertical_from); - for (var l in horizontal_to) { - this.drawLine(ctx, horizontal_to[l]); + this.drawLine(ctx, linesToDraw.vFrom); + for (var l in linesToDraw.hTo) { + this.drawLine(ctx, linesToDraw.hTo[l]); } - this.drawLine(ctx, vertical_to); - for (var m = 0; m < midpoints.length-1; m++) { + this.drawLine(ctx, linesToDraw.vTo); + for (var m = 0; m < linesToDraw.midpoints.length-1; m++) { this.drawLine(ctx, [ - midpoints[m][0], midpoints[m][1], midpoints[m+1][0], midpoints[m+1][1] + linesToDraw.midpoints[m][0], linesToDraw.midpoints[m][1], + linesToDraw.midpoints[m+1][0], linesToDraw.midpoints[m+1][1] ]); } } -- cgit v1.2.3 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 From 1e3d4e3233a9d01a81525255ed0f1479a96c1e5d Mon Sep 17 00:00:00 2001 From: emkael Date: Fri, 6 Jul 2018 03:15:15 +0200 Subject: Fixing box offsets for line drawing --- playoff.js | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) (limited to 'playoff.js') diff --git a/playoff.js b/playoff.js index c118f58..301f86c 100644 --- a/playoff.js +++ b/playoff.js @@ -91,10 +91,10 @@ var playoff = { 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) + Math.floor(parseInt(box.offsetLeft) + parseInt(box.clientWidth)), + Math.floor(parseInt(box.offsetTop) + 0.5 * parseInt(box.clientHeight) + vOffset), + Math.floor(parseInt(box.offsetLeft) + parseInt(box.clientWidth) + hOffset), + Math.floor(parseInt(box.offsetTop) + 0.5 * parseInt(box.clientHeight) + vOffset) ]; lines.hFrom.push(line); } @@ -102,10 +102,10 @@ var playoff = { for (var t = 0; t < to.length; t++) { var box = boxes_idx[to[t]]; var line = [ + Math.floor(parseInt(box.offsetLeft)), + Math.floor(parseInt(box.offsetTop) + 0.5 * parseInt(box.clientHeight) + vOffset), 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) + Math.floor(parseInt(box.offsetTop) + 0.5 * parseInt(box.clientHeight) + vOffset) ]; lines.hTo.push(line); } @@ -121,10 +121,10 @@ var playoff = { 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) + parseInt(box.offsetLeft), + Math.floor(parseInt(box.offsetTop) + 0.5 * parseInt(box.clientHeight) + vOffset), + Math.floor(parseInt(box.offsetLeft) - hOffset), + Math.floor(parseInt(box.offsetTop) + 0.5 * parseInt(box.clientHeight) + vOffset) ]; lines.hTo.push(line); } @@ -132,10 +132,10 @@ var playoff = { 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.offsetLeft) + parseInt(box.clientWidth)), + Math.floor(parseInt(box.offsetTop) + 0.5 * parseInt(box.clientHeight) + vOffset), lines.vTo[0], - Math.floor(parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + vOffset) + Math.floor(parseInt(box.offsetTop) + 0.5 * parseInt(box.clientHeight) + vOffset) ]; lines.hFrom.push(line); } @@ -151,10 +151,10 @@ var playoff = { 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) + Math.floor(parseInt(box.offsetLeft) + parseInt(box.clientWidth)), + Math.floor(parseInt(box.offsetTop) + 0.5 * parseInt(box.clientHeight) + vOffset), + Math.floor(parseInt(box.offsetLeft) + parseInt(box.clientWidth) + hOffset), + Math.floor(parseInt(box.offsetTop) + 0.5 * parseInt(box.clientHeight) + vOffset) ]; lines.hFrom.push(line); } @@ -162,10 +162,10 @@ var playoff = { 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) + parseInt(box.offsetLeft), + Math.floor(parseInt(box.offsetTop) + 0.5 * parseInt(box.clientHeight) + vOffset), + Math.floor(parseInt(box.offsetLeft) - hOffset), + Math.floor(parseInt(box.offsetTop) + 0.5 * parseInt(box.clientHeight) + vOffset) ]; lines.hTo.push(line); } -- cgit v1.2.3 From acfc6044e25c7ff7d56a62dc1f62c21a7546f560 Mon Sep 17 00:00:00 2001 From: emkael Date: Fri, 6 Jul 2018 03:28:29 +0200 Subject: Rendering connectors for finishing positions --- playoff.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) (limited to 'playoff.js') diff --git a/playoff.js b/playoff.js index 301f86c..a648b4b 100644 --- a/playoff.js +++ b/playoff.js @@ -3,8 +3,12 @@ var playoff = { settings: { 'winner_h_offset': 5, 'loser_h_offset': 20, + 'finish_winner_h_offset': 5, + 'finish_loser_h_offset': 20, 'winner_v_offset': -10, 'loser_v_offset': 10, + 'finish_winner_v_offset': -4, + 'finish_loser_v_offset': 4, 'loser_colour': '#ff0000', 'winner_colour': '#00ff00', 'place_winner_h_offset': 10, @@ -12,7 +16,9 @@ var playoff = { 'place_winner_v_offset': 8, 'place_loser_v_offset': 14, 'place_loser_colour': '#dddd00', - 'place_winner_colour': '#00dddd' + 'place_winner_colour': '#00dddd', + 'finish_loser_colour': '#ff0000', + 'finish_winner_colour': '#00ff00' }, drawLine: function(ctx, line) { @@ -39,7 +45,9 @@ var playoff = { 'winner': {}, 'loser': {}, 'place-winner': {}, - 'place-loser': {} + 'place-loser': {}, + 'finish-winner': {}, + 'finish-loser': {} }; var boxes_idx = {}; for (var b = 0; b < boxes.length; b++) { @@ -60,6 +68,8 @@ var playoff = { var lineMethods = { 'place-winner': 'to', 'place-loser': 'to', + 'finish-winner': 'midpoint', + 'finish-loser': 'midpoint', 'winner': 'midpoint', 'loser': 'midpoint' }; -- cgit v1.2.3 From 3b49b542ca32d602722a3f4ba5c185242d7e5dc1 Mon Sep 17 00:00:00 2001 From: emkael Date: Fri, 6 Jul 2018 03:28:53 +0200 Subject: Adjusting connector parameters --- playoff.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'playoff.js') diff --git a/playoff.js b/playoff.js index a648b4b..3b57cdf 100644 --- a/playoff.js +++ b/playoff.js @@ -3,18 +3,18 @@ var playoff = { settings: { 'winner_h_offset': 5, 'loser_h_offset': 20, + 'place_winner_h_offset': 10, + 'place_loser_h_offset': 15, 'finish_winner_h_offset': 5, 'finish_loser_h_offset': 20, 'winner_v_offset': -10, 'loser_v_offset': 10, + 'place_winner_v_offset': 2, + 'place_loser_v_offset': 9, 'finish_winner_v_offset': -4, 'finish_loser_v_offset': 4, 'loser_colour': '#ff0000', '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', 'finish_loser_colour': '#ff0000', -- cgit v1.2.3