Highlight own team

app/components/tournament/EliminationBracket.tsx

@@ -5,8 +5,10 @@ import { Unpacked } from "~/utils";
 
 export function EliminationBracket({
   bracketSide,
+  ownTeamName,
 }: {
   bracketSide: BracketModified["winners"];
+  ownTeamName?: string;
 }) {
   return (
     <div
@@ -91,6 +93,7 @@ export function EliminationBracket({
                       }
                       key={match.id}
                       match={match}
+                      ownTeamName={ownTeamName}
                     />
                   );
                 })}
@@ -138,9 +141,11 @@ function RoundInfo({
 export function Match({
   match,
   hidden,
+  ownTeamName,
 }: {
   match: Unpacked<Unpacked<BracketModified["winners"]>["matches"]>;
   hidden?: boolean;
+  ownTeamName?: string;
 }) {
   return (
     <div className={classNames("tournament-bracket__elim__match", { hidden })}>
@@ -150,7 +155,10 @@ export function Match({
       <div
         className={classNames(
           "tournament-bracket__elim__team",
-          "tournament-bracket__elim__teamOne"
+          "tournament-bracket__elim__teamOne",
+          {
+            own: ownTeamName && ownTeamName === match.participants?.[0],
+          }
         )}
       >
         {match.participants?.[0]}{" "}
@@ -165,7 +173,10 @@ export function Match({
       <div
         className={classNames(
           "tournament-bracket__elim__team",
-          "tournament-bracket__elim__teamTwo"
+          "tournament-bracket__elim__teamTwo",
+          {
+            own: ownTeamName && ownTeamName === match.participants?.[1],
+          }
         )}
       >
         {match.participants?.[1]}{" "}

app/routes/to/$organization.$tournament/bracket.$id.tsx

@@ -1,10 +1,14 @@
-import { json, useLoaderData } from "remix";
+import { json, useLoaderData, useMatches } from "remix";
 import type { LinksFunction, LoaderFunction } from "remix";
 import { EliminationBracket } from "~/components/tournament/EliminationBracket";
 import styles from "~/styles/tournament-bracket.css";
 import invariant from "tiny-invariant";
-import { bracketById } from "~/services/tournament";
+import {
+  bracketById,
+  FindTournamentByNameForUrlI,
+} from "~/services/tournament";
 import type { BracketModified } from "~/services/tournament";
+import { useUser } from "~/utils/hooks";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -22,11 +26,24 @@ export const loader: LoaderFunction = async ({ params }) => {
 // TODO: make bracket a bit smaller
 export default function BracketTabWrapper() {
   const data = useLoaderData<BracketModified>();
+  const [, parentRoute] = useMatches();
+  const user = useUser();
+  const { teams } = parentRoute.data as FindTournamentByNameForUrlI;
+
+  const ownTeam = teams.find((team) =>
+    team.members.some(({ member }) => member.id === user?.id)
+  );
 
   return (
     <div className="tournament-bracket__container">
-      <EliminationBracket bracketSide={data.winners} />
-      <EliminationBracket bracketSide={data.losers} />
+      <EliminationBracket
+        bracketSide={data.winners}
+        ownTeamName={ownTeam?.name}
+      />
+      <EliminationBracket
+        bracketSide={data.losers}
+        ownTeamName={ownTeam?.name}
+      />
     </div>
   );
 }

app/styles/tournament-bracket.css

@@ -82,6 +82,13 @@
   place-self: flex-start;
 }
 
+.tournament-bracket__elim__team.own {
+  /* TODO: refactor this to tournaments-bg */
+  background: var(--tournaments-background);
+  color: var(--tournaments-text);
+  font-weight: var(--bold);
+}
+
 .tournament-bracket__elim__teamOne {
   border-radius: var(--rounded) var(--rounded) 0 0;
   grid-area: team-one;