merge develop into main for v4.0.1 (#35)

fix: creates data folder

.github/workflows/docker-deploy.yml

@@ -10,20 +10,14 @@ jobs:
 
     steps:
     - name: Checkout code
-      uses: actions/checkout@v2
+      uses: actions/checkout@v3
 
-    - name: Set up Docker Buildx
+    - uses: mr-smithers-excellent/docker-build-push@v6.3
-      uses: docker/setup-buildx-action@v1
+      name: Build & push Docker image
-
+      with:
-    - name: Build and push Docker image
+        image: joshnotwright/nhlscoreboard
-      env:
+        tags: ${{ github.event.release.tag_name }}, latest
-        DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+        registry: docker.io
-        DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+        username: ${{ secrets.DOCKER_USERNAME }}
-        RELEASE_VERSION: ${{ github.event.release.tag_name }}
+        password: ${{ secrets.DOCKER_PASSWORD }}
-      run: |
-        docker build -t joshnotwright/nhlscoreboard .
-        docker tag joshnotwright/nhlscoreboard:latest joshnotwright/nhlscoreboard:${RELEASE_VERSION}
-        docker tag joshnotwright/nhlscoreboard:latest joshnotwright/nhlscoreboard:latest
-        docker push joshnotwright/nhlscoreboard:${RELEASE_VERSION}
-        docker push joshnotwright/nhlscoreboard:latest
 

.gitignore

@@ -1,2 +1,8 @@
 /nhle_scoreboard_response.txt
-/nhle_standings_response.txt
+/nhle_standings_response.txt
+/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.py

@@ -1,248 +0,0 @@
-from flask import Flask, render_template
-import requests
-from datetime import datetime, timedelta
-from waitress import serve
-import sqlite3
-import threading
-import time
-import schedule
-import json
-
-
-app = Flask(__name__)
-
-# Configuration
-scoreboard_data = None
-
-# Data Retrieval
-def get_nhle_scoreboard():
-    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
-
-    if now >= start_time_evening or now < end_time_evening:
-        # Use now URL
-        nhle_api_url = "https://api-web.nhle.com/v1/score/now"
-    
-    else:
-        # Use current data URL
-        nhle_api_url = f"https://api-web.nhle.com/v1/score/{now.strftime('%Y-%m-%d')}"
-        
-    response = requests.get(nhle_api_url)
-    if response.status_code == 200:
-        return response.json()
-    else:
-        print("Error:", response.status_code)
-
-# Store scoreboard data locally
-def store_scoreboard_data():
-    global scoreboard_data
-    scoreboard_data = get_nhle_scoreboard()
-
-# Schedule the task to run every 10 seconds
-def schedule_task():
-    schedule.every(10).seconds.do(store_scoreboard_data)
-    while True:
-        schedule.run_pending()
-        time.sleep(1)
-
-# Data Processing
-def extract_game_info():
-    global scoreboard_data
-    if scoreboard_data:
-        extracted_info = []
-        for game in scoreboard_data.get("games", []):
-            home_team = game["homeTeam"]["name"]["default"]
-            away_team = game["awayTeam"]["name"]["default"]
-            home_logo = game["homeTeam"]["logo"]
-            away_logo = game["awayTeam"]["logo"]
-            game_state = convert_game_state(game["gameState"])
-            period, time_remaining, time_running, is_intermission = process_time_and_period(game_state, game)
-            home_score, away_score, home_shots, away_shots = process_scores_and_shots(game_state, game)
-            start_time_str, home_record, away_record = process_start_time_and_records(game_state, game)
-            game_priority = calculate_game_priority(game)
-
-            # Get power play information
-            home_power_play = get_power_play_info(game, home_team)
-            away_power_play = get_power_play_info(game, away_team)
-
-            # Get game outcome
-            last_period_type = get_game_outcome(game_state, game)
-
-
-            extracted_info.append({
-                "Home Team": home_team,
-                "Home Score": home_score,
-                "Away Team": away_team,
-                "Away Score": away_score,
-                "Home Logo": home_logo,
-                "Away Logo": away_logo,
-                "Game State": game_state,
-                "Period": period,
-                "Time Remaining": time_remaining,
-                "Time Running": time_running,
-                "Intermission": is_intermission,
-                "Priority": game_priority,
-                "Start Time": start_time_str,
-                "Home Record": home_record,
-                "Away Record": away_record,
-                "Home Shots": home_shots,
-                "Away Shots": away_shots,
-                "Home Power Play": home_power_play,
-                "Away Power Play": away_power_play,
-                "Last Period Type": last_period_type
-            })
-
-        # Sort games based on priority
-        sorted_info = sorted(extracted_info, key=lambda x: x["Priority"], reverse=True)
-        return sorted_info
-
-def convert_game_state(game_state):
-    if game_state == "OFF":
-        return "FINAL"
-    elif game_state == "CRIT":
-        return "LIVE"
-    elif game_state == "FUT":
-        return "PRE"
-    else:
-        return game_state
-
-def process_time_and_period(game_state, game):
-    if game_state in ["PRE", "FUT"]:
-        return 0, "20:00", False, False
-    elif game_state in ["FINAL", "OFF"]:
-        return "N/A", "00:00", False, False
-    else:
-        period = game["periodDescriptor"]["number"]
-        time_remaining = game["clock"]["timeRemaining"]
-        if time_remaining == "00:00":
-            time_remaining = "END"
-        time_running = game["clock"]["running"]
-        is_intermission = game["clock"]["inIntermission"]
-        return period, time_remaining, time_running, is_intermission
-
-def process_scores_and_shots(game_state, game):
-    if game_state in ["PRE", "FUT"]:
-        return 0, 0, 0, 0
-    else:
-        return game["homeTeam"]["score"], game["awayTeam"]["score"], game["homeTeam"]["sog"], game["awayTeam"]["sog"]
-
-def process_start_time_and_records(game_state, game):
-    if game_state in ["PRE", "FUT"]:
-        start_time_utc = game["startTimeUTC"]
-        start_time_str = utc_to_est_time(start_time_utc)
-        home_record = game["homeTeam"]["record"]
-        away_record = game["awayTeam"]["record"]
-        game_state = "PRE"
-    else:
-        start_time_str = "N/A"
-        home_record = "N/A"
-        away_record = "N/A"
-    return start_time_str, home_record, away_record
-
-def get_power_play_info(game, team_name):
-    if "situation" in game and "situationDescriptions" in game["situation"]:
-        for situation in game["situation"]["situationDescriptions"]:
-            if situation == "PP" and game["awayTeam"]["name"]["default"] == team_name:
-                return f"PP {game['situation']['timeRemaining']}"
-            elif situation == "PP" and game["homeTeam"]["name"]["default"] == team_name:
-                return f"PP {game['situation']['timeRemaining']}"
-    return ""  # Return empty string if team is not on power play
-
-def get_game_outcome(game_state, game):
-    if game_state == "FINAL":
-        last_period_type = game["gameOutcome"]["lastPeriodType"]
-    else:
-        last_period_type = "N/A"
-    
-    return last_period_type
-    
-
-
-
-def calculate_game_priority(game):
-    if game["gameState"] in ["FINAL", "OFF", "PRE", "FUT"] or game["clock"]["inIntermission"]:
-        return 0
-    else:
-        # Get standings information from the database 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"])
-
-        # Calculate total values of leagueSequence + leagueL10Sequence for each team
-        home_team_total = home_team_standings["league_sequence"] + home_team_standings["league_l10_sequence"]
-        away_team_total = away_team_standings["league_sequence"] + away_team_standings["league_l10_sequence"]
-
-        # Calculate the priority adjustment factor by subtracting away team's total from home team's total
-        matchup_adjustment = home_team_total + away_team_total 
-
-        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
-
-        if period == 4:
-            base_priority = 400
-        elif period == 3:
-            base_priority = 300
-        elif period == 2:
-            base_priority = 200
-        else:
-            base_priority = 100
-
-        if score_difference > 3:
-            base_priority -= 500
-        elif score_difference > 2:
-            base_priority -= 350
-        elif score_difference > 1:
-            base_priority -= 100
-
-        if score_difference == 0 and period == 3 and time_remaining <= 600:
-            base_priority += 100
-
-        time_priority = (1200 - time_remaining) / 20
-
-        # Add the priority adjustment factor to the base priority
-        return int(base_priority + time_priority - matchup_adjustment + score_total)
-    
-def get_team_standings(team_name):
-    conn = sqlite3.connect("nhl_standings.db")
-    cursor = conn.cursor()
-    cursor.execute("""
-        SELECT league_sequence, league_l10_sequence 
-        FROM standings 
-        WHERE team_common_name = ?
-    """, (team_name,))
-    result = cursor.fetchone()
-    conn.close()
-    if result:
-        return {"league_sequence": result[0], "league_l10_sequence": result[1]}
-    else:
-        return {"league_sequence": 0, "league_l10_sequence": 0}
-    
-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
-    est_time_str = est_datetime.strftime("%I:%M %p")
-    return est_time_str
-
-# Routes
-@app.route('/')
-def index():
-    game_info = extract_game_info()
-    if game_info:
-        live_games_exist = any(game["Game State"] == "LIVE" for game in game_info)
-        pre_games_exist = any(game["Game State"] == "PRE" for game in game_info)
-        final_games_exist = any(game["Game State"] == "FINAL" for game in game_info)
-        return render_template('index.html', games=game_info, live_games_exist=live_games_exist,
-                               pre_games_exist=pre_games_exist, final_games_exist=final_games_exist)
-    else:
-        print("Failed to retrieve scoreboard data")
-        return "Failed to retrieve scoreboard data"
-    
-if __name__ == '__main__':
-    store_scoreboard_data()
-    threading.Thread(target=schedule_task).start()
-    serve(app, host="0.0.0.0", port=2897)

app/__init__.py

@@ -0,0 +1,5 @@
+from flask import Flask
+
+app = Flask(__name__)
+
+from app import routes

app/routes.py

@@ -0,0 +1,32 @@
+from app import app
+from flask import render_template, jsonify
+from app.scoreboard.process_data import extract_game_info
+import json
+
+SCOREBOARD_DATA_FILE = 'app/data/scoreboard_data.json'
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+    
+@app.route('/scoreboard')
+def get_scoreboard():
+    try:
+        with open(SCOREBOARD_DATA_FILE, 'r') as json_file:
+            scoreboard_data = json.load(json_file)
+    except FileNotFoundError:
+        return jsonify({"error": "Failed to retrieve scoreboard data. File not found."})
+    except json.JSONDecodeError:
+        return jsonify({"error": "Failed to retrieve scoreboard data. Invalid JSON format."})
+
+    if scoreboard_data:
+        live_games = [game for game in extract_game_info(scoreboard_data) if game["Game State"] == "LIVE"]
+        pre_games = [game for game in extract_game_info(scoreboard_data) if game["Game State"] == "PRE"]
+        final_games = [game for game in extract_game_info(scoreboard_data) if game["Game State"] == "FINAL"]
+        return jsonify({
+            "live_games": live_games,
+            "pre_games": pre_games,
+            "final_games": final_games
+        })
+    else:
+        return jsonify({"error": "Failed to retrieve scoreboard data"})

app/scoreboard/get_data.py

@@ -0,0 +1,34 @@
+import requests
+from datetime import datetime
+import json
+
+SCOREBOARD_DATA_FILE = 'app/data/scoreboard_data.json'
+
+def get_scoreboard_data():
+    now = datetime.now()
+    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
+        nhle_api_url = "https://api-web.nhle.com/v1/score/now"
+    
+    else:
+        # Use current data URL
+        nhle_api_url = f"https://api-web.nhle.com/v1/score/{now.strftime('%Y-%m-%d')}"
+        
+    response = requests.get(nhle_api_url)
+    if response.status_code == 200:
+        return response.json()
+    else:
+        print("Error:", response.status_code)
+
+# Store scoreboard data locally
+def store_scoreboard_data():
+    scoreboard_data = get_scoreboard_data() 
+    if scoreboard_data:
+        with open(SCOREBOARD_DATA_FILE, 'w') as json_file:
+            json.dump(scoreboard_data, json_file)
+            return scoreboard_data
+    else:
+        return None

app/scoreboard/process_data.py

@@ -0,0 +1,146 @@
+import sqlite3
+from datetime import datetime, timedelta
+
+def extract_game_info(scoreboard_data):
+    if not scoreboard_data:
+        return []
+
+    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"] if game_state != "PRE" else "N/A",
+            "Away Team": game["awayTeam"]["name"]["default"],
+            "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"] 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",
+            "Away 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"]),
+            "Away Power Play": get_power_play_info(game, game["awayTeam"]["name"]["default"]),
+            "Last Period Type": get_game_outcome(game, game_state)
+        })
+
+    # Sort games based on priority
+    return sorted(extracted_info, key=lambda x: x["Priority"], reverse=True)
+
+def convert_game_state(game_state):
+    state_mapping = {"OFF": "FINAL", "CRIT": "LIVE", "FUT": "PRE"}
+    return state_mapping.get(game_state, game_state)
+
+def process_period(game):
+    if game["gameState"] in ["PRE", "FUT"]:
+        return 0
+    elif game["gameState"] in ["FINAL", "OFF"]:
+        return "N/A"
+    else:
+        return game["periodDescriptor"]["number"]
+
+def process_time_remaining(game):
+    if game["gameState"] in ["PRE", "FUT"]:
+        return "20:00"
+    elif game["gameState"] in ["FINAL", "OFF"]:
+        return "00:00"
+    else:
+        time_remaining = game["clock"]["timeRemaining"]
+        return "END" if time_remaining == "00:00" else time_remaining
+
+def process_start_time(game):
+    if game["gameState"] in ["PRE", "FUT"]:
+        utc_time = game["startTimeUTC"]
+        return utc_to_est_time(utc_time)
+    else:
+        return "N/A"
+
+def get_power_play_info(game, team_name):
+    if "situation" in game and "situationDescriptions" in game["situation"]:
+        for situation in game["situation"]["situationDescriptions"]:
+            if situation == "PP" and game["awayTeam"]["name"]["default"] == team_name:
+                return f"PP {game['situation']['timeRemaining']}"
+            elif situation == "PP" and game["homeTeam"]["name"]["default"] == team_name:
+                return f"PP {game['situation']['timeRemaining']}"
+    return ""
+
+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"]:
+        return 0
+
+    # 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"])
+
+    # Calculate total values of leagueSequence + leagueL10Sequence for each team
+    home_total = home_team_standings["league_sequence"] + home_team_standings["league_l10_sequence"]
+    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) * 25
+
+    # Calculate the base priority based on period
+    base_priority = {5: 650, 4: 600, 3: 300, 2: 200}.get(period, 100)
+
+    # Adjust base priority based on score difference
+    if score_difference > 3:
+        base_priority -= 500
+    elif score_difference > 2:
+        base_priority -= 350
+    elif score_difference > 1:
+        base_priority -= 100
+
+    # Adjust base priority based on certain conditions
+    if score_difference == 0 and period == 3 and time_remaining <= 600:
+        base_priority += 100
+
+    # Calculate time priority
+    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("app/data/nhl_standings.db")
+    cursor = conn.cursor()
+    cursor.execute("""
+        SELECT league_sequence, league_l10_sequence 
+        FROM standings 
+        WHERE team_common_name = ?
+    """, (team_name,))
+    result = cursor.fetchone()
+    conn.close()
+    return {"league_sequence": result[0] if result else 0, "league_l10_sequence": result[1] if result else 0}
+
+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")

app/scoreboard/tasks.py

@@ -0,0 +1,13 @@
+import schedule
+import time
+from app.scoreboard.update_nhl_standings_db import update_nhl_standings
+from app.scoreboard.get_data import store_scoreboard_data
+
+def schedule_tasks():
+    schedule.every(600).seconds.do(update_nhl_standings)
+    schedule.every(10).seconds.do(store_scoreboard_data)
+    while True:
+        schedule.run_pending()
+        time.sleep(1)
+
+

app/scoreboard/update_nhl_standings_db.py

@@ -44,21 +44,22 @@ def extract_standings_info():
         print("Error:", response.status_code)
         return None
 
-# Connect to SQLite database
+def update_nhl_standings():
-conn = sqlite3.connect("nhl_standings.db")
+    # Connect to SQLite database
+    conn = sqlite3.connect("app/data/nhl_standings.db")
 
-# Create standings table if it doesn't exist
+    # Create standings table if it doesn't exist
-create_standings_table(conn)
+    create_standings_table(conn)
 
-# Truncate standings table before inserting new data
+    # Truncate standings table before inserting new data
-truncate_standings_table(conn)
+    truncate_standings_table(conn)
 
-# Extract standings info
+    # Extract standings info
-standings_info = extract_standings_info()
+    standings_info = extract_standings_info()
 
-# Insert standings info into the database
+    # Insert standings info into the database
-if standings_info:
+    if standings_info:
-    insert_standings_info(conn, standings_info)
+        insert_standings_info(conn, standings_info)
 
-# Close database connection
+    # Close database connection
-conn.close()
+    conn.close()

app/static/script.js

@@ -0,0 +1,243 @@
+// Function to fetch scoreboard data using AJAX
+function fetchScoreboardData() {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "/scoreboard", true);
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+                updateScoreboard(JSON.parse(xhr.responseText));
+            } else {
+                console.error("Failed to fetch scoreboard data.");
+            }
+        }
+    };
+    xhr.send();
+}
+
+// Function to update scoreboard with fetched data
+function updateScoreboard(data) {
+    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) {
+            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) {
+            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) {
+            // 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
+function generateGameBoxes(games, state) {
+    var html = '';
+    games.forEach(function(game) {
+        if (game['Game State'] === state) {
+            html += '<div class="game-box">';
+            if (state === 'LIVE') {
+                if (game['Time Running']) {
+                    html += '<div class="live-dot"></div>'; // Display the red dot if the game is live
+                }
+                html += '<div class="team-info">';
+                html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
+                html += '<div class="team-info-column">';
+                html += '<span class="team-name">' + game['Away Team'] + '</span>';
+                html += '<span class="team-sog">SOG: ' + game['Away Shots'] + '</span>';
+                html += '<span class="team-power-play">' + game['Away Power Play'] + '</span>';
+                html += '</div>';
+                html += '<span class="team-score">' + game['Away Score'] + '</span>';
+                html += '</div>';
+                html += '<div class="team-info">';
+                html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
+                html += '<div class="team-info-column">';
+                html += '<span class="team-name">' + game['Home Team'] + '</span>';
+                html += '<span class="team-sog">SOG: ' + game['Home Shots'] + '</span>';
+                html += '<span class="team-power-play">' + game['Home Power Play'] + '</span>';
+                html += '</div>';
+                html += '<span class="team-score">' + game['Home Score'] + '</span>';
+                html += '</div>';
+                html += '<div class="game-info">';
+                if (game['Intermission']) {
+                    html += '<div class="live-state-intermission">'
+                    if (game['Period'] == 1 ) {
+                        html += '1st Int';
+                    }
+                    if (game['Period'] == 2 ) {
+                        html += '2nd Int';
+                    }
+                    if (game['Period'] == 3 ) {
+                        html += '3rd Int';
+                    }
+                    html += '</div>';
+                    html += '<div class="live-time-intermission">' + game['Time Remaining'] + '</div>';
+                } else {
+                    html += '<div class="live-state">';
+                    if (game['Period'] == 1 ) {
+                        html += '1st';
+                    }
+                    else if (game['Period'] == 2 ) {
+                        html += '2nd';
+                    }
+                    else if (game['Period'] == 3 ) {
+                        html += '3rd';
+                    }
+                    else {
+                        html += 'OT';
+                    }
+                    html += '</div>';
+                    html += '<div class="live-time">' + game['Time Remaining'] + '</div>';
+                }
+                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>';
+                html += '<div class="team-info">';
+                html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
+                html += '<span class="team-name">' + game['Away Team'] + '</span>';
+                html += '<span class="team-record">' + game['Away Record'] + '</span>';
+                html += '</div>';
+                html += '<div class="team-info">';
+                html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
+                html += '<span class="team-name">' + game['Home Team'] + '</span>';
+                html += '<span class="team-record">' + game['Home Record'] + '</span>';
+                html += '</div>';
+            } else if (state === 'FINAL') {
+                html += '<div class="final-state">';
+                if (game['Last Period Type'] === 'REG') {
+                    html += 'FINAL';
+                } else if (game['Last Period Type'] === 'OT') {
+                    html += 'FINAL/OT';
+                } else {
+                    html += 'FINAL/SO';
+                }
+                html += '</div>';
+                html += '<div class="team-info">';
+                html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
+                html += '<div class="team-info-column">';
+                html += '<span class="team-name">' + game['Away Team'] + '</span>';
+                html += '<span class="team-sog">SOG: ' + game['Away Shots'] + '</span>';
+                html += '</div>';
+                html += '<span class="team-score">' + game['Away Score'] + '</span>';
+                html += '</div>';
+                html += '<div class="team-info">';
+                html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
+                html += '<div class="team-info-column">';
+                html += '<span class="team-name">' + game['Home Team'] + '</span>';
+                html += '<span class="team-sog">SOG: ' + game['Home Shots'] + '</span>';
+                html += '</div>';
+                html += '<span class="team-score">' + game['Home Score'] + '</span>';
+                html += '</div>';
+            }
+            html += '</div>';
+        }
+    });
+    return html;
+}
+
+// Function to reload the scoreboard every 20 seconds
+function autoRefresh() {
+    fetchScoreboardData();
+    setTimeout(autoRefresh, 5000); // 20 seconds
+}
+
+// Call the autoRefresh function when the page loads
+window.onload = function() {
+    autoRefresh();
+};

app/static/styles.css

@@ -0,0 +1,381 @@
+body {
+    background-color: #121212;
+    font-family: Arial, sans-serif;
+    color: #fff;
+    margin: 0;
+}
+
+h1 {
+    text-align: center;
+    margin-top: 0.8%;
+    margin-bottom: 1.5%;
+    color: #f2f2f2;
+    font-size: 2.2em;
+}
+
+.scoreboard {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin-top: 20px;
+}
+
+.game-box {
+    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: 2%;
+    margin-top: 9%;
+}
+
+.team-info-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.team-logo {
+    width: 18%;
+    height: auto;
+    margin-right: 2.25%;
+}
+
+.team-name {
+    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: 1.35rem;
+    font-weight: bold;
+    margin-left: auto;
+}
+
+.team-record {
+    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: 0.75rem;
+    color: #ddd;
+}
+
+.team-power-play {
+    font-size: 12px;
+    color: red; 
+    margin-left: 10px;
+}
+
+.game-info {
+    margin-top: 12px;
+    color: #aaa;
+    text-align: center;
+    font-size: 80%;
+}
+
+.hype-meter-label {
+    margin-top: 3%;
+    color: #aaa;
+    text-align: center;
+    font-size: 80%;
+    margin-bottom: 3%;
+}
+
+.live-dot {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    width: 10px;
+    height: 10px;
+    background-color: red;
+    border-radius: 50%;
+}
+
+.pre-state {
+    position: absolute;
+    top: 5%;
+    left: 3%;
+    background-color: #444;
+    padding: 1.5%;
+    border-radius: 5px;
+    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: 5%;
+    left: 3%; 
+    background-color: #444;
+    padding: 1.5%;
+    border-radius: 5px;
+    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: 4%;
+    left: 4%; 
+    background-color: #0b6e31; 
+    padding: 1.5%;
+    border-radius: 5px;
+    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: 4%;
+    left: 15%; 
+    background-color: #444; 
+    padding: 1.5%;
+    border-radius: 5px;
+    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: 4%;
+    left: 19%;
+    background-color: #444;
+    padding: 1.5%;
+    border-radius: 5px;
+    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 {
+    display: flex;
+    align-items: start;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+
+#pre-games-section {
+    display: flex;
+    align-items: start;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+
+#final-games-section {
+    display: flex;
+    align-items: start;
+    flex-wrap: wrap;
+    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 {
+        flex-direction: column; /* Change direction to column for smaller screens */
+        align-items: center; /* Center align items */
+    }
+
+    .game-box {
+        width: 90%;
+        padding: 4%;
+        margin-bottom: 4%;
+        margin-left: 2%;
+        margin-right: 2%;
+        max-width: 1000px;
+    }
+
+    .team-info {
+        align-items: center;
+        margin-top: 10%; 
+        margin-bottom: 2%;
+    }
+
+    .team-logo {
+        width: 12%;
+        height: auto;
+    }
+
+    .team-name {
+        font-size: 100%;
+        font-weight: bold;
+    }
+
+    .team-score {
+        font-size: 140%;
+        font-weight: bold;
+    }
+
+    .team-sog {
+        font-size: 70%;
+    }
+
+    .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

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>NHL Scoreboard</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="static\styles.css">
+</head>
+<body>
+    <div id="live-games-section"></div>
+    <div id="pre-games-section"></div>
+    <div id="final-games-section"></div>
+    <script src="/static/script.js"></script>
+</body>
+</html>

run.py

@@ -0,0 +1,13 @@
+from app import app
+from waitress import serve
+import threading
+from app.scoreboard.tasks import schedule_tasks
+from app.scoreboard.get_data import store_scoreboard_data
+from app.scoreboard.update_nhl_standings_db import update_nhl_standings
+
+if __name__ == '__main__':
+    store_scoreboard_data()
+    update_nhl_standings()
+    threading.Thread(target=schedule_tasks).start()
+    serve(app, host="0.0.0.0", port=2897)
+    

static/styles.css

@@ -1,243 +0,0 @@
-body {
-    background-color: #121212; /* Dark background color */
-    font-family: Arial, sans-serif; /* Use a common sans-serif font */
-    color: #fff; /* White text color */
-}
-
-h1 {
-    text-align: center;
-    margin-top: 20px;
-    color: #f2f2f2; /* Lighten the text color */
-}
-
-.scoreboard {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    margin-top: 20px;
-}
-
-.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 */
-}
-
-.team-info {
-    display: flex;
-    align-items: center;
-    margin-bottom: 7px;
-    margin-top: 25px; /* Added margin-top */
-}
-
-.team-info-column {
-    display: flex;
-    flex-direction: column;
-}
-
-.team-logo {
-    width: 50px;
-    height: auto;
-    margin-right: 10px;
-}
-
-.team-name {
-    font-size: 18px;
-    font-weight: bold;
-}
-
-.team-score {
-    font-size: 25px;
-    font-weight: bold;
-    margin-left: auto;
-}
-
-.team-record {
-    font-size: 12px;
-    margin-left: auto;
-    font-weight: bold;
-}
-
-.team-sog {
-    font-size: 12px; /* Adjust font size as needed */
-    color: #ddd; /* Lighter text color */
-}
-
-.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 */
-}
-
-.game-info {
-    margin-top: 10px;
-    color: #aaa; /* Lighten the text color */
-    text-align: center;
-}
-
-.game-info strong {
-    margin-right: 5px;
-}
-
-.live-dot {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    width: 10px;
-    height: 10px;
-    background-color: red;
-    border-radius: 50%;
-}
-
-.pre-state {
-    position: absolute;
-    top: 10px;
-    left: 10px; /* Adjusted left position */
-    background-color: #444; /* Darker background color for pre 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 */
-}
-
-.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 */
-}
-
-.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 */
-}
-
-.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 */
-}
-
-.live-time-intermission {
-    position: absolute;
-    top: 10px;
-    left: 60px; /* 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 */
-}
-
-.live-games-section {
-    display: flex;
-    align-items: start;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    margin-top: 20px;
-}
-
-.pre-games-section {
-    display: flex;
-    align-items: start;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    margin-top: 20px;
-}
-
-.final-games-section {
-    display: flex;
-    align-items: start;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    margin-top: 20px;
-}
-
-/* Existing CSS styles */
-
-/* Add media query for smaller screens */
-@media only screen and (max-width: 768px) {
-    .scoreboard {
-        flex-direction: column; /* Change direction to column for smaller screens */
-        align-items: center; /* Center align items */
-    }
-
-    .game-box {
-        width: 90%; /* Adjust width for better fit on smaller screens */
-        margin: 10px; /* Adjust margins */
-    }
-
-    .team-info {
-        align-items: center; /* Center align items */
-        margin-top: 26px; /* Adjust top margin */
-        margin-bottom: 5px; /* Adjust bottom margin */
-    }
-
-    .team-logo {
-        width: 36px; /* Adjust logo size */
-        height: 36px;
-    }
-
-    .team-name {
-        font-size: 16px; /* Decrease font size for better readability */
-        font-weight: bold;
-    }
-
-    .team-score {
-        font-size: 24px; /* Decrease font size for better readability */
-        font-weight: bold;
-    }
-
-    .game-info {
-        font-size: 12px; /* Decrease font size for better readability */
-    }
-
-    .live-state,
-    .live-time,
-    .pre-state,
-    .final-state {
-        font-size: 12px; /* Decrease font size for better readability */
-    }
-}

templates/index.html

@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>NHL Scoreboard</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="static\styles.css">
-    <script>
-        // Function to reload the page every 20 seconds
-        function autoRefresh() {
-            setTimeout(function() {
-                location.reload();
-            }, 5000); // 20 seconds
-        }
-
-        // Call the autoRefresh function when the page loads
-        window.onload = autoRefresh;
-    </script>
-</head>
-<body>
-    {% if live_games_exist %}
-    <h1>Live Games</h1>
-    <div class="live-games-section">
-        {% for game in games if game['Game State'] == 'LIVE' %}
-        <div class="game-box">
-            {% if game['Time Running'] %}
-                <div class="live-dot"></div> <!-- Display the red dot if the game is live -->
-            {% endif %}
-            <div class="team-info">
-                <img src="{{ game['Away Logo'] }}" alt="{{ game['Away Team'] }} Logo" class="team-logo">
-                <div class="team-info-column">
-                    <span class="team-name">{{ game['Away Team'] }}</span>
-                    <span class="team-sog">SOG: {{ game['Away Shots'] }}</span>
-                    <span class="team-power-play">{{ game['Away Power Play'] }}</span>
-                </div>
-                <span class="team-score">{{ game['Away Score'] }}</span>
-            </div>
-            <div class="team-info">
-                <img src="{{ game['Home Logo'] }}" alt="{{ game['Home Team'] }} Logo" class="team-logo">
-                <div class="team-info-column">
-                    <span class="team-name">{{ game['Home Team'] }}</span>
-                    <span class="team-sog">SOG: {{ game['Home Shots'] }}</span>
-                    <span class="team-power-play">{{ game['Home Power Play'] }}</span>
-                </div>
-                <span class="team-score">{{ game['Home Score'] }}</span>
-            </div>
-            <div class="game-info">
-                {% if game['Intermission'] %}
-                    <div class="live-state-intermission">
-                    {% if game['Period'] == 1 %}
-                        1st Int
-                    {% elif game['Period'] == 2 %}
-                        2nd Int
-                    {% elif game['Period'] == 3 %}
-                        3rd Int
-                    {% endif %}
-                    </div>
-                    <div class="live-time-intermission">{{ game['Time Remaining'] }}</div>
-                
-                {% else %}
-                    <div class="live-state">
-                    {% if game['Period'] == 1 %}
-                        1st
-                    {% elif game['Period'] == 2 %}
-                        2nd
-                    {% elif game['Period'] == 3 %}
-                        3rd
-                    {% else %}
-                        OT
-                    {% endif %}
-                    </div>
-                    <div class="live-time">{{ game['Time Remaining'] }}</div>
-                {% endif %}
-                 <!-- Display time remaining in time box -->
-            </div>
-            <div class="game-info">
-                <strong>Game Score:</strong> {{ game['Priority'] }}
-            </div>
-        </div>
-        {% endfor %}
-    </div>
-    {% endif %}
-
-    {% if pre_games_exist %}
-    <h1>On Later</h1>
-    <div class="pre-games-section">
-        {% for game in games if game['Game State'] == 'PRE' %}
-        <div class="game-box">
-            <div class="pre-state">{{ game['Start Time'] }}</div>
-            <div class="team-info">
-                <img src="{{ game['Away Logo'] }}" alt="{{ game['Away Team'] }} Logo" class="team-logo">
-                <span class="team-name">{{ game['Away Team'] }}</span>
-                <span class="team-record">{{ game['Away Record'] }}</span>
-            </div>
-            <div class="team-info">
-                <img src="{{ game['Home Logo'] }}" alt="{{ game['Home Team'] }} Logo" class="team-logo">
-                <span class="team-name">{{ game['Home Team'] }}</span>
-                <span class="team-record">{{ game['Home Record'] }}</span>
-            </div>
-        </div>
-        {% endfor %}
-    </div>
-    {% endif %}
-
-    {% if final_games_exist %}
-    <h1>Game Over</h1>
-    <div class="final-games-section">
-        {% for game in games if game['Game State'] == 'FINAL' %}
-        <div class="game-box">
-            <div class="final-state">
-            {% if game['Last Period Type'] == 'REG' %}
-                    FINAL
-                {% elif game['Last Period Type'] == 'OT' %}
-                    FINAL/OT
-                {% else %}
-                    FINAL/SO
-            {% endif %}
-            </div>
-            <div class="team-info">
-                <img src="{{ game['Away Logo'] }}" alt="{{ game['Away Team'] }} Logo" class="team-logo">
-                <div class="team-info-column">
-                    <span class="team-name">{{ game['Away Team'] }}</span>
-                    <span class="team-sog">SOG: {{ game['Away Shots'] }}</span>
-                </div>
-                <span class="team-score">{{ game['Away Score'] }}</span>
-            </div>
-            <div class="team-info">
-                <img src="{{ game['Home Logo'] }}" alt="{{ game['Home Team'] }} Logo" class="team-logo">
-                <div class="team-info-column">
-                    <span class="team-name">{{ game['Home Team'] }}</span>
-                    <span class="team-sog">SOG: {{ game['Home Shots'] }}</span>
-                </div>
-                <span class="team-score">{{ game['Home Score'] }}</span>
-            </div>
-        </div>
-        {% endfor %}
-    </div>
-    {% endif %}
-</body>
-</html>