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) {
62 return; // FIXME: some SVG padding needed
64 let element = add_3cell(tr, ci.val.toFixed(2));
65 let to_x = (val) => { return width * (val - ci.min) / (ci.max - ci.min); };
70 let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
71 svg.classList.add('ci');
72 svg.setAttribute('width', width);
73 svg.setAttribute('height', height);
75 // The good (green) and red (bad) ranges.
76 let s0 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
77 s0.classList.add('range');
78 s0.classList.add('s0');
79 s0.setAttribute('width', to_x(ci.desired));
80 s0.setAttribute('height', height);
81 s0.setAttribute('x', '0');
83 let s1 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
84 s1.classList.add('range');
85 s1.classList.add('s1');
86 s1.setAttribute('width', width - to_x(ci.desired));
87 s1.setAttribute('height', height);
88 s1.setAttribute('x', to_x(ci.desired));
91 let bar = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
92 bar.classList.add('bar');
93 bar.setAttribute('width', to_x(ci.upper_ci) - to_x(ci.lower_ci));
94 bar.setAttribute('height', height / 3);
95 bar.setAttribute('x', to_x(ci.lower_ci));
96 bar.setAttribute('y', height / 3);
98 // Marker line for average.
99 let marker = document.createElementNS('http://www.w3.org/2000/svg', 'line');
100 marker.classList.add('marker');
101 marker.setAttribute('x1', to_x(ci.val));
102 marker.setAttribute('x2', to_x(ci.val));
103 marker.setAttribute('y1', height / 6);
104 marker.setAttribute('y2', height * 5 / 6);
108 svg.appendChild(bar);
109 svg.appendChild(marker);
111 element.appendChild(svg);
114 function process_matches(json) {
116 for (const player of json['players']) {
117 players[player['player_id']] = {
118 'name': player['name'],
119 'number': player['number'],
133 'playing_time_ms': 0,
137 'offensive_points_completed': 0,
138 'offensive_points_won': 0,
139 'defensive_points_completed': 0,
140 'defensive_points_won': 0,
142 'offensive_soft_plus': 0,
143 'offensive_soft_minus': 0,
144 'defensive_soft_plus': 0,
145 'defensive_soft_minus': 0,
152 'last_point_seen': null,
153 'on_field_since': null,
158 players['globals'] = {
160 'playing_time_ms': 0,
163 'offensive_points_completed': 0,
164 'offensive_points_won': 0,
165 'defensive_points_completed': 0,
166 'defensive_points_won': 0,
168 let globals = players['globals'];
170 for (const match of json['matches']) {
174 let prev_handler = null;
175 let live_since = null;
178 let pull_started = null;
179 let last_pull_was_ours = null; // Effectively whether we're playing an O or D point (not affected by turnovers).
181 let game_started = null;
182 let last_goal = null;
183 for (const [q,p] of Object.entries(players)) {
184 p.on_field_since = null;
185 p.last_point_seen = null;
187 for (const e of match['events']) {
189 let type = e['type'];
190 let p = players[e['player']];
193 if (type === 'in' && p.on_field_since === null) {
194 p.on_field_since = t;
195 } else if (type === 'out') {
196 take_off_field(p, t, live_since);
199 // Liveness management
200 if (type === 'pull' || type === 'their_pull' || type === 'restart') {
202 } else if (type === 'catch' && last_pull_was_ours === null) {
203 // Someone forgot to add the pull, so we'll need to wing it.
204 console.log('Missing pull on ' + our_score + '\u2013' + their_score + ' in ' + match['description'] + '; pretending to have one.');
206 last_pull_was_ours = !offense;
207 } else if (type === 'goal' || type === 'their_goal' || type === 'stoppage') {
208 for (const [q,p] of Object.entries(players)) {
209 if (p.on_field_since === null) {
212 if (type !== 'stoppage' && p.last_point_seen !== point_num) {
213 // In case the player did nothing this point,
214 // not even subbing in.
215 p.last_point_seen = point_num;
218 attribute_player_time(p, t, live_since);
220 if (type !== 'stoppage') {
221 if (last_pull_was_ours === true) { // D point.
222 ++p.defensive_points_completed;
223 if (type === 'goal') {
224 ++p.defensive_points_won;
226 } else if (last_pull_was_ours === false) { // O point.
227 ++p.offensive_points_completed;
228 if (type === 'goal') {
229 ++p.offensive_points_won;
235 if (type !== 'stoppage') {
237 ++globals.points_played;
238 if (last_pull_was_ours === true) { // D point.
239 ++globals.defensive_points_completed;
240 if (type === 'goal') {
241 ++globals.defensive_points_won;
243 } else if (last_pull_was_ours === false) { // O point.
244 ++globals.offensive_points_completed;
245 if (type === 'goal') {
246 ++globals.offensive_points_won;
250 if (live_since !== null) {
251 globals.playing_time_ms += t - live_since;
258 if (type === 'goal') {
260 } else if (type === 'their_goal') {
264 // Point count management
265 if (p !== undefined && type !== 'out' && p.last_point_seen !== point_num) {
266 p.last_point_seen = point_num;
269 if (type === 'goal' || type === 'their_goal') {
273 if (type !== 'out' && game_started === null) {
278 if (type === 'pull') {
279 puller = e['player'];
282 } else if (type === 'in' || type === 'out' || type === 'stoppage' || type === 'restart' || type === 'unknown' || type === 'set_defense' || type === 'set_offense') {
283 // No effect on pull.
284 } else if (type === 'pull_landed' && puller !== null) {
285 players[puller].pull_times.push(t - pull_started);
286 } else if (type === 'pull_oob' && puller !== null) {
287 ++players[puller].oob_pulls;
289 // Not pulling (if there was one, we never recorded its outcome, but still count it).
290 puller = pull_started = null;
293 // Offense/defense management (TODO: use it for actual counting)
294 if (type === 'set_defense' || type === 'goal' || type === 'throwaway' || type === 'drop') {
296 } else if (type === 'set_offense' || type === 'their_goal' || type === 'their_throwaway' || type === 'defense' || type === 'interception') {
299 if (type === 'pull') {
300 last_pull_was_ours = true;
301 } else if (type === 'their_pull') {
302 last_pull_was_ours = false;
303 } else if (type === 'set_offense' && last_pull_was_ours === null) {
304 // set_offense could either be “changed to offense for some reason
305 // we could not express”, or “we started in the middle of a point,
306 // and we are offense”. We assume that if we already saw the pull,
307 // it's the former, and if not, it's the latter; thus, the === null
308 // test above. (It could also be “we set offense before the pull,
309 // so that we get the right button enabled”, in which case it will
310 // be overwritten by the next pull/their_pull event anyway.)
311 last_pull_was_ours = false;
312 } else if (type === 'set_defense' && last_pull_was_ours === null) {
314 last_pull_was_ours = true;
315 } else if (type === 'goal' || type === 'their_goal') {
316 last_pull_was_ours = null;
320 if (type === 'catch' || type === 'goal') {
321 if (handler !== null) {
322 ++players[handler].num_throws;
327 if (type === 'goal') {
328 if (prev_handler !== null) {
329 ++players[prev_handler].hockey_assists;
331 if (handler !== null) {
332 ++players[handler].assists;
335 handler = prev_handler = null;
337 // Update hold history.
338 prev_handler = handler;
339 handler = e['player'];
341 } else if (type === 'throwaway') {
344 handler = prev_handler = null;
345 } else if (type === 'drop') {
347 handler = prev_handler = null;
348 } else if (type === 'defense') {
350 } else if (type === 'interception') {
355 handler = e['player'];
356 } else if (type === 'offensive_soft_plus' || type === 'offensive_soft_minus' || type === 'defensive_soft_plus' || type === 'defensive_soft_minus') {
358 } else if (type !== 'in' && type !== 'out' && type !== 'pull' &&
359 type !== 'their_goal' && type !== 'stoppage' && type !== 'restart' && type !== 'unknown' &&
360 type !== 'set_defense' && type !== 'goal' && type !== 'throwaway' &&
361 type !== 'drop' && type !== 'set_offense' && type !== 'their_goal' &&
362 type !== 'pull' && type !== 'pull_landed' && type !== 'pull_oob' && type !== 'their_pull' &&
363 type !== 'their_throwaway' && type !== 'defense' && type !== 'interception') {
364 console.log("Unknown event:", e);
368 // Add field time for all players still left at match end.
369 for (const [q,p] of Object.entries(players)) {
370 if (p.on_field_since !== null && last_goal !== null) {
371 p.field_time_ms += last_goal - p.on_field_since;
374 if (game_started !== null && last_goal !== null) {
375 globals.field_time_ms += last_goal - game_started;
377 if (live_since !== null && last_goal !== null) {
378 globals.playing_time_ms += last_goal - live_since;
382 let chosen_category = get_chosen_category();
383 write_main_menu(chosen_category);
386 if (chosen_category === 'general') {
387 rows = make_table_general(players);
388 } else if (chosen_category === 'offense') {
389 rows = make_table_offense(players);
390 } else if (chosen_category === 'defense') {
391 rows = make_table_defense(players);
392 } else if (chosen_category === 'playing_time') {
393 rows = make_table_playing_time(players);
394 } else if (chosen_category === 'per_point') {
395 rows = make_table_per_point(players);
397 document.getElementById('stats').replaceChildren(...rows);
400 function get_chosen_category() {
401 if (window.location.hash === '#offense') {
403 } else if (window.location.hash === '#defense') {
405 } else if (window.location.hash === '#playing_time') {
406 return 'playing_time';
407 } else if (window.location.hash === '#per_point') {
414 function write_main_menu(chosen_category) {
416 if (chosen_category === 'general') {
417 let span = document.createElement('span');
418 span.innerText = 'General';
421 let a = document.createElement('a');
422 a.appendChild(document.createTextNode('General'));
423 a.setAttribute('href', '#general');
427 if (chosen_category === 'offense') {
428 let span = document.createElement('span');
429 span.innerText = 'Offense';
432 let a = document.createElement('a');
433 a.appendChild(document.createTextNode('Offense'));
434 a.setAttribute('href', '#offense');
438 if (chosen_category === 'defense') {
439 let span = document.createElement('span');
440 span.innerText = 'Defense';
443 let a = document.createElement('a');
444 a.appendChild(document.createTextNode('Defense'));
445 a.setAttribute('href', '#defense');
449 if (chosen_category === 'playing_time') {
450 let span = document.createElement('span');
451 span.innerText = 'Playing time';
454 let a = document.createElement('a');
455 a.appendChild(document.createTextNode('Playing time'));
456 a.setAttribute('href', '#playing_time');
460 if (chosen_category === 'per_point') {
461 let span = document.createElement('span');
462 span.innerText = 'Per point';
465 let a = document.createElement('a');
466 a.appendChild(document.createTextNode('Per point'));
467 a.setAttribute('href', '#per_point');
471 document.getElementById('mainmenu').replaceChildren(...elems);
474 // https://en.wikipedia.org/wiki/1.96#History
477 function make_binomial_ci(val, num, z) {
480 // https://en.wikipedia.org/wiki/Binomial_proportion_confidence_interval#Wilson_score_interval
481 let low = (avg + z*z/(2*num) - z * Math.sqrt(avg * (1.0 - avg) / num + z*z/(4*num*num))) / (1 + z*z/num);
482 let high = (avg + z*z/(2*num) + z * Math.sqrt(avg * (1.0 - avg) / num + z*z/(4*num*num))) / (1 + z*z/num);
484 // Fix the signs so that we don't get -0.00.
485 low = Math.max(low, 0.0);
495 // These can only happen once per point, but you get -1 and +1
496 // instead of 0 and +1. After we rewrite to 0 and 1, it's a binomial,
497 // and then we can rewrite back.
498 function make_efficiency_ci(points_won, points_completed, z)
500 let ci = make_binomial_ci(points_won, points_completed, z);
501 ci.val = 2.0 * ci.val - 1.0;
502 ci.lower_ci = 2.0 * ci.lower_ci - 1.0;
503 ci.upper_ci = 2.0 * ci.upper_ci - 1.0;
506 ci.desired = 0.0; // Desired = positive efficiency.
510 function make_table_general(players) {
513 let header = document.createElement('tr');
514 add_cell(header, 'th', 'Player');
515 add_cell(header, 'th', '+/-');
516 add_cell(header, 'th', 'Soft +/-');
517 add_cell(header, 'th', 'O efficiency');
518 add_cell(header, 'th', 'D efficiency');
519 add_cell(header, 'th', 'Points played');
523 for (const [q,p] of Object.entries(players)) {
524 if (q === 'globals') continue;
525 let row = document.createElement('tr');
526 let pm = p.goals + p.assists + p.hockey_assists + p.defenses - p.throwaways - p.drops;
527 let soft_pm = p.offensive_soft_plus + p.defensive_soft_plus - p.offensive_soft_minus - p.defensive_soft_minus;
528 let o_efficiency = make_efficiency_ci(p.offensive_points_won, p.offensive_points_completed, z);
529 let d_efficiency = make_efficiency_ci(p.defensive_points_won, p.defensive_points_completed, z);
530 add_3cell(row, p.name, 'name'); // TODO: number?
531 add_3cell(row, pm > 0 ? ('+' + pm) : pm);
532 add_3cell(row, soft_pm > 0 ? ('+' + soft_pm) : soft_pm);
533 add_3cell_ci(row, o_efficiency);
534 add_3cell_ci(row, d_efficiency);
535 add_3cell(row, p.points_played);
540 let globals = players['globals'];
541 let o_efficiency = make_efficiency_ci(globals.offensive_points_won, globals.offensive_points_completed, z);
542 let d_efficiency = make_efficiency_ci(globals.defensive_points_won, globals.defensive_points_completed, z);
543 let row = document.createElement('tr');
547 add_3cell_ci(row, o_efficiency);
548 add_3cell_ci(row, d_efficiency);
549 add_3cell(row, globals.points_played);
555 function make_table_offense(players) {
558 let header = document.createElement('tr');
559 add_cell(header, 'th', 'Player');
560 add_cell(header, 'th', 'Goals');
561 add_cell(header, 'th', 'Assists');
562 add_cell(header, 'th', 'Hockey assists');
563 add_cell(header, 'th', 'Throws');
564 add_cell(header, 'th', 'Throwaways');
565 add_cell(header, 'th', '%OK');
566 add_cell(header, 'th', 'Catches');
567 add_cell(header, 'th', 'Drops');
568 add_cell(header, 'th', '%OK');
569 add_cell(header, 'th', 'Soft +/-');
577 for (const [q,p] of Object.entries(players)) {
578 if (q === 'globals') continue;
579 let throw_ok = 100 * (1 - p.throwaways / p.num_throws);
580 let catch_ok = 100 * (p.catches / (p.catches + p.drops));
582 let row = document.createElement('tr');
583 add_3cell(row, p.name, 'name'); // TODO: number?
584 add_3cell(row, p.goals);
585 add_3cell(row, p.assists);
586 add_3cell(row, p.hockey_assists);
587 add_3cell(row, p.num_throws);
588 add_3cell(row, p.throwaways);
589 if (p.num_throws > 0) {
590 add_3cell(row, throw_ok.toFixed(0) + '%');
592 add_3cell(row, 'N/A');
594 add_3cell(row, p.catches);
595 add_3cell(row, p.drops);
596 if (p.catches + p.drops > 0) {
597 add_3cell(row, catch_ok.toFixed(0) + '%');
599 add_3cell(row, 'N/A');
601 add_3cell(row, '+' + p.offensive_soft_plus);
602 add_3cell(row, '-' + p.offensive_soft_minus);
605 num_throws += p.num_throws;
606 throwaways += p.throwaways;
607 catches += p.catches;
612 let throw_ok = 100 * (1 - throwaways / num_throws);
613 let catch_ok = 100 * (catches / (catches + drops));
615 let row = document.createElement('tr');
620 add_3cell(row, num_throws);
621 add_3cell(row, throwaways);
622 add_3cell(row, throw_ok.toFixed(0) + '%');
623 add_3cell(row, catches);
624 add_3cell(row, drops);
625 add_3cell(row, catch_ok.toFixed(0) + '%');
633 function make_table_defense(players) {
636 let header = document.createElement('tr');
637 add_cell(header, 'th', 'Player');
638 add_cell(header, 'th', 'Ds');
639 add_cell(header, 'th', 'Pulls');
640 add_cell(header, 'th', 'OOB pulls');
641 add_cell(header, 'th', 'Avg. hang time (IB)');
642 add_cell(header, 'th', 'Soft +/-');
645 for (const [q,p] of Object.entries(players)) {
646 if (q === 'globals') continue;
648 for (const t of p.pull_times) {
651 let avg_time = 1e-3 * sum_time / p.pulls;
652 let oob_pct = 100 * p.oob_pulls / p.pulls;
654 let row = document.createElement('tr');
655 add_3cell(row, p.name, 'name'); // TODO: number?
656 add_3cell(row, p.defenses);
657 add_3cell(row, p.pulls);
659 add_3cell(row, 'N/A');
661 add_3cell(row, p.oob_pulls + ' (' + oob_pct.toFixed(0) + '%)');
663 if (p.pulls > p.oob_pulls) {
664 add_3cell(row, avg_time.toFixed(1) + ' sec');
666 add_3cell(row, 'N/A');
668 add_3cell(row, '+' + p.defensive_soft_plus);
669 add_3cell(row, '-' + p.defensive_soft_minus);
675 function make_table_playing_time(players) {
678 let header = document.createElement('tr');
679 add_cell(header, 'th', 'Player');
680 add_cell(header, 'th', 'Points played');
681 add_cell(header, 'th', 'Time played');
682 add_cell(header, 'th', 'Time on field');
683 add_cell(header, 'th', 'O points');
684 add_cell(header, 'th', 'D points');
688 for (const [q,p] of Object.entries(players)) {
689 if (q === 'globals') continue;
690 let row = document.createElement('tr');
691 add_3cell(row, p.name, 'name'); // TODO: number?
692 add_3cell(row, p.points_played);
693 add_3cell(row, Math.floor(p.playing_time_ms / 60000) + ' min');
694 add_3cell(row, Math.floor(p.field_time_ms / 60000) + ' min');
695 add_3cell(row, p.offensive_points_completed);
696 add_3cell(row, p.defensive_points_completed);
701 let globals = players['globals'];
702 let row = document.createElement('tr');
704 add_3cell(row, globals.points_played);
705 add_3cell(row, Math.floor(globals.playing_time_ms / 60000) + ' min');
706 add_3cell(row, Math.floor(globals.field_time_ms / 60000) + ' min');
707 add_3cell(row, globals.offensive_points_completed);
708 add_3cell(row, globals.defensive_points_completed);
714 function make_table_per_point(players) {
717 let header = document.createElement('tr');
718 add_cell(header, 'th', 'Player');
719 add_cell(header, 'th', 'Goals');
720 add_cell(header, 'th', 'Assists');
721 add_cell(header, 'th', 'Hockey assists');
722 add_cell(header, 'th', 'Ds');
723 add_cell(header, 'th', 'Throwaways');
724 add_cell(header, 'th', 'Drops');
725 add_cell(header, 'th', 'Touches');
731 let hockey_assists = 0;
736 for (const [q,p] of Object.entries(players)) {
737 if (q === 'globals') continue;
738 let row = document.createElement('tr');
739 add_3cell(row, p.name, 'name'); // TODO: number?
740 if (p.points_played > 0) {
741 add_3cell(row, p.goals == 0 ? 0 : (p.goals / p.points_played).toFixed(2));
742 add_3cell(row, p.assists == 0 ? 0 : (p.assists / p.points_played).toFixed(2));
743 add_3cell(row, p.hockey_assists == 0 ? 0 : (p.hockey_assists / p.points_played).toFixed(2));
744 add_3cell(row, p.defenses == 0 ? 0 : (p.defenses / p.points_played).toFixed(2));
745 add_3cell(row, p.throwaways == 0 ? 0 : (p.throwaways / p.points_played).toFixed(2));
746 add_3cell(row, p.drops == 0 ? 0 : (p.drops / p.points_played).toFixed(2));
747 add_3cell(row, p.touches == 0 ? 0 : (p.touches / p.points_played).toFixed(2));
749 add_3cell(row, 'N/A');
750 add_3cell(row, 'N/A');
751 add_3cell(row, 'N/A');
752 add_3cell(row, 'N/A');
753 add_3cell(row, 'N/A');
754 add_3cell(row, 'N/A');
755 add_3cell(row, 'N/A');
760 assists += p.assists;
761 hockey_assists += p.hockey_assists;
762 defenses += p.defenses;
763 throwaways += p.throwaways;
765 touches += p.touches;
769 let globals = players['globals'];
770 let row = document.createElement('tr');
772 if (globals.points_played > 0) {
773 add_3cell(row, goals == 0 ? 0 : (goals / globals.points_played).toFixed(2));
774 add_3cell(row, assists == 0 ? 0 : (assists / globals.points_played).toFixed(2));
775 add_3cell(row, hockey_assists == 0 ? 0 : (hockey_assists / globals.points_played).toFixed(2));
776 add_3cell(row, defenses == 0 ? 0 : (defenses / globals.points_played).toFixed(2));
777 add_3cell(row, throwaways == 0 ? 0 : (throwaways / globals.points_played).toFixed(2));
778 add_3cell(row, drops == 0 ? 0 : (drops / globals.points_played).toFixed(2));
779 add_3cell(row, touches == 0 ? 0 : (touches / globals.points_played).toFixed(2));
781 add_3cell(row, 'N/A');
782 add_3cell(row, 'N/A');
783 add_3cell(row, 'N/A');
784 add_3cell(row, 'N/A');
785 add_3cell(row, 'N/A');
786 add_3cell(row, 'N/A');
787 add_3cell(row, 'N/A');