From 1fb7673aa4dc55a769bc57744d7fb63bf0bdd9c0 Mon Sep 17 00:00:00 2001 From: Josh Wright Date: Mon, 19 Feb 2024 19:10:56 -0500 Subject: [PATCH 01/12] fix: resize game boxes and space out --- app/static/styles.css | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index f782ef0..f744e98 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -22,11 +22,12 @@ h1 { background-color: #333; /* Dark background color for game boxes */ border-radius: 12px; /* Rounded corners */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */ - padding: 20px; - margin-bottom: 20px; - margin-left: 20px; - margin-right: 20px; - width: 300px; + padding: 1%; + margin-bottom: 1%; + margin-top: 1%; + margin-left: 1.4%; + margin-right: 1.4%; + width: 15.2%; position: relative; /* Position relative for absolute positioning */ } @@ -215,7 +216,11 @@ h1 { .game-box { width: 90%; /* Adjust width for better fit on smaller screens */ - margin: 10px; /* Adjust margins */ + margin-left: 1.5%; + margin-right: 1.5%; + margin-top: 2.5%; + margin-bottom: 2.5%; + padding: 4%; } .team-info { From 59fe33865830c16d48c4cce0ec78da0e9e801b46 Mon Sep 17 00:00:00 2001 From: Josh Wright Date: Mon, 19 Feb 2024 21:56:06 -0500 Subject: [PATCH 02/12] fix: drop leading zero oin start time --- app/scoreboard/process_data.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scoreboard/process_data.py b/app/scoreboard/process_data.py index b55ba6d..921f062 100644 --- a/app/scoreboard/process_data.py +++ b/app/scoreboard/process_data.py @@ -139,4 +139,4 @@ def utc_to_est_time(utc_time): utc_datetime = datetime.strptime(utc_time, "%Y-%m-%dT%H:%M:%SZ") est_offset = timedelta(hours=-5) est_datetime = utc_datetime + est_offset - return est_datetime.strftime("%I:%M %p") + return est_datetime.strftime("%#I:%M %p") From d4f5e4c991cd104ae1626a287a54aa0f0c60e1e9 Mon Sep 17 00:00:00 2001 From: Josh Wright Date: Mon, 19 Feb 2024 21:57:02 -0500 Subject: [PATCH 03/12] fix: make elements more consistent across screen sizes --- app/static/styles.css | 253 ++++++++++++++++++++++++++++-------------- 1 file changed, 167 insertions(+), 86 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index f744e98..594b422 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -34,8 +34,8 @@ h1 { .team-info { display: flex; align-items: center; - margin-bottom: 7px; - margin-top: 25px; /* Added margin-top */ + margin-bottom: 2%; + margin-top: 10%; /* Added margin-top */ } .team-info-column { @@ -44,18 +44,18 @@ h1 { } .team-logo { - width: 50px; + width: 20%; height: auto; - margin-right: 10px; + margin-right: 2.25%; } .team-name { - font-size: 18px; + font-size: 80%; font-weight: bold; } .team-score { - font-size: 25px; + font-size: 120%; font-weight: bold; margin-left: auto; } @@ -67,7 +67,7 @@ h1 { } .team-sog { - font-size: 12px; /* Adjust font size as needed */ + font-size: 55%; /* Adjust font size as needed */ color: #ddd; /* Lighter text color */ } @@ -81,7 +81,7 @@ h1 { margin-top: 12px; color: #aaa; /* Lighten the text color */ text-align: center; - font-size: 14px; + font-size: 80%; } .game-info strong { @@ -100,85 +100,101 @@ h1 { .pre-state { position: absolute; - top: 10px; - left: 10px; /* Adjusted left position */ + top: 4%; + left: 4%; /* Adjusted left position */ background-color: #444; /* Darker background color for pre state */ - padding: 5px; + padding: 1.5%; border-radius: 5px; - font-size: 12px; + font-size: 65%; color: #fff; /* White text color for live state */ font-weight: bolder; /* Bold text for live state */ z-index: 1; /* Ensure the live state box is above other content */ -} - -.final-state { - position: absolute; - top: 10px; - left: 10px; /* Adjusted left position */ - background-color: #444; /* Darker background color for final state */ - padding: 5px; - border-radius: 5px; - font-size: 12px; - color: #ddd; /* Lighter text color for final state */ - z-index: 1; /* Ensure the final state box is above other content */ - font-weight: bold; -} - -.live-state { - position: absolute; - top: 10px; - left: 10px; /* Adjusted left position */ - background-color: #0b6e31; /* Darker green background color for live state */ - padding: 5px; - border-radius: 5px; - font-size: 12px; - color: #fff; /* White text color for live state */ - font-weight: bolder; /* Bold text for live state */ - z-index: 1; /* Ensure the live state box is above other content */ - width: 18px; -} - -.live-state-intermission { - position: absolute; - top: 10px; - left: 10px; /* Adjusted left position */ - background-color: #444; /* Darker green background color for live state */ - padding: 5px; - border-radius: 5px; - font-size: 12px; - color: #fff; /* White text color for live state */ - font-weight: bolder; /* Bold text for live state */ - z-index: 1; /* Ensure the live state box is above other content */ - width: 40px; -} - -.live-time { - position: absolute; - top: 10px; - left: 45px; /* Adjusted left position */ - background-color: #444; /* Darker background color for time box */ - padding: 5px; - border-radius: 5px; - font-size: 12px; - color: #ddd; /* Lighter text color for time box */ - z-index: 1; /* Ensure the time box is above other content */ - width: 30px; + width: auto; + height: 10%; display: flex; /* Use flexbox */ justify-content: space-evenly; /* Center content horizontally */ align-items: center; /* Center content vertically */ } -.live-time-intermission { +.final-state { position: absolute; - top: 10px; - left: 65px; /* Adjusted left position */ - background-color: #444; /* Darker background color for time box */ - padding: 5px; + top: 4%; + left: 4%; /* Adjusted left position */ + background-color: #444; /* Darker background color for final state */ + padding: 1.5%; border-radius: 5px; - font-size: 12px; + font-size: 65%; + color: #ddd; /* Lighter text color for final state */ + z-index: 1; /* Ensure the final state box is above other content */ + font-weight: bold; + width: auto; + height: 7.5%; +} + +.live-state { + position: absolute; + top: 4%; + left: 4%; /* Adjusted left position */ + background-color: #0b6e31; /* Darker green background color for live state */ + padding: 1.5%; + border-radius: 5px; + font-size: 80%; + color: #fff; /* White text color for live state */ + font-weight: bolder; /* Bold text for live state */ + z-index: 1; /* Ensure the live state box is above other content */ + width: 7.2%; + height: 7.5%; +} + + +.live-time { + position: absolute; + top: 4%; + left: 16%; /* Adjusted left position */ + background-color: #444; /* Darker background color for time box */ + padding: 1.5%; + border-radius: 5px; + font-size: 80%; color: #ddd; /* Lighter text color for time box */ z-index: 1; /* Ensure the time box is above other content */ - width: 30px; + display: flex; /* Use flexbox */ + justify-content: space-evenly; /* Center content horizontally */ + align-items: center; /* Center content vertically */ + width: 12.5%; + height: 7.5%; +} + +.live-state-intermission { + position: absolute; + top: 5%; + left: 4%; /* Adjusted left position */ + background-color: #444; /* Darker green background color for live state */ + padding: 1.5%; + border-radius: 5px; + font-size: 80%; + color: #fff; /* White text color for live state */ + font-weight: bolder; /* Bold text for live state */ + z-index: 1; /* Ensure the live state box is above other content */ + width: 15.5%; + height: 7.5%; + display: flex; + justify-content: space-evenly; + align-items: center; +} + + +.live-time-intermission { + position: absolute; + top: 5%; + left: 24%; /* Adjusted left position */ + background-color: #444; /* Darker background color for time box */ + padding: 1.5%; + border-radius: 5px; + font-size: 80%; + color: #ddd; /* Lighter text color for time box */ + z-index: 1; /* Ensure the time box is above other content */ + width: 12.5%; + height: 7.5%; display: flex; /* Use flexbox */ justify-content: space-evenly; /* Center content horizontally */ align-items: center; /* Center content vertically */ @@ -225,33 +241,98 @@ h1 { .team-info { align-items: center; /* Center align items */ - margin-top: 26px; /* Adjust top margin */ - margin-bottom: 5px; /* Adjust bottom margin */ + margin-top: 10%; /* Adjust top margin */ + margin-bottom: 2%; /* Adjust bottom margin */ } .team-logo { - width: 36px; /* Adjust logo size */ - height: 36px; + width: 12%; /* Adjust logo size */ + height: auto; } .team-name { - font-size: 16px; /* Decrease font size for better readability */ + font-size: 100%; /* Decrease font size for better readability */ font-weight: bold; } .team-score { - font-size: 24px; /* Decrease font size for better readability */ + font-size: 140%; /* Decrease font size for better readability */ font-weight: bold; } - .game-info { - font-size: 12px; /* Decrease font size for better readability */ + .team-sog { + font-size: 70%; } - .live-state, - .live-time, - .pre-state, - .final-state { - font-size: 12px; /* Decrease font size for better readability */ + .game-info { + font-size: 90%; /* Decrease font size for better readability */ } + + .live-state { + top: 4%; + left: 3%; /* Adjusted left position */ + padding: 1.5%; + border-radius: 5px; + font-size: 80%; + width: 5.5%; + height: 7.2%; + } + + .live-time { + top: 4%; + left: 13%; /* Adjusted left position */ + padding: 1.5%; + border-radius: 5px; + font-size: 80%; + display: flex; /* Use flexbox */ + justify-content: space-evenly; /* Center content horizontally */ + align-items: center; /* Center content vertically */ + width: 7%; + height: 7.2%; + } + + .live-state-intermission { + top: 5%; + left: 4%; /* Adjusted left position */ + padding: 1.5%; + border-radius: 5px; + font-size: 80%; + width: 15.5%; + height: 7.5%; + display: flex; + justify-content: space-evenly; + align-items: center; + } + + .live-time-intermission { + top: 5%; + left: 24%; /* Adjusted left position */ + padding: 1.5%; + border-radius: 5px; + font-size: 80%; + width: 12.5%; + height: 7.5%; + display: flex; /* Use flexbox */ + justify-content: space-evenly; /* Center content horizontally */ + align-items: center; /* Center content vertically */ + } + + .final-state { + top: 5%; + left: 4%; /* Adjusted left position */ + padding: 1.5%; + border-radius: 5px; + font-size: 72%; + width: auto; + height: 7.5%; + } + + .pre-state { + top: 4%; + left: 4%; /* Adjusted left position */ + padding: 1.5%; + border-radius: 5px; + font-size: 80%; + } + } \ No newline at end of file From 3d6afe0df32a0d1bc5f594e11864348e4b847db3 Mon Sep 17 00:00:00 2001 From: Josh Wright Date: Tue, 20 Feb 2024 00:41:49 -0500 Subject: [PATCH 04/12] fix: adjust styles --- app/static/styles.css | 32 +++++++++++++++++++++----------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index 594b422..0524af7 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -2,6 +2,9 @@ body { background-color: #121212; /* Dark background color */ font-family: Arial, sans-serif; /* Use a common sans-serif font */ color: #fff; /* White text color */ + margin: 0; + width: 100vw; + height: 100vh; } h1 { @@ -23,12 +26,12 @@ h1 { border-radius: 12px; /* Rounded corners */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */ padding: 1%; - margin-bottom: 1%; - margin-top: 1%; - margin-left: 1.4%; - margin-right: 1.4%; - width: 15.2%; + width: 16%; + max-width: 300px; position: relative; /* Position relative for absolute positioning */ + margin-left: 1%; + margin-right: 1%; + margin-bottom: 1%; } .team-info { @@ -54,6 +57,13 @@ h1 { font-weight: bold; } +/* Add a media query for screens between 769px and 900px */ +@media only screen and (max-width: 900px) and (min-width: 769px) { + .team-name { + font-size: 75%; /* Adjusted font size for screens between 769px and 900px */ + } +} + .team-score { font-size: 120%; font-weight: bold; @@ -61,7 +71,7 @@ h1 { } .team-record { - font-size: 12px; + font-size: 70%; margin-left: auto; font-weight: bold; } @@ -231,12 +241,12 @@ h1 { } .game-box { - width: 90%; /* Adjust width for better fit on smaller screens */ - margin-left: 1.5%; - margin-right: 1.5%; - margin-top: 2.5%; - margin-bottom: 2.5%; + width: 90%; padding: 4%; + margin-bottom: 4%; + margin-left: 2%; + margin-right: 2%; + max-width: 1000px; } .team-info { From 8900bf0d140290d82e40ebc9c014c9fc7ae48d2b Mon Sep 17 00:00:00 2001 From: Josh Wright Date: Tue, 20 Feb 2024 00:47:29 -0500 Subject: [PATCH 05/12] fix: adjust sizing to fit space better --- app/static/styles.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index 0524af7..7f1d2af 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -47,13 +47,13 @@ h1 { } .team-logo { - width: 20%; + width: 18%; height: auto; margin-right: 2.25%; } .team-name { - font-size: 80%; + font-size: 90%; font-weight: bold; } @@ -65,7 +65,7 @@ h1 { } .team-score { - font-size: 120%; + font-size: 130%; font-weight: bold; margin-left: auto; } @@ -77,7 +77,7 @@ h1 { } .team-sog { - font-size: 55%; /* Adjust font size as needed */ + font-size: 65%; /* Adjust font size as needed */ color: #ddd; /* Lighter text color */ } From b3a09b27c0aaa461d60fafeebe8f25e25b448660 Mon Sep 17 00:00:00 2001 From: Josh Wright Date: Tue, 20 Feb 2024 00:50:35 -0500 Subject: [PATCH 06/12] fix: adjust game box spacing --- app/static/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/static/styles.css b/app/static/styles.css index 7f1d2af..faae071 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -38,7 +38,7 @@ h1 { display: flex; align-items: center; margin-bottom: 2%; - margin-top: 10%; /* Added margin-top */ + margin-top: 9%; /* Added margin-top */ } .team-info-column { From 6abcd2e448dc6d18d7e3ee474cac6a90c0c09f8d Mon Sep 17 00:00:00 2001 From: Josh Wright Date: Tue, 20 Feb 2024 01:27:19 -0500 Subject: [PATCH 07/12] fix: change spacing between rows --- app/static/styles.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index faae071..2adf490 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -31,7 +31,7 @@ h1 { position: relative; /* Position relative for absolute positioning */ margin-left: 1%; margin-right: 1%; - margin-bottom: 1%; + margin-bottom: 1.15%; } .team-info { @@ -110,8 +110,8 @@ h1 { .pre-state { position: absolute; - top: 4%; - left: 4%; /* Adjusted left position */ + top: 5%; + left: 3%; /* Adjusted left position */ background-color: #444; /* Darker background color for pre state */ padding: 1.5%; border-radius: 5px; @@ -128,8 +128,8 @@ h1 { .final-state { position: absolute; - top: 4%; - left: 4%; /* Adjusted left position */ + top: 5%; + left: 3%; /* Adjusted left position */ background-color: #444; /* Darker background color for final state */ padding: 1.5%; border-radius: 5px; From 24de212b982df6b789cd8b812b9814163db70c2a Mon Sep 17 00:00:00 2001 From: Josh Wright Date: Tue, 20 Feb 2024 01:35:24 -0500 Subject: [PATCH 08/12] remove unnecessary comments --- app/static/styles.css | 144 ++++++++++++++++++++---------------------- 1 file changed, 70 insertions(+), 74 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index 2adf490..3e58f6e 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -1,7 +1,7 @@ body { - background-color: #121212; /* Dark background color */ - font-family: Arial, sans-serif; /* Use a common sans-serif font */ - color: #fff; /* White text color */ + background-color: #121212; + font-family: Arial, sans-serif; + color: #fff; margin: 0; width: 100vw; height: 100vh; @@ -11,7 +11,7 @@ h1 { text-align: center; margin-top: 15px; margin-bottom: 25px; - color: #f2f2f2; /* Lighten the text color */ + color: #f2f2f2; } .scoreboard { @@ -22,13 +22,13 @@ h1 { } .game-box { - background-color: #333; /* Dark background color for game boxes */ - border-radius: 12px; /* Rounded corners */ - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */ + background-color: #333; + border-radius: 12px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 1%; width: 16%; max-width: 300px; - position: relative; /* Position relative for absolute positioning */ + position: relative; margin-left: 1%; margin-right: 1%; margin-bottom: 1.15%; @@ -38,7 +38,7 @@ h1 { display: flex; align-items: center; margin-bottom: 2%; - margin-top: 9%; /* Added margin-top */ + margin-top: 9%; } .team-info-column { @@ -77,19 +77,19 @@ h1 { } .team-sog { - font-size: 65%; /* Adjust font size as needed */ - color: #ddd; /* Lighter text color */ + font-size: 65%; + color: #ddd; } .team-power-play { - font-size: 12px; /* Adjust font size as needed */ - color: red; /* Set color to red */ - margin-left: 10px; /* Add some margin for spacing */ + font-size: 12px; + color: red; + margin-left: 10px; } .game-info { margin-top: 12px; - color: #aaa; /* Lighten the text color */ + color: #aaa; text-align: center; font-size: 80%; } @@ -111,31 +111,31 @@ h1 { .pre-state { position: absolute; top: 5%; - left: 3%; /* Adjusted left position */ - background-color: #444; /* Darker background color for pre state */ + left: 3%; + background-color: #444; padding: 1.5%; border-radius: 5px; font-size: 65%; - color: #fff; /* White text color for live state */ - font-weight: bolder; /* Bold text for live state */ - z-index: 1; /* Ensure the live state box is above other content */ + color: #fff; + font-weight: bolder; + z-index: 1; width: auto; height: 10%; - display: flex; /* Use flexbox */ - justify-content: space-evenly; /* Center content horizontally */ - align-items: center; /* Center content vertically */ + display: flex; + justify-content: space-evenly; + align-items: center; } .final-state { position: absolute; top: 5%; - left: 3%; /* Adjusted left position */ - background-color: #444; /* Darker background color for final state */ + left: 3%; + background-color: #444; padding: 1.5%; border-radius: 5px; font-size: 65%; - color: #ddd; /* Lighter text color for final state */ - z-index: 1; /* Ensure the final state box is above other content */ + color: #ddd; + z-index: 1; font-weight: bold; width: auto; height: 7.5%; @@ -144,32 +144,31 @@ h1 { .live-state { position: absolute; top: 4%; - left: 4%; /* Adjusted left position */ - background-color: #0b6e31; /* Darker green background color for live state */ + left: 4%; + background-color: #0b6e31; padding: 1.5%; border-radius: 5px; font-size: 80%; - color: #fff; /* White text color for live state */ - font-weight: bolder; /* Bold text for live state */ - z-index: 1; /* Ensure the live state box is above other content */ + color: #fff; + font-weight: bolder; + z-index: 1; width: 7.2%; height: 7.5%; } - .live-time { position: absolute; top: 4%; - left: 16%; /* Adjusted left position */ - background-color: #444; /* Darker background color for time box */ + left: 16%; + background-color: #444; padding: 1.5%; border-radius: 5px; font-size: 80%; - color: #ddd; /* Lighter text color for time box */ - z-index: 1; /* Ensure the time box is above other content */ - display: flex; /* Use flexbox */ - justify-content: space-evenly; /* Center content horizontally */ - align-items: center; /* Center content vertically */ + color: #ddd; + z-index: 1; + display: flex; + justify-content: space-evenly; + align-items: center; width: 12.5%; height: 7.5%; } @@ -177,14 +176,14 @@ h1 { .live-state-intermission { position: absolute; top: 5%; - left: 4%; /* Adjusted left position */ - background-color: #444; /* Darker green background color for live state */ + left: 4%; + background-color: #444; padding: 1.5%; border-radius: 5px; font-size: 80%; - color: #fff; /* White text color for live state */ - font-weight: bolder; /* Bold text for live state */ - z-index: 1; /* Ensure the live state box is above other content */ + color: #fff; + font-weight: bolder; + z-index: 1; width: 15.5%; height: 7.5%; display: flex; @@ -192,22 +191,21 @@ h1 { align-items: center; } - .live-time-intermission { position: absolute; top: 5%; - left: 24%; /* Adjusted left position */ - background-color: #444; /* Darker background color for time box */ + left: 24%; + background-color: #444; padding: 1.5%; border-radius: 5px; font-size: 80%; - color: #ddd; /* Lighter text color for time box */ - z-index: 1; /* Ensure the time box is above other content */ + color: #ddd; + z-index: 1; width: 12.5%; height: 7.5%; - display: flex; /* Use flexbox */ - justify-content: space-evenly; /* Center content horizontally */ - align-items: center; /* Center content vertically */ + display: flex; + justify-content: space-evenly; + align-items: center; } #live-games-section { @@ -231,8 +229,6 @@ h1 { justify-content: flex-start; } -/* Existing CSS styles */ - /* Add media query for smaller screens */ @media only screen and (max-width: 768px) { .scoreboard { @@ -250,23 +246,23 @@ h1 { } .team-info { - align-items: center; /* Center align items */ - margin-top: 10%; /* Adjust top margin */ - margin-bottom: 2%; /* Adjust bottom margin */ + align-items: center; + margin-top: 10%; + margin-bottom: 2%; } .team-logo { - width: 12%; /* Adjust logo size */ + width: 12%; height: auto; } .team-name { - font-size: 100%; /* Decrease font size for better readability */ + font-size: 100%; font-weight: bold; } .team-score { - font-size: 140%; /* Decrease font size for better readability */ + font-size: 140%; font-weight: bold; } @@ -275,12 +271,12 @@ h1 { } .game-info { - font-size: 90%; /* Decrease font size for better readability */ + font-size: 90%; } .live-state { top: 4%; - left: 3%; /* Adjusted left position */ + left: 3%; padding: 1.5%; border-radius: 5px; font-size: 80%; @@ -290,20 +286,20 @@ h1 { .live-time { top: 4%; - left: 13%; /* Adjusted left position */ + left: 13%; padding: 1.5%; border-radius: 5px; font-size: 80%; - display: flex; /* Use flexbox */ - justify-content: space-evenly; /* Center content horizontally */ - align-items: center; /* Center content vertically */ + display: flex; + justify-content: space-evenly; + align-items: center; width: 7%; height: 7.2%; } .live-state-intermission { top: 5%; - left: 4%; /* Adjusted left position */ + left: 4%; padding: 1.5%; border-radius: 5px; font-size: 80%; @@ -316,20 +312,20 @@ h1 { .live-time-intermission { top: 5%; - left: 24%; /* Adjusted left position */ + left: 24%; padding: 1.5%; border-radius: 5px; font-size: 80%; width: 12.5%; height: 7.5%; - display: flex; /* Use flexbox */ - justify-content: space-evenly; /* Center content horizontally */ - align-items: center; /* Center content vertically */ + display: flex; + justify-content: space-evenly; + align-items: center; } .final-state { top: 5%; - left: 4%; /* Adjusted left position */ + left: 4%; padding: 1.5%; border-radius: 5px; font-size: 72%; @@ -339,7 +335,7 @@ h1 { .pre-state { top: 4%; - left: 4%; /* Adjusted left position */ + left: 4%; padding: 1.5%; border-radius: 5px; font-size: 80%; From a329c2e8b25f829a115de7602a86e9fce58347cf Mon Sep 17 00:00:00 2001 From: Josh Wright Date: Tue, 20 Feb 2024 14:32:17 -0500 Subject: [PATCH 09/12] fix: styles.css adjustments --- app/static/styles.css | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index 3e58f6e..f85f9d5 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -58,9 +58,9 @@ h1 { } /* Add a media query for screens between 769px and 900px */ -@media only screen and (max-width: 900px) and (min-width: 769px) { +@media only screen and (max-width: 950px) and (min-width: 769px) { .team-name { - font-size: 75%; /* Adjusted font size for screens between 769px and 900px */ + font-size: 0.55rem; /* Adjusted font size for screens between 769px and 900px */ } } @@ -71,9 +71,16 @@ h1 { } .team-record { - font-size: 70%; - margin-left: auto; + font-size: 0.75rem; font-weight: bold; + margin-left: auto; +} + +/* Add a media query for screens between 769px and 900px */ +@media only screen and (max-width: 950px) and (min-width: 769px) { + .team-record { + font-size: 0.45rem; /* Adjusted font size for screens between 769px and 900px */ + } } .team-sog { @@ -115,7 +122,7 @@ h1 { background-color: #444; padding: 1.5%; border-radius: 5px; - font-size: 65%; + font-size: 0.65rem; color: #fff; font-weight: bolder; z-index: 1; @@ -126,6 +133,13 @@ h1 { align-items: center; } +/* Add a media query for screens between 769px and 900px */ +@media only screen and (max-width: 950px) and (min-width: 769px) { + .pre-state { + font-size: 0.55rem; /* Adjusted font size for screens between 769px and 900px */ + } +} + .final-state { position: absolute; top: 5%; @@ -275,8 +289,8 @@ h1 { } .live-state { - top: 4%; - left: 3%; + top: 5%; + left: 3.5%; padding: 1.5%; border-radius: 5px; font-size: 80%; @@ -285,7 +299,7 @@ h1 { } .live-time { - top: 4%; + top: 5%; left: 13%; padding: 1.5%; border-radius: 5px; @@ -299,7 +313,7 @@ h1 { .live-state-intermission { top: 5%; - left: 4%; + left: 3.5%; padding: 1.5%; border-radius: 5px; font-size: 80%; @@ -325,7 +339,7 @@ h1 { .final-state { top: 5%; - left: 4%; + left: 3.5%; padding: 1.5%; border-radius: 5px; font-size: 72%; @@ -334,8 +348,8 @@ h1 { } .pre-state { - top: 4%; - left: 4%; + top: 5%; + left: 3.5%; padding: 1.5%; border-radius: 5px; font-size: 80%; From 31b48462873daebf44fd65e94c93f92e992820d5 Mon Sep 17 00:00:00 2001 From: Josh Wright Date: Tue, 20 Feb 2024 22:09:45 -0500 Subject: [PATCH 10/12] fix: styles.css adjust live games --- app/static/styles.css | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/app/static/styles.css b/app/static/styles.css index f85f9d5..7730b65 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -3,8 +3,6 @@ body { font-family: Arial, sans-serif; color: #fff; margin: 0; - width: 100vw; - height: 100vh; } h1 { @@ -183,7 +181,7 @@ h1 { display: flex; justify-content: space-evenly; align-items: center; - width: 12.5%; + width: 10%; height: 7.5%; } @@ -198,7 +196,7 @@ h1 { color: #fff; font-weight: bolder; z-index: 1; - width: 15.5%; + width: 13%; height: 7.5%; display: flex; justify-content: space-evenly; @@ -208,7 +206,7 @@ h1 { .live-time-intermission { position: absolute; top: 5%; - left: 24%; + left: 21.5%; background-color: #444; padding: 1.5%; border-radius: 5px; @@ -317,7 +315,7 @@ h1 { padding: 1.5%; border-radius: 5px; font-size: 80%; - width: 15.5%; + width: 11%; height: 7.5%; display: flex; justify-content: space-evenly; @@ -326,11 +324,11 @@ h1 { .live-time-intermission { top: 5%; - left: 24%; + left: 18.5%; padding: 1.5%; border-radius: 5px; font-size: 80%; - width: 12.5%; + width: 8%; height: 7.5%; display: flex; justify-content: space-evenly; From 4b6e8615b1d418f9e727617911c7d906285d0dbf Mon Sep 17 00:00:00 2001 From: Josh Wright Date: Tue, 20 Feb 2024 22:10:07 -0500 Subject: [PATCH 11/12] fix: weigh overtime heavier to compensate for time priority loss --- app/scoreboard/process_data.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scoreboard/process_data.py b/app/scoreboard/process_data.py index 921f062..aab6253 100644 --- a/app/scoreboard/process_data.py +++ b/app/scoreboard/process_data.py @@ -99,7 +99,7 @@ def calculate_game_priority(game): score_total = (home_score + away_score) * 25 # Calculate the base priority based on period - base_priority = {5: 450, 4: 400, 3: 300, 2: 200}.get(period, 100) + base_priority = {5: 650, 4: 600, 3: 300, 2: 200}.get(period, 100) # Adjust base priority based on score difference if score_difference > 3: From 53f0e69cc5be07ea5fb20c6435575e38adb31bf1 Mon Sep 17 00:00:00 2001 From: Josh Wright Date: Wed, 21 Feb 2024 00:40:35 -0500 Subject: [PATCH 12/12] feature: adds hype meter to replace game score --- app/static/script.js | 41 ++++++++++++++++++++++++++++++++++++++--- app/static/styles.css | 25 +++++++++++++++++++++++-- 2 files changed, 61 insertions(+), 5 deletions(-) diff --git a/app/static/script.js b/app/static/script.js index dd0eba6..032d8e1 100644 --- a/app/static/script.js +++ b/app/static/script.js @@ -85,6 +85,32 @@ function updateScoreboard(data) { finalGamesSection.innerHTML = ''; } } + + updateGauge() +} + +function updateGauge() { + document.querySelectorAll('.gauge').forEach(function(gauge) { + // Get the score value from the data-score attribute + var score = parseInt(gauge.getAttribute('data-score')); + + // Clamp the score value between 0 and 700 + score = Math.min(700, Math.max(0, score)); + + // Calculate the gauge width as a percentage + var gaugeWidth = (score / 700) * 100; + + // Set the width of the gauge + gauge.style.width = gaugeWidth + '%'; + + if (score <=350) { + gauge.style.backgroundColor = '#4A90E2' + } else if (score <= 560) { + gauge.style.backgroundColor = '#FF4500' + } else { + gauge.style.backgroundColor = '#FF0033' + } + }); } // Function to generate HTML for game boxes @@ -147,9 +173,18 @@ function generateGameBoxes(games, state) { html += '
' + game['Time Remaining'] + '
'; } html += ''; - html += '
'; - html += 'Game Score: ' + game['Priority']; - html += '
'; + if (!game['Intermission']) { + html += '
'; + html += 'Hype Meter'; + html += '
'; + + html += '
'; + html += '
'; + html += '
'; + html += ''; + } + + html += ''; } else if (state === 'PRE') { html += '
' + game['Start Time'] + '
'; diff --git a/app/static/styles.css b/app/static/styles.css index 7730b65..116e255 100644 --- a/app/static/styles.css +++ b/app/static/styles.css @@ -99,8 +99,12 @@ h1 { font-size: 80%; } -.game-info strong { - margin-right: 5px; +.hype-meter-label { + margin-top: 3%; + color: #aaa; + text-align: center; + font-size: 80%; + margin-bottom: 3%; } .live-dot { @@ -166,6 +170,9 @@ h1 { z-index: 1; width: 7.2%; height: 7.5%; + display: flex; + justify-content: space-evenly; + align-items: center; } .live-time { @@ -241,6 +248,20 @@ h1 { justify-content: flex-start; } +/* Add styles for the game score gauge */ +.game-score-gauge { + height: 1%; + background-color: #ccc; + border-radius: 5px; + overflow: hidden; +} + +.gauge { + height: 10px; /* Adjust height as needed */ + /*#8A2BE2*/ + /*#6699CC*/ +} + /* Add media query for smaller screens */ @media only screen and (max-width: 768px) { .scoreboard {