diff --git a/app/features/tournament-bracket/brackets-viewer.css b/app/features/tournament-bracket/brackets-viewer.css index 084a37e70..22f0b4c2a 100644 --- a/app/features/tournament-bracket/brackets-viewer.css +++ b/app/features/tournament-bracket/brackets-viewer.css @@ -69,3 +69,7 @@ font-size: var(--fonts-xxs); margin-inline-end: var(--space-after-seed); } + +.participant > .name { + color: var(--team-text-color); +} diff --git a/app/features/tournament-bracket/routes/to.$id.brackets.tsx b/app/features/tournament-bracket/routes/to.$id.brackets.tsx index 3a527a27b..82ee4871f 100644 --- a/app/features/tournament-bracket/routes/to.$id.brackets.tsx +++ b/app/features/tournament-bracket/routes/to.$id.brackets.tsx @@ -187,19 +187,23 @@ 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) => { - const participantId = data.hasStarted ? team.id : i; - return ` - [data-participant-id="${participantId}"] { - --seed: "${i + 1} "; - --space-after-seed: ${i < 10 ? "6px" : "0px"}; - } - `; - }) - .join("\n") - ); + const cssRulesToAppend = parentRouteData.teams.map((team, i) => { + const participantId = data.hasStarted ? team.id : i; + return ` + [data-participant-id="${participantId}"] { + --seed: "${i + 1} "; + --space-after-seed: ${i < 10 ? "6px" : "0px"}; + } + `; + }); + if (parentRouteData.teamMemberOfName) { + cssRulesToAppend.push(` + [title="${parentRouteData.teamMemberOfName}"] { + --team-text-color: var(--theme-secondary); + } + `); + } + appendStyleTagToHead(cssRulesToAppend.join("\n")); const element = ref.current; return () => { diff --git a/app/features/tournament/routes/to.$id.tsx b/app/features/tournament/routes/to.$id.tsx index bcea2bec8..f04371df4 100644 --- a/app/features/tournament/routes/to.$id.tsx +++ b/app/features/tournament/routes/to.$id.tsx @@ -80,6 +80,9 @@ export const loader = async ({ params, request }: LoaderArgs) => { const ownedTeamId = teams.find((team) => team.members.some((member) => member.userId === user?.id && member.isOwner) )?.id; + const teamMemberOfName = teams.find((team) => + team.members.some((member) => member.userId === user?.id) + )?.name; return { event, @@ -87,6 +90,7 @@ export const loader = async ({ params, request }: LoaderArgs) => { event.eventId ), ownedTeamId, + teamMemberOfName, teams: censorMapPools(teams), mapListGeneratorAvailable, hasStarted,