1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
var playoff = {
settings: {
'winner_h_offset': 10,
'loser_h_offset': 20,
'winner_v_offset': -4,
'loser_v_offset': 4,
'loser_colour': '#ff0000',
'winner_colour': '#00ff00'
},
drawLine: function(ctx, line) {
ctx.beginPath();
ctx.moveTo(line[0], line[1]);
ctx.lineTo(line[2], line[3]);
ctx.stroke();
},
run: function() {
var boxes = document.getElementsByClassName('playoff_matchbox');
var lines = {
'winner': {},
'loser': {}
};
var boxes_idx = {};
for (var b = 0; b < boxes.length; b++) {
var id = boxes[b].getAttribute('data-id');
boxes_idx[id] = boxes[b];
for (var attr in lines) {
var value = boxes[b].getAttribute('data-' + attr);
if (value) {
if (!lines[attr][value]) {
lines[attr][value] = [];
}
lines[attr][value].push(id);
}
}
}
var canvas = document.getElementById('playoff_canvas');
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];
for (var f = 0; f < from.length; f++) {
var box = boxes_idx[from[f]];
var line = [
parseInt(box.style.left) + parseInt(box.clientWidth),
parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + this.settings[type + '_v_offset'],
parseInt(box.style.left) + parseInt(box.clientWidth) + this.settings[type + '_h_offset'],
parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + this.settings[type + '_v_offset']
];
horizontal_from.push(line);
for (var l in horizontal_from) {
if (horizontal_from[l][2] < line[2]) {
horizontal_from[l][2] = line[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];
}
}
}
var horizontal_to = [];
var vertical_to = [canvas.width, canvas.height, canvas.width, 0];
for (var t = 0; t < to.length; t++) {
var box = boxes_idx[to[t]];
var line = [
parseInt(box.style.left),
parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + this.settings[type + '_v_offset'],
parseInt(box.style.left) - this.settings[type + '_h_offset'],
parseInt(box.style.top) + 0.5 * parseInt(box.clientHeight) + this.settings[type + '_v_offset']
];
horizontal_to.push(line);
for (var l in horizontal_to) {
if (horizontal_to[l][2] > line[2]) {
horizontal_to[l][2] = line[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];
}
}
}
var midpoints = [
[
(vertical_from[0] + vertical_from[2]) / 2,
(vertical_from[1] + vertical_from[3]) / 2
],
[
this.settings[type + '_v_offset'] + (vertical_from[0] + vertical_from[2] + vertical_to[0] + vertical_to[2]) / 4,
(vertical_from[1] + vertical_from[3]) / 2
],
[
this.settings[type + '_v_offset'] + (vertical_from[0] + vertical_from[2] + vertical_to[0] + vertical_to[2]) / 4,
(vertical_to[1] + vertical_to[3]) / 2
],
[
(vertical_to[0] + vertical_to[2]) / 2,
(vertical_to[1] + vertical_to[3]) / 2
]
]
for (var l in horizontal_from) {
this.drawLine(ctx, horizontal_from[l]);
}
this.drawLine(ctx, vertical_from);
for (var l in horizontal_to) {
this.drawLine(ctx, horizontal_to[l]);
}
this.drawLine(ctx, vertical_to);
for (var m = 0; m < midpoints.length-1; m++) {
this.drawLine(ctx, [
midpoints[m][0], midpoints[m][1], midpoints[m+1][0], midpoints[m+1][1]
]);
}
}
}
}
}
playoff.run();
|
