Merge pull request #10 from JoshNotWright/feature/better-refresh

Implement AJAX-based scoreboard updates in index.html

.github/workflows/docker-deploy.yml

@@ -0,0 +1,23 @@
+name: Docker Build and Push
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v3
+
+    - uses: mr-smithers-excellent/docker-build-push@v6.3
+      name: Build & push Docker image
+      with:
+        image: joshnotwright/nhlscoreboard
+        tags: ${{ github.event.release.tag_name }}, latest
+        registry: docker.io
+        username: ${{ secrets.DOCKER_USERNAME }}
+        password: ${{ secrets.DOCKER_PASSWORD }}
+

README.md

@@ -0,0 +1,53 @@
+# NHL Scoreboard Web App
+
+This web application displays live NHL game scores, team statistics, and game states in real-time. It retrieves data from the NHL API and presents it in a user-friendly interface.
+
+## Features
+
+- Displays live NHL game scores.
+- Sorts games based on priority to highlight the most exciting matchups.
+- Responsive design for desktop and mobile devices.
+
+## Technologies Used
+
+- **Python**: Backend scripting language.
+- **Flask**: Web framework for Python.
+- **HTML/CSS**: Frontend markup and styling.
+- **JavaScript**: Client-side scripting for auto-refresh functionality.
+
+## Installation
+
+1. Clone the repository:
+
+    ```bash
+    git clone https://github.com/your-username/nhl-scoreboard.git
+    ```
+
+2. Install dependencies:
+
+    ```bash
+    pip install -r requirements.txt
+    ```
+
+3. Run the application:
+
+    ```bash
+    python app.py
+    ```
+
+4. Open your web browser and navigate to `http://localhost:2897` to view the scoreboard.
+
+## Usage
+
+- The scoreboard will display live NHL game scores, team statistics, and game states.
+- Games are sorted based on priority to highlight the most exciting matchups.
+- The page updates automatically every 10 seconds to show the latest data.
+- Responsive design ensures a seamless experience on desktop and mobile devices.
+
+## Credits
+
+Special thanks to the NHL for providing the data through their API.
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template
+from flask import Flask, render_template, jsonify
 import requests
 from datetime import datetime, timedelta
 from waitress import serve
@@ -180,7 +180,7 @@ def calculate_game_priority(game):
         home_score = game["homeTeam"]["score"]
         away_score = game["awayTeam"]["score"]
         score_difference = abs(home_score - away_score)
-        score_total = (home_score + away_score) * 15
+        score_total = (home_score + away_score) * 20
 
         if period == 4:
             base_priority = 400
@@ -231,16 +231,22 @@ def utc_to_est_time(utc_time):
 # 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)
+    return render_template('index.html')
+
+@app.route('/scoreboard')
+def get_scoreboard():
+    global scoreboard_data
+    if scoreboard_data:
+        live_games = [game for game in extract_game_info() if game["Game State"] == "LIVE"]
+        pre_games = [game for game in extract_game_info() if game["Game State"] == "PRE"]
+        final_games = [game for game in extract_game_info() if game["Game State"] == "FINAL"]
+        return jsonify({
+            "live_games": live_games,
+            "pre_games": pre_games,
+            "final_games": final_games
+        })
     else:
-        print("Failed to retrieve scoreboard data")
-        return "Failed to retrieve scoreboard data"
+        return jsonify({"error": "Failed to retrieve scoreboard data"})
     
 if __name__ == '__main__':
     store_scoreboard_data()

static/script.js

@@ -0,0 +1,165 @@
+// 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) {
+            document.getElementById('live-games').innerText = "Live Games" 
+            liveGamesSection.innerHTML = generateGameBoxes(data.live_games, 'LIVE');
+        }
+    }
+
+    if (preGamesSection) {
+        var preGamesExist = data && data.pre_games && data.pre_games.length > 0;
+        if (preGamesExist) {
+            document.getElementById('on-later').innerText = "On Later"
+            preGamesSection.innerHTML = generateGameBoxes(data.pre_games, 'PRE');
+        }
+    }
+
+    if (finalGamesSection) {
+        var finalGamesExist = data && data.final_games && data.final_games.length > 0;
+        if (finalGamesExist) {
+            document.getElementById('game-over').innerText = "Game Over"
+            finalGamesSection.innerHTML = generateGameBoxes(data.final_games, 'FINAL');
+        }
+    }
+}
+
+// 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 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>';
+                html += '<div class="game-info>';
+                html += '<strong>Game Score: </strong>' + game['Priority'];
+                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();
+};

static/styles.css

@@ -240,4 +240,4 @@ h1 {
     .final-state {
         font-size: 12px; /* Decrease font size for better readability */
     }
-}
+}

templates/index.html

@@ -4,136 +4,17 @@
     <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 %}
+    <h1 id="live-games"></h1>
+    <div id="live-games-section"></div>
 
-    {% 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 %}
+    <h1 id="on-later"></h1>
+    <div id="pre-games-section"></div>
 
-    {% 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 %}
+    <h1 id="game-over"></h1>
+    <div id="final-games-section"></div>
+
+    <script src="/static/script.js"></script>
 </body>
 </html>