{/* h-5 holds the row open when a match carries no date or badge, so a
dateless draw's cards don't sit top-heavy inside the fixed CARD_H. */}
);
}
export function KnockoutBracket({
rounds,
initialRound = 1,
thirdPlace,
thirdPlaceLabel = "Third place play-off",
className,
}: KnockoutBracketProps) {
const reduce = useReducedMotion();
const visibleCols = Math.min(VISIBLE_COLS, rounds.length);
// The last page shows the final two rounds (semi-finals + final), not a full
// window — so paging continues past the QF/SF/Final view down to SF + Final.
const maxPage = Math.max(0, rounds.length - Math.min(2, rounds.length));
const [page, setPage] = useState(() => clamp(initialRound, 0, maxPage));
// Shared reflow — cards, connectors, headers and stage height page together.
// Height springs with the same token (layout morph is the product feel for
// collapsing rounds); opacity uses a short ease so fades don't lag the glide.
const transition = reduce
? { duration: 0 }
: { ...REFLOW, opacity: REFLOW_OPACITY };
const pageStatus = useMemo(() => {
const names = rounds
.slice(page, page + visibleCols)
.map((round) => round.name);
if (names.length <= 1) return `Showing ${names[0] ?? "rounds"}`;
if (names.length === 2) return `Showing ${names[0]} and ${names[1]}`;
return `Showing ${names.slice(0, -1).join(", ")}, and ${names.at(-1)}`;
}, [rounds, page, visibleCols]);
// Layout is computed, not scrolled. The leftmost visible round (`page`) is the
// base and stacks at a fixed rhythm; every later match centers on its feeders,
// and behind rounds spread out (below). Cards and connectors derive from one
// pass and page together under the shared transition.
const { cy, containerHeight, connectors } = useMemo(() => {
const centers: number[][] = new Array(rounds.length);
const base = rounds[page];
centers[page] = base.matches.map((_, i) => PAD_Y + i * ROW + CARD_H / 2);
for (let r = page + 1; r < rounds.length; r++) {
const feeders = centers[r - 1];
const row: number[] = [];
for (let k = 0; k < rounds[r].matches.length; k++) {
const top = feeders[2 * k];
if (top == null) {
// A round with more matches than its feeders allow (an odd draw, a bye
// left out) stacks a full row under the last card placed in this
// round — a fixed rhythm from the top can land on top of a midpoint.
const prev = row[k - 1];
row[k] = prev == null ? PAD_Y + CARD_H / 2 : prev + ROW;
} else {
row[k] = (top + (feeders[2 * k + 1] ?? top)) / 2;
}
}
centers[r] = row;
}
// Behind rounds keep their natural spread (spacing halves each step out,
// each match straddling its parent) instead of collapsing, so paging back
// slides a formed column in from the left just as paging forward does.
for (let r = page - 1; r >= 0; r--) {
const half = ROW / 2 ** (page - r + 1);
centers[r] = rounds[r].matches.map((_, i) => {
const parent = centers[r + 1][Math.floor(i / 2)] ?? PAD_Y;
return parent + (i % 2 === 0 ? -half : half);
});
}
const list: Connector[] = [];
for (let r = 1; r < rounds.length; r++) {
const feederRight = colX(r - 1, page) + CARD_W;
const visible =
isInWindow(r, page, visibleCols) &&
isInWindow(r - 1, page, visibleCols);
rounds[r].matches.forEach((_, k) => {
const yTop = centers[r - 1][2 * k] ?? centers[r][k];
const yBot = centers[r - 1][2 * k + 1] ?? yTop;
list.push({
key: `${r}-${k}`,
x: feederRight,
y: yTop,
height: Math.max(0, yBot - yTop),
visible,
});
});
}
// Measured, not derived from the base count: a fallback-stacked round can
// run past the base column, and the stage clips its overflow.
// Seeded with one card's center so an empty round yields a real height
// rather than -Infinity.
const lowest = Math.max(
PAD_Y + CARD_H / 2,
...centers.slice(page, page + visibleCols).flat(),
);
return {
cy: centers,
containerHeight: lowest + CARD_H / 2 + PAD_Y,
connectors: list,
};
}, [rounds, page, visibleCols]);
const containerWidth =
visibleCols * CARD_W + (visibleCols - 1) * GAP_X + 2 * PAD_X;
return (
{[match.date, match.time].filter(Boolean).join(", ")}
{badge && (
{badge}
)}
{pageStatus}
{/* Only the gliding round titles are clipped (they enter/exit at the
canvas edge); the chevron buttons sit outside that clip. */}
{rounds.map((round, r) => (
{round.name}
))}
{page > 0 && (
)}
{page < maxPage && (
)}
-
{round.matches.map((match, k) => (
-
{thirdPlaceLabel}