hotfix: define font size for more consistent look

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:
@@ -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")

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 += '<div class="live-time">' + game['Time Remaining'] + '</div>';
                 }
                 html += '</div>';
-                html += '<div class="game-info">';
-                html += '<strong>Game Score: </strong>' + game['Priority'];
+                if (!game['Intermission']) {
+                    html += '<div class="hype-meter-label">';
+                    html += '<strong>Hype Meter</strong>';
                     html += '</div>';
+
+                    html += '<div class="game-score-gauge">';
+                    html += '<div class="gauge" data-score="' + game['Priority'] + '"></div>';
+                    html += '</div>';
+                    html += '</div>';
+                }
+
+
                 html += '</div>';
             } else if (state === 'PRE') {
                 html += '<div class="pre-state">' + game['Start Time'] + '</div>';

app/static/styles.css

@@ -1,14 +1,16 @@
 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;
 }
 
 h1 {
     text-align: center;
     margin-top: 15px;
     margin-bottom: 25px;
-    color: #f2f2f2; /* Lighten the text color */
+    color: #f2f2f2;
+    font-size: 2em;
 }
 
 .scoreboard {
@@ -19,22 +21,23 @@ 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 */
-    padding: 20px;
-    margin-bottom: 20px;
-    margin-left: 20px;
-    margin-right: 20px;
-    width: 300px;
-    position: relative; /* Position relative for absolute positioning */
+    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;
+    margin-left: 1%;
+    margin-right: 1%;
+    margin-bottom: 1.15%;
 }
 
 .team-info {
     display: flex;
     align-items: center;
-    margin-bottom: 7px;
-    margin-top: 25px; /* Added margin-top */
+    margin-bottom: 2%;
+    margin-top: 9%;
 }
 
 .team-info-column {
@@ -43,48 +46,66 @@ h1 {
 }
 
 .team-logo {
-    width: 50px;
+    width: 18%;
     height: auto;
-    margin-right: 10px;
+    margin-right: 2.25%;
 }
 
 .team-name {
-    font-size: 18px;
+    font-size: 90%;
     font-weight: bold;
 }
 
+/* Add a media query for screens between 769px and 900px */
+@media only screen and (max-width: 950px) and (min-width: 769px) {
+    .team-name {
+        font-size: 0.55rem; /* Adjusted font size for screens between 769px and 900px */
+    }
+}
+
 .team-score {
-    font-size: 25px;
+    font-size: 130%;
     font-weight: bold;
     margin-left: auto;
 }
 
 .team-record {
-    font-size: 12px;
-    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 {
-    font-size: 12px; /* 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: 14px;
+    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 {
@@ -99,88 +120,112 @@ h1 {
 
 .pre-state {
     position: absolute;
-    top: 10px;
-    left: 10px; /* Adjusted left position */
-    background-color: #444; /* Darker background color for pre state */
-    padding: 5px;
+    top: 5%;
+    left: 3%;
+    background-color: #444;
+    padding: 1.5%;
     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 */
+    font-size: 0.65rem;
+    color: #fff; 
+    font-weight: bolder; 
+    z-index: 1; 
+    width: auto;
+    height: 10%;
+    display: flex;
+    justify-content: space-evenly; 
+    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: 10px;
-    left: 10px; /* Adjusted left position */
-    background-color: #444; /* Darker background color for final state */
-    padding: 5px;
+    top: 5%;
+    left: 3%; 
+    background-color: #444;
+    padding: 1.5%;
     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-size: 65%;
+    color: #ddd;
+    z-index: 1;
     font-weight: bold;
+    width: auto;
+    height: 7.5%;
 }
 
 .live-state {
     position: absolute;
-    top: 10px;
-    left: 10px; /* Adjusted left position */
-    background-color: #0b6e31; /* Darker green background color for live state */
-    padding: 5px;
+    top: 4%;
+    left: 4%; 
+    background-color: #0b6e31; 
+    padding: 1.5%;
     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;
+    font-size: 80%;
+    color: #fff; 
+    font-weight: bolder; 
+    z-index: 1; 
+    width: 7.2%;
+    height: 7.5%;
+    display: flex; 
+    justify-content: space-evenly;
+    align-items: center;
 }
 
 .live-time {
     position: absolute;
-    top: 10px;
-    left: 45px; /* Adjusted left position */
-    background-color: #444; /* Darker background color for time box */
-    padding: 5px;
+    top: 4%;
+    left: 16%; 
+    background-color: #444; 
+    padding: 1.5%;
     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;
-    display: flex; /* Use flexbox */
-    justify-content: space-evenly; /* Center content horizontally */
-    align-items: center; /* Center content vertically */
+    font-size: 80%;
+    color: #ddd; 
+    z-index: 1; 
+    display: flex; 
+    justify-content: space-evenly;
+    align-items: center;
+    width: 10%;
+    height: 7.5%;
+}
+
+.live-state-intermission {
+    position: absolute;
+    top: 5%;
+    left: 4%; 
+    background-color: #444;
+    padding: 1.5%;
+    border-radius: 5px;
+    font-size: 80%;
+    color: #fff;
+    font-weight: bolder;
+    z-index: 1;
+    width: 13%;
+    height: 7.5%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
 }
 
 .live-time-intermission {
     position: absolute;
-    top: 10px;
-    left: 65px; /* Adjusted left position */
-    background-color: #444; /* Darker background color for time box */
-    padding: 5px;
+    top: 5%;
+    left: 21.5%;
+    background-color: #444;
+    padding: 1.5%;
     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;
-    display: flex; /* Use flexbox */
-    justify-content: space-evenly; /* Center content horizontally */
-    align-items: center; /* Center content vertically */
+    font-size: 80%;
+    color: #ddd;
+    z-index: 1;
+    width: 12.5%;
+    height: 7.5%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
 }
 
 #live-games-section {
@@ -204,7 +249,19 @@ h1 {
     justify-content: flex-start;
 }
 
-/* Existing CSS styles */
+/* 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) {
@@ -214,39 +271,108 @@ h1 {
     }
 
     .game-box {
-        width: 90%; /* Adjust width for better fit on smaller screens */
-        margin: 10px; /* Adjust margins */
+        width: 90%;
+        padding: 4%;
+        margin-bottom: 4%;
+        margin-left: 2%;
+        margin-right: 2%;
+        max-width: 1000px;
     }
 
     .team-info {
-        align-items: center; /* Center align items */
-        margin-top: 26px; /* Adjust top margin */
-        margin-bottom: 5px; /* Adjust bottom margin */
+        align-items: center;
+        margin-top: 10%; 
+        margin-bottom: 2%;
     }
 
     .team-logo {
-        width: 36px; /* Adjust logo size */
-        height: 36px;
+        width: 12%;
+        height: auto;
     }
 
     .team-name {
-        font-size: 16px; /* Decrease font size for better readability */
+        font-size: 100%;
         font-weight: bold;
     }
 
     .team-score {
-        font-size: 24px; /* Decrease font size for better readability */
+        font-size: 140%;
         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%;
     }
+
+    .live-state {
+        top: 5%;
+        left: 3.5%;
+        padding: 1.5%;
+        border-radius: 5px;
+        font-size: 80%;
+        width: 5.5%;
+        height: 7.2%;
+    }
+    
+    .live-time {
+        top: 5%;
+        left: 13%;
+        padding: 1.5%;
+        border-radius: 5px;
+        font-size: 80%;
+        display: flex;
+        justify-content: space-evenly; 
+        align-items: center;
+        width: 7%;
+        height: 7.2%;
+    }
+    
+    .live-state-intermission {
+        top: 5%;
+        left: 3.5%;
+        padding: 1.5%;
+        border-radius: 5px;
+        font-size: 80%;
+        width: 11%;
+        height: 7.5%;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+    }
+
+    .live-time-intermission {
+        top: 5%;
+        left: 18.5%;
+        padding: 1.5%;
+        border-radius: 5px;
+        font-size: 80%;
+        width: 8%;
+        height: 7.5%;
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+    }
+
+    .final-state {
+        top: 5%;
+        left: 3.5%;
+        padding: 1.5%;
+        border-radius: 5px;
+        font-size: 72%;
+        width: auto;
+        height: 7.5%;
+    }
+
+    .pre-state {
+        top: 5%;
+        left: 3.5%;
+        padding: 1.5%;
+        border-radius: 5px;
+        font-size: 80%;
+    }
+    
 }