Show seeds before tournament starts

app/features/tournament-bracket/routes/to.$id.brackets.tsx

@@ -186,14 +186,15 @@ export default function TournamentBracketsPage() {
     // 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"};
-      }
-    `
-        )
+        .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")
     );
 

app/features/tournament/routes/to.$id.teams.tsx

@@ -11,8 +11,8 @@ export default function TournamentTeamsPage() {
 
   return (
     <div className="stack lg">
-      {data.teams.map((team) => {
-        return <TeamWithRoster key={team.id} team={team} />;
+      {data.teams.map((team, i) => {
+        return <TeamWithRoster key={team.id} team={team} seed={i + 1} />;
       })}
     </div>
   );
@@ -20,13 +20,18 @@ export default function TournamentTeamsPage() {
 
 function TeamWithRoster({
   team,
+  seed,
 }: {
   team: Pick<FindTeamsByTournamentIdItem, "members" | "name" | "mapPool">;
+  seed: number;
 }) {
   return (
     <div>
       <div className="tournament__team-with-roster">
-        <div className="tournament__team-with-roster__name">{team.name}</div>
+        <div className="tournament__team-with-roster__name">
+          <span className="tournament__team-with-roster__seed">#{seed}</span>{" "}
+          {team.name}
+        </div>
         <ul className="tournament__team-with-roster__members">
           {team.members.map((member) => (
             <li

app/features/tournament/tournament.css

@@ -153,6 +153,12 @@
   padding-block: var(--s-0-5);
 }
 
+.tournament__team-with-roster__seed {
+  font-size: var(--fonts-xs);
+  font-weight: var(--semi-bold);
+  color: var(--theme);
+}
+
 .tournament__team-member-name {
   overflow: hidden;
   color: var(--text);