refactor: changes entire project structure
This commit is contained in:
166
app/static/script.js
Normal file
166
app/static/script.js
Normal file
@@ -0,0 +1,166 @@
|
||||
// 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();
|
||||
};
|
||||
244
app/static/styles.css
Normal file
244
app/static/styles.css
Normal file
@@ -0,0 +1,244 @@
|
||||
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: 12px;
|
||||
color: #aaa; /* Lighten the text color */
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.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 */
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user