merge develop into main for v4.1.8 (#43)

.gitignore

@@ -5,3 +5,4 @@
 /__pycache__
 /app/__pycache__
 /app/scoreboard/__pycache__
+nhl_standings.db

Dockerfile

@@ -6,14 +6,17 @@ ENV PYTHONDONTWRITEBYTECODE 1
 ENV PYTHONUNBUFFERED 1
 
 # Set the working directory in the container
-WORKDIR /
+WORKDIR /app
 
 # Copy the current directory contents into the container at /app
-COPY . /
+COPY . /app
 
 # Install any needed dependencies specified in requirements.txt
 RUN pip install --no-cache-dir -r requirements.txt
 
+# Create the directory for scoreboard data
+RUN mkdir -p app/data
+
 # Expose the Flask port
 EXPOSE 2897
 

app/scoreboard/get_data.py

@@ -6,8 +6,8 @@ SCOREBOARD_DATA_FILE = 'app/data/scoreboard_data.json'
 
 def get_scoreboard_data():
     now = datetime.now()
-    start_time_evening = now.replace(hour=23, minute=0, second=0, microsecond=0)  # 7:00 PM EST
+    start_time_evening = now.replace(hour=19, minute=00, second=0, microsecond=0)  # 7:00 PM EST
-    end_time_evening = now.replace(hour=8, minute=0, second=0, microsecond=0)     # 3:00 AM EST
+    end_time_evening = now.replace(hour=3, minute=00, second=0, microsecond=0)     # 3:00 AM EST
 
     if now >= start_time_evening or now < end_time_evening:
         # Use now URL

app/scoreboard/process_data.py

@@ -1,6 +1,14 @@
 import sqlite3
 from datetime import datetime, timedelta
 
+def process_record(record):
+    if record == "N/A":
+        return "N/A"
+    else:
+        parts = record.split("-")
+        formatted_parts = [part.zfill(2) for part in parts]
+        return "-".join(formatted_parts)
+
 def extract_game_info(scoreboard_data):
     if not scoreboard_data:
         return []
@@ -10,20 +18,20 @@ def extract_game_info(scoreboard_data):
         game_state = convert_game_state(game["gameState"])
         extracted_info.append({
             "Home Team": game["homeTeam"]["name"]["default"],
-            "Home Score": game["homeTeam"]["score"],
+            "Home Score": game["homeTeam"]["score"] if game_state != "PRE" else "N/A",
             "Away Team": game["awayTeam"]["name"]["default"],
-            "Away Score": game["awayTeam"]["score"],
+            "Away Score": game["awayTeam"]["score"] if game_state != "PRE" else "N/A",
             "Home Logo": game["homeTeam"]["logo"],
             "Away Logo": game["awayTeam"]["logo"],
             "Game State": game_state,
             "Period": process_period(game),
             "Time Remaining": process_time_remaining(game),
-            "Time Running": game["clock"]["running"],
+            "Time Running": game["clock"]["running"] if game_state == "LIVE" else "N/A",
-            "Intermission": game["clock"]["inIntermission"],
+            "Intermission": game["clock"]["inIntermission"] if game_state == "LIVE" else "N/A",
             "Priority": calculate_game_priority(game),
             "Start Time": process_start_time(game),
-            "Home Record": game["homeTeam"]["record"] if game["gameState"] in ["PRE", "FUT"] else "N/A",
+            "Home Record": process_record(game["homeTeam"]["record"]) if game["gameState"] in ["PRE", "FUT"] else "N/A",
-            "Away Record": game["awayTeam"]["record"] if game["gameState"] in ["PRE", "FUT"] else "N/A",
+            "Away Record": process_record(game["awayTeam"]["record"]) if game["gameState"] in ["PRE", "FUT"] else "N/A",
             "Home Shots": game["homeTeam"]["sog"] if game["gameState"] not in ["PRE", "FUT"] else 0,
             "Away Shots": game["awayTeam"]["sog"] if game["gameState"] not in ["PRE", "FUT"] else 0,
             "Home Power Play": get_power_play_info(game, game["homeTeam"]["name"]["default"]),
@@ -58,7 +66,11 @@ def process_time_remaining(game):
 def process_start_time(game):
     if game["gameState"] in ["PRE", "FUT"]:
         utc_time = game["startTimeUTC"]
-        return utc_to_est_time(utc_time)
+        est_time = utc_to_est_time(utc_time)
+        # Check if the hour starts with a zero
+        if est_time.startswith("0"):
+            est_time = est_time[1:]  # Drop the leading zero
+        return est_time
     else:
         return "N/A"
 
@@ -76,9 +88,17 @@ def get_game_outcome(game, game_state):
 
 def calculate_game_priority(game):
     # Return 0 if game is in certain states
-    if game["gameState"] in ["FINAL", "OFF", "PRE", "FUT"] or game["clock"]["inIntermission"]:
+    if game["gameState"] in ["FINAL", "OFF", "PRE", "FUT"]:
         return 0
     
+    # Get period, time remaining, scores, and other relevant data
+    period = game.get("periodDescriptor", {}).get("number", 0)
+    time_remaining = game.get("clock", {}).get("secondsRemaining", 0)
+    home_score = game["homeTeam"]["score"]
+    away_score = game["awayTeam"]["score"]
+    score_difference = abs(home_score - away_score)
+    score_total = (home_score + away_score) * 20
+
     # Get standings for home and away teams
     home_team_standings = get_team_standings(game["homeTeam"]["name"]["default"])
     away_team_standings = get_team_standings(game["awayTeam"]["name"]["default"])
@@ -88,41 +108,57 @@ def calculate_game_priority(game):
     away_total = away_team_standings["league_sequence"] + away_team_standings["league_l10_sequence"]
 
     # Calculate the matchup adjustment factor
-    matchup_adjustment = home_total + away_total 
+    matchup_multiplier = {5: 1, 4: 1, 3: 1.50, 2: 1.65, 1: 2}.get(period)
-
+    matchup_adjustment = (home_total + away_total) * matchup_multiplier
-    # Get period, time remaining, scores, and other relevant data
-    period = game.get("periodDescriptor", {}).get("number", 0)
-    time_remaining = game.get("clock", {}).get("secondsRemaining", 0)
-    home_score = game["homeTeam"]["score"]
-    away_score = game["awayTeam"]["score"]
-    score_difference = abs(home_score - away_score)
-    score_total = (home_score + away_score) * 20
 
     # Calculate the base priority based on period
-    base_priority = {4: 400, 3: 300, 2: 200}.get(period, 100)
+    base_priority = {5: 650, 4: 600, 3: 300, 2: 200}.get(period, 150)
 
     # Adjust base priority based on score difference
+    score_differential_adjustment = 0
+
     if score_difference > 3:
-        base_priority -= 500
+        score_differential_adjustment += 500
     elif score_difference > 2:
-        base_priority -= 350
+        score_differential_adjustment += 350
     elif score_difference > 1:
-        base_priority -= 100
+        score_differential_adjustment += 100
+    
+    if period == 3 and time_remaining <= 300:
+        score_differential_adjustment = score_differential_adjustment * 2
+    
+    base_priority -= score_differential_adjustment       
 
     # Adjust base priority based on certain conditions
-    if score_difference == 0 and period == 3 and time_remaining <= 600:
+    if period == 3 and time_remaining <= 720:
-        base_priority += 100
+        if score_difference == 0:
+            base_priority += 100
+        elif score_difference == 1:
+            base_priority += 60
+
+    if period == 3 and time_remaining <= 360:
+        if score_difference == 0:
+            base_priority += 50
+        elif score_difference == 1:
+            base_priority += 30
+
 
     # Calculate time priority
-    time_priority = (1200 - time_remaining) / 20
+    time_multiplier = {4: 2, 3: 2, 2: 1.5}.get(period, 0.75)
+
+    time_priority = ((1200 - time_remaining) / 20) * time_multiplier
 
     # Calculate the final priority
     final_priority = int(base_priority + time_priority - matchup_adjustment + score_total)
 
+    # Pushes the games that are in intermission to the bottom, but retains their sort
+    if game["clock"]["inIntermission"]:
+        return (-2000 - time_remaining)
+
     return final_priority
 
 def get_team_standings(team_name):
-    conn = sqlite3.connect("nhl_standings.db")
+    conn = sqlite3.connect("app/data/nhl_standings.db")
     cursor = conn.cursor()
     cursor.execute("""
         SELECT league_sequence, league_l10_sequence 
@@ -137,4 +173,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

@@ -16,33 +16,101 @@ function fetchScoreboardData() {
 
 // Function to update scoreboard with fetched data
 function updateScoreboard(data) {
-    var liveGamesSection = document.getElementById("live-games-section");
+    var liveGamesSection = document.getElementById('live-games-section');
     var preGamesSection = document.getElementById('pre-games-section');
     var finalGamesSection = document.getElementById('final-games-section');
 
     if (liveGamesSection) {
         var liveGamesExist = data && data.live_games && data.live_games.length > 0;
         if (liveGamesExist) {
-            document.getElementById('live-games').innerText = "Live Games" 
+            if (!document.getElementById('live-games')) {
+                var targetElement = document.getElementById('live-games-section');
+                var newElement = document.createElement('h1');
+                newElement.setAttribute('id', 'live-games');
+                newElement.innerText = 'Live Games';
+                targetElement.parentNode.insertBefore(newElement, targetElement);
+            }
             liveGamesSection.innerHTML = generateGameBoxes(data.live_games, 'LIVE');
+        } else {
+            var liveGamesElement = document.getElementById('live-games');
+            if (liveGamesElement) {
+                liveGamesElement.remove();
+            }
+            liveGamesSection.innerHTML = '';
         }
     }
 
     if (preGamesSection) {
         var preGamesExist = data && data.pre_games && data.pre_games.length > 0;
         if (preGamesExist) {
-            document.getElementById('on-later').innerText = "On Later"
+            if (!document.getElementById('on-later')) {
+                var targetElement = document.getElementById('pre-games-section');
+                var newElement = document.createElement('h1');
+                newElement.setAttribute('id', 'on-later');
+                newElement.innerText = 'Scheduled Games';
+                targetElement.parentNode.insertBefore(newElement, targetElement);
+            }
             preGamesSection.innerHTML = generateGameBoxes(data.pre_games, 'PRE');
+        } else {
+            var onLaterElement = document.getElementById('on-later');
+            if (onLaterElement) {
+                onLaterElement.remove();
+            }
+            preGamesSection.innerHTML = '';
         }
     }
 
     if (finalGamesSection) {
         var finalGamesExist = data && data.final_games && data.final_games.length > 0;
+    
+        // Check if final games exist
         if (finalGamesExist) {
-            document.getElementById('game-over').innerText = "Game Over"
+            // Create or update "Game Over" heading
+            if (!document.getElementById('game-over')) {
+                var targetElement = document.getElementById('final-games-section');
+                var newElement = document.createElement('h1');
+                newElement.setAttribute('id', 'game-over');
+                newElement.innerText = 'Game Over';
+                targetElement.parentNode.insertBefore(newElement, targetElement);
+            }
+    
+            // Update final games section with generated game boxes
             finalGamesSection.innerHTML = generateGameBoxes(data.final_games, 'FINAL');
+        } else {
+            // Remove "Game Over" heading if it exists and clear final games section
+            var gameOverElement = document.getElementById('game-over');
+            if (gameOverElement) {
+                gameOverElement.remove();
+            }
+            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 <=300) {
+            gauge.style.backgroundColor = '#4A90E2'
+        } else if (score <= 550) {
+            gauge.style.backgroundColor = '#FF4500'
+        } else {
+            gauge.style.backgroundColor = '#FF0033'
+        }
+    });
 }
 
 // Function to generate HTML for game boxes
@@ -105,9 +173,18 @@ function generateGameBoxes(games, state) {
                     html += '<div class="live-time">' + game['Time Remaining'] + '</div>';
                 }
                 html += '</div>';
-                html += '<div class="game-info">';
+                if (!game['Intermission']) {
-                html += '<strong>Game Score: </strong>' + game['Priority'];
+                    html += '<div class="hype-meter-label">';
-                html += '</div>';
+                    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,13 +1,16 @@
 body {
-    background-color: #121212; /* Dark background color */
+    background-color: #121212;
-    font-family: Arial, sans-serif; /* Use a common sans-serif font */
+    font-family: Arial, sans-serif;
-    color: #fff; /* White text color */
+    color: #fff;
+    margin: 0;
 }
 
 h1 {
     text-align: center;
-    margin-top: 20px;
+    margin-top: 0.8%;
-    color: #f2f2f2; /* Lighten the text color */
+    margin-bottom: 1.5%;
+    color: #f2f2f2;
+    font-size: 2.2em;
 }
 
 .scoreboard {
@@ -18,22 +21,23 @@ h1 {
 }
 
 .game-box {
-    background-color: #333; /* Dark background color for game boxes */
+    background-color: #333;
-    border-radius: 12px; /* Rounded corners */
+    border-radius: 12px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    padding: 20px;
+    padding: 1%;
-    margin-bottom: 20px;
+    width: 16%;
-    margin-left: 20px;
+    max-width: 350px;
-    margin-right: 20px;
+    position: relative;
-    width: 300px;
+    margin-left: 1%;
-    position: relative; /* Position relative for absolute positioning */
+    margin-right: 1%;
+    margin-bottom: 1.15%;
 }
 
 .team-info {
     display: flex;
     align-items: center;
-    margin-bottom: 7px;
+    margin-bottom: 2%;
-    margin-top: 25px; /* Added margin-top */
+    margin-top: 9%;
 }
 
 .team-info-column {
@@ -42,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: 1rem;
     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: 1.35rem;
     font-weight: bold;
     margin-left: auto;
 }
 
 .team-record {
-    font-size: 12px;
+    font-size: 0.8rem;
-    margin-left: auto;
     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 */
+    font-size: 0.75rem;
-    color: #ddd; /* Lighter text color */
+    color: #ddd;
 }
 
 .team-power-play {
-    font-size: 12px; /* Adjust font size as needed */
+    font-size: 12px;
-    color: red; /* Set color to red */
+    color: red; 
-    margin-left: 10px; /* Add some margin for spacing */
+    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 {
+.hype-meter-label {
-    margin-right: 5px;
+    margin-top: 3%;
+    color: #aaa;
+    text-align: center;
+    font-size: 80%;
+    margin-bottom: 3%;
 }
 
 .live-dot {
@@ -98,78 +120,115 @@ h1 {
 
 .pre-state {
     position: absolute;
-    top: 10px;
+    top: 5%;
-    left: 10px; /* Adjusted left position */
+    left: 3%;
-    background-color: #444; /* Darker background color for pre state */
+    background-color: #444;
-    padding: 5px;
+    padding: 1.5%;
     border-radius: 5px;
-    font-size: 12px;
+    font-size: 0.75rem;
-    color: #fff; /* White text color for live state */
+    color: #fff; 
-    font-weight: bolder; /* Bold text for live state */
+    font-weight: bolder; 
-    z-index: 1; /* Ensure the live state box is above other content */
+    z-index: 1; 
+    width: auto;
+    height: 7%;
+    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;
+    top: 5%;
-    left: 10px; /* Adjusted left position */
+    left: 3%; 
-    background-color: #444; /* Darker background color for final state */
+    background-color: #444;
-    padding: 5px;
+    padding: 1.5%;
     border-radius: 5px;
-    font-size: 12px;
+    font-size: 0.7rem;
-    color: #ddd; /* Lighter text color for final state */
+    color: #ddd;
-    z-index: 1; /* Ensure the final state box is above other content */
+    z-index: 1;
     font-weight: bold;
+    width: auto;
+    height: 7%;
+    display: flex; 
+    justify-content: space-evenly;
+    align-items: center;
 }
 
 .live-state {
     position: absolute;
-    top: 10px;
+    top: 4%;
-    left: 10px; /* Adjusted left position */
+    left: 4%; 
-    background-color: #0b6e31; /* Darker green background color for live state */
+    background-color: #0b6e31; 
-    padding: 5px;
+    padding: 1.5%;
     border-radius: 5px;
-    font-size: 12px;
+    font-size: 0.72rem;
-    color: #fff; /* White text color for live state */
+    color: #fff; 
-    font-weight: bolder; /* Bold text for live state */
+    font-weight: bolder; 
-    z-index: 1; /* Ensure the live state box is above other content */
+    z-index: 1; 
-}
+    width: 7%;
-
+    height: 7%;
-.live-state-intermission {
+    display: flex; 
-    position: absolute;
+    justify-content: space-evenly;
-    top: 10px;
+    align-items: center;
-    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 */
 }
 
 .live-time {
     position: absolute;
-    top: 10px;
+    top: 4%;
-    left: 45px; /* Adjusted left position */
+    left: 15%; 
-    background-color: #444; /* Darker background color for time box */
+    background-color: #444; 
-    padding: 5px;
+    padding: 1.5%;
     border-radius: 5px;
-    font-size: 12px;
+    font-size: 0.75rem;
-    color: #ddd; /* Lighter text color for time box */
+    color: #ddd; 
-    z-index: 1; /* Ensure the time box is above other content */
+    z-index: 1; 
+    display: flex; 
+    justify-content: space-evenly;
+    align-items: center;
+    width: 10%;
+    height: 7%;
+}
+
+.live-state-intermission {
+    position: absolute;
+    top: 4%;
+    left: 4%; 
+    background-color: #444;
+    padding: 1.5%;
+    border-radius: 5px;
+    font-size: 80%;
+    color: #fff;
+    font-weight: bolder;
+    z-index: 1;
+    width: 11%;
+    height: 8.5%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
 }
 
 .live-time-intermission {
     position: absolute;
-    top: 10px;
+    top: 4%;
-    left: 60px; /* Adjusted left position */
+    left: 19%;
-    background-color: #444; /* Darker background color for time box */
+    background-color: #444;
-    padding: 5px;
+    padding: 1.5%;
     border-radius: 5px;
-    font-size: 12px;
+    font-size: 0.75rem;
-    color: #ddd; /* Lighter text color for time box */
+    color: #ddd;
-    z-index: 1; /* Ensure the time box is above other content */
+    z-index: 1;
+    width: 10%;
+    height: 8.5%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
 }
 
 #live-games-section {
@@ -177,7 +236,6 @@ h1 {
     align-items: start;
     flex-wrap: wrap;
     justify-content: flex-start;
-    margin-top: 20px;
 }
 
 #pre-games-section {
@@ -185,7 +243,6 @@ h1 {
     align-items: start;
     flex-wrap: wrap;
     justify-content: flex-start;
-    margin-top: 20px;
 }
 
 #final-games-section {
@@ -193,10 +250,21 @@ h1 {
     align-items: start;
     flex-wrap: wrap;
     justify-content: flex-start;
-    margin-top: 20px;
 }
 
-/* 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) {
@@ -206,39 +274,108 @@ h1 {
     }
 
     .game-box {
-        width: 90%; /* Adjust width for better fit on smaller screens */
+        width: 90%;
-        margin: 10px; /* Adjust margins */
+        padding: 4%;
+        margin-bottom: 4%;
+        margin-left: 2%;
+        margin-right: 2%;
+        max-width: 1000px;
     }
 
     .team-info {
-        align-items: center; /* Center align items */
+        align-items: center;
-        margin-top: 26px; /* Adjust top margin */
+        margin-top: 10%; 
-        margin-bottom: 5px; /* Adjust bottom margin */
+        margin-bottom: 2%;
     }
 
     .team-logo {
-        width: 36px; /* Adjust logo size */
+        width: 12%;
-        height: 36px;
+        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 {
+    .team-sog {
-        font-size: 12px; /* Decrease font size for better readability */
+        font-size: 70%;
     }
 
-    .live-state,
+    .game-info {
-    .live-time,
+        font-size: 90%;
-    .pre-state,
-    .final-state {
-        font-size: 12px; /* Decrease font size for better readability */
     }
+
+    .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%;
+    }
+    
 }

app/templates/index.html

@@ -6,15 +6,9 @@
     <link rel="stylesheet" type="text/css" href="static\styles.css">
 </head>
 <body>
-    <h1 id="live-games"></h1>
     <div id="live-games-section"></div>
-
-    <h1 id="on-later"></h1>
     <div id="pre-games-section"></div>
-
-    <h1 id="game-over"></h1>
     <div id="final-games-section"></div>
-
     <script src="/static/script.js"></script>
 </body>
 </html>