NHL-Scoreboard/app/static/script.js

// 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>';
                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();
};