diff --git a/app/components/tournament/EliminationBracket.tsx b/app/components/tournament/EliminationBracket.tsx
index c95819acb..ea92047ec 100644
--- a/app/components/tournament/EliminationBracket.tsx
+++ b/app/components/tournament/EliminationBracket.tsx
@@ -35,37 +35,6 @@ export function EliminationBracket({
round.matches.length === nextRound?.matches.length;
const drawStraightLines =
round.matches.length === 1 || amountOfMatchesBetweenRoundsEqual;
- const theKindOfLinesToDraw: (
- | undefined
- | "no-line"
- | "bottom-only"
- | "top-only"
- )[] = new Array(
- amountOfMatchesBetweenRoundsEqual
- ? round.matches.length
- : Math.ceil(round.matches.length / 2)
- )
- .fill(null)
- .map((_, lineI) => {
- // lines 0 1 2 3
- // rounds 0 1 2 3 4 5 6 7
- if (roundI !== 0 || round.name.includes("Losers")) {
- return undefined;
- }
- const matchOne = round.matches[lineI * 2];
- const matchTwo = round.matches[lineI * 2 + 1];
- invariant(matchOne, "matchOne is undefined");
- invariant(matchTwo, "matchTwo is undefined");
-
- if (
- matchOne.participants?.includes(null) &&
- matchTwo.participants?.includes(null)
- ) {
- return "no-line";
- }
- if (matchOne.participants?.includes(null)) return "bottom-only";
- return "top-only";
- });
const style: MyCSSProperties = {
"--brackets-bottom-border-length": drawStraightLines
@@ -83,14 +52,9 @@ export function EliminationBracket({
>
{round.matches.map((match) => {
- // TODO: handle losers
return (
{roundI !== bracketSide.length - 1 &&
- theKindOfLinesToDraw.map((className, i) => (
+ theKindOfLinesToDraw({
+ amountOfMatchesBetweenRoundsEqual,
+ round,
+ roundI,
+ }).map((className, i) => (
))}
@@ -113,6 +81,48 @@ export function EliminationBracket({
);
}
+function theKindOfLinesToDraw({
+ round,
+ roundI,
+ amountOfMatchesBetweenRoundsEqual,
+}: {
+ round: Unpacked;
+ roundI: number;
+ amountOfMatchesBetweenRoundsEqual: boolean;
+}): (undefined | "no-line" | "bottom-only" | "top-only")[] {
+ return new Array(
+ amountOfMatchesBetweenRoundsEqual
+ ? round.matches.length
+ : Math.ceil(round.matches.length / 2)
+ )
+ .fill(null)
+ .map((_, lineI) => {
+ // lines 0 1 2 3
+ // rounds 0 1 2 3 4 5 6 7
+ if (roundI !== 0) {
+ return undefined;
+ }
+ // TODO: better identifier for losers
+ if (round.name.includes("Losers")) {
+ return round.matches[lineI]?.number === 0 ? "no-line" : undefined;
+ }
+ const matchOne = round.matches[lineI * 2];
+ const matchTwo = round.matches[lineI * 2 + 1];
+ invariant(matchOne, "matchOne is undefined");
+ invariant(matchTwo, "matchTwo is undefined");
+
+ if (
+ matchOne.participants?.includes(null) &&
+ matchTwo.participants?.includes(null)
+ ) {
+ return "no-line";
+ }
+ if (matchOne.participants?.includes(null)) return "bottom-only";
+ if (matchTwo.participants?.includes(null)) return "top-only";
+ return undefined;
+ });
+}
+
function RoundInfo({
title,
bestOf,
diff --git a/app/styles/tournament-bracket.css b/app/styles/tournament-bracket.css
index c9890ab0a..7f348fc0d 100644
--- a/app/styles/tournament-bracket.css
+++ b/app/styles/tournament-bracket.css
@@ -339,6 +339,15 @@
border-radius: 0 var(--rounded) var(--rounded) 0;
}
+.tournament-bracket__elim__lines > .no-line {
+ visibility: hidden;
+}
+
+.tournament-bracket__elim__lines > .top-only {
+ border-bottom: none;
+ border-radius: 0 var(--rounded) 0 0;
+}
+
.tournament-bracket__elim__lines > .bottom-only {
border-top: none;
border-radius: 0 0 var(--rounded) 0;