Fix team seeds display for multi-bracket tournaments (#2755)

.github/pull_request_template.md

@@ -0,0 +1,15 @@
+## Summary
+
+<!-- Brief description of what this PR does -->
+
+## Routes changed
+
+<!-- Which views if any are affected? -->
+
+## Notes
+
+<!-- Important notes for context or as info to the reviewer -->
+
+## Closes
+
+<!-- Which issues are closed if any -->

AGENTS.md

@@ -56,7 +56,7 @@
 - `/app/db/tables.ts` contains all tables and columns available
 - `db.sqlite3` is development database
 - `db-test.sqlite3` is the unit test database (should be blank sans migrations ran)
-- `db-prod.sqlite3` is a copy of the production environment db
+- `db-prod.sqlite3` is a copy of the production environment db which can be freely experimented with
 
 ## E2E testing
 
@@ -73,6 +73,7 @@
 ## Testing in Chrome
 
 - some pages need authentication, you should impersonate "Sendou" user which can be done on the /admin page
+- port can be checked from the `.env` file, you can assume dev server is already running
 
 ## i18n
 
@@ -80,3 +81,12 @@
 - some a11y labels or text that should not normally be encountered by user (example given, error message by server) can be english
 - before adding a new translation, check that one doesn't already exist you can reuse (particularly in the common.json)
 - add only English translation and use `npm run i18n:sync` to initialize other jsons with empty string ready for translators
+
+## Commit messages
+
+- do not mention claude or claude code
+
+## Pull request
+
+- use the template `/github/pull_request_template.md`
+- do not mention claude or claude code in the description

app/features/tournament/TournamentRepository.server.ts

@@ -250,7 +250,8 @@ export async function findById(id: number) {
 					])
 					.where("TournamentTeam.tournamentId", "=", id)
 					.orderBy("TournamentTeam.seed", "asc")
-					.orderBy("TournamentTeam.createdAt", "asc"),
+					.orderBy("TournamentTeam.createdAt", "asc")
+					.orderBy("TournamentTeam.id", "asc"),
 			).as("teams"),
 			jsonArrayFrom(
 				eb

app/features/tournament/components/TeamWithRoster.tsx

@@ -14,12 +14,14 @@ export function TeamWithRoster({
 	team,
 	mapPool,
 	seed,
+	bracketLabel,
 	teamPageUrl,
 	activePlayers,
 }: {
 	team: TournamentDataTeam;
 	mapPool?: Array<Pick<Tables["MapPoolMap"], "stageId" | "mode">> | null;
 	seed?: number;
+	bracketLabel?: string;
 	teamPageUrl?: string;
 	activePlayers?: Tables["User"]["id"][];
 }) {
@@ -36,7 +38,9 @@ export function TeamWithRoster({
 					<div className="stack horizontal sm justify-end items-end">
 						{teamLogoSrc ? <Avatar size="xxs" url={teamLogoSrc} /> : null}
 						{seed ? (
-							<div className="tournament__team-with-roster__seed">#{seed}</div>
+							<div className="tournament__team-with-roster__seed">
+								{bracketLabel ? `${bracketLabel} ` : null}#{seed}
+							</div>
 						) : null}
 					</div>{" "}
 					{teamPageUrl ? (

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

@@ -1,18 +1,40 @@
 import { tournamentTeamPage } from "~/utils/urls";
 import { TeamWithRoster } from "../components/TeamWithRoster";
+import { getBracketProgressionLabel } from "../tournament-utils";
 import { useTournament } from "./to.$id";
 
 export default function TournamentTeamsPage() {
 	const tournament = useTournament();
 
+	const perBracketSeedCounters = new Map<number, number>();
+	const teamSeedInfo = tournament.ctx.teams.map((team, globalIndex) => {
+		if (!tournament.isMultiStartingBracket) {
+			return { seed: globalIndex + 1, bracketLabel: undefined };
+		}
+
+		const bracketIdx = team.startingBracketIdx ?? 0;
+		const currentSeed = (perBracketSeedCounters.get(bracketIdx) ?? 0) + 1;
+		perBracketSeedCounters.set(bracketIdx, currentSeed);
+
+		const bracketLabel = getBracketProgressionLabel(
+			bracketIdx,
+			tournament.ctx.settings.bracketProgression,
+		);
+
+		return { seed: currentSeed, bracketLabel };
+	});
+
 	return (
 		<div className="stack lg">
 			{tournament.ctx.teams.map((team, i) => {
+				const { seed, bracketLabel } = teamSeedInfo[i];
+
 				return (
 					<TeamWithRoster
 						key={team.id}
 						team={team}
-						seed={i + 1}
+						seed={seed}
+						bracketLabel={bracketLabel}
 						teamPageUrl={tournamentTeamPage({
 							tournamentId: tournament.ctx.id,
 							tournamentTeamId: team.id,

app/features/tournament/tournament-utils.ts

@@ -302,7 +302,7 @@ export function compareTeamsForOrdering(
 		return b.avgSeedingSkillOrdinal - a.avgSeedingSkillOrdinal;
 	}
 
-	return a.createdAt - b.createdAt;
+	return a.createdAt !== b.createdAt ? a.createdAt - b.createdAt : a.id - b.id;
 }
 
 export function sortTeamsBySeeding<T extends TeamForOrdering>(