diff --git a/app/features/tournament-bracket/brackets-viewer.css b/app/features/tournament-bracket/brackets-viewer.css index 4b2b5a2b0..084a37e70 100644 --- a/app/features/tournament-bracket/brackets-viewer.css +++ b/app/features/tournament-bracket/brackets-viewer.css @@ -56,3 +56,16 @@ .bye { color: var(--text-lighter); } + +.brackets-viewer .participant .name > span { + color: var(--theme); + display: none; +} + +.brackets-viewer .participant .name::before { + content: var(--seed); + font-weight: initial; + color: var(--theme); + font-size: var(--fonts-xxs); + margin-inline-end: var(--space-after-seed); +} diff --git a/app/features/tournament-bracket/routes/to.$id.brackets.tsx b/app/features/tournament-bracket/routes/to.$id.brackets.tsx index 91e052a00..377925d93 100644 --- a/app/features/tournament-bracket/routes/to.$id.brackets.tsx +++ b/app/features/tournament-bracket/routes/to.$id.brackets.tsx @@ -182,6 +182,21 @@ export default function TournamentBracketsPage() { } ); + // my beautiful hack to show seeds + // clean up probably not needed as it's not harmful to append more than one + appendStyleTagToHead( + parentRouteData.teams + .map( + (team, i) => ` + [data-participant-id="${team.id}"] { + --seed: "${i + 1} "; + --space-after-seed: ${i < 10 ? "6px" : "0px"}; + } + ` + ) + .join("\n") + ); + const element = ref.current; return () => { if (!element) return; @@ -191,7 +206,7 @@ export default function TournamentBracketsPage() { }, [ data.bracket, navigate, - parentRouteData.event.id, + parentRouteData, data.hasStarted, lessThanTwoTeamsRegistered, ]); @@ -248,6 +263,16 @@ function AutoRefresher() { return null; } +function appendStyleTagToHead(content: string) { + const head = document.head || document.getElementsByTagName("head")[0]; + const style = document.createElement("style"); + + head.appendChild(style); + + style.type = "text/css"; + style.appendChild(document.createTextNode(content)); +} + function useAutoRefresh() { const { revalidate } = useRevalidator(); const parentRouteData = useOutletContext();