diff --git a/tournaments/models/match.py b/tournaments/models/match.py index a5356a5..543fc6f 100644 --- a/tournaments/models/match.py +++ b/tournaments/models/match.py @@ -77,7 +77,7 @@ class Match(SideStoreModel): if self.round.index > 0: items.append(f" #{self.index_in_round() + 1}") elif self.group_stage: - items.append(self.group_stage.name()) + items.append(self.group_stage.display_name()) items.append(f"Match #{self.index + 1}") return " ".join(items) @@ -420,13 +420,19 @@ class Match(SideStoreModel): # _minutes = int((_seconds % 3600) / 60) # return f"{_hours:02d}h{_minutes:02d}min" - def tournament_title(self): + def tournament_title(self, full_name=False): if self.group_stage: - return self.group_stage.tournament.short_full_name() + if full_name: + return self.group_stage.tournament.full_name() + else: + return self.group_stage.tournament.short_full_name() else: - return self.round.tournament.short_full_name() + if full_name: + return self.round.tournament.full_name() + else: + return self.round.tournament.short_full_name() - def live_match(self, hide_teams=False, event_mode=False, short_names=False): + def live_match(self, hide_teams=False, event_mode=False, short_names=False, broadcast=False): title = self.computed_name() date = self.formatted_start_date() time_indication = self.time_indication() @@ -443,7 +449,7 @@ class Match(SideStoreModel): tournament_title = None if event_mode is True: - tournament_title = self.tournament_title() + tournament_title = self.tournament_title(broadcast == False) livematch = LiveMatch(self.index, title, date, time_indication, court, self.started(), ended, group_stage_name, live_format, self.start_date, self.court_index, self.disabled, bracket_name, self.should_show_lucky_loser_status(), tournament_title) diff --git a/tournaments/models/tournament.py b/tournaments/models/tournament.py index 27f030b..c9e314d 100644 --- a/tournaments/models/tournament.py +++ b/tournaments/models/tournament.py @@ -574,9 +574,9 @@ class Tournament(BaseModel): return groups - def create_match_group(self, name, matches, round_id=None, round_index=None, hide_teams=False, event_mode=False, short_names=False): + def create_match_group(self, name, matches, round_id=None, round_index=None, hide_teams=False, event_mode=False, short_names=False, broadcast=False): matches = list(matches) - live_matches = [match.live_match(hide_teams, event_mode, short_names) for match in matches] + live_matches = [match.live_match(hide_teams, event_mode, short_names, broadcast) for match in matches] # Filter out matches that have a start_date of None valid_matches = [match for match in matches if match.start_date is not None] @@ -1917,7 +1917,7 @@ class Tournament(BaseModel): return teams_processed - def planned_matches_by_day(self, day=None, all=False, event_mode=False): + def planned_matches_by_day(self, day=None, all=False, event_mode=False, broadcast=False): """ Collect all matches from tournaments and group them by their planned_start_date. @@ -2005,7 +2005,8 @@ class Tournament(BaseModel): round_id=None, round_index=None, hide_teams=hide_teams, - event_mode=event_mode + event_mode=event_mode, + broadcast=broadcast ) match_groups.append(mg) return sorted_days, match_groups @@ -2049,13 +2050,15 @@ class Tournament(BaseModel): round_id=None, round_index=None, hide_teams=hide_teams, - event_mode=event_mode + event_mode=event_mode, + broadcast=broadcast ) match_groups.append(mg) return sorted_days, match_groups - + def has_sponsors(self): + return self.event.images.exists() class MatchGroup: def __init__(self, name, matches, formatted_schedule, round_id=None, round_index=None): diff --git a/tournaments/static/tournaments/css/broadcast.css b/tournaments/static/tournaments/css/broadcast.css index 7dde33f..3615a41 100644 --- a/tournaments/static/tournaments/css/broadcast.css +++ b/tournaments/static/tournaments/css/broadcast.css @@ -67,12 +67,6 @@ body { object-fit: contain; } -.sponsor-logo-broadcast.screen-size-overlay { - object-fit: contain; - height: 80px; - width: 80px; /* Example height matching QR code */ -} - .bold { font-family: "Montserrat-Bold"; } @@ -134,7 +128,7 @@ body { .left-content.bubble-header { display: flex; align-items: top; /* Vertically align items (logo and text) */ - height: 140px; /* Example height matching QR code */ + height: 120px; /* Example height matching QR code */ } .left-content.bubble-header.screen-size-overlay { @@ -157,3 +151,57 @@ body { height: 100%; /* Make the logo's height match the parent's height */ width: auto; /* Maintain the logo's aspect ratio */ } + +#header { + padding: 30px; +} + +@media screen and (max-height: 720px) { + .logo { + object-fit: contain; + max-width: 60px; + } + + .club, + .event { + font-size: 1.5em; + } + + .sponsor-logo-broadcast { + object-fit: contain; + height: 80px; + width: 80px; /* Example height matching QR code */ + } +} + +@media screen and (min-height: 1080px) { + .sponsor-logo-broadcast { + object-fit: contain; + height: 120px; + width: 120px; /* Example height matching QR code */ + } + + #header { + margin-top: 20px; + margin-bottom: 40px; + } + .footer-broadcast { + margin-bottom: 40px; + } +} + +@media screen and (min-height: 2160px) { + .sponsor-logo-broadcast { + object-fit: contain; + height: 200px; + width: 200px; /* Example height matching QR code */ + } + + #header { + margin-top: 40px; + margin-bottom: 80px; + } + .footer-broadcast { + margin-bottom: 80px; + } +} diff --git a/tournaments/static/tournaments/css/tournament_bracket.css b/tournaments/static/tournaments/css/tournament_bracket.css index 917b631..7201ce6 100644 --- a/tournaments/static/tournaments/css/tournament_bracket.css +++ b/tournaments/static/tournaments/css/tournament_bracket.css @@ -265,6 +265,103 @@ border-radius: 0 0 24px 24px; /* Match the bubble's bottom corners */ } +.logo { + max-width: 80px; +} .match-result.broadcast-mode { - padding: 0px; + font-size: 1.2em; +} + +.round-title.broadcast-mode { + font-size: 1em; +} + +#screen-size-overlay { + font-size: clamp(1.5vh, 2vh, 2.5vh) !important; +} + +.sponsor-logo-broadcast.screen-size-overlay { + object-fit: contain; + height: 80px; + width: 80px; /* Example height matching QR code */ +} + +@media screen and (max-height: 720px) { + .sponsor-logo-broadcast.screen-size-overlay { + object-fit: contain; + height: 80px; + width: 80px; /* Example height matching QR code */ + } + + .logo { + max-width: 60px !important; + } + + .bubble.broadcast-bracket-match { + padding: 12px !important; + } + + .match-result.broadcast-mode { + padding: 0px; + } + + .match-result.broadcast-mode { + font-size: 1em; + } + + .round-title.broadcast-mode { + font-size: 0.6em; + } + + #screen-size-overlay { + font-size: clamp(1.5vh, 2vh, 2.5vh) !important; + } +} + +@media screen and (min-height: 1080px) { + .sponsor-logo-broadcast.screen-size-overlay { + object-fit: contain; + height: 120px; + width: 120px; /* Example height matching QR code */ + } + + .logo { + max-width: 80px; + } + .match-result.broadcast-mode { + font-size: 1.2em; + } + + .round-title.broadcast-mode { + font-size: 1em; + } + + #screen-size-overlay { + font-size: clamp(1.5vh, 2vh, 2.5vh) !important; + } +} + +@media screen and (min-height: 2160px) { + .sponsor-logo-broadcast.screen-size-overlay { + object-fit: contain; + height: 200px; + width: 200px; /* Example height matching QR code */ + } + + .logo { + max-width: 120px; + } + + .match-result.broadcast-mode { + font-size: 2em; + } + + .round-title.broadcast-mode { + font-size: 1.5em; + } + + .left-content.bubble-header.screen-size-overlay .left-margin h1.club, + .left-content.bubble-header.screen-size-overlay .left-margin h1.event { + font-size: 1.6em; + } } diff --git a/tournaments/static/tournaments/js/tournament_bracket.js b/tournaments/static/tournaments/js/tournament_bracket.js index e604582..1898b09 100644 --- a/tournaments/static/tournaments/js/tournament_bracket.js +++ b/tournaments/static/tournaments/js/tournament_bracket.js @@ -49,11 +49,11 @@ function renderBracket(options) { let topMargin = 0; if (isBroadcast) { responsiveMatchWidth = Math.min( - 500, + 600, Math.floor(availableWidth / roundTotalCount), ); - - if (roundTotalCount == 1) { + let screenHeight = window.innerHeight; + if (roundTotalCount <= 1) { topMargin = 240; } else if (roundTotalCount == 2) { topMargin = 180; @@ -61,9 +61,26 @@ function renderBracket(options) { topMargin = 120; } else if (roundTotalCount == 4) { topMargin = 60; + } else if (roundTotalCount == 5) { + topMargin = 40; + } else if (roundTotalCount == 6) { + topMargin = -20; } else { topMargin = 0; } + + if (screenHeight <= 720) { + } else if (screenHeight <= 1080) { + if (topMargin <= 0) { + topMargin = 40; + } + topMargin = topMargin * 2; + } else { + if (topMargin <= 0) { + topMargin = 120; + } + topMargin = topMargin * 3; + } } rounds.forEach((roundMatches, roundIndex) => { @@ -334,6 +351,17 @@ function renderBracket(options) { "--next-match-distance", `${nextMatchDistance}px`, ); + + let roundTopMargin = 80; + if (doubleButterflyMode) { + if (window.innerHeight <= 720) { + roundTopMargin = 50; + } else if (window.innerHeight > 720 && window.innerHeight <= 1080) { + roundTopMargin = 80; + } else if (window.innerHeight > 1080) { + roundTopMargin = 140; + } + } matchDiv.style.top = `${top + topMargin}px`; matchPositions[roundIndex][matchRealIndex] = top; @@ -351,19 +379,27 @@ function renderBracket(options) { // } // Position title above the first match - titleDiv.style.top = `${topMargin - 80}px`; // Adjust the 60px offset as needed + titleDiv.style.top = `${topMargin - roundTopMargin}px`; // Adjust the 60px offset as needed if ( (roundIndex == finalRoundIndex && realRoundIndex == 0) || isBroadcast == true ) { - titleDiv.style.top = `${top + topMargin - 80}px`; // Adjust the 60px offset as needed + titleDiv.style.top = `${top + topMargin - roundTopMargin}px`; // Adjust the 60px offset as needed } titleDiv.style.position = "absolute"; if (roundCount >= 5 && doubleButterflyMode == true) { + let offset = 40; + if (window.innerHeight <= 720) { + offset = 40; + } else if (window.innerHeight <= 1080) { + offset = 60; + } else { + offset = 120; + } if (roundIndex == finalRoundIndex - 1) { - titleDiv.style.marginLeft = "50px"; + titleDiv.style.marginLeft = `${offset}px`; } else if (roundIndex == finalRoundIndex + 1) { - titleDiv.style.marginLeft = "-50px"; + titleDiv.style.marginLeft = `-${offset}px`; } } matchesContainer.appendChild(titleDiv); diff --git a/tournaments/templates/tournaments/broadcast/broadcast.html b/tournaments/templates/tournaments/broadcast/broadcast.html index f22ebf6..a0f6a2b 100644 --- a/tournaments/templates/tournaments/broadcast/broadcast.html +++ b/tournaments/templates/tournaments/broadcast/broadcast.html @@ -22,7 +22,7 @@ {% block content %}