X-Git-Url: https://git.sesse.net/?a=blobdiff_plain;f=carousel.js;h=28fa7ae5757c840ba3afb7f0be6a2c1f92a5edaf;hb=b19ea4d9a7c5e004d7f2c7b8d39ce02700cb7033;hp=fcf5cc5178862d82dc88ebfbd1db9e47686e0c0c;hpb=e6f6d97706538a174b9f3e0539ed68ca4d28cc71;p=ultimatescore diff --git a/carousel.js b/carousel.js index fcf5cc5..28fa7ae 100644 --- a/carousel.js +++ b/carousel.js @@ -1,5 +1,21 @@ 'use strict'; +function jsonclone(x) +{ + return JSON.parse(JSON.stringify(x)); +} + +// Log with deep clone, so that the browser will show the object at time of log, +// instead of what it looks like at time of view. +function dlog() +{ + let args = []; + for (const arg of arguments) { + args.push(jsonclone(arg)); + } + console.log(args); +} + function addheading(carousel, colspan, content) { let thead = document.createElement("thead"); @@ -10,24 +26,26 @@ function addheading(carousel, colspan, content) tr.appendChild(th); thead.appendChild(tr); carousel.appendChild(thead); -}; +} + function addtd(tr, className, content) { let td = document.createElement("td"); td.appendChild(document.createTextNode(content)); td.className = className; tr.appendChild(td); -}; +} + function addth(tr, className, content) { let th = document.createElement("th"); th.appendChild(document.createTextNode(content)); th.className = className; tr.appendChild(th); -}; +} -function subrank_partitions(games, parts, start_rank, tiebreakers) { +function subrank_partitions(games, parts, start_rank, tiebreakers, func) { let result = []; for (let i = 0; i < parts.length; ++i) { - let part = rank(games, parts[i], start_rank, tiebreakers); + let part = func(games, parts[i], start_rank, tiebreakers); for (let j = 0; j < part.length; ++j) { result.push(part[j]); } @@ -69,6 +87,8 @@ function make_teams_to_idx(teams) let teams_to_idx = []; for (let i = 0; i < teams.length; i++) { teams_to_idx[teams[i].name] = i; + teams_to_idx[teams[i].mediumname] = i; + teams_to_idx[teams[i].shortname] = i; } return teams_to_idx; } @@ -150,10 +170,11 @@ function rank(games, teams, start_rank, tiebreakers) { // Rule #0: Partition the teams by score. let score_parts = partition(teams, function(a, b) { return b.pts - a.pts }); if (score_parts.length > 1) { - return subrank_partitions(games, score_parts, start_rank, tiebreakers); + return subrank_partitions(games, score_parts, start_rank, tiebreakers, rank); } // Rule #1: Head-to-head wins. + let num_relevant_games = 0; let beat_parts = partition_by_beat(teams, function(beat, teams_to_idx) { for (let i = 0; i < games.length; ++i) { let idx1 = teams_to_idx[games[i].name1]; @@ -161,16 +182,17 @@ function rank(games, teams, start_rank, tiebreakers) { if (idx1 !== undefined && idx2 !== undefined) { if (games[i].score1 > games[i].score2) { beat[idx1][idx2] = 1; - } - if (games[i].score1 < games[i].score2) { + ++num_relevant_games; + } else if (games[i].score1 < games[i].score2) { beat[idx2][idx1] = 1; + ++num_relevant_games; } } } }); if (beat_parts.length > 1) { tiebreakers.push(explain_tiebreaker(beat_parts, 'head-to-head')); - return subrank_partitions(games, beat_parts, start_rank, tiebreakers); + return subrank_partitions(games, beat_parts, start_rank, tiebreakers, rank); } // Rule #2: Number of games played (fewer is better). @@ -179,33 +201,35 @@ function rank(games, teams, start_rank, tiebreakers) { let nplayed_parts = partition(teams, function(a, b) { return a.nplayed - b.nplayed }); if (nplayed_parts.length > 1) { tiebreakers.push(explain_tiebreaker(nplayed_parts, 'fewer losses')); - return subrank_partitions(games, nplayed_parts, start_rank, tiebreakers); + return subrank_partitions(games, nplayed_parts, start_rank, tiebreakers, rank); } - // Rule #3: Head-to-head goal difference. + // Rule #3: Head-to-head goal difference (if all have played). let teams_to_idx = make_teams_to_idx(teams); - for (let i = 0; i < teams.length; i++) { - teams[i].h2h_gd = 0; - teams[i].h2h_goals = 0; - } - for (let i = 0; i < games.length; ++i) { - let idx1 = teams_to_idx[games[i].name1]; - let idx2 = teams_to_idx[games[i].name2]; - if (idx1 !== undefined && idx2 !== undefined && - !isNaN(games[i].score1) && !isNaN(games[i].score2)) { - teams[idx1].h2h_gd += games[i].score1; - teams[idx1].h2h_gd -= games[i].score2; - teams[idx2].h2h_gd += games[i].score2; - teams[idx2].h2h_gd -= games[i].score1; - - teams[idx1].h2h_goals += games[i].score1; - teams[idx2].h2h_goals += games[i].score2; + if (num_relevant_games >= teams.length * (teams.length - 1) / 2) { + for (let i = 0; i < teams.length; i++) { + teams[i].h2h_gd = 0; + teams[i].h2h_goals = 0; + } + for (let i = 0; i < games.length; ++i) { + let idx1 = teams_to_idx[games[i].name1]; + let idx2 = teams_to_idx[games[i].name2]; + if (idx1 !== undefined && idx2 !== undefined && + !isNaN(games[i].score1) && !isNaN(games[i].score2)) { + teams[idx1].h2h_gd += games[i].score1; + teams[idx1].h2h_gd -= games[i].score2; + teams[idx2].h2h_gd += games[i].score2; + teams[idx2].h2h_gd -= games[i].score1; + + teams[idx1].h2h_goals += games[i].score1; + teams[idx2].h2h_goals += games[i].score2; + } + } + let h2h_gd_parts = partition(teams, function(a, b) { return b.h2h_gd - a.h2h_gd }); + if (h2h_gd_parts.length > 1) { + tiebreakers.push(explain_tiebreaker(h2h_gd_parts, 'head-to-head goal difference')); + return subrank_partitions(games, h2h_gd_parts, start_rank, tiebreakers, rank); } - } - let h2h_gd_parts = partition(teams, function(a, b) { return b.h2h_gd - a.h2h_gd }); - if (h2h_gd_parts.length > 1) { - tiebreakers.push(explain_tiebreaker(h2h_gd_parts, 'head-to-head goal difference')); - return subrank_partitions(games, h2h_gd_parts, start_rank, tiebreakers); } // Rule #4: Goal difference against common opponents. @@ -231,7 +255,7 @@ function rank(games, teams, start_rank, tiebreakers) { // See if the two teams have both played a third team k. for (let k in results_i) { if (!results_i.hasOwnProperty(k)) continue; - if (results_j[k] !== undefined) { + if (results_j !== undefined && results_j[k] !== undefined) { gd_i += results_i[k][0] - results_i[k][1]; gd_j += results_j[k][0] - results_j[k][1]; } @@ -247,14 +271,16 @@ function rank(games, teams, start_rank, tiebreakers) { }); if (gd_parts.length > 1) { tiebreakers.push(explain_tiebreaker(gd_parts, 'goal difference versus common opponents')); - return subrank_partitions(games, gd_parts, start_rank, tiebreakers); + return subrank_partitions(games, gd_parts, start_rank, tiebreakers, rank); } - // Rule #5: Head-to-head scored goals. - let h2h_goals_parts = partition(teams, function(a, b) { return b.h2h_goals - a.h2h_goals }); - if (h2h_goals_parts.length > 1) { - tiebreakers.push(explain_tiebreaker(h2h_goals_parts, 'head-to-head scored goals')); - return subrank_partitions(games, h2h_goals_parts, start_rank, tiebreakers); + // Rule #5: Head-to-head scored goals (if all have played). + if (num_relevant_games >= teams.length * (teams.length - 1) / 2) { + let h2h_goals_parts = partition(teams, function(a, b) { return b.h2h_goals - a.h2h_goals }); + if (h2h_goals_parts.length > 1) { + tiebreakers.push(explain_tiebreaker(h2h_goals_parts, 'head-to-head scored goals')); + return subrank_partitions(games, h2h_goals_parts, start_rank, tiebreakers, rank); + } } // Rule #6: Goals scored against common opponents. @@ -269,7 +295,7 @@ function rank(games, teams, start_rank, tiebreakers) { // See if the two teams have both played a third team k. for (let k in results_i) { if (!results_i.hasOwnProperty(k)) continue; - if (results_j[k] !== undefined) { + if (results_j !== undefined && results_j[k] !== undefined) { goals_i += results_i[k][0]; goals_j += results_j[k][0]; } @@ -285,7 +311,45 @@ function rank(games, teams, start_rank, tiebreakers) { }); if (goals_parts.length > 1) { tiebreakers.push(explain_tiebreaker(goals_parts, 'goals scored against common opponents')); - return subrank_partitions(games, goals_parts, start_rank, tiebreakers); + return subrank_partitions(games, goals_parts, start_rank, tiebreakers, rank); + } + + // OK, it's a tie. Give them all the same rank. + let result = []; + for (let i = 0; i < teams.length; ++i) { + result.push(teams[i]); + result[i].rank = start_rank; + } + return result; +}; + +// Same, but with the simplified rules for ranking thirds. games isn't used and can be empty. +function rank_thirds(games, teams, start_rank, tiebreakers) { + if (teams.length <= 1) { + // Only one team, so trivial. + teams[0].rank = start_rank; + return teams; + } + + // Rule #1: Partition the teams by score. + let score_parts = partition(teams, function(a, b) { return b.pts - a.pts }); + if (score_parts.length > 1) { + tiebreakers.push(explain_tiebreaker(score_parts, 'most games won')); + return subrank_partitions(games, score_parts, start_rank, tiebreakers, rank_thirds); + } + + // Rule #2: Goal difference against common opponents. + let gd_parts = partition(teams, function(a, b) { return b.gd - a.gd }); + if (gd_parts.length > 1) { + tiebreakers.push(explain_tiebreaker(gd_parts, 'goal difference')); + return subrank_partitions(games, gd_parts, start_rank, tiebreakers, rank_thirds); + } + + // Rule #3: Goals scored. + let goal_parts = partition(teams, function(a, b) { return b.goals - a.goals }); + if (goal_parts.length > 1) { + tiebreakers.push(explain_tiebreaker(goal_parts, 'goals scored')); + return subrank_partitions(games, goal_parts, start_rank, tiebreakers, rank_thirds); } // OK, it's a tie. Give them all the same rank. @@ -299,12 +363,14 @@ function rank(games, teams, start_rank, tiebreakers) { function parse_teams_from_spreadsheet(response) { let teams = []; - for (let i = 2; response.values[i].length >= 1; ++i) { + for (let i = 1; i < response.values.length && response.values[i].length >= 1; ++i) { teams.push({ "name": response.values[i][0], "mediumname": response.values[i][1], "shortname": response.values[i][2], - "tags": response.values[i][3], + //"tags": response.values[i][3], + "seeding": parseInt(response.values[i][3]), + "ngames": 0, "nplayed": 0, "gd": 0, "pts": 0, @@ -336,7 +402,7 @@ function parse_games_from_spreadsheet(response, group_name, include_unplayed) { "score1": parseInt(response.values[i][2]), "score2": parseInt(response.values[i][3]), "streamday": response.values[i][7], - "streamtime": response.values[i][8], + "streamtime": response.values[i][8].replace('.', ':'), "group_name": real_group_name }); } @@ -344,19 +410,72 @@ function parse_games_from_spreadsheet(response, group_name, include_unplayed) { return games; }; -function display_group(response, group_name) -{ - let teams = parse_teams_from_spreadsheet(response); - let games = parse_games_from_spreadsheet(response, group_name, false); - display_group_parsed(teams, games, group_name); +function get_team_code(teams, str) { + for (const team of teams) { + if (team.name === str || team.mediumname === str || team.shortname === str) { + return team.shortname; + } + } + return str; +} + +function get_all_group_games(teams, groups, cb) { + get_sheet('Results', function(response) { + let games = []; + for (const region of ultimateconfig['group_match_scores']) { + for (let row = region.first_row; row <= region.last_row; ++row) { + let team1 = get_team_code(teams, response.values[row - 1][region.team1_column]); + let team2 = get_team_code(teams, response.values[row - 1][region.team2_column]); + if (team1 === undefined || team2 === undefined || team1 === '' || team2 === '' || team1 === null || team2 === null) { + continue; + } + let group_name = region.group_name; + if (group_name === undefined) { + // Infer group from whatever group both teams are in. + for (const [group, teams] of Object.entries(groups)) { + if (teams.indexOf(team1) != -1 && teams.indexOf(team2) != -1) { + group_name = group; + break; + } + } + } + let game = { + "name1": team1, + "name2": team2, + "score1": parseInt(response.values[row - 1][region.team1_score_column]), + "score2": parseInt(response.values[row - 1][region.team2_score_column]), + "group_name": group_name + }; + if (region.stream_time_column !== undefined) { + game["streamtime"] = response.values[row - 1][region.stream_time_column].replace('.', ':'); + game["streamday"] = region.stream_day; + } + games.push(game); + } + } + cb(games); + }); }; -function display_group_parsed(teams, games, group_name) +function apply_games_to_teams(games, teams, group_name, ignored_teams, ret_ignored_games) { - document.getElementById('entire-bug').style.display = 'none'; - let teams_to_idx = make_teams_to_idx(teams); + let ignored_teams_idx; + if (ignored_teams === undefined) { + ignored_teams_idx = []; + } else { + ignored_teams_idx = make_teams_to_idx(ignored_teams); + } + for (let i = 0; i < teams.length; ++i) { + teams[i].nplayed = 0; + teams[i].goals = 0; + teams[i].gd = 0; + teams[i].pts = 0; + } for (let i = 0; i < games.length; ++i) { + if (games[i].group_name !== group_name) { + continue; + } let idx1 = teams_to_idx[games[i].name1]; let idx2 = teams_to_idx[games[i].name2]; if (games[i].score1 === undefined || games[i].score2 === undefined || @@ -365,6 +484,23 @@ function display_group_parsed(teams, games, group_name) games[i].score1 == games[i].score2) { continue; } + + let ignored_idx1 = ignored_teams_idx[games[i].name1]; + let ignored_idx2 = ignored_teams_idx[games[i].name2]; + if (ignored_idx1 !== undefined || ignored_idx2 !== undefined) { + if (ret_ignored_games !== undefined) { + // Figure out whether the fifth we're ignoring was only picked out arbitrarily + // (ie., there's a tie for 5th); if so, mark it as such. + let arbitrary = false; + if (ignored_idx1 !== undefined && ignored_teams[ignored_idx1].rank < 5) { + arbitrary = true; + } else if (ignored_idx2 !== undefined && ignored_teams[ignored_idx2].rank < 5) { + arbitrary = true; + } + ret_ignored_games.push([teams[idx1].shortname, teams[idx2].shortname, arbitrary]); + } + continue; + } ++teams[idx1].nplayed; ++teams[idx2].nplayed; teams[idx1].goals += games[i].score1; @@ -379,14 +515,46 @@ function display_group_parsed(teams, games, group_name) teams[idx2].pts += 2; } } +} +// So that we can just have one team list, and let membership be defined by games. +function filter_teams(teams, response) +{ + let teams_to_idx = make_teams_to_idx(teams); + let games = parse_games_from_spreadsheet(response, 'irrelevant group name', true); + for (let i = 0; i < games.length; ++i) { + let idx1 = teams_to_idx[games[i].name1]; + let idx2 = teams_to_idx[games[i].name2]; + if (idx1 !== undefined) { + ++teams[idx1].ngames; // FIXME: shouldn't nplayed be just as good? + } + if (idx2 !== undefined) { + ++teams[idx2].ngames; + } + } + return teams.filter(function(team) { return team.ngames > 0; }); +} + +// So that we can just have one team list, and let membership be defined by the group list. +function filter_teams_by_group(teams, groups, group) +{ + return teams.filter(function(team) { + return groups[group].indexOf(team.shortname) != -1; + }); +} + +function display_group_parsed(teams, games, group_name) +{ + document.getElementById('entire-bug').style.display = 'none'; + + apply_games_to_teams(games, teams, group_name); let tiebreakers = []; teams = rank(games, teams, 1, tiebreakers); let carousel = document.getElementById('carousel'); clear_carousel(carousel); - addheading(carousel, 5, "Current standings, Trøndisk 2017
" + group_name); + addheading(carousel, 5, "Current standings, " + ultimateconfig['tournament_title'] + "
" + group_name); let tr = document.createElement("tr"); tr.className = "subfooter"; addth(tr, "rank", ""); @@ -422,7 +590,7 @@ function display_group_parsed(teams, games, group_name) let footer_tr = document.createElement("tr"); footer_tr.className = "footer"; let td = document.createElement("td"); - td.appendChild(document.createTextNode("www.trondheimfrisbeeklubb.no | #trøndisk")); + td.appendChild(document.createTextNode(ultimateconfig['tournament_footer'])); td.setAttribute("colspan", "5"); footer_tr.appendChild(td); carousel.appendChild(footer_tr); @@ -464,13 +632,7 @@ function clear_carousel(table) }; // Stream schedule -let max_list_len = 8; - -function display_stream_schedule(response, group_name) { - let teams = parse_teams_from_spreadsheet(response); - let games = parse_games_from_spreadsheet(response, group_name, true); - display_stream_schedule_parsed(teams, games, 0); -}; +let max_list_len = 7; function sort_game_list(games) { games = games.filter(function(game) { return game.streamtime !== undefined && game.streamtime.match(/[0-9]+:[0-9]+/) != null; }); @@ -510,6 +672,15 @@ function find_num_pages(games) { return Math.ceil((games.length - start_idx) / max_list_len); } +function get_mediumname(name, teams, teams_to_idx) +{ + if (teams_to_idx[name] === undefined) { + return name.replace(/^W /, 'Winner ').replace(/^L /, 'Loser '); + } else { + return teams[teams_to_idx[name]].mediumname; + } +} + function display_stream_schedule_parsed(teams, games, page) { document.getElementById('entire-bug').style.display = 'none'; @@ -536,15 +707,15 @@ function display_stream_schedule_parsed(teams, games, page) { let carousel = document.getElementById('carousel'); clear_carousel(carousel); - addheading(carousel, 3, "Stream schedule, Trøndisk 2017
" + covered_days.join('/') + " (all times CET)"); + addheading(carousel, 3, "Stream schedule, " + ultimateconfig['tournament_title'] + "
" + covered_days.join('/') + " (all times CET)"); let teams_to_idx = make_teams_to_idx(teams); row_num = 0; for (let i = start_idx; i < games.length && row_num < max_list_len; ++i) { let tr = document.createElement("tr"); - let name1 = teams[teams_to_idx[games[i].name1]].mediumname; - let name2 = teams[teams_to_idx[games[i].name2]].mediumname; + let name1 = get_mediumname(games[i].name1, teams, teams_to_idx); + let name2 = get_mediumname(games[i].name2, teams, teams_to_idx); addtd(tr, "matchup", name1 + "–" + name2); addtd(tr, "group", games[i].group_name); @@ -570,25 +741,63 @@ function display_stream_schedule_parsed(teams, games, page) { carousel.style.display = 'table'; }; -function get_group(group_name, cb) +function get_sheet(sheet_name, cb) { let req = new XMLHttpRequest(); req.onload = function(e) { - cb(JSON.parse(req.responseText), group_name); + cb(JSON.parse(req.responseText)); }; - req.open('GET', 'https://sheets.googleapis.com/v4/spreadsheets/122tIwrXTi5ug0Vv6Np5w3pVwEWE2KkjWxtzQQfGtOZA/values/\'' + group_name + '\'!A1:J50?key=AIzaSyAuP9yQn8g0bSay6r_RpGtpFeIbwprH1TU'); + req.open('GET', 'https://sheets.googleapis.com/v4/spreadsheets/' + ultimateconfig['score_sheet_id'] + '/values/\'' + sheet_name + '\'!A1:Z50?key=' + ultimateconfig['api_key']); req.send(); -}; +} + +function get_group(group_name, cb) +{ + get_sheet(group_name, function(response) { + cb(response, group_name); + }); +} + +function get_teams(cb) +{ + get_sheet('Teams', function(response) { + cb(parse_teams_from_spreadsheet(response)); + }); +} + +function get_groups(cb) +{ + get_sheet('Groups', function(response) { + let groups = {}; + for (let i = 1; i < response.values.length && response.values[i].length >= 1; ++i) { + let team = response.values[i][0]; + let group = response.values[i][1]; + if (groups[group] === undefined) { + groups[group] = []; + } + groups[group].push(team); + } + cb(groups); + }); +} function showgroup(group_name) { - get_group(group_name, display_group); -}; + get_teams(function(teams) { + get_groups(function(groups) { + get_all_group_games(teams, groups, function(games) { + teams = filter_teams_by_group(teams, groups, group_name); + display_group_parsed(teams, games, group_name); + publish_group_rank(response, group_name); // Update the spreadsheet in the background. + }); + }); + }); +} function showgroup_from_state() { showgroup(state['group_name']); -}; +} let carousel_timeout = null; @@ -599,21 +808,17 @@ function hidetable() function showschedule(page) { - let teams = []; - let games = []; - let num_left = 3; - - let cb = function(response, group_name) { - teams = teams.concat(parse_teams_from_spreadsheet(response)); - games = games.concat(parse_games_from_spreadsheet(response, group_name, true)); - if (--num_left == 0) { - display_stream_schedule_parsed(teams, games, 0); - } - }; - - get_group('Group A', cb); - get_group('Group B', cb); - get_group('Playoffs', cb); + get_teams(function(teams) { + get_groups(function(groups) { + get_all_group_games(teams, groups, function(games) { + get_all_playoff_games(teams, groups, games, function(playoff_games) { + games = games.concat(playoff_games); + games = games.filter(function(game) { return game.streamday !== undefined; }); + display_stream_schedule_parsed(teams, games, 0); + }); + }); + }); + }); }; function do_series(series) @@ -631,40 +836,41 @@ function do_series_internal(series, idx) function showcarousel() { - let teams_per_group = []; - let games_per_group = []; - let combined_teams = []; - let combined_games = []; - let num_left = 3; - - let cb = function(response, group_name) { - let teams = parse_teams_from_spreadsheet(response); - let games = parse_games_from_spreadsheet(response, group_name, true); - teams_per_group[group_name] = teams; - games_per_group[group_name] = games; - - combined_teams = combined_teams.concat(teams); - combined_games = combined_games.concat(games); - if (--num_left == 0) { - let series = [ - [ 13000, function() { display_group_parsed(teams_per_group['Group A'], games_per_group['Group A'], 'Group A'); } ], - [ 2000, function() { hidetable(); } ], - [ 13000, function() { display_group_parsed(teams_per_group['Group B'], games_per_group['Group B'], 'Group B'); } ], - [ 2000, function() { hidetable(); } ] - ]; - let num_pages = find_num_pages(combined_games); - for (let page = 0; page < num_pages; ++page) { - series.push([ 13000, function() { display_stream_schedule_parsed(combined_teams, combined_games, page); } ]); - series.push([ 2000, function() { hidetable(); } ]); - } - - do_series(series); - } - }; + let groups_to_get = [ + 'Group A', + 'Group B', + 'Group C', + 'Playoffs', + 'Playoffs 9th–11th', + 'Playoffs 12th–14th' + ]; + get_teams(function(teams) { + get_groups(function(groups) { + get_all_group_games(teams, groups, function(games) { + get_all_playoff_games(teams, groups, games, function(playoff_games) { + games = games.concat(playoff_games); + games = games.filter(function(game) { return game.streamday !== undefined; }); + + let series = [ + [ 13000, function() { display_group_parsed(filter_teams_by_group(teams, groups, 'Group A'), games, 'Group A'); } ], + [ 2000, function() { hidetable(); } ], + [ 13000, function() { display_group_parsed(filter_teams_by_group(teams, groups, 'Group B'), games, 'Group B'); } ], + [ 2000, function() { hidetable(); } ], + [ 13000, function() { display_group_parsed(filter_teams_by_group(teams, groups, 'Group C'), games, 'Group C'); } ], + [ 2000, function() { hidetable(); } ], + // We don't show the playoff groups, since we don't even know whether they have data. + ]; + let num_pages = find_num_pages(games); + for (let page = 0; page < num_pages; ++page) { + series.push([ 13000, function() { display_stream_schedule_parsed(teams, games, page); } ]); + series.push([ 2000, function() { hidetable(); } ]); + } - get_group('Group A', cb); - get_group('Group B', cb); - get_group('Playoffs', cb); + do_series(series); + }); + }); + }); + }); }; function stopcarousel() @@ -684,5 +890,32 @@ function hidescorebug() function showscorebug() { document.getElementById('entire-bug').style.display = null; -}; +} +function showmatch2() +{ + let css = "-webkit-animation: fade-in 1.0s ease; -webkit-animation-fill-mode: both;"; + document.getElementById('scorebug2').style = css; + document.getElementById('clockbug2').style = css; +} + +function hidematch2() +{ + let css = "-webkit-animation: fade-out 1.0s ease; -webkit-animation-fill-mode: both;"; + document.getElementById('scorebug2').style = css; + document.getElementById('clockbug2').style = css; +} + +function showmatch3() +{ + let css = "-webkit-animation: fade-in 1.0s ease; -webkit-animation-fill-mode: both;"; + document.getElementById('scorebug3').style = css; + document.getElementById('clockbug3').style = css; +} + +function hidematch3() +{ + let css = "-webkit-animation: fade-out 1.0s ease; -webkit-animation-fill-mode: both;"; + document.getElementById('scorebug3').style = css; + document.getElementById('clockbug3').style = css; +}