Add some styling.

diff --git a/ultimate.css b/ultimate.css
new file mode 100644 (file)
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 af051b27b8f7966c050fcee8f3671febb857b3d6..97a4787f636c899d2066afd1305ba5d2be739a44 100644 (file)
--- 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);