3 // No frameworks, no compilers, no npm, just JavaScript. :-)
7 addEventListener('hashchange', () => { process_matches(global_json); });
9 .then(response => response.json())
10 .then(response => { global_json = response; process_matches(global_json); });
12 function attribute_player_time(player, to, from) {
13 if (player.on_field_since > from) {
14 // Player came in while play happened (without a stoppage!?).
15 player.playing_time_ms += to - player.on_field_since;
17 player.playing_time_ms += to - from;
21 function take_off_field(player, t, live_since) {
22 if (live_since === null) {
23 // Play isn't live, so nothing to do.
25 attribute_player_time(player, t, live_since);
27 if (player.on_field_since !== null) { // Just a safeguard; out without in should never happen.
28 player.field_time_ms += t - player.on_field_since;
30 player.on_field_since = null;
33 function add_cell(tr, element_type, text) {
34 let element = document.createElement(element_type);
35 element.textContent = text;
36 if (element_type === 'th') {
37 element.setAttribute('colspan', '3');
39 tr.appendChild(element);
43 function add_3cell(tr, text, cls) {
44 let p1 = add_cell(tr, 'td', '');
45 let element = add_cell(tr, 'td', text);
46 let p2 = add_cell(tr, 'td', '');
48 p1.classList.add('pad');
49 p2.classList.add('pad');
50 if (cls === undefined) {
51 element.classList.add('num');
53 element.classList.add(cls);
58 function add_3cell_ci(tr, ci) {
61 return; // FIXME: some SVG padding needed
65 if (ci.format === 'percentage') {
66 text = (100 * ci.val).toFixed(0) + '%';
68 text = ci.val.toFixed(2);
70 let element = add_3cell(tr, text);
71 let to_x = (val) => { return width * (val - ci.min) / (ci.max - ci.min); };
76 let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
77 if (ci.inverted === true) {
78 svg.classList.add('invertedci');
80 svg.classList.add('ci');
82 svg.setAttribute('width', width);
83 svg.setAttribute('height', height);
85 // The good (green) and red (bad) ranges.
86 let s0 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
87 s0.classList.add('range');
88 s0.classList.add('s0');
89 s0.setAttribute('width', to_x(ci.desired));
90 s0.setAttribute('height', height);
91 s0.setAttribute('x', '0');
93 let s1 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
94 s1.classList.add('range');
95 s1.classList.add('s1');
96 s1.setAttribute('width', width - to_x(ci.desired));
97 s1.setAttribute('height', height);
98 s1.setAttribute('x', to_x(ci.desired));
101 let bar = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
102 bar.classList.add('bar');
103 bar.setAttribute('width', to_x(ci.upper_ci) - to_x(ci.lower_ci));
104 bar.setAttribute('height', height / 3);
105 bar.setAttribute('x', to_x(ci.lower_ci));
106 bar.setAttribute('y', height / 3);
108 // Marker line for average.
109 let marker = document.createElementNS('http://www.w3.org/2000/svg', 'line');
110 marker.classList.add('marker');
111 marker.setAttribute('x1', to_x(ci.val));
112 marker.setAttribute('x2', to_x(ci.val));
113 marker.setAttribute('y1', height / 6);
114 marker.setAttribute('y2', height * 5 / 6);
118 svg.appendChild(bar);
119 svg.appendChild(marker);
121 element.appendChild(svg);
124 function process_matches(json) {
126 for (const player of json['players']) {
127 players[player['player_id']] = {
128 'name': player['name'],
129 'number': player['number'],
143 'playing_time_ms': 0,
147 'offensive_points_completed': 0,
148 'offensive_points_won': 0,
149 'defensive_points_completed': 0,
150 'defensive_points_won': 0,
152 'offensive_soft_plus': 0,
153 'offensive_soft_minus': 0,
154 'defensive_soft_plus': 0,
155 'defensive_soft_minus': 0,
162 'last_point_seen': null,
163 'on_field_since': null,
168 players['globals'] = {
170 'playing_time_ms': 0,
173 'offensive_points_completed': 0,
174 'offensive_points_won': 0,
175 'defensive_points_completed': 0,
176 'defensive_points_won': 0,
178 let globals = players['globals'];
180 for (const match of json['matches']) {
184 let prev_handler = null;
185 let live_since = null;
188 let pull_started = null;
189 let last_pull_was_ours = null; // Effectively whether we're playing an O or D point (not affected by turnovers).
191 let game_started = null;
192 let last_goal = null;
193 for (const [q,p] of Object.entries(players)) {
194 p.on_field_since = null;
195 p.last_point_seen = null;
197 for (const e of match['events']) {
199 let type = e['type'];
200 let p = players[e['player']];
203 if (type === 'in' && p.on_field_since === null) {
204 p.on_field_since = t;
205 } else if (type === 'out') {
206 take_off_field(p, t, live_since);
209 // Liveness management
210 if (type === 'pull' || type === 'their_pull' || type === 'restart') {
212 } else if (type === 'catch' && last_pull_was_ours === null) {
213 // Someone forgot to add the pull, so we'll need to wing it.
214 console.log('Missing pull on ' + our_score + '\u2013' + their_score + ' in ' + match['description'] + '; pretending to have one.');
216 last_pull_was_ours = !offense;
217 } else if (type === 'goal' || type === 'their_goal' || type === 'stoppage') {
218 for (const [q,p] of Object.entries(players)) {
219 if (p.on_field_since === null) {
222 if (type !== 'stoppage' && p.last_point_seen !== point_num) {
223 // In case the player did nothing this point,
224 // not even subbing in.
225 p.last_point_seen = point_num;
228 attribute_player_time(p, t, live_since);
230 if (type !== 'stoppage') {
231 if (last_pull_was_ours === true) { // D point.
232 ++p.defensive_points_completed;
233 if (type === 'goal') {
234 ++p.defensive_points_won;
236 } else if (last_pull_was_ours === false) { // O point.
237 ++p.offensive_points_completed;
238 if (type === 'goal') {
239 ++p.offensive_points_won;
245 if (type !== 'stoppage') {
247 ++globals.points_played;
248 if (last_pull_was_ours === true) { // D point.
249 ++globals.defensive_points_completed;
250 if (type === 'goal') {
251 ++globals.defensive_points_won;
253 } else if (last_pull_was_ours === false) { // O point.
254 ++globals.offensive_points_completed;
255 if (type === 'goal') {
256 ++globals.offensive_points_won;
260 if (live_since !== null) {
261 globals.playing_time_ms += t - live_since;
268 if (type === 'goal') {
270 } else if (type === 'their_goal') {
274 // Point count management
275 if (p !== undefined && type !== 'out' && p.last_point_seen !== point_num) {
276 p.last_point_seen = point_num;
279 if (type === 'goal' || type === 'their_goal') {
283 if (type !== 'out' && game_started === null) {
288 if (type === 'pull') {
289 puller = e['player'];
292 } else if (type === 'in' || type === 'out' || type === 'stoppage' || type === 'restart' || type === 'unknown' || type === 'set_defense' || type === 'set_offense') {
293 // No effect on pull.
294 } else if (type === 'pull_landed' && puller !== null) {
295 players[puller].pull_times.push(t - pull_started);
296 } else if (type === 'pull_oob' && puller !== null) {
297 ++players[puller].oob_pulls;
299 // Not pulling (if there was one, we never recorded its outcome, but still count it).
300 puller = pull_started = null;
303 // Offense/defense management (TODO: use it for actual counting)
304 if (type === 'set_defense' || type === 'goal' || type === 'throwaway' || type === 'drop') {
306 } else if (type === 'set_offense' || type === 'their_goal' || type === 'their_throwaway' || type === 'defense' || type === 'interception') {
309 if (type === 'pull') {
310 last_pull_was_ours = true;
311 } else if (type === 'their_pull') {
312 last_pull_was_ours = false;
313 } else if (type === 'set_offense' && last_pull_was_ours === null) {
314 // set_offense could either be “changed to offense for some reason
315 // we could not express”, or “we started in the middle of a point,
316 // and we are offense”. We assume that if we already saw the pull,
317 // it's the former, and if not, it's the latter; thus, the === null
318 // test above. (It could also be “we set offense before the pull,
319 // so that we get the right button enabled”, in which case it will
320 // be overwritten by the next pull/their_pull event anyway.)
321 last_pull_was_ours = false;
322 } else if (type === 'set_defense' && last_pull_was_ours === null) {
324 last_pull_was_ours = true;
325 } else if (type === 'goal' || type === 'their_goal') {
326 last_pull_was_ours = null;
330 if (type === 'catch' || type === 'goal') {
331 if (handler !== null) {
332 ++players[handler].num_throws;
337 if (type === 'goal') {
338 if (prev_handler !== null) {
339 ++players[prev_handler].hockey_assists;
341 if (handler !== null) {
342 ++players[handler].assists;
345 handler = prev_handler = null;
347 // Update hold history.
348 prev_handler = handler;
349 handler = e['player'];
351 } else if (type === 'throwaway') {
354 handler = prev_handler = null;
355 } else if (type === 'drop') {
357 handler = prev_handler = null;
358 } else if (type === 'defense') {
360 } else if (type === 'interception') {
365 handler = e['player'];
366 } else if (type === 'offensive_soft_plus' || type === 'offensive_soft_minus' || type === 'defensive_soft_plus' || type === 'defensive_soft_minus') {
368 } else if (type !== 'in' && type !== 'out' && type !== 'pull' &&
369 type !== 'their_goal' && type !== 'stoppage' && type !== 'restart' && type !== 'unknown' &&
370 type !== 'set_defense' && type !== 'goal' && type !== 'throwaway' &&
371 type !== 'drop' && type !== 'set_offense' && type !== 'their_goal' &&
372 type !== 'pull' && type !== 'pull_landed' && type !== 'pull_oob' && type !== 'their_pull' &&
373 type !== 'their_throwaway' && type !== 'defense' && type !== 'interception') {
374 console.log("Unknown event:", e);
378 // Add field time for all players still left at match end.
379 for (const [q,p] of Object.entries(players)) {
380 if (p.on_field_since !== null && last_goal !== null) {
381 p.field_time_ms += last_goal - p.on_field_since;
384 if (game_started !== null && last_goal !== null) {
385 globals.field_time_ms += last_goal - game_started;
387 if (live_since !== null && last_goal !== null) {
388 globals.playing_time_ms += last_goal - live_since;
392 let chosen_category = get_chosen_category();
393 write_main_menu(chosen_category);
396 if (chosen_category === 'general') {
397 rows = make_table_general(players);
398 } else if (chosen_category === 'offense') {
399 rows = make_table_offense(players);
400 } else if (chosen_category === 'defense') {
401 rows = make_table_defense(players);
402 } else if (chosen_category === 'playing_time') {
403 rows = make_table_playing_time(players);
404 } else if (chosen_category === 'per_point') {
405 rows = make_table_per_point(players);
407 document.getElementById('stats').replaceChildren(...rows);
410 function get_chosen_category() {
411 if (window.location.hash === '#offense') {
413 } else if (window.location.hash === '#defense') {
415 } else if (window.location.hash === '#playing_time') {
416 return 'playing_time';
417 } else if (window.location.hash === '#per_point') {
424 function write_main_menu(chosen_category) {
426 if (chosen_category === 'general') {
427 let span = document.createElement('span');
428 span.innerText = 'General';
431 let a = document.createElement('a');
432 a.appendChild(document.createTextNode('General'));
433 a.setAttribute('href', '#general');
437 if (chosen_category === 'offense') {
438 let span = document.createElement('span');
439 span.innerText = 'Offense';
442 let a = document.createElement('a');
443 a.appendChild(document.createTextNode('Offense'));
444 a.setAttribute('href', '#offense');
448 if (chosen_category === 'defense') {
449 let span = document.createElement('span');
450 span.innerText = 'Defense';
453 let a = document.createElement('a');
454 a.appendChild(document.createTextNode('Defense'));
455 a.setAttribute('href', '#defense');
459 if (chosen_category === 'playing_time') {
460 let span = document.createElement('span');
461 span.innerText = 'Playing time';
464 let a = document.createElement('a');
465 a.appendChild(document.createTextNode('Playing time'));
466 a.setAttribute('href', '#playing_time');
470 if (chosen_category === 'per_point') {
471 let span = document.createElement('span');
472 span.innerText = 'Per point';
475 let a = document.createElement('a');
476 a.appendChild(document.createTextNode('Per point'));
477 a.setAttribute('href', '#per_point');
481 document.getElementById('mainmenu').replaceChildren(...elems);
484 // https://en.wikipedia.org/wiki/1.96#History
487 function make_binomial_ci(val, num, z) {
490 // https://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval#Wilson_score_interval
491 let low = (avg + z*z/(2*num) - z * Math.sqrt(avg * (1.0 - avg) / num + z*z/(4*num*num))) / (1 + z*z/num);
492 let high = (avg + z*z/(2*num) + z * Math.sqrt(avg * (1.0 - avg) / num + z*z/(4*num*num))) / (1 + z*z/num);
494 // Fix the signs so that we don't get -0.00.
495 low = Math.max(low, 0.0);
505 // These can only happen once per point, but you get -1 and +1
506 // instead of 0 and +1. After we rewrite to 0 and 1, it's a binomial,
507 // and then we can rewrite back.
508 function make_efficiency_ci(points_won, points_completed, z)
510 let ci = make_binomial_ci(points_won, points_completed, z);
511 ci.val = 2.0 * ci.val - 1.0;
512 ci.lower_ci = 2.0 * ci.lower_ci - 1.0;
513 ci.upper_ci = 2.0 * ci.upper_ci - 1.0;
516 ci.desired = 0.0; // Desired = positive efficiency.
520 // Ds, throwaways and drops can happen multiple times per point,
521 // so they are Poisson distributed.
523 // Modified Wald (recommended by http://www.ine.pt/revstat/pdf/rs120203.pdf
524 // since our rates are definitely below 2 per point).
525 function make_poisson_ci(val, num, z, inverted)
527 let low = (val == 0) ? 0.0 : ((val - 0.5) - Math.sqrt(val - 0.5)) / num;
528 let high = (val == 0) ? -Math.log(0.025) / num : ((val + 0.5) + Math.sqrt(val + 0.5)) / num;
530 // Fix the signs so that we don't get -0.00.
531 low = Math.max(low, 0.0);
533 // The display range of 0 to 0.25 is fairly arbitrary. So is the desired 0.05 per point.
542 'inverted': inverted,
546 function make_table_general(players) {
549 let header = document.createElement('tr');
550 add_cell(header, 'th', 'Player');
551 add_cell(header, 'th', '+/-');
552 add_cell(header, 'th', 'Soft +/-');
553 add_cell(header, 'th', 'O efficiency');
554 add_cell(header, 'th', 'D efficiency');
555 add_cell(header, 'th', 'Points played');
559 for (const [q,p] of Object.entries(players)) {
560 if (q === 'globals') continue;
561 let row = document.createElement('tr');
562 let pm = p.goals + p.assists + p.hockey_assists + p.defenses - p.throwaways - p.drops;
563 let soft_pm = p.offensive_soft_plus + p.defensive_soft_plus - p.offensive_soft_minus - p.defensive_soft_minus;
564 let o_efficiency = make_efficiency_ci(p.offensive_points_won, p.offensive_points_completed, z);
565 let d_efficiency = make_efficiency_ci(p.defensive_points_won, p.defensive_points_completed, z);
566 add_3cell(row, p.name, 'name'); // TODO: number?
567 add_3cell(row, pm > 0 ? ('+' + pm) : pm);
568 add_3cell(row, soft_pm > 0 ? ('+' + soft_pm) : soft_pm);
569 add_3cell_ci(row, o_efficiency);
570 add_3cell_ci(row, d_efficiency);
571 add_3cell(row, p.points_played);
576 let globals = players['globals'];
577 let o_efficiency = make_efficiency_ci(globals.offensive_points_won, globals.offensive_points_completed, z);
578 let d_efficiency = make_efficiency_ci(globals.defensive_points_won, globals.defensive_points_completed, z);
579 let row = document.createElement('tr');
583 add_3cell_ci(row, o_efficiency);
584 add_3cell_ci(row, d_efficiency);
585 add_3cell(row, globals.points_played);
591 function make_table_offense(players) {
594 let header = document.createElement('tr');
595 add_cell(header, 'th', 'Player');
596 add_cell(header, 'th', 'Goals');
597 add_cell(header, 'th', 'Assists');
598 add_cell(header, 'th', 'Hockey assists');
599 add_cell(header, 'th', 'Throws');
600 add_cell(header, 'th', 'Throwaways');
601 add_cell(header, 'th', '%OK');
602 add_cell(header, 'th', 'Catches');
603 add_cell(header, 'th', 'Drops');
604 add_cell(header, 'th', '%OK');
605 add_cell(header, 'th', 'Soft +/-');
613 for (const [q,p] of Object.entries(players)) {
614 if (q === 'globals') continue;
615 let throw_ok = make_binomial_ci(p.num_throws - p.throwaways, p.num_throws, z);
616 let catch_ok = make_binomial_ci(p.catches, p.catches + p.drops, z);
618 throw_ok.format = 'percentage';
619 catch_ok.format = 'percentage';
621 // Desire at least 90% percentage. Fairly arbitrary.
622 throw_ok.desired = 0.9;
623 catch_ok.desired = 0.9;
625 let row = document.createElement('tr');
626 add_3cell(row, p.name, 'name'); // TODO: number?
627 add_3cell(row, p.goals);
628 add_3cell(row, p.assists);
629 add_3cell(row, p.hockey_assists);
630 add_3cell(row, p.num_throws);
631 add_3cell(row, p.throwaways);
632 add_3cell_ci(row, throw_ok);
633 add_3cell(row, p.catches);
634 add_3cell(row, p.drops);
635 add_3cell_ci(row, catch_ok);
636 add_3cell(row, '+' + p.offensive_soft_plus);
637 add_3cell(row, '-' + p.offensive_soft_minus);
640 num_throws += p.num_throws;
641 throwaways += p.throwaways;
642 catches += p.catches;
647 let throw_ok = make_binomial_ci(num_throws - throwaways, num_throws, z);
648 let catch_ok = make_binomial_ci(catches, catches + drops, z);
649 throw_ok.format = 'percentage';
650 catch_ok.format = 'percentage';
651 throw_ok.desired = 0.9;
652 catch_ok.desired = 0.9;
654 let row = document.createElement('tr');
659 add_3cell(row, num_throws);
660 add_3cell(row, throwaways);
661 add_3cell_ci(row, throw_ok);
662 add_3cell(row, catches);
663 add_3cell(row, drops);
664 add_3cell_ci(row, catch_ok);
672 function make_table_defense(players) {
675 let header = document.createElement('tr');
676 add_cell(header, 'th', 'Player');
677 add_cell(header, 'th', 'Ds');
678 add_cell(header, 'th', 'Pulls');
679 add_cell(header, 'th', 'OOB pulls');
680 add_cell(header, 'th', 'Avg. hang time (IB)');
681 add_cell(header, 'th', 'Soft +/-');
684 for (const [q,p] of Object.entries(players)) {
685 if (q === 'globals') continue;
687 for (const t of p.pull_times) {
690 let avg_time = 1e-3 * sum_time / p.pulls;
691 let oob_pct = 100 * p.oob_pulls / p.pulls;
693 let row = document.createElement('tr');
694 add_3cell(row, p.name, 'name'); // TODO: number?
695 add_3cell(row, p.defenses);
696 add_3cell(row, p.pulls);
698 add_3cell(row, 'N/A');
700 add_3cell(row, p.oob_pulls + ' (' + oob_pct.toFixed(0) + '%)');
702 if (p.pulls > p.oob_pulls) {
703 add_3cell(row, avg_time.toFixed(1) + ' sec');
705 add_3cell(row, 'N/A');
707 add_3cell(row, '+' + p.defensive_soft_plus);
708 add_3cell(row, '-' + p.defensive_soft_minus);
714 function make_table_playing_time(players) {
717 let header = document.createElement('tr');
718 add_cell(header, 'th', 'Player');
719 add_cell(header, 'th', 'Points played');
720 add_cell(header, 'th', 'Time played');
721 add_cell(header, 'th', 'Time on field');
722 add_cell(header, 'th', 'O points');
723 add_cell(header, 'th', 'D points');
727 for (const [q,p] of Object.entries(players)) {
728 if (q === 'globals') continue;
729 let row = document.createElement('tr');
730 add_3cell(row, p.name, 'name'); // TODO: number?
731 add_3cell(row, p.points_played);
732 add_3cell(row, Math.floor(p.playing_time_ms / 60000) + ' min');
733 add_3cell(row, Math.floor(p.field_time_ms / 60000) + ' min');
734 add_3cell(row, p.offensive_points_completed);
735 add_3cell(row, p.defensive_points_completed);
740 let globals = players['globals'];
741 let row = document.createElement('tr');
743 add_3cell(row, globals.points_played);
744 add_3cell(row, Math.floor(globals.playing_time_ms / 60000) + ' min');
745 add_3cell(row, Math.floor(globals.field_time_ms / 60000) + ' min');
746 add_3cell(row, globals.offensive_points_completed);
747 add_3cell(row, globals.defensive_points_completed);
753 function make_table_per_point(players) {
756 let header = document.createElement('tr');
757 add_cell(header, 'th', 'Player');
758 add_cell(header, 'th', 'Goals');
759 add_cell(header, 'th', 'Assists');
760 add_cell(header, 'th', 'Hockey assists');
761 add_cell(header, 'th', 'Ds');
762 add_cell(header, 'th', 'Throwaways');
763 add_cell(header, 'th', 'Drops');
764 add_cell(header, 'th', 'Touches');
770 let hockey_assists = 0;
775 for (const [q,p] of Object.entries(players)) {
776 if (q === 'globals') continue;
778 // Can only happen once per point, so these are binomials.
779 let ci_goals = make_binomial_ci(p.goals, p.points_played, z);
780 let ci_assists = make_binomial_ci(p.assists, p.points_played, z);
781 let ci_hockey_assists = make_binomial_ci(p.hockey_assists, p.points_played, z);
782 // Arbitrarily desire at least 10% (not everybody can score or assist).
783 ci_goals.desired = 0.1;
784 ci_assists.desired = 0.1;
785 ci_hockey_assists.desired = 0.1;
787 let row = document.createElement('tr');
788 add_3cell(row, p.name, 'name'); // TODO: number?
789 add_3cell_ci(row, ci_goals);
790 add_3cell_ci(row, ci_assists);
791 add_3cell_ci(row, ci_hockey_assists);
792 add_3cell_ci(row, make_poisson_ci(p.defenses, p.points_played, z));
793 add_3cell_ci(row, make_poisson_ci(p.throwaways, p.points_played, z, true));
794 add_3cell_ci(row, make_poisson_ci(p.drops, p.points_played, z, true));
795 if (p.points_played > 0) {
796 add_3cell(row, p.touches == 0 ? 0 : (p.touches / p.points_played).toFixed(2));
798 add_3cell(row, 'N/A');
803 assists += p.assists;
804 hockey_assists += p.hockey_assists;
805 defenses += p.defenses;
806 throwaways += p.throwaways;
808 touches += p.touches;
812 let globals = players['globals'];
813 let row = document.createElement('tr');
815 if (globals.points_played > 0) {
816 add_3cell(row, goals == 0 ? 0 : (goals / globals.points_played).toFixed(2));
817 add_3cell(row, assists == 0 ? 0 : (assists / globals.points_played).toFixed(2));
818 add_3cell(row, hockey_assists == 0 ? 0 : (hockey_assists / globals.points_played).toFixed(2));
819 add_3cell(row, defenses == 0 ? 0 : (defenses / globals.points_played).toFixed(2));
820 add_3cell(row, throwaways == 0 ? 0 : (throwaways / globals.points_played).toFixed(2));
821 add_3cell(row, drops == 0 ? 0 : (drops / globals.points_played).toFixed(2));
822 add_3cell(row, touches == 0 ? 0 : (touches / globals.points_played).toFixed(2));
824 add_3cell(row, 'N/A');
825 add_3cell(row, 'N/A');
826 add_3cell(row, 'N/A');
827 add_3cell(row, 'N/A');
828 add_3cell(row, 'N/A');
829 add_3cell(row, 'N/A');
830 add_3cell(row, 'N/A');