37 Commits

Author SHA1 Message Date
1cd6c7314b Merge develop into main for v4.0.0 (#34) 2024-02-21 00:43:41 -05:00
93b53b86b9 feature: adds hype meter to replace game score (#33) 2024-02-21 00:41:18 -05:00
53f0e69cc5 feature: adds hype meter to replace game score 2024-02-21 00:40:35 -05:00
4b6e8615b1 fix: weigh overtime heavier to compensate for time priority loss 2024-02-20 22:10:07 -05:00
31b4846287 fix: styles.css adjust live games 2024-02-20 22:09:45 -05:00
a329c2e8b2 fix: styles.css adjustments 2024-02-20 14:32:17 -05:00
24de212b98 remove unnecessary comments 2024-02-20 01:35:24 -05:00
6abcd2e448 fix: change spacing between rows 2024-02-20 01:27:19 -05:00
b3a09b27c0 fix: adjust game box spacing 2024-02-20 00:50:35 -05:00
8900bf0d14 fix: adjust sizing to fit space better 2024-02-20 00:47:29 -05:00
3d6afe0df3 fix: adjust styles 2024-02-20 00:41:49 -05:00
d4f5e4c991 fix: make elements more consistent across screen sizes 2024-02-19 21:57:02 -05:00
59fe338658 fix: drop leading zero oin start time 2024-02-19 21:56:06 -05:00
28265af13f fix: resize game boxes and space out (#32) 2024-02-19 19:11:58 -05:00
1fb7673aa4 fix: resize game boxes and space out 2024-02-19 19:10:56 -05:00
5bac025624 Merge develop into main for v3.0.7 (#31) 2024-02-19 16:33:48 -05:00
0d3921e7cf fix: game priority update (#30) 2024-02-19 16:31:49 -05:00
f17e221ad3 fix: game priority update 2024-02-19 16:31:15 -05:00
1c2028fa85 fix: shootout is period 5 and gets top priority (#29) 2024-02-19 16:24:13 -05:00
9fe94057ff fix: shootout is period 5 and gets top priority 2024-02-19 16:23:34 -05:00
e355693613 fix: live game state and time spacing and size (#28) 2024-02-19 16:21:45 -05:00
468a03e646 fix: live game state and time spacing and size 2024-02-19 16:20:21 -05:00
d89d674b2a hotfix: process_data.py fix incorrect database ref (#25) 2024-02-19 13:13:51 -05:00
7b5bde447a hotfix: process_data.py fix incorrect database ref 2024-02-19 13:13:29 -05:00
975ac4d4ec fix: fixes checks for non live games (#24) 2024-02-19 03:50:07 -05:00
8611471360 fix: fixes checks for non live games 2024-02-19 03:49:02 -05:00
18802f6ef5 hotfix: update dockerfile 2024-02-19 02:32:20 -05:00
4304954bc3 hotfix: change dockerfile 2024-02-19 02:27:31 -05:00
90cccf581a Merge develop into main for v3.0.2 (#23) 2024-02-19 02:14:18 -05:00
a3ee38d774 fix: last period type (#22) 2024-02-19 02:07:40 -05:00
5beb7e2b44 fix: last period type 2024-02-19 02:07:08 -05:00
c926821e1a .gitignore: update gitignore 2024-02-19 01:31:39 -05:00
a21bb3cdcc Merge pull request #20 from JoshNotWright/fix/create-data-folder
fix: creates data folder
2024-02-19 01:30:03 -05:00
148bdaefc4 fix: creates data folder 2024-02-19 01:29:34 -05:00
e645cb2b08 Update README.md 2024-02-19 01:20:56 -05:00
55b5b166d4 Merge pull request #18 from JoshNotWright/hotfix/change-dockerfile
Hotfix: update dockerfile
2024-02-19 01:16:32 -05:00
2ad85d5b51 Hotfix: update dockerfile 2024-02-19 01:16:15 -05:00
10 changed files with 347 additions and 140 deletions

5
.gitignore vendored
View File

@@ -1,7 +1,8 @@
/nhle_scoreboard_response.txt /nhle_scoreboard_response.txt
/nhle_standings_response.txt /nhle_standings_response.txt
/nhl_standings.db /app/data/nhl_standings.db
/scoreboard_data.json /app/data/scoreboard_data.json
/__pycache__ /__pycache__
/app/__pycache__ /app/__pycache__
/app/scoreboard/__pycache__ /app/scoreboard/__pycache__
nhl_standings.db

View File

@@ -14,12 +14,11 @@ COPY . /app
# Install any needed dependencies specified in requirements.txt # Install any needed dependencies specified in requirements.txt
RUN pip install --no-cache-dir -r 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 the Flask port
EXPOSE 2897 EXPOSE 2897
# Copy static files and templates
COPY ./templates /app/templates
COPY ./static /app/static
# Run the Flask application # Run the Flask application
CMD ["python", "app.py"] CMD ["python", "run.py"]

View File

@@ -32,7 +32,7 @@ This web application displays live NHL game scores, team statistics, and game st
3. Run the application: 3. Run the application:
```bash ```bash
python app.py python run.py
``` ```
4. Open your web browser and navigate to `http://localhost:2897` to view the scoreboard. 4. Open your web browser and navigate to `http://localhost:2897` to view the scoreboard.

View File

@@ -3,7 +3,7 @@ from flask import render_template, jsonify
from app.scoreboard.process_data import extract_game_info from app.scoreboard.process_data import extract_game_info
import json import json
SCOREBOARD_DATA_FILE = 'scoreboard_data.json' SCOREBOARD_DATA_FILE = 'app/data/scoreboard_data.json'
@app.route('/') @app.route('/')
def index(): def index():

View File

@@ -2,12 +2,12 @@ import requests
from datetime import datetime from datetime import datetime
import json import json
SCOREBOARD_DATA_FILE = 'scoreboard_data.json' SCOREBOARD_DATA_FILE = 'app/data/scoreboard_data.json'
def get_scoreboard_data(): def get_scoreboard_data():
now = datetime.now() now = datetime.now()
start_time_evening = now.replace(hour=23, minute=0, second=0, microsecond=0) # 7:00 PM EST 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=0, second=0, microsecond=0) # 3:00 AM 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: if now >= start_time_evening or now < end_time_evening:
# Use now URL # Use now URL

View File

@@ -7,18 +7,19 @@ def extract_game_info(scoreboard_data):
extracted_info = [] extracted_info = []
for game in scoreboard_data.get("games", []): for game in scoreboard_data.get("games", []):
game_state = convert_game_state(game["gameState"])
extracted_info.append({ extracted_info.append({
"Home Team": game["homeTeam"]["name"]["default"], "Home Team": game["homeTeam"]["name"]["default"],
"Home Score": game["homeTeam"]["score"], "Home Score": game["homeTeam"]["score"] if game_state != "PRE" else "N/A",
"Away Team": game["awayTeam"]["name"]["default"], "Away Team": game["awayTeam"]["name"]["default"],
"Away Score": game["awayTeam"]["score"], "Away Score": game["awayTeam"]["score"] if game_state != "PRE" else "N/A",
"Home Logo": game["homeTeam"]["logo"], "Home Logo": game["homeTeam"]["logo"],
"Away Logo": game["awayTeam"]["logo"], "Away Logo": game["awayTeam"]["logo"],
"Game State": convert_game_state(game["gameState"]), "Game State": game_state,
"Period": process_period(game), "Period": process_period(game),
"Time Remaining": process_time_remaining(game), "Time Remaining": process_time_remaining(game),
"Time Running": game["clock"]["running"], "Time Running": game["clock"]["running"] if game_state == "LIVE" else "N/A",
"Intermission": game["clock"]["inIntermission"], "Intermission": game["clock"]["inIntermission"] if game_state == "LIVE" else "N/A",
"Priority": calculate_game_priority(game), "Priority": calculate_game_priority(game),
"Start Time": process_start_time(game), "Start Time": process_start_time(game),
"Home Record": game["homeTeam"]["record"] if game["gameState"] in ["PRE", "FUT"] else "N/A", "Home Record": game["homeTeam"]["record"] if game["gameState"] in ["PRE", "FUT"] else "N/A",
@@ -27,7 +28,7 @@ def extract_game_info(scoreboard_data):
"Away Shots": game["awayTeam"]["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"]), "Home Power Play": get_power_play_info(game, game["homeTeam"]["name"]["default"]),
"Away Power Play": get_power_play_info(game, game["awayTeam"]["name"]["default"]), "Away Power Play": get_power_play_info(game, game["awayTeam"]["name"]["default"]),
"Last Period Type": get_game_outcome(game) "Last Period Type": get_game_outcome(game, game_state)
}) })
# Sort games based on priority # Sort games based on priority
@@ -70,8 +71,8 @@ def get_power_play_info(game, team_name):
return f"PP {game['situation']['timeRemaining']}" return f"PP {game['situation']['timeRemaining']}"
return "" return ""
def get_game_outcome(game): def get_game_outcome(game, game_state):
return game["gameOutcome"]["lastPeriodType"] if game["gameState"] == "FINAL" else "N/A" return game["gameOutcome"]["lastPeriodType"] if game_state == "FINAL" else "N/A"
def calculate_game_priority(game): def calculate_game_priority(game):
# Return 0 if game is in certain states # Return 0 if game is in certain states
@@ -95,10 +96,10 @@ def calculate_game_priority(game):
home_score = game["homeTeam"]["score"] home_score = game["homeTeam"]["score"]
away_score = game["awayTeam"]["score"] away_score = game["awayTeam"]["score"]
score_difference = abs(home_score - away_score) score_difference = abs(home_score - away_score)
score_total = (home_score + away_score) * 20 score_total = (home_score + away_score) * 25
# Calculate the base priority based on period # Calculate the base priority based on period
base_priority = {4: 400, 3: 300, 2: 200}.get(period, 100) base_priority = {5: 650, 4: 600, 3: 300, 2: 200}.get(period, 100)
# Adjust base priority based on score difference # Adjust base priority based on score difference
if score_difference > 3: if score_difference > 3:
@@ -113,7 +114,9 @@ def calculate_game_priority(game):
base_priority += 100 base_priority += 100
# Calculate time priority # Calculate time priority
time_priority = (1200 - time_remaining) / 20 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 # Calculate the final priority
final_priority = int(base_priority + time_priority - matchup_adjustment + score_total) final_priority = int(base_priority + time_priority - matchup_adjustment + score_total)
@@ -121,7 +124,7 @@ def calculate_game_priority(game):
return final_priority return final_priority
def get_team_standings(team_name): def get_team_standings(team_name):
conn = sqlite3.connect("nhl_standings.db") conn = sqlite3.connect("app/data/nhl_standings.db")
cursor = conn.cursor() cursor = conn.cursor()
cursor.execute(""" cursor.execute("""
SELECT league_sequence, league_l10_sequence SELECT league_sequence, league_l10_sequence
@@ -136,4 +139,4 @@ def utc_to_est_time(utc_time):
utc_datetime = datetime.strptime(utc_time, "%Y-%m-%dT%H:%M:%SZ") utc_datetime = datetime.strptime(utc_time, "%Y-%m-%dT%H:%M:%SZ")
est_offset = timedelta(hours=-5) est_offset = timedelta(hours=-5)
est_datetime = utc_datetime + est_offset est_datetime = utc_datetime + est_offset
return est_datetime.strftime("%I:%M %p") return est_datetime.strftime("%#I:%M %p")

View File

@@ -46,7 +46,7 @@ def extract_standings_info():
def update_nhl_standings(): def update_nhl_standings():
# Connect to SQLite database # Connect to SQLite database
conn = sqlite3.connect("nhl_standings.db") 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)

View File

@@ -16,33 +16,101 @@ function fetchScoreboardData() {
// Function to update scoreboard with fetched data // Function to update scoreboard with fetched data
function updateScoreboard(data) { function updateScoreboard(data) {
var liveGamesSection = document.getElementById("live-games-section"); var liveGamesSection = document.getElementById('live-games-section');
var preGamesSection = document.getElementById('pre-games-section'); var preGamesSection = document.getElementById('pre-games-section');
var finalGamesSection = document.getElementById('final-games-section'); var finalGamesSection = document.getElementById('final-games-section');
if (liveGamesSection) { if (liveGamesSection) {
var liveGamesExist = data && data.live_games && data.live_games.length > 0; var liveGamesExist = data && data.live_games && data.live_games.length > 0;
if (liveGamesExist) { if (liveGamesExist) {
document.getElementById('live-games').innerText = "Live Games" 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'); liveGamesSection.innerHTML = generateGameBoxes(data.live_games, 'LIVE');
} else {
var liveGamesElement = document.getElementById('live-games');
if (liveGamesElement) {
liveGamesElement.remove();
}
liveGamesSection.innerHTML = '';
} }
} }
if (preGamesSection) { if (preGamesSection) {
var preGamesExist = data && data.pre_games && data.pre_games.length > 0; var preGamesExist = data && data.pre_games && data.pre_games.length > 0;
if (preGamesExist) { if (preGamesExist) {
document.getElementById('on-later').innerText = "On Later" 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'); preGamesSection.innerHTML = generateGameBoxes(data.pre_games, 'PRE');
} else {
var onLaterElement = document.getElementById('on-later');
if (onLaterElement) {
onLaterElement.remove();
}
preGamesSection.innerHTML = '';
} }
} }
if (finalGamesSection) { if (finalGamesSection) {
var finalGamesExist = data && data.final_games && data.final_games.length > 0; var finalGamesExist = data && data.final_games && data.final_games.length > 0;
// Check if final games exist
if (finalGamesExist) { if (finalGamesExist) {
document.getElementById('game-over').innerText = "Game Over" // 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'); 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 to generate HTML for game boxes
@@ -105,9 +173,18 @@ function generateGameBoxes(games, state) {
html += '<div class="live-time">' + game['Time Remaining'] + '</div>'; html += '<div class="live-time">' + game['Time Remaining'] + '</div>';
} }
html += '</div>'; html += '</div>';
html += '<div class="game-info">'; if (!game['Intermission']) {
html += '<strong>Game Score: </strong>' + game['Priority']; html += '<div class="hype-meter-label">';
html += '<strong>Hype Meter</strong>';
html += '</div>'; html += '</div>';
html += '<div class="game-score-gauge">';
html += '<div class="gauge" data-score="' + game['Priority'] + '"></div>';
html += '</div>';
html += '</div>';
}
html += '</div>'; html += '</div>';
} else if (state === 'PRE') { } else if (state === 'PRE') {
html += '<div class="pre-state">' + game['Start Time'] + '</div>'; html += '<div class="pre-state">' + game['Start Time'] + '</div>';

View File

@@ -1,13 +1,15 @@
body { body {
background-color: #121212; /* Dark background color */ background-color: #121212;
font-family: Arial, sans-serif; /* Use a common sans-serif font */ font-family: Arial, sans-serif;
color: #fff; /* White text color */ color: #fff;
margin: 0;
} }
h1 { h1 {
text-align: center; text-align: center;
margin-top: 20px; margin-top: 15px;
color: #f2f2f2; /* Lighten the text color */ margin-bottom: 25px;
color: #f2f2f2;
} }
.scoreboard { .scoreboard {
@@ -18,22 +20,23 @@ h1 {
} }
.game-box { .game-box {
background-color: #333; /* Dark background color for game boxes */ background-color: #333;
border-radius: 12px; /* Rounded corners */ border-radius: 12px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px; padding: 1%;
margin-bottom: 20px; width: 16%;
margin-left: 20px; max-width: 300px;
margin-right: 20px; position: relative;
width: 300px; margin-left: 1%;
position: relative; /* Position relative for absolute positioning */ margin-right: 1%;
margin-bottom: 1.15%;
} }
.team-info { .team-info {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 7px; margin-bottom: 2%;
margin-top: 25px; /* Added margin-top */ margin-top: 9%;
} }
.team-info-column { .team-info-column {
@@ -42,48 +45,66 @@ h1 {
} }
.team-logo { .team-logo {
width: 50px; width: 18%;
height: auto; height: auto;
margin-right: 10px; margin-right: 2.25%;
} }
.team-name { .team-name {
font-size: 18px; font-size: 90%;
font-weight: bold; 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 { .team-score {
font-size: 25px; font-size: 130%;
font-weight: bold; font-weight: bold;
margin-left: auto; margin-left: auto;
} }
.team-record { .team-record {
font-size: 12px; font-size: 0.75rem;
margin-left: auto;
font-weight: bold; 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 { .team-sog {
font-size: 12px; /* Adjust font size as needed */ font-size: 65%;
color: #ddd; /* Lighter text color */ color: #ddd;
} }
.team-power-play { .team-power-play {
font-size: 12px; /* Adjust font size as needed */ font-size: 12px;
color: red; /* Set color to red */ color: red;
margin-left: 10px; /* Add some margin for spacing */ margin-left: 10px;
} }
.game-info { .game-info {
margin-top: 12px; margin-top: 12px;
color: #aaa; /* Lighten the text color */ color: #aaa;
text-align: center; text-align: center;
font-size: 14px; font-size: 80%;
} }
.game-info strong { .hype-meter-label {
margin-right: 5px; margin-top: 3%;
color: #aaa;
text-align: center;
font-size: 80%;
margin-bottom: 3%;
} }
.live-dot { .live-dot {
@@ -98,78 +119,112 @@ h1 {
.pre-state { .pre-state {
position: absolute; position: absolute;
top: 10px; top: 5%;
left: 10px; /* Adjusted left position */ left: 3%;
background-color: #444; /* Darker background color for pre state */ background-color: #444;
padding: 5px; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 0.65rem;
color: #fff; /* White text color for live state */ color: #fff;
font-weight: bolder; /* Bold text for live state */ font-weight: bolder;
z-index: 1; /* Ensure the live state box is above other content */ z-index: 1;
width: auto;
height: 10%;
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 { .final-state {
position: absolute; position: absolute;
top: 10px; top: 5%;
left: 10px; /* Adjusted left position */ left: 3%;
background-color: #444; /* Darker background color for final state */ background-color: #444;
padding: 5px; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 65%;
color: #ddd; /* Lighter text color for final state */ color: #ddd;
z-index: 1; /* Ensure the final state box is above other content */ z-index: 1;
font-weight: bold; font-weight: bold;
width: auto;
height: 7.5%;
} }
.live-state { .live-state {
position: absolute; position: absolute;
top: 10px; top: 4%;
left: 10px; /* Adjusted left position */ left: 4%;
background-color: #0b6e31; /* Darker green background color for live state */ background-color: #0b6e31;
padding: 5px; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 80%;
color: #fff; /* White text color for live state */ color: #fff;
font-weight: bolder; /* Bold text for live state */ font-weight: bolder;
z-index: 1; /* Ensure the live state box is above other content */ z-index: 1;
} width: 7.2%;
height: 7.5%;
.live-state-intermission { display: flex;
position: absolute; justify-content: space-evenly;
top: 10px; align-items: center;
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 { .live-time {
position: absolute; position: absolute;
top: 10px; top: 4%;
left: 45px; /* Adjusted left position */ left: 16%;
background-color: #444; /* Darker background color for time box */ background-color: #444;
padding: 5px; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 80%;
color: #ddd; /* Lighter text color for time box */ color: #ddd;
z-index: 1; /* Ensure the time box is above other content */ z-index: 1;
display: flex;
justify-content: space-evenly;
align-items: center;
width: 10%;
height: 7.5%;
}
.live-state-intermission {
position: absolute;
top: 5%;
left: 4%;
background-color: #444;
padding: 1.5%;
border-radius: 5px;
font-size: 80%;
color: #fff;
font-weight: bolder;
z-index: 1;
width: 13%;
height: 7.5%;
display: flex;
justify-content: space-evenly;
align-items: center;
} }
.live-time-intermission { .live-time-intermission {
position: absolute; position: absolute;
top: 10px; top: 5%;
left: 60px; /* Adjusted left position */ left: 21.5%;
background-color: #444; /* Darker background color for time box */ background-color: #444;
padding: 5px; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 80%;
color: #ddd; /* Lighter text color for time box */ color: #ddd;
z-index: 1; /* Ensure the time box is above other content */ z-index: 1;
width: 12.5%;
height: 7.5%;
display: flex;
justify-content: space-evenly;
align-items: center;
} }
#live-games-section { #live-games-section {
@@ -177,7 +232,6 @@ h1 {
align-items: start; align-items: start;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
margin-top: 20px;
} }
#pre-games-section { #pre-games-section {
@@ -185,7 +239,6 @@ h1 {
align-items: start; align-items: start;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
margin-top: 20px;
} }
#final-games-section { #final-games-section {
@@ -193,10 +246,21 @@ h1 {
align-items: start; align-items: start;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start;
margin-top: 20px;
} }
/* Existing CSS styles */ /* 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 */ /* Add media query for smaller screens */
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@@ -206,39 +270,108 @@ h1 {
} }
.game-box { .game-box {
width: 90%; /* Adjust width for better fit on smaller screens */ width: 90%;
margin: 10px; /* Adjust margins */ padding: 4%;
margin-bottom: 4%;
margin-left: 2%;
margin-right: 2%;
max-width: 1000px;
} }
.team-info { .team-info {
align-items: center; /* Center align items */ align-items: center;
margin-top: 26px; /* Adjust top margin */ margin-top: 10%;
margin-bottom: 5px; /* Adjust bottom margin */ margin-bottom: 2%;
} }
.team-logo { .team-logo {
width: 36px; /* Adjust logo size */ width: 12%;
height: 36px; height: auto;
} }
.team-name { .team-name {
font-size: 16px; /* Decrease font size for better readability */ font-size: 100%;
font-weight: bold; font-weight: bold;
} }
.team-score { .team-score {
font-size: 24px; /* Decrease font size for better readability */ font-size: 140%;
font-weight: bold; font-weight: bold;
} }
.game-info { .team-sog {
font-size: 12px; /* Decrease font size for better readability */ font-size: 70%;
} }
.live-state, .game-info {
.live-time, font-size: 90%;
.pre-state,
.final-state {
font-size: 12px; /* Decrease font size for better readability */
} }
.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%;
}
} }

View File

@@ -6,15 +6,9 @@
<link rel="stylesheet" type="text/css" href="static\styles.css"> <link rel="stylesheet" type="text/css" href="static\styles.css">
</head> </head>
<body> <body>
<h1 id="live-games"></h1>
<div id="live-games-section"></div> <div id="live-games-section"></div>
<h1 id="on-later"></h1>
<div id="pre-games-section"></div> <div id="pre-games-section"></div>
<h1 id="game-over"></h1>
<div id="final-games-section"></div> <div id="final-games-section"></div>
<script src="/static/script.js"></script> <script src="/static/script.js"></script>
</body> </body>
</html> </html>