From: Steinar H. Gunderson Date: Sat, 20 May 2023 17:34:16 +0000 (+0200) Subject: Add some styling. X-Git-Url: https://git.sesse.net/?a=commitdiff_plain;h=1da3a9fdcf37765feb36f878de69a72174ff9009;p=pkanalytics Add some styling. --- diff --git a/ultimate.css b/ultimate.css new file mode 100644 index 0000000..cecfafd --- /dev/null +++ b/ultimate.css @@ -0,0 +1,62 @@ +:root { + font-family: sans-serif; + background-color: white; + color: #111; +} +#mainmenu { + text-transform: uppercase; + color: #3366dd; + font-weight: bold; + padding-top: 10px; + padding-bottom: 10px; + margin-bottom: 20px; + font-size: 90%; + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} +#mainmenu span, #mainmenu a { + padding-left: 20px; + padding-right: 20px; + padding-bottom: 9px; +} +#mainmenu span { + border-bottom: 3px solid #3366dd; +} +#mainmenu a { + color: rgba(0, 0, 0, 0.6); + text-decoration: none; +} +table { + border-collapse: collapse; +} +tr:has(th) { + background-color: rgba(0, 0, 0, 0.05); +} +tr { + border-top: 1px solid #ddd; + border-bottom: 1px solid #ddd; +} +th, td { + margin-left: 0; + margin-right: 0; + padding-left: 3px; + padding-right: 3px; + line-height: 2em; +} +th { + padding-left: 15px; + padding-right: 15px; +} +td { + white-space: nowrap; +} +td.num { /* Surrounded by pad. */ + text-align: right; + max-width: content-width; +} +td:not(.pad) { + width: 1px; /* Causes pad to stretch. */ +} +td.name { + padding-right: 20px; +} diff --git a/ultimate.js b/ultimate.js index af051b2..97a4787 100644 --- a/ultimate.js +++ b/ultimate.js @@ -33,7 +33,25 @@ function take_off_field(player, t, live_since) { function add_cell(tr, element_type, text) { let element = document.createElement(element_type); element.textContent = text; + if (element_type === 'th') { + element.setAttribute('colspan', '3'); + } tr.appendChild(element); + return element; +} + +function add_3cell(tr, text, cls) { + let p1 = add_cell(tr, 'td', ''); + let element = add_cell(tr, 'td', text); + let p2 = add_cell(tr, 'td', ''); + + p1.classList.add('pad'); + p2.classList.add('pad'); + if (cls === undefined) { + element.classList.add('num'); + } else { + element.classList.add(cls); + } } function process_matches(json) { @@ -339,7 +357,9 @@ function get_chosen_category() { function write_main_menu(chosen_category) { let elems = []; if (chosen_category === 'general') { - elems.push(document.createTextNode('General')); + let span = document.createElement('span'); + span.innerText = 'General'; + elems.push(span); } else { let a = document.createElement('a'); a.appendChild(document.createTextNode('General')); @@ -347,9 +367,10 @@ function write_main_menu(chosen_category) { elems.push(a); } - elems.push(document.createTextNode(' | ')); if (chosen_category === 'offense') { - elems.push(document.createTextNode('Offense')); + let span = document.createElement('span'); + span.innerText = 'Offense'; + elems.push(span); } else { let a = document.createElement('a'); a.appendChild(document.createTextNode('Offense')); @@ -357,9 +378,10 @@ function write_main_menu(chosen_category) { elems.push(a); } - elems.push(document.createTextNode(' | ')); if (chosen_category === 'defense') { - elems.push(document.createTextNode('Defense')); + let span = document.createElement('span'); + span.innerText = 'Defense'; + elems.push(span); } else { let a = document.createElement('a'); a.appendChild(document.createTextNode('Defense')); @@ -367,9 +389,10 @@ function write_main_menu(chosen_category) { elems.push(a); } - elems.push(document.createTextNode(' | ')); if (chosen_category === 'playing_time') { - elems.push(document.createTextNode('Playing time')); + let span = document.createElement('span'); + span.innerText = 'Playing time'; + elems.push(span); } else { let a = document.createElement('a'); a.appendChild(document.createTextNode('Playing time')); @@ -377,9 +400,10 @@ function write_main_menu(chosen_category) { elems.push(a); } - elems.push(document.createTextNode(' | ')); if (chosen_category === 'per_point') { - elems.push(document.createTextNode('Per point')); + let span = document.createElement('span'); + span.innerText = 'Per point'; + elems.push(span); } else { let a = document.createElement('a'); a.appendChild(document.createTextNode('Per point')); @@ -410,12 +434,12 @@ function make_table_general(players) { let soft_pm = p.offensive_soft_plus + p.defensive_soft_plus - p.offensive_soft_minus - p.defensive_soft_minus; let o_efficiency = (p.offensive_points_won / p.offensive_points_completed) * 2 - 1; let d_efficiency = (p.defensive_points_won / p.defensive_points_completed) * 2 - 1; - add_cell(row, 'td', p.name); // TODO: number? - add_cell(row, 'td', pm > 0 ? ('+' + pm) : pm); - add_cell(row, 'td', soft_pm > 0 ? ('+' + soft_pm) : soft_pm); - add_cell(row, 'td', p.offensive_points_completed > 0 ? o_efficiency.toFixed(2) : 'N/A'); - add_cell(row, 'td', p.defensive_points_completed > 0 ? d_efficiency.toFixed(2) : 'N/A'); - add_cell(row, 'td', p.points_played); + add_3cell(row, p.name, 'name'); // TODO: number? + add_3cell(row, pm > 0 ? ('+' + pm) : pm); + add_3cell(row, soft_pm > 0 ? ('+' + soft_pm) : soft_pm); + add_3cell(row, p.offensive_points_completed > 0 ? o_efficiency.toFixed(2) : 'N/A'); + add_3cell(row, p.defensive_points_completed > 0 ? d_efficiency.toFixed(2) : 'N/A'); + add_3cell(row, p.points_played); rows.push(row); } @@ -424,12 +448,12 @@ function make_table_general(players) { let o_efficiency = (globals.offensive_points_won / globals.offensive_points_completed) * 2 - 1; let d_efficiency = (globals.defensive_points_won / globals.defensive_points_completed) * 2 - 1; let row = document.createElement('tr'); - add_cell(row, 'td', ''); - add_cell(row, 'td', ''); - add_cell(row, 'td', ''); - add_cell(row, 'td', globals.offensive_points_completed > 0 ? o_efficiency.toFixed(2) : 'N/A'); - add_cell(row, 'td', globals.defensive_points_completed > 0 ? d_efficiency.toFixed(2) : 'N/A'); - add_cell(row, 'td', globals.points_played); + add_3cell(row, ''); + add_3cell(row, ''); + add_3cell(row, ''); + add_3cell(row, globals.offensive_points_completed > 0 ? o_efficiency.toFixed(2) : 'N/A'); + add_3cell(row, globals.defensive_points_completed > 0 ? d_efficiency.toFixed(2) : 'N/A'); + add_3cell(row, globals.points_played); rows.push(row); return rows; @@ -463,26 +487,26 @@ function make_table_offense(players) { let catch_ok = 100 * (p.catches / (p.catches + p.drops)); let row = document.createElement('tr'); - add_cell(row, 'td', p.name); // TODO: number? - add_cell(row, 'td', p.goals); - add_cell(row, 'td', p.assists); - add_cell(row, 'td', p.hockey_assists); - add_cell(row, 'td', p.num_throws); - add_cell(row, 'td', p.throwaways); + add_3cell(row, p.name, 'name'); // TODO: number? + add_3cell(row, p.goals); + add_3cell(row, p.assists); + add_3cell(row, p.hockey_assists); + add_3cell(row, p.num_throws); + add_3cell(row, p.throwaways); if (p.num_throws > 0) { - add_cell(row, 'td', throw_ok.toFixed(0) + '%'); + add_3cell(row, throw_ok.toFixed(0) + '%'); } else { - add_cell(row, 'td', 'N/A'); + add_3cell(row, 'N/A'); } - add_cell(row, 'td', p.catches); - add_cell(row, 'td', p.drops); + add_3cell(row, p.catches); + add_3cell(row, p.drops); if (p.catches + p.drops > 0) { - add_cell(row, 'td', catch_ok.toFixed(0) + '%'); + add_3cell(row, catch_ok.toFixed(0) + '%'); } else { - add_cell(row, 'td', 'N/A'); + add_3cell(row, 'N/A'); } - add_cell(row, 'td', '+' + p.offensive_soft_plus); - add_cell(row, 'td', '-' + p.offensive_soft_minus); + add_3cell(row, '+' + p.offensive_soft_plus); + add_3cell(row, '-' + p.offensive_soft_minus); rows.push(row); num_throws += p.num_throws; @@ -496,18 +520,18 @@ function make_table_offense(players) { let catch_ok = 100 * (catches / (catches + drops)); let row = document.createElement('tr'); - add_cell(row, 'td', ''); - add_cell(row, 'td', ''); - add_cell(row, 'td', ''); - add_cell(row, 'td', ''); - add_cell(row, 'td', num_throws); - add_cell(row, 'td', throwaways); - add_cell(row, 'td', throw_ok.toFixed(0) + '%'); - add_cell(row, 'td', catches); - add_cell(row, 'td', drops); - add_cell(row, 'td', catch_ok.toFixed(0) + '%'); - add_cell(row, 'td', ''); - add_cell(row, 'td', ''); + add_3cell(row, ''); + add_3cell(row, ''); + add_3cell(row, ''); + add_3cell(row, ''); + add_3cell(row, num_throws); + add_3cell(row, throwaways); + add_3cell(row, throw_ok.toFixed(0) + '%'); + add_3cell(row, catches); + add_3cell(row, drops); + add_3cell(row, catch_ok.toFixed(0) + '%'); + add_3cell(row, ''); + add_3cell(row, ''); rows.push(row); return rows; @@ -535,21 +559,21 @@ function make_table_defense(players) { let oob_pct = 100 * p.oob_pulls / p.pulls; let row = document.createElement('tr'); - add_cell(row, 'td', p.name); // TODO: number? - add_cell(row, 'td', p.defenses); - add_cell(row, 'td', p.pulls); + add_3cell(row, p.name, 'name'); // TODO: number? + add_3cell(row, p.defenses); + add_3cell(row, p.pulls); if (p.pulls === 0) { - add_cell(row, 'td', 'N/A'); + add_3cell(row, 'N/A'); } else { - add_cell(row, 'td', p.oob_pulls + ' (' + oob_pct.toFixed(0) + '%)'); + add_3cell(row, p.oob_pulls + ' (' + oob_pct.toFixed(0) + '%)'); } if (p.pulls > p.oob_pulls) { - add_cell(row, 'td', avg_time.toFixed(1) + ' sec'); + add_3cell(row, avg_time.toFixed(1) + ' sec'); } else { - add_cell(row, 'td', 'N/A'); + add_3cell(row, 'N/A'); } - add_cell(row, 'td', '+' + p.defensive_soft_plus); - add_cell(row, 'td', '-' + p.defensive_soft_minus); + add_3cell(row, '+' + p.defensive_soft_plus); + add_3cell(row, '-' + p.defensive_soft_minus); rows.push(row); } return rows; @@ -571,24 +595,24 @@ function make_table_playing_time(players) { for (const [q,p] of Object.entries(players)) { if (q === 'globals') continue; let row = document.createElement('tr'); - add_cell(row, 'td', p.name); // TODO: number? - add_cell(row, 'td', p.points_played); - add_cell(row, 'td', Math.floor(p.playing_time_ms / 60000) + ' min'); - add_cell(row, 'td', Math.floor(p.field_time_ms / 60000) + ' min'); - add_cell(row, 'td', p.offensive_points_completed); - add_cell(row, 'td', p.defensive_points_completed); + add_3cell(row, p.name, 'name'); // TODO: number? + add_3cell(row, p.points_played); + add_3cell(row, Math.floor(p.playing_time_ms / 60000) + ' min'); + add_3cell(row, Math.floor(p.field_time_ms / 60000) + ' min'); + add_3cell(row, p.offensive_points_completed); + add_3cell(row, p.defensive_points_completed); rows.push(row); } // Globals. let globals = players['globals']; let row = document.createElement('tr'); - add_cell(row, 'td', ''); - add_cell(row, 'td', globals.points_played); - add_cell(row, 'td', Math.floor(globals.playing_time_ms / 60000) + ' min'); - add_cell(row, 'td', Math.floor(globals.field_time_ms / 60000) + ' min'); - add_cell(row, 'td', globals.offensive_points_completed); - add_cell(row, 'td', globals.defensive_points_completed); + add_3cell(row, ''); + add_3cell(row, globals.points_played); + add_3cell(row, Math.floor(globals.playing_time_ms / 60000) + ' min'); + add_3cell(row, Math.floor(globals.field_time_ms / 60000) + ' min'); + add_3cell(row, globals.offensive_points_completed); + add_3cell(row, globals.defensive_points_completed); rows.push(row); return rows; @@ -619,23 +643,23 @@ function make_table_per_point(players) { for (const [q,p] of Object.entries(players)) { if (q === 'globals') continue; let row = document.createElement('tr'); - add_cell(row, 'td', p.name); // TODO: number? + add_3cell(row, p.name, 'name'); // TODO: number? if (p.points_played > 0) { - add_cell(row, 'td', p.goals == 0 ? 0 : (p.goals / p.points_played).toFixed(2)); - add_cell(row, 'td', p.assists == 0 ? 0 : (p.assists / p.points_played).toFixed(2)); - add_cell(row, 'td', p.hockey_assists == 0 ? 0 : (p.hockey_assists / p.points_played).toFixed(2)); - add_cell(row, 'td', p.defenses == 0 ? 0 : (p.defenses / p.points_played).toFixed(2)); - add_cell(row, 'td', p.throwaways == 0 ? 0 : (p.throwaways / p.points_played).toFixed(2)); - add_cell(row, 'td', p.drops == 0 ? 0 : (p.drops / p.points_played).toFixed(2)); - add_cell(row, 'td', p.touches == 0 ? 0 : (p.touches / p.points_played).toFixed(2)); + add_3cell(row, p.goals == 0 ? 0 : (p.goals / p.points_played).toFixed(2)); + add_3cell(row, p.assists == 0 ? 0 : (p.assists / p.points_played).toFixed(2)); + add_3cell(row, p.hockey_assists == 0 ? 0 : (p.hockey_assists / p.points_played).toFixed(2)); + add_3cell(row, p.defenses == 0 ? 0 : (p.defenses / p.points_played).toFixed(2)); + add_3cell(row, p.throwaways == 0 ? 0 : (p.throwaways / p.points_played).toFixed(2)); + add_3cell(row, p.drops == 0 ? 0 : (p.drops / p.points_played).toFixed(2)); + add_3cell(row, p.touches == 0 ? 0 : (p.touches / p.points_played).toFixed(2)); } else { - add_cell(row, 'td', 'N/A'); - add_cell(row, 'td', 'N/A'); - add_cell(row, 'td', 'N/A'); - add_cell(row, 'td', 'N/A'); - add_cell(row, 'td', 'N/A'); - add_cell(row, 'td', 'N/A'); - add_cell(row, 'td', 'N/A'); + add_3cell(row, 'N/A'); + add_3cell(row, 'N/A'); + add_3cell(row, 'N/A'); + add_3cell(row, 'N/A'); + add_3cell(row, 'N/A'); + add_3cell(row, 'N/A'); + add_3cell(row, 'N/A'); } rows.push(row); @@ -651,23 +675,23 @@ function make_table_per_point(players) { // Globals. let globals = players['globals']; let row = document.createElement('tr'); - add_cell(row, 'td', ''); + add_3cell(row, ''); if (globals.points_played > 0) { - add_cell(row, 'td', goals == 0 ? 0 : (goals / globals.points_played).toFixed(2)); - add_cell(row, 'td', assists == 0 ? 0 : (assists / globals.points_played).toFixed(2)); - add_cell(row, 'td', hockey_assists == 0 ? 0 : (hockey_assists / globals.points_played).toFixed(2)); - add_cell(row, 'td', defenses == 0 ? 0 : (defenses / globals.points_played).toFixed(2)); - add_cell(row, 'td', throwaways == 0 ? 0 : (throwaways / globals.points_played).toFixed(2)); - add_cell(row, 'td', drops == 0 ? 0 : (drops / globals.points_played).toFixed(2)); - add_cell(row, 'td', touches == 0 ? 0 : (touches / globals.points_played).toFixed(2)); + add_3cell(row, goals == 0 ? 0 : (goals / globals.points_played).toFixed(2)); + add_3cell(row, assists == 0 ? 0 : (assists / globals.points_played).toFixed(2)); + add_3cell(row, hockey_assists == 0 ? 0 : (hockey_assists / globals.points_played).toFixed(2)); + add_3cell(row, defenses == 0 ? 0 : (defenses / globals.points_played).toFixed(2)); + add_3cell(row, throwaways == 0 ? 0 : (throwaways / globals.points_played).toFixed(2)); + add_3cell(row, drops == 0 ? 0 : (drops / globals.points_played).toFixed(2)); + add_3cell(row, touches == 0 ? 0 : (touches / globals.points_played).toFixed(2)); } else { - add_cell(row, 'td', 'N/A'); - add_cell(row, 'td', 'N/A'); - add_cell(row, 'td', 'N/A'); - add_cell(row, 'td', 'N/A'); - add_cell(row, 'td', 'N/A'); - add_cell(row, 'td', 'N/A'); - add_cell(row, 'td', 'N/A'); + add_3cell(row, 'N/A'); + add_3cell(row, 'N/A'); + add_3cell(row, 'N/A'); + add_3cell(row, 'N/A'); + add_3cell(row, 'N/A'); + add_3cell(row, 'N/A'); + add_3cell(row, 'N/A'); } rows.push(row);