]> git.sesse.net Git - ultimatescore/blob - carousel.js
Add a carousel mode.
[ultimatescore] / carousel.js
1 addheading = function(carousel, colspan, content)
2 {
3         var thead = document.createElement("thead");
4         var tr = document.createElement("tr");
5         var th = document.createElement("th");
6         th.innerHTML = content;
7         th.setAttribute("colspan", colspan);
8         tr.appendChild(th);
9         thead.appendChild(tr);
10         carousel.appendChild(thead);
11 };
12 addtd = function(tr, className, content) {
13         var td = document.createElement("td");
14         td.appendChild(document.createTextNode(content));
15         td.className = className;
16         tr.appendChild(td);
17 };
18 addth = function(tr, className, content) {
19         var th = document.createElement("th");
20         th.appendChild(document.createTextNode(content));
21         th.className = className;
22         tr.appendChild(th);
23 };
24
25 subrank_partitions = function(games, parts, start_rank, tiebreakers) {
26         var result = [];
27         for (var i = 0; i < parts.length; ++i) {
28                 var part = rank(games, parts[i], start_rank, tiebreakers);
29                 for (var j = 0; j < part.length; ++j) {
30                         result.push(part[j]);
31                 }
32                 start_rank += part.length;
33         }
34         return result;
35 };
36
37 partition = function(teams, compare)
38 {
39         teams.sort(compare);
40
41         var parts = [];
42         var curr_part = [teams[0]];
43         for (var i = 1; i < teams.length; ++i) {
44                 if (compare(teams[i], curr_part[0]) != 0) {
45                         parts.push(curr_part);
46                         curr_part = [];
47                 }
48                 curr_part.push(teams[i]);
49         }
50         if (curr_part.length != 0) {
51                 parts.push(curr_part);
52         }
53         return parts;
54 };
55
56 explain_tiebreaker = function(parts, rule_name)
57 {
58         var result = [];
59         for (var i = 0; i < parts.length; ++i) {
60                 result.push(parts[i].map(function(x) { return x.shortname; }).join("/"));
61         }
62         return result.join(" > ") + " (" + rule_name + ")";
63 }
64
65 make_teams_to_idx = function(teams)
66 {
67         var teams_to_idx = [];
68         for (var i = 0; i < teams.length; i++) {
69                 teams_to_idx[teams[i].name] = i;
70         }
71         return teams_to_idx;
72 }
73
74 partition_by_beat = function(games, teams)
75 {
76         // Head-to-head score by way of components. First construct the beat matrix.
77         var n = teams.length;
78         var beat = new Array(n);
79         var teams_to_idx = make_teams_to_idx(teams);
80         for (var i = 0; i < n; i++) {
81                 beat[i] = new Array(n);
82                 for (var j = 0; j < n; j++) {
83                         beat[i][j] = 0;
84                 }
85         }
86         for (i = 0; i < games.length; ++i) {
87                 var idx1 = teams_to_idx[games[i].name1];
88                 var idx2 = teams_to_idx[games[i].name2];
89                 if (idx1 !== undefined && idx2 !== undefined) {
90                         if (games[i].score1 > games[i].score2) {
91                                 beat[idx1][idx2] = 1;
92                         }
93                         if (games[i].score1 < games[i].score2) {
94                                 beat[idx2][idx1] = 1;
95                         }
96                 }
97         }
98         // Floyd-Warshall for transitive closure.
99         for (var k = 0; k < n; ++k) {
100                 for (var i = 0; i < n; ++i) {
101                         for (var j = 0; j < n; ++j) {
102                                 if (beat[i][k] && beat[k][j]) {
103                                         beat[i][j] = 1;
104                                 }
105                         }
106                 }
107         }
108
109         // See if we can find any team that is comparable to all others.
110         for (var pivot_idx = 0; pivot_idx < n; pivot_idx++) {
111                 var incomparable = false;
112                 for (var i = 0; i < n; ++i) {
113                         if (i != pivot_idx && beat[pivot_idx][i] == 0 && beat[i][pivot_idx] == 0) {
114                                 incomparable = true;
115                                 break;
116                         }
117                 }
118                 if (!incomparable) {
119                         // Split the teams into three partitions:
120                         var better_than_pivot = [], equal = [], worse_than_pivot = [];
121                         for (var i = 0; i < n; ++i) {
122                                 var we_beat = (beat[pivot_idx][i] == 1);
123                                 var they_beat = (beat[i][pivot_idx] == 1);
124                                 if ((i == pivot_idx) || (we_beat && they_beat)) {
125                                         equal.push(teams[i]);
126                                 } else if (we_beat && !they_beat) {
127                                         worse_than_pivot.push(teams[i]);
128                                 } else if (they_beat && !we_beat) {
129                                         better_than_pivot.push(teams[i]);
130                                 } else {
131                                         console.log("this shouldn't happen");
132                                 }
133                         } 
134                         var result = [];
135                         if (better_than_pivot.length > 0) {
136                                 result = partition_by_beat(games, better_than_pivot);
137                         }
138                         result.push(equal);  // Obviously can't be partitioned further.
139                         if (worse_than_pivot.length > 0) {
140                                 result = result.concat(partition_by_beat(games, worse_than_pivot));
141                         }
142                         return result;
143                 }
144         }
145
146         // No usable pivot was found, so the graph is inherently
147         // disconnected, and we cannot partition it.
148         return [teams];
149 }
150
151 // Takes in an array, gives every element a rank starting with 1, and returns.
152 rank = function(games, teams, start_rank, tiebreakers) {
153         if (teams.length <= 1) {
154                 // Only one team, so trivial.
155                 teams[0].rank = start_rank;
156                 return teams;
157         }
158
159         // Rule #0: Partition the teams by score.
160         var score_parts = partition(teams, function(a, b) { return b.pts - a.pts });
161         if (score_parts.length > 1) {
162                 return subrank_partitions(games, score_parts, start_rank, tiebreakers);
163         }
164
165         // Rule #1: Head-to-head wins.
166         var beat_parts = partition_by_beat(games, teams);
167         if (beat_parts.length > 1) {
168                 tiebreakers.push(explain_tiebreaker(beat_parts, 'head-to-head'));
169                 return subrank_partitions(games, beat_parts, start_rank, tiebreakers);
170         }
171
172         // Rule #2: Number of games played (fewer is better).
173         // Actually the rule says “fewest losses”, but fewer games is equivalent
174         // as long as teams have the same amount of points and ties don't exist.
175         var nplayed_parts = partition(teams, function(a, b) { return a.nplayed - b.nplayed });
176         if (nplayed_parts.length > 1) {
177                 tiebreakers.push(explain_tiebreaker(nplayed_parts, 'fewer losses'));
178                 return subrank_partitions(games, nplayed_parts, start_rank, tiebreakers);
179         }
180
181         // Rule #3: Head-to-head goal difference. 
182         var teams_to_idx = make_teams_to_idx(teams);
183         for (var i = 0; i < teams.length; i++) {
184                 teams[i].h2h_gd = 0;
185                 teams[i].h2h_goals = 0;
186         }
187         for (i = 0; i < games.length; ++i) {
188                 var idx1 = teams_to_idx[games[i].name1];
189                 var idx2 = teams_to_idx[games[i].name2];
190                 if (idx1 !== undefined && idx2 !== undefined) {
191                         teams[idx1].h2h_gd += games[i].score1;
192                         teams[idx1].h2h_gd -= games[i].score2;
193                         teams[idx2].h2h_gd += games[i].score2;
194                         teams[idx2].h2h_gd -= games[i].score1;
195
196                         teams[idx1].h2h_goals += games[i].score1;
197                         teams[idx2].h2h_goals += games[i].score2;
198                 }
199         }
200         var h2h_gd_parts = partition(teams, function(a, b) { return b.h2h_gd - a.h2h_gd });
201         if (h2h_gd_parts.length > 1) {
202                 tiebreakers.push(explain_tiebreaker(h2h_gd_parts, 'head-to-head goal difference'));
203                 return subrank_partitions(games, h2h_gd_parts, start_rank, tiebreakers);
204         }
205
206         // Rule #4: Global goal difference. (Well, not strictly, but good enough.)
207         var gd_parts = partition(teams, function(a, b) { return b.gd - a.gd });
208         if (gd_parts.length > 1) {
209                 tiebreakers.push(explain_tiebreaker(gd_parts, 'overall goal difference'));
210                 return subrank_partitions(games, gd_parts, start_rank, tiebreakers);
211         }
212
213         // Rule #5: Head-to-head scored goals.
214         var h2h_goals_parts = partition(teams, function(a, b) { return b.h2h_goals - a.h2h_goals });
215         if (h2h_goals_parts.length > 1) {
216                 tiebreakers.push(explain_tiebreaker(h2h_goals_parts, 'head-to-head scored goals'));
217                 return subrank_partitions(games, h2h_goals_parts, start_rank, tiebreakers);
218         }
219
220         // Rule #6: Overall scored goals. (Same caveat as #4.)
221         var goals_parts = partition(teams, function(a, b) { return b.goals - a.goals });
222         if (goals_parts.length > 1) {
223                 tiebreakers.push(explain_tiebreaker(goals_parts, 'scored goals'));
224                 return subrank_partitions(games, goals_parts, start_rank, tiebreakers);
225         }
226
227         // OK, it's a tie. Give them all the same rank.
228         var result = [];
229         for (var i = 0; i < teams.length; ++i) {
230                 result.push(teams[i]);
231                 result[i].rank = start_rank;
232         }
233         return result; 
234 }; 
235
236 parse_teams_from_spreadsheet = function(response) {
237         var teams = [];
238         for (var i = 2; response.values[i].length >= 1; ++i) {
239                 teams.push({
240                         "name": response.values[i][0],
241                         "mediumname": response.values[i][1],
242                         "shortname": response.values[i][2],
243                         "nplayed": 0,
244                         "gd": 0,
245                         "pts": 0,
246                         "goals": 0
247                 });
248         }
249         return teams;
250 };
251
252 parse_games_from_spreadsheet = function(response, group_name, include_unplayed) {
253         var games = [];
254         for (var i = 12; response.values[i] !== undefined && response.values[i].length >= 1; ++i) {
255                 if ((response.values[i][2] && response.values[i][3]) || include_unplayed) {
256                         games.push({
257                                 "name1": response.values[i][0],
258                                 "name2": response.values[i][1],
259                                 "score1": parseInt(response.values[i][2]),
260                                 "score2": parseInt(response.values[i][3]),
261                                 "streamtime": response.values[i][7],
262                                 "group_name": group_name
263                         });
264                 }
265         }
266         return games;
267 };
268
269 var display_group = function(response, group_name)
270 {
271         var teams = parse_teams_from_spreadsheet(response);
272         var games = parse_games_from_spreadsheet(response, group_name, false);
273         display_group_parsed(teams, games, group_name);
274 };
275
276 var display_group_parsed = function(teams, games, group_name)
277 {
278         var teams_to_idx = make_teams_to_idx(teams);
279         for (i = 0; i < games.length; ++i) {
280                 var idx1 = teams_to_idx[games[i].name1];
281                 var idx2 = teams_to_idx[games[i].name2];
282                 if (games[i].score1 === undefined || games[i].score2 === undefined ||
283                     idx1 === undefined || idx2 === undefined ||
284                     games[i].score1 == games[i].score2) {
285                         continue;
286                 }
287                 ++teams[idx1].nplayed;
288                 ++teams[idx2].nplayed;
289                 teams[idx1].goals += games[i].score1;
290                 teams[idx2].goals += games[i].score2;
291                 teams[idx1].gd += games[i].score1;
292                 teams[idx2].gd += games[i].score2;
293                 teams[idx1].gd -= games[i].score2;
294                 teams[idx2].gd -= games[i].score1;
295                 if (games[i].score1 > games[i].score2) {
296                         teams[idx1].pts += 2;
297                 } else {
298                         teams[idx2].pts += 2;
299                 }
300         }
301
302         tiebreakers = [];
303         teams = rank(games, teams, 1, tiebreakers);
304
305         var carousel = document.getElementById('carousel');
306         clear_carousel(carousel);
307
308         addheading(carousel, 5, "Current standings, TrønDisk 2017<br />" + group_name);
309         var tr = document.createElement("tr");
310         tr.className = "subfooter";
311         addth(tr, "rank", "");
312         addth(tr, "team", "");
313         addth(tr, "nplayed", "P");
314         addth(tr, "gd", "GD");
315         addth(tr, "pts", "Pts");
316         carousel.appendChild(tr);
317
318         var row_num = 2;
319         for (i = 0; i < teams.length; ++i) {
320                 var tr = document.createElement("tr");
321
322                 addth(tr, "rank", teams[i].rank);
323                 addtd(tr, "team", teams[i].name);
324                 addtd(tr, "nplayed", teams[i].nplayed);
325                 addtd(tr, "gd", teams[i].gd.toString().replace(/-/, '−'));
326                 addtd(tr, "pts", teams[i].pts);
327
328                 carousel.appendChild(tr);
329         }
330
331         if (tiebreakers.length > 0) {
332                 var tie_tr = document.createElement("tr");
333                 tie_tr.className = "footer";
334                 var td = document.createElement("td");
335                 td.appendChild(document.createTextNode("Tiebreaks applied: " + tiebreakers.join(', ')));
336                 td.setAttribute("colspan", "5");
337                 tie_tr.appendChild(td);
338                 carousel.appendChild(tie_tr);
339         }
340
341         var footer_tr = document.createElement("tr");
342         footer_tr.className = "footer";
343         var td = document.createElement("td");
344         td.appendChild(document.createTextNode("www.trondheimfrisbeeklubb.no | #trøndisk"));
345         td.setAttribute("colspan", "5");
346         footer_tr.appendChild(td);
347         carousel.appendChild(footer_tr);
348
349         fade_in_rows(carousel);
350
351         carousel.style.display = 'table';
352 };
353
354 var fade_in_rows = function(table)
355 {
356         var trs = table.getElementsByTagName("tr");
357         for (var i = 1; i < trs.length; ++i) {  // The header already has its own fade-in.
358                 if (trs[i].className === "footer") {
359                         trs[i].style = "-webkit-animation: fade-in 1.0s ease; -webkit-animation-delay: " + (0.25 * i) + "s; -webkit-animation-fill-mode: both;";
360                 } else {
361                         trs[i].style = "-webkit-animation: fade-in 2.0s ease; -webkit-animation-delay: " + (0.25 * i) + "s; -webkit-animation-fill-mode: both;";
362                 }
363         }
364 };
365
366 var fade_out_rows = function(table)
367 {
368         var trs = table.getElementsByTagName("tr");
369         for (var i = 0; i < trs.length; ++i) {
370                 if (trs[i].className === "footer") {
371                         trs[i].style = "-webkit-animation: fade-out 1.0s ease; -webkit-animation-delay: " + (0.125 * i) + "s; -webkit-animation-fill-mode: both;";
372                 } else {
373                         trs[i].style = "-webkit-animation: fade-out 1.0s ease; -webkit-animation-delay: " + (0.125 * i) + "s; -webkit-animation-fill-mode: both;";
374                 }
375         }
376 };
377
378 var clear_carousel = function(table)
379 {
380         while (table.childNodes.length > 0) {
381                 table.removeChild(table.firstChild);
382         }
383 };
384
385 // Stream schedule
386 var display_stream_schedule = function(response, group_name) {
387         var teams = parse_teams_from_spreadsheet(response);
388         var games = parse_games_from_spreadsheet(response, group_name, true);
389         display_stream_schedule_parsed(teams, games);
390 };
391
392 var display_stream_schedule_parsed = function(teams, games) {
393         var teams_to_idx = make_teams_to_idx(teams);
394         games = games.filter(function(game) { return game.streamtime !== undefined && game.streamtime.match(/[0-9]+:[0-9]+/) != null; });
395         games.sort(function(a, b) {
396                 var m1 = a.streamtime.match(/([0-9]+):([0-9]+)/);
397                 var m2 = b.streamtime.match(/([0-9]+):([0-9]+)/);
398                 return (m1[1] * 60 + m1[2]) - (m2[1] * 60 + m2[2]);
399         });
400
401         // Pick out a reasonable place to start the list. We'll show the last
402         // completed match and start from there.
403         var max_list_len = 7;
404         var start_idx = games.length - 1;
405         for (var i = 0; i < games.length; ++i) {
406                 if (isNaN(games[i].score1) || isNaN(games[i].score2) &&
407                     games[i].score1 === games[i].score2) {
408                         start_idx = i;
409                         break;
410                 }
411         }
412         if (start_idx > 0) start_idx--;
413         if (games.length >= max_list_len) {
414                 start_idx = Math.min(start_idx, games.length - max_list_len);
415         }
416         
417         var carousel = document.getElementById('carousel');
418         clear_carousel(carousel);
419         addheading(carousel, 3, "Stream schedule, TrønDisk 2017<br />Saturday");
420
421         var row_num = 0;
422         for (i = start_idx; i < games.length && row_num < max_list_len; ++i) {
423                 var tr = document.createElement("tr");
424
425                 var name1 = teams[teams_to_idx[games[i].name1]].mediumname;
426                 var name2 = teams[teams_to_idx[games[i].name2]].mediumname;
427
428                 addtd(tr, "matchup", name1 + "–" + name2);
429                 addtd(tr, "group", games[i].group_name);
430
431                 if (!isNaN(games[i].score1) && !isNaN(games[i].score2) &&
432                     games[i].score1 !== games[i].score2) {
433                         addtd(tr, "streamtime", games[i].score1 + "–" + games[i].score2);
434                 } else {
435                         addth(tr, "streamtime", games[i].streamtime);
436                 }
437
438                 row_num++;
439                 carousel.appendChild(tr);
440         }
441
442         fade_in_rows(carousel);
443
444         carousel.style.display = 'table';
445 };
446
447 var get_group = function(group_name, cb)
448 {
449         var req = new XMLHttpRequest();
450         req.onload = function(e) {
451                 cb(JSON.parse(req.responseText), group_name);
452         };
453         req.open('GET', 'https://sheets.googleapis.com/v4/spreadsheets/1CwRHQtpokVMGTPJu2FYYG-6rnG7OfISIcEHwBfXh-Y4/values/\'' + group_name + '\'!A1:H25?key=AIzaSyAuP9yQn8g0bSay6r_RpGtpFeIbwprH1TU');
454         req.send();
455 };
456
457 var showgroup = function(group_name)
458 {
459         get_group(group_name, display_group);
460 };
461
462 var carousel_timeout = null;
463
464 var hidetable = function()
465 {
466         fade_out_rows(document.getElementById('carousel'));
467 };
468
469 var showschedule = function()
470 {
471         var teams = [];
472         var games = [];
473         var num_left = 5;
474
475         var cb = function(response, group_name) {
476                 teams = teams.concat(parse_teams_from_spreadsheet(response));
477                 games = games.concat(parse_games_from_spreadsheet(response, group_name, true));
478                 if (--num_left == 0) {
479                         display_stream_schedule_parsed(teams, games);
480                 }
481         };
482
483         get_group('Group A', cb);
484         get_group('Group B', cb);
485         get_group('Semifinals', cb);
486         get_group('Bronze final', cb);
487         get_group('Final', cb);
488 };
489
490 var do_series = function(series)
491 {
492         do_series_internal(series, 0);
493 };
494
495 var do_series_internal = function(series, idx)
496 {
497         (series[idx][1])();
498         if (idx + 1 < series.length) {
499                 carousel_timeout = setTimeout(function() { do_series_internal(series, idx + 1); }, series[idx][0]);
500         }
501 };
502
503 var showcarousel = function()
504 {
505         var teams_per_group = [];
506         var games_per_group = [];
507         var combined_teams = [];
508         var combined_games = [];
509         var num_left = 5;
510
511         var cb = function(response, group_name) {
512                 var teams = parse_teams_from_spreadsheet(response);
513                 var games = parse_games_from_spreadsheet(response, group_name, true);
514                 teams_per_group[group_name] = teams;
515                 games_per_group[group_name] = games;
516
517                 combined_teams = combined_teams.concat(teams);
518                 combined_games = combined_games.concat(games);
519                 if (--num_left == 0) {
520                         do_series([
521                                 [ 13000, function() { display_group_parsed(teams_per_group['Group A'], games_per_group['Group A'], 'Group A'); } ],
522                                 [ 2000, function() { hidetable(); } ],
523                                 [ 13000, function() { display_group_parsed(teams_per_group['Group B'], games_per_group['Group B'], 'Group B'); } ],
524                                 [ 2000, function() { hidetable(); } ],
525                                 [ 13000, function() { display_stream_schedule_parsed(combined_teams, combined_games); } ],
526                                 [ 2000, function() { hidetable(); } ]
527                         ]);
528                 }
529         };
530
531         get_group('Group A', cb);
532         get_group('Group B', cb);
533         get_group('Semifinals', cb);
534         get_group('Bronze final', cb);
535         get_group('Final', cb);
536 };
537
538 var stopcarousel = function()
539 {
540         hidetable();
541         if (carousel_timeout !== null) {
542                 clearTimeout(carousel_timeout);
543                 carousel_timeout = null;
544         }
545 };
546