{/* Corona layer — left-2 matches card borderRadius to prevent gradient bleed at left corners */}

{/* Inner card, inset on right to expose corona glow strip */}

); } // ─── Connector column ───────────────────────────────────────────────────────── interface ConnectorColumnProps { /** Edges crossing this gutter, in slot units. */ edges: { fromCenter: number; toCenter: number }[]; rowHeight: number; offset: number; bracketHeight: number; } /** * Draws the feeder edges crossing one gutter. Because the layout assigns columns by * depth from the final, every edge spans exactly one gutter — so a card that enters the * bracket late is drawn in the column where it actually plays, and there is never an * edge to route across a skipped column. */ function ConnectorColumn({ edges, rowHeight, offset, bracketHeight }: ConnectorColumnProps) { const mid = CONNECTOR_WIDTH / 2; // Merge the two edges feeding one card into a single elbow, so a pair reads as one // bracket join rather than two overlapping lines. const byTarget = new Map(); for (const { fromCenter, toCenter } of edges) { const sources = byTarget.get(toCenter) ?? []; sources.push(fromCenter); byTarget.set(toCenter, sources); } const paths: string[] = []; for (const [toCenter, sources] of byTarget) { const destY = toCenter * rowHeight - offset; const ys = sources.map((c) => c * rowHeight - offset).toSorted((a, b) => a - b); if (ys.length === 1) { paths.push(`M 0 ${ys[0]} H ${mid} V ${destY} H ${CONNECTOR_WIDTH}`); continue; } paths.push(`M 0 ${ys[0]} H ${mid} V ${ys[ys.length - 1]} H 0`); for (const y of ys.slice(1, -1)) paths.push(`M 0 ${y} H ${mid}`); paths.push(`M ${mid} ${destY} H ${CONNECTOR_WIDTH}`); } return (

); } // ─── Tree columns (shared by full + paginated) ─────────────────────────────── export interface BracketGeometry { layout: BracketLayout; /** Height of one leaf row. */ rowHeight: number; /** Height of the card area, excluding the round labels. */ bracketHeight: number; /** Narrowest the columns and gutters can be drawn without overlapping. */ minWidth: number; /** Pixels trimmed off the top, non-zero only for a cropped column window. */ offset: number; } /** * Lay out a group's matches from the feeder graph and derive its pixel geometry. * * Height comes from the number of leaf rows rather than the largest round, so a bracket * whose widest column isn't its first still gets the room it needs. */ export function bracketGeometry( visibleRounds: string[], matchesByRound: Map, feeders: FeederMap | undefined, templateRoundOrder: string[] ): BracketGeometry { const layout = computeGroupLayout( visibleRounds, matchesByRound, feeders ?? new Map(), templateRoundOrder ); const rowHeight = DESIRED_CARD_HEIGHT + CARD_GAP; const columnCount = Math.max(layout.columns.length, 1); return { layout, rowHeight, bracketHeight: Math.max(layout.leafCount, 1) * rowHeight, minWidth: columnCount * COLUMN_WIDTH + (columnCount - 1) * CONNECTOR_WIDTH, offset: 0, }; } /** * Crop a layout to a window of columns, as the mobile pager does. * * Card positions are absolute within the whole bracket, so showing a slice of columns * means trimming the empty space above them rather than re-flowing — otherwise a later * page would render its two columns stranded at the bottom of a full-height bracket. */ export function windowGeometry( geometry: BracketGeometry, firstColumn: number, lastColumn: number ): BracketGeometry { const centers = geometry.layout.columns .slice(firstColumn, lastColumn + 1) .flatMap((c) => c.matches.map((m) => m.center)); if (centers.length === 0) return geometry; const min = Math.min(...centers); const max = Math.max(...centers); return { ...geometry, bracketHeight: (max - min + 1) * geometry.rowHeight, offset: (min - 0.5) * geometry.rowHeight, }; } interface TreeColumnsProps { geometry: BracketGeometry; ownershipMap: Map; userParticipantIds: Set; transitionDuration?: number; feeders?: FeederMap; template?: BracketTemplate; /** Restrict rendering to a window of columns (used by the mobile pager). */ columnRange?: [number, number]; } export function TreeColumns({ geometry, ownershipMap, userParticipantIds, transitionDuration, feeders, template, columnRange, }: TreeColumnsProps) { const tr = transitionDuration ? `${transitionDuration}ms ease` : undefined; const { layout, rowHeight, bracketHeight, offset } = geometry; const [firstColumn, lastColumn] = columnRange ?? [0, layout.columns.length - 1]; const visible = layout.columns.slice(firstColumn, lastColumn + 1); // Cards keep a fixed height regardless of how many share a column — stretching a // lone final to fill its column is what made it tower over the rest of the bracket. const cardHeight = Math.min( Math.max(rowHeight - CARD_GAP, 1), MAX_CARD_HEIGHT ); return (

{visible.map((column, vi) => { const ci = firstColumn + vi; const gutterEdges = layout.edges.filter((e) => e.fromColumn === ci); return (

{/* Round column */}

{column.label}

{column.matches.map(({ match, center }) => (

))}

{/* Connector between this column and the next */} {vi < visible.length - 1 && ( )}

); })}

); } // ─── Full desktop tree ──────────────────────────────────────────────────────── interface BracketTreeViewProps { rounds: string[]; matchesByRound: Map; ownershipMap: Map; userParticipantIds: Set; thirdPlaceRound?: string; feeders?: FeederMap; template?: BracketTemplate; } export function BracketTreeView({ rounds, matchesByRound, ownershipMap, userParticipantIds, thirdPlaceRound, feeders, template, }: BracketTreeViewProps) { const mainRounds = thirdPlaceRound ? rounds.filter((r) => r !== thirdPlaceRound) : rounds; const thirdPlaceMatch = thirdPlaceRound ? (matchesByRound.get(thirdPlaceRound) ?? [])[0] : undefined; const geometry = bracketGeometry( mainRounds, matchesByRound, feeders, template?.rounds.map((r) => r.name) ?? mainRounds ); const { bracketHeight, minWidth } = geometry; return (

{thirdPlaceMatch && (

3rd Place

)}

); }