243 lines
10 KiB
JavaScript
243 lines
10 KiB
JavaScript
// 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 <=300) {
|
|
gauge.style.backgroundColor = '#4A90E2'
|
|
} else if (score <= 550) {
|
|
gauge.style.backgroundColor = '#FF4500'
|
|
} else {
|
|
gauge.style.backgroundColor = '#FF0033'
|
|
}
|
|
});
|
|
}
|
|
|
|
// Function to generate HTML for game boxes
|
|
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();
|
|
}; |