feat: add matchup adjustment scaling. Earlier the period, the heavier… (#36)

fix: creates data folder

.gitignore

@@ -1,7 +1,8 @@
 /nhle_scoreboard_response.txt
 /nhle_standings_response.txt
-/nhl_standings.db
-/scoreboard_data.json
+/app/data/nhl_standings.db
+/app/data/scoreboard_data.json
 /__pycache__
 /app/__pycache__
 /app/scoreboard/__pycache__
+nhl_standings.db

Dockerfile

@@ -14,12 +14,11 @@ 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
 
-# Copy static files and templates
-COPY ./templates /app/templates
-COPY ./static /app/static
-
 # Run the Flask application
-CMD ["python", "app.py"]
+CMD ["python", "run.py"]

README.md

@@ -32,7 +32,7 @@ This web application displays live NHL game scores, team statistics, and game st
 3. Run the application:
 
     ```bash
-    python app.py
+    python run.py
     ```
 
 4. Open your web browser and navigate to `http://localhost:2897` to view the scoreboard.

app/routes.py

@@ -3,7 +3,7 @@ from flask import render_template, jsonify
 from app.scoreboard.process_data import extract_game_info
 import json
 
-SCOREBOARD_DATA_FILE = 'scoreboard_data.json'
+SCOREBOARD_DATA_FILE = 'app/data/scoreboard_data.json'
 
 @app.route('/')
 def index():

app/scoreboard/get_data.py

@@ -2,12 +2,12 @@ import requests
 from datetime import datetime
 import json
 
-SCOREBOARD_DATA_FILE = 'scoreboard_data.json'
+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
-    end_time_evening = now.replace(hour=8, minute=0, second=0, microsecond=0)     # 3:00 AM EST
+    start_time_evening = now.replace(hour=23, minute=00, second=0, microsecond=0)  # 7:00 PM EST
+    end_time_evening = now.replace(hour=8, 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

@@ -7,18 +7,19 @@ def extract_game_info(scoreboard_data):
 
     extracted_info = []
     for game in scoreboard_data.get("games", []):
+        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": convert_game_state(game["gameState"]),
+            "Game State": game_state,
             "Period": process_period(game),
             "Time Remaining": process_time_remaining(game),
-            "Time Running": game["clock"]["running"],
-            "Intermission": game["clock"]["inIntermission"],
+            "Time Running": game["clock"]["running"] if game_state == "LIVE" else "N/A",
+            "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",
@@ -27,7 +28,7 @@ def extract_game_info(scoreboard_data):
             "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"]),
             "Away Power Play": get_power_play_info(game, game["awayTeam"]["name"]["default"]),
-            "Last Period Type": get_game_outcome(game)
+            "Last Period Type": get_game_outcome(game, game_state)
         })
 
     # Sort games based on priority
@@ -70,13 +71,21 @@ def get_power_play_info(game, team_name):
                 return f"PP {game['situation']['timeRemaining']}"
     return ""
 
-def get_game_outcome(game):
-    return game["gameOutcome"]["lastPeriodType"] if game["gameState"] == "FINAL" else "N/A"
+def get_game_outcome(game, game_state):
+    return game["gameOutcome"]["lastPeriodType"] if game_state == "FINAL" else "N/A"
 
 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) * 25
 
     # Get standings for home and away teams
     home_team_standings = get_team_standings(game["homeTeam"]["name"]["default"])
@@ -87,18 +96,11 @@ 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 
-
-    # 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
+    matchup_multiplier = {5: 1, 4: 1, 3: 1.25, 2: 1.50, 1: 2}.get(period)
+    matchup_adjustment = (home_total + away_total) * matchup_multiplier
 
     # 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, 100)
 
     # Adjust base priority based on score difference
     if score_difference > 3:
@@ -113,15 +115,21 @@ def calculate_game_priority(game):
         base_priority += 100
 
     # 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 (final_priority - 2000)
+
     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 
@@ -136,4 +144,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/scoreboard/update_nhl_standings_db.py

@@ -46,7 +46,7 @@ def extract_standings_info():
 
 def update_nhl_standings():
     # Connect to SQLite database
-    conn = sqlite3.connect("nhl_standings.db")
+    conn = sqlite3.connect("app/data/nhl_standings.db")
 
     # Create standings table if it doesn't exist
     create_standings_table(conn)

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 <=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
@@ -105,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'];
-                html += '</div>';
+                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,13 +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: 20px;
-    color: #f2f2f2; /* Lighten the text color */
+    margin-top: 0.8%;
+    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 */
-    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: 350px;
+    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 {
@@ -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;
-    margin-left: auto;
+    font-size: 0.8rem;
     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: 0.75rem;
+    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 {
@@ -98,78 +120,115 @@ 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.75rem;
+    color: #fff; 
+    font-weight: bolder; 
+    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;
-    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: 0.7rem;
+    color: #ddd;
+    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;
-    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 */
-}
-
-.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 */
+    font-size: 0.72rem;
+    color: #fff; 
+    font-weight: bolder; 
+    z-index: 1; 
+    width: 7%;
+    height: 7%;
+    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: 15%; 
+    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 */
+    font-size: 0.75rem;
+    color: #ddd; 
+    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;
-    left: 60px; /* Adjusted left position */
-    background-color: #444; /* Darker background color for time box */
-    padding: 5px;
+    top: 4%;
+    left: 19%;
+    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 */
+    font-size: 0.75rem;
+    color: #ddd;
+    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 */
-        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%;
+    }
+    
 }

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>