// No frameworks, no compilers, no npm, just JavaScript. :-)
let global_json;
-let global_filters = [];
+let global_filters = {};
+let next_filterset_id = 2; // Arbitrary IDs are fine as long as they never collide.
addEventListener('hashchange', () => { process_matches(global_json, global_filters); });
addEventListener('click', possibly_close_menu);
element.appendChild(svg);
}
-function process_matches(json, filters) {
+function calc_stats(json, filters) {
let players = {};
for (const player of json['players']) {
players[player['player_id']] = {
}
}
}
+ return players;
+}
+function process_matches(json, filtersets) {
let chosen_category = get_chosen_category();
write_main_menu(chosen_category);
- let rows = [];
- if (chosen_category === 'general') {
- rows = make_table_general(players);
- } else if (chosen_category === 'offense') {
- rows = make_table_offense(players);
- } else if (chosen_category === 'defense') {
- rows = make_table_defense(players);
- } else if (chosen_category === 'playing_time') {
- rows = make_table_playing_time(players);
- } else if (chosen_category === 'per_point') {
- rows = make_table_per_point(players);
- }
- document.getElementById('stats').replaceChildren(...rows);
+ let filterset_values = Object.values(filtersets);
+ if (filterset_values.length === 0) {
+ filterset_values = [[]];
+ }
+
+ let rowsets = [];
+ for (const filter of filterset_values) {
+ let players = calc_stats(json, filter);
+ let rows = [];
+ if (chosen_category === 'general') {
+ rows = make_table_general(players);
+ } else if (chosen_category === 'offense') {
+ rows = make_table_offense(players);
+ } else if (chosen_category === 'defense') {
+ rows = make_table_defense(players);
+ } else if (chosen_category === 'playing_time') {
+ rows = make_table_playing_time(players);
+ } else if (chosen_category === 'per_point') {
+ rows = make_table_per_point(players);
+ }
+ rowsets.push(rows);
+ }
+
+ let merged_rows = [];
+ if (filterset_values.length > 1) {
+ for (let i = 0; i < rowsets.length; ++i) {
+ let marker = make_filter_marker(filterset_values[i]);
+
+ // Make filter header.
+ let tr = rowsets[i][0];
+ let th = document.createElement('th');
+ th.textContent = '';
+ tr.insertBefore(th, tr.firstChild);
+
+ for (let j = 1; j < rowsets[i].length; ++j) {
+ let tr = rowsets[i][j];
+
+ // Remove the name for cleanness.
+ if (i != 0) {
+ tr.firstChild.nextSibling.textContent = '';
+ }
+
+ if (i != 0) {
+ tr.style.borderTop = '0px';
+ }
+ if (i != rowsets.length - 1) {
+ tr.style.borderBottom = '0px';
+ }
+
+ // Make filter marker.
+ let td = document.createElement('td');
+ td.textContent = marker;
+ td.classList.add('filtermarker');
+ tr.insertBefore(td, tr.firstChild);
+ }
+ }
+
+ for (let i = 0; i < rowsets[0].length; ++i) {
+ for (let j = 0; j < rowsets.length; ++j) {
+ merged_rows.push(rowsets[j][i]);
+ if (i === 0) break; // Don't merge the headings.
+ }
+ }
+ } else {
+ merged_rows = rowsets[0];
+ }
+ document.getElementById('stats').replaceChildren(...merged_rows);
}
function get_chosen_category() {
return rows;
}
-function open_filter_menu() {
+function open_filter_menu(click_to_add_div) {
document.getElementById('filter-submenu').style.display = 'none';
+ let filter_div = click_to_add_div.parentElement;
+ let filter_id = filter_div.dataset.filterId;
let menu = document.getElementById('filter-add-menu');
+ menu.parentElement.removeChild(menu);
+ filter_div.appendChild(menu);
menu.style.display = 'block';
menu.replaceChildren();
// Place the menu directly under the “click to add” label;
// we don't anchor it since that label will move around
// and the menu shouldn't.
- let rect = document.getElementById('filter-click-to-add').getBoundingClientRect();
+ let rect = click_to_add_div.getBoundingClientRect();
menu.style.left = rect.left + 'px';
menu.style.top = (rect.bottom + 10) + 'px';
- add_menu_item(global_filters, menu, 0, 'match', 'Match (any)');
- add_menu_item(global_filters, menu, 1, 'player_any', 'Player on field (any)');
- add_menu_item(global_filters, menu, 2, 'player_all', 'Player on field (all)');
- add_menu_item(global_filters, menu, 3, 'formation_offense', 'Offense played (any)');
- add_menu_item(global_filters, menu, 4, 'formation_defense', 'Defense played (any)');
- add_menu_item(global_filters, menu, 5, 'starting_on', 'Starting on');
- add_menu_item(global_filters, menu, 6, 'gender_ratio', 'Gender ratio');
+ let filterset = global_filters[filter_id];
+ if (filterset === undefined) {
+ global_filters[filter_id] = filterset = [];
+ }
+
+ add_menu_item(filter_div, filterset, menu, 0, 'match', 'Match (any)');
+ add_menu_item(filter_div, filterset, menu, 1, 'player_any', 'Player on field (any)');
+ add_menu_item(filter_div, filterset, menu, 2, 'player_all', 'Player on field (all)');
+ add_menu_item(filter_div, filterset, menu, 3, 'formation_offense', 'Offense played (any)');
+ add_menu_item(filter_div, filterset, menu, 4, 'formation_defense', 'Defense played (any)');
+ add_menu_item(filter_div, filterset, menu, 5, 'starting_on', 'Starting on');
+ add_menu_item(filter_div, filterset, menu, 6, 'gender_ratio', 'Gender ratio');
}
-function add_menu_item(filterset, menu, menu_idx, filter_type, title) {
+function add_menu_item(filter_div, filterset, menu, menu_idx, filter_type, title) {
let item = document.createElement('div');
item.classList.add('option');
item.appendChild(document.createTextNode(title));
menu.appendChild(item);
- item.addEventListener('click', (e) => { show_submenu(filterset, menu_idx, null, filter_type); });
+ item.addEventListener('click', (e) => { show_submenu(filter_div, filterset, menu_idx, null, filter_type); });
}
function find_all_ratios(json)
return ratios;
}
-function show_submenu(filterset, menu_idx, pill, filter_type) {
+function show_submenu(filter_div, filterset, menu_idx, pill, filter_type) {
let submenu = document.getElementById('filter-submenu');
+
+ // Move to the same place as the top-level menu.
+ submenu.parentElement.removeChild(submenu);
+ document.getElementById('filter-add-menu').parentElement.appendChild(submenu);
+
let subitems = [];
const filter = find_filter(filterset, filter_type);
if (filter !== null && filter.elements.has(choice.id)) {
check.setAttribute('checked', 'checked');
}
- check.addEventListener('change', (e) => { checkbox_changed(filterset, e, filter_type, choice.id); });
+ check.addEventListener('change', (e) => { checkbox_changed(filter_div, filterset, e, filter_type, choice.id); });
subitem.appendChild(check);
subitem.appendChild(document.createTextNode(choice.title));
arr.length = j;
}
-function checkbox_changed(filterset, e, filter_type, id) {
+function add_new_filterset() {
+ let template = document.querySelector('.filter'); // First one is fine.
+ let div = template.cloneNode(true);
+ let add_menu = div.querySelector('#filter-add-menu');
+ if (add_menu !== null) {
+ div.removeChild(add_menu);
+ }
+ let submenu = div.querySelector('#filter-submenu');
+ if (submenu !== null) {
+ div.removeChild(submenu);
+ }
+ div.querySelector('.filters').replaceChildren();
+ div.dataset.filterId = next_filterset_id++;
+ template.parentElement.appendChild(div);
+}
+
+function try_gc_filter_menus(cheap) {
+ let empties = [];
+ let divs = [];
+ for (const filter_div of document.querySelectorAll('.filter')) {
+ let id = filter_div.dataset.filterId;
+ divs.push(filter_div);
+ empties.push(global_filters[id] === undefined || global_filters[id].length === 0);
+ }
+ let last_div = divs[empties.length - 1];
+ if (cheap) {
+ // See if we have two empty filter lists at the bottom of the list;
+ // if so, we can remove one without it looking funny in the UI.
+ // If not, we'll have to wait until closing the menu.
+ // (The menu is positioned at the second-last one, so we can
+ // remove the last one without issue.)
+ if (empties.length >= 2 && empties[empties.length - 2] && empties[empties.length - 1]) {
+ delete global_filters[last_div.dataset.filterId];
+ last_div.parentElement.removeChild(last_div);
+ }
+ } else {
+ // This is a different situation from try_cheap_gc(), where we should
+ // remove the one _not_ last. We might need to move the menu to the last one,
+ // though, so it doesn't get lost.
+ for (let i = 0; i < empties.length - 1; ++i) {
+ if (!empties[i]) {
+ continue;
+ }
+ let div = divs[i];
+ delete global_filters[div.dataset.filterId];
+ let add_menu = div.querySelector('#filter-add-menu');
+ if (add_menu !== null) {
+ div.removeChild(add_menu);
+ last_div.appendChild(add_menu);
+ }
+ let submenu = div.querySelector('#filter-submenu');
+ if (submenu !== null) {
+ div.removeChild(submenu);
+ last_div.appendChild(submenu);
+ }
+ div.parentElement.removeChild(div);
+ }
+ }
+}
+
+function checkbox_changed(filter_div, filterset, e, filter_type, id) {
let filter = find_filter(filterset, filter_type);
+ let pills_div = filter_div.querySelector('.filters');
if (e.target.checked) {
+ // See if we must create a new empty filterset (since this went from
+ // empty to non-empty).
+ if (filterset.length === 0) {
+ add_new_filterset();
+ }
+
// See if we must add a new filter to the list.
if (filter === null) {
filter = {
'type': filter_type,
'elements': new Set([ id ]),
};
- filter.pill = make_filter_pill(filterset, filter);
+ filter.pill = make_filter_pill(filter_div, filterset, filter);
filterset.push(filter);
- document.getElementById('filters').appendChild(filter.pill);
+ pills_div.appendChild(filter.pill);
} else {
filter.elements.add(id);
- let new_pill = make_filter_pill(filterset, filter);
- document.getElementById('filters').replaceChild(new_pill, filter.pill);
+ let new_pill = make_filter_pill(filter_div, filterset, filter);
+ pills_div.replaceChild(new_pill, filter.pill);
filter.pill = new_pill;
}
} else {
filter.elements.delete(id);
if (filter.elements.size === 0) {
- document.getElementById('filters').removeChild(filter.pill);
+ pills_div.removeChild(filter.pill);
inplace_filter(filterset, f => f !== filter);
+
+ if (filterset.length == 0) {
+ try_gc_filter_menus(true);
+ }
} else {
- let new_pill = make_filter_pill(filterset, filter);
- document.getElementById('filters').replaceChild(new_pill, filter.pill);
+ let new_pill = make_filter_pill(filter_div, filterset, filter);
+ pills_div.replaceChild(new_pill, filter.pill);
filter.pill = new_pill;
}
}
process_matches(global_json, global_filters);
}
-function make_filter_pill(filterset, filter) {
+function make_filter_pill(filter_div, filterset, filter) {
let pill = document.createElement('div');
pill.classList.add('filter-pill');
let text;
if (!first) {
text += '; ';
}
- text += name;
+ text += name; // FIXME
first = false;
}
}
let text_node = document.createElement('span');
text_node.innerText = text;
- text_node.addEventListener('click', (e) => show_submenu(filterset, null, pill, filter.type));
+ text_node.addEventListener('click', (e) => show_submenu(filter_div, filterset, null, pill, filter.type));
pill.appendChild(text_node);
pill.appendChild(document.createTextNode(' '));
delete_node.innerText = '✖';
delete_node.addEventListener('click', (e) => {
// Delete this filter entirely.
- document.getElementById('filters').removeChild(pill);
+ pill.parentElement.removeChild(pill);
inplace_filter(filterset, f => f !== filter);
+ if (filterset.length == 0) {
+ try_gc_filter_menus(false);
+ }
process_matches(global_json, global_filters);
let add_menu = document.getElementById('filter-add-menu');
return pill;
}
+function make_filter_marker(filterset) {
+ let text = '';
+ for (const filter of filterset) {
+ if (text !== '') {
+ text += ',';
+ }
+ if (filter.type === 'match') {
+ let all_names = [];
+ for (const match of global_json['matches']) {
+ all_names.push(match['description']);
+ }
+ let common_prefix = find_common_prefix_of_all(all_names);
+
+ let sorted_match_id = Array.from(filter.elements).sort((a, b) => a - b);
+ for (const match_id of sorted_match_id) {
+ let desc = find_match(match_id)['description'];
+ if (common_prefix === null) {
+ text += desc.substr(0, 3);
+ } else {
+ text += desc.substr(common_prefix.length, 3);
+ }
+ }
+ } else if (filter.type === 'player_any' || filter.type === 'player_all') {
+ let sorted_players = Array.from(filter.elements).sort((a, b) => player_pos(a) - player_pos(b));
+ for (const player_id of sorted_players) {
+ text += find_player(player_id)['name'].substr(0, 3);
+ }
+ } else if (filter.type === 'formation_offense' || filter.type === 'formation_defense') {
+ let sorted_formation_id = Array.from(filter.elements).sort((a, b) => a - b);
+ for (const formation_id of sorted_formation_id) {
+ text += find_formation(formation_id)['name'].substr(0, 3);
+ }
+ } else if (filter.type === 'starting_on') {
+ if (filter.elements.has(false) && filter.elements.has(true)) {
+ // Nothing.
+ } else if (filter.elements.has(false)) {
+ text += 'O';
+ } else {
+ text += 'D';
+ }
+ } else if (filter.type === 'gender_ratio') {
+ let first = true;
+ for (const name of Array.from(filter.elements).sort()) {
+ if (!first) {
+ text += '; ';
+ }
+ text += name.replaceAll(' ', '').substr(0, 2); // 4 F, 3M -> 4 F.
+ first = false;
+ }
+ }
+ }
+ return text;
+}
+
function find_common_prefix(a, b) {
let ret = '';
for (let i = 0; i < Math.min(a.length, b.length); ++i) {
}
function possibly_close_menu(e) {
- if (e.target.closest('#filter-click-to-add') === null &&
+ if (e.target.closest('.filter-click-to-add') === null &&
e.target.closest('#filter-add-menu') === null &&
e.target.closest('#filter-submenu') === null &&
e.target.closest('.filter-pill') === null) {
let add_submenu = document.getElementById('filter-submenu');
add_menu.style.display = 'none';
add_submenu.style.display = 'none';
+ try_gc_filter_menus(false);
}
}
projects / pkanalytics / commitdiff