diff --git a/app/components/tournament/EliminationBracket.tsx b/app/components/tournament/EliminationBracket.tsx index f0a006836..8739b8592 100644 --- a/app/components/tournament/EliminationBracket.tsx +++ b/app/components/tournament/EliminationBracket.tsx @@ -28,16 +28,24 @@ export function EliminationBracket({ /> ))} {bracketSide.map((round, i) => { + const nextRound: Unpacked | undefined = + bracketSide[i + 1]; + const amountOfMatchesBetweenRoundsEqual = + round.matches.length === nextRound?.matches.length; + const drawStraightLines = + round.matches.length === 1 || amountOfMatchesBetweenRoundsEqual; return (
@@ -48,7 +56,11 @@ export function EliminationBracket({
{i !== bracketSide.length - 1 && - new Array(Math.ceil(round.matches.length / 2)) + new Array( + amountOfMatchesBetweenRoundsEqual + ? round.matches.length + : Math.ceil(round.matches.length / 2) + ) .fill(null) .map((_, i) =>
)}
diff --git a/app/routes/to/$organization.$tournament/bracket.$id.tsx b/app/routes/to/$organization.$tournament/bracket.$id.tsx index b9665937b..7da86057d 100644 --- a/app/routes/to/$organization.$tournament/bracket.$id.tsx +++ b/app/routes/to/$organization.$tournament/bracket.$id.tsx @@ -19,7 +19,6 @@ export const loader: LoaderFunction = async ({ params }) => { return typedJson(bracket); }; -// TODO: bottom bracket lines are wrong // TODO: make bracket a bit smaller export default function BracketTabWrapper() { const data = useLoaderData(); diff --git a/app/styles/tournament-bracket.css b/app/styles/tournament-bracket.css index 3585734ba..2970500f6 100644 --- a/app/styles/tournament-bracket.css +++ b/app/styles/tournament-bracket.css @@ -107,7 +107,7 @@ display: flex; flex-direction: column; justify-content: space-around; - padding-left: 7px; + padding-left: 5px; } .tournament-bracket__elim__lines > div {