kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

much better bracket viewer, better bracket structure

Browse Source
This commit is contained in:
yohlo
2025-08-23 13:42:35 -05:00
parent 942374d45d
commit ee97606279
6 changed files with 229 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

412
src/features/bracket/bracket.ts
View File

@@ -1,412 +0,0 @@
// Type definitions
interface TMatchSlot {}
interface Seed extends TMatchSlot {
seed: number;
}
interface TBD extends TMatchSlot {
parent: TMatchBase;
loser: boolean;
ifNecessary?: boolean;
}
interface TMatchBase {
lid: number; // local id
round: number;
order?: number | null;
}
interface TMatch extends TMatchBase {
home: Seed | TBD;
away: Seed | TBD;
reset?: boolean;
}
interface TBye extends TMatchBase {
home: Seed | TBD;
}
type MatchType = TMatch | TBye;
// Utility functions
function innerOuter<T>(ls: T[]): T[] {
if (ls.length === 2) return ls;
const size = Math.floor(ls.length / 4);
const innerPart = [ls.slice(size, 2 * size), ls.slice(2 * size, 3 * size)];
const outerPart = [ls.slice(0, size), ls.slice(3 * size)];
const inner = (part: T[][]): T[] => [part[0].pop()!, part[1].shift()!];
const outer = (part: T[][]): T[] => [part[0].shift()!, part[1].pop()!];
const quads: T[][] = Array(Math.floor(size / 2)).fill(null).map(() => []);
const push = (part: T[][], method: (p: T[][]) => T[], arr: T[]) => {
if (part[0].length && part[1].length) {
arr.push(...method(part));
}
};
for (let i = 0; i < Math.floor(size / 2); i++) {
push(outerPart, outer, quads[i]);
push(innerPart, inner, quads[i]);
push(outerPart, inner, quads[i]);
push(innerPart, outer, quads[i]);
}
const result: T[] = [];
for (let i = 0; i < quads.length; i++) {
const curr = i % 2 === 0 ? quads.shift()! : quads.pop()!;
result.push(...curr);
}
return result;
}
function reverseHalfShift<T>(ls: T[]): T[] {
const halfLength = Math.floor(ls.length / 2);
return [...ls.slice(-halfLength), ...ls.slice(0, -halfLength)];
}
export class BracketGenerator {
private _bracket: MatchType[][] = [];
private _losersBracket: MatchType[][] = [];
private _order: number = 0;
private _floatingLosers: TBD[] = [];
private _lid: number = 0;
private _matches: Map<number, MatchType> = new Map();
public n: number;
public doubleElim: boolean;
private _nearestPowerOf2: number;
private _m: number;
private _byes: number;
constructor(n: number, doubleElim: boolean = false) {
if (n < 8 || n > 64) {
throw new Error("The number of teams must be greater than or equal to 8 and less than or equal to 64");
}
this.n = n;
this.doubleElim = doubleElim;
this._nearestPowerOf2 = Math.pow(2, Math.ceil(Math.log2(n)));
this._m = this._nearestPowerOf2;
this._byes = this._m - n;
this._generateSingleElim();
}
private _makeMatch(round: number, home: Seed | TBD, away: Seed | TBD, order: number): TMatch {
const match: TMatch = {
lid: this._lid,
round: round,
home: home,
away: away,
order: order
};
this._matches.set(this._lid, match);
this._lid += 1;
return match;
}
private _makeBye(round: number, home: Seed | TBD): TBye {
const bye: TBye = {
lid: this._lid,
round: round,
home: home
};
this._matches.set(this._lid, bye);
this._lid += 1;
return bye;
}
private _makeTBD(parent: TMatchBase, loser: boolean = false): TBD {
return {
parent: parent,
loser: loser
};
}
private _makeSeed(seed: number): Seed {
return { seed: seed };
}
private _parseQuad(quad: MatchType[]): MatchType[] {
// Used to generate losers bracket by iterating over the first round of the bracket, 4 matches/byes at a time
const pop = (): TBye => this._makeBye(0, this._floatingLosers.pop()!);
const popAt = (i: number) => (): TBye => this._makeBye(0, this._floatingLosers.splice(i, 1)[0]);
const shift = (): TBye => this._makeBye(0, this._floatingLosers.shift()!);
const popShift = (): TMatch => this._makeMatch(0, this._floatingLosers.pop()!, this._floatingLosers.shift()!, this._orderIncrement());
const pairShift = (): TMatch => this._makeMatch(0, this._floatingLosers.shift()!, this._floatingLosers.shift()!, this._orderIncrement());
// Actions to perform based on number of byes in the winners bracket quad
const actions: { [key: number]: (() => MatchType)[] } = {
0: [pop, pairShift, pop, pairShift],
1: [pop, shift, pop, pairShift],
2: [pop, shift, pop, shift],
3: [popAt(-2), popShift],
4: [pop, pop]
};
// Count the number of byes in the quad
const b = quad.filter(m => 'home' in m && !('away' in m)).length;
const result = actions[b].map(action => action());
return result;
}
private _flattenRound(round: MatchType[], roundNumber: number = 0): MatchType[] {
// Check if all matches are byes
if (round.every(m => 'home' in m && !('away' in m))) {
const result: MatchType[] = [];
for (let i = 0; i < round.length; i += 2) {
result.push(this._makeMatch(
roundNumber,
(round[i] as TBye).home,
(round[i + 1] as TBye).home,
this._orderIncrement()
));
}
return result;
}
return round;
}
private _startsWithBringInRound(): boolean {
// Start at 8, first block of size 4 returns 0
let start = 8;
const blockSizes = [4, 5, 7, 9, 15, 17]; // Sizes of blocks
let result = 0; // First block returns 0
// Loop through predefined block sizes
for (const blockSize of blockSizes) {
const end = start + blockSize - 1;
if (start <= this.n && this.n <= end) {
return result === 0;
}
start = end + 1;
result = 1 - result; // Alternate between 0 and 1
}
return false;
}
private _generateStartingRounds(): void {
this._floatingLosers = [];
// Generate Pairings based on seeding
const seeds: (Seed | null)[] = [];
for (let i = 1; i <= this.n; i++) {
seeds.push(this._makeSeed(i));
}
for (let i = 0; i < this._byes; i++) {
seeds.push(null);
}
const pairings: [Seed | null, Seed | null][] = [];
const innerOuterResult = innerOuter(seeds);
for (let i = 0; i < innerOuterResult.length; i += 2) {
pairings.push([innerOuterResult[i], innerOuterResult[i + 1]]);
}
// First Round
let round: MatchType[] = [];
for (const [home, away] of pairings) {
if (away === null) {
round.push(this._makeBye(0, home!));
} else {
const match = this._makeMatch(0, home!, away, this._orderIncrement());
round.push(match);
this._floatingLosers.push(this._makeTBD(match, true));
}
}
this._bracket = [round];
// Second Round
const prev = round;
round = [];
const getSlot = (m: MatchType): Seed | TBD => {
return 'away' in m ? this._makeTBD(m) : (m as TBye).home;
};
const startOrder = this._orderIncrement();
const orderDelta = Math.abs(this._byes - (this._m / 4));
const orderSplit = [startOrder + orderDelta, startOrder];
for (let i = 0; i < prev.length; i += 2) {
const home = getSlot(prev[i]);
const away = getSlot(prev[i + 1]);
let order: number;
if ('parent' in away) {
order = orderSplit[0];
orderSplit[0] += 1;
} else {
order = orderSplit[1];
orderSplit[1] += 1;
}
const match = this._makeMatch(1, home, away, order);
round.push(match);
this._floatingLosers.push(this._makeTBD(match, true));
}
this._bracket.push(round);
this._order = orderSplit[0] - 1;
// Generate losers bracket if double elim
if (this.doubleElim) {
// Round one
this._floatingLosers = innerOuter(this._floatingLosers);
this._losersBracket = [];
let roundOne: MatchType[] = [];
for (let i = 0; i < prev.length; i += 4) {
roundOne.push(...this._parseQuad(prev.slice(i, i + 4)));
}
this._losersBracket.push(this._flattenRound(roundOne));
// Round two
const roundTwo: MatchType[] = [];
for (let i = 0; i < roundOne.length; i += 2) {
roundTwo.push(this._makeMatch(
1,
getSlot(roundOne[i]),
getSlot(roundOne[i + 1]),
this._orderIncrement()
));
}
this._losersBracket.push(roundTwo);
}
}
private _orderIncrement(): number {
this._order += 1;
return this._order;
}
private _generateBringInRound(roundNumber: number): void {
console.log('generating bring in round', roundNumber);
const bringIns = reverseHalfShift(this._floatingLosers);
this._floatingLosers = [];
const round: MatchType[] = [];
const prev = this._losersBracket[this._losersBracket.length - 1];
for (const match of prev) {
const bringIn = bringIns.pop()!;
const newMatch = this._makeMatch(
roundNumber,
bringIn,
this._makeTBD(match),
this._orderIncrement()
);
round.push(newMatch);
}
this._losersBracket.push(round);
}
private _generateLosersRound(roundNumber: number): void {
console.log('generating losers round', roundNumber);
const round: MatchType[] = [];
const prev = this._losersBracket[this._losersBracket.length - 1];
if (prev.length < 2) return;
for (let i = 0; i < prev.length; i += 2) {
const newMatch = this._makeMatch(
roundNumber,
this._makeTBD(prev[i]),
this._makeTBD(prev[i + 1]),
this._orderIncrement()
);
round.push(newMatch);
}
this._losersBracket.push(round);
}
private _generateSingleElim(): void {
this._generateStartingRounds();
let prev = this._bracket[this._bracket.length - 1];
const add = (
round: MatchType[],
prevSlot: TBD | null,
match: MatchType
): [MatchType[], TBD | null] => {
if (prevSlot === null) return [round, this._makeTBD(match)];
const newMatch = this._makeMatch(
this._bracket.length,
prevSlot,
this._makeTBD(match),
this._orderIncrement()
);
this._floatingLosers.push(this._makeTBD(newMatch, true));
return [[...round, newMatch], null];
};
while (prev.length > 1) {
let round: MatchType[] = [];
let prevSlot: TBD | null = null;
for (const match of prev) {
[round, prevSlot] = add(round, prevSlot, match);
}
this._bracket.push(round);
prev = round;
if (this.doubleElim) {
const r = this._losersBracket.length;
if (this._startsWithBringInRound()) {
this._generateBringInRound(r);
this._generateLosersRound(r + 1);
} else {
this._generateLosersRound(r);
this._generateBringInRound(r + 1);
}
}
}
// Grand Finals and bracket reset
if (this.doubleElim) {
const winnersFinal = this._bracket[this._bracket.length - 1][this._bracket[this._bracket.length - 1].length - 1];
const losersFinal = this._losersBracket[this._losersBracket.length - 1][this._losersBracket[this._losersBracket.length - 1].length - 1];
const grandFinal = this._makeMatch(
this._bracket.length,
this._makeTBD(winnersFinal),
this._makeTBD(losersFinal),
this._orderIncrement()
);
const resetMatch = this._makeMatch(
this._bracket.length + 1,
this._makeTBD(grandFinal),
this._makeTBD(grandFinal, true),
this._orderIncrement()
);
resetMatch.reset = true;
this._bracket.push([grandFinal], [resetMatch]);
}
}
// Public getters for accessing the brackets
get bracket(): MatchType[][] {
return this._bracket;
}
get losersBracket(): MatchType[][] {
return this._losersBracket;
}
get matches(): Map<number, MatchType> {
return this._matches;
}
}

137
src/features/bracket/components/bracket-page.tsx
View File

@@ -1,83 +1,99 @@
import { Text, Container, Flex, ScrollArea } from "@mantine/core"; import { Text, Container, Flex, ScrollArea, NumberInput, Group } from "@mantine/core";
import { SeedList } from "./seed-list"; import { SeedList } from "./seed-list";
import BracketView from "./bracket-view"; import BracketView from "./bracket-view";
import { MutableRefObject, RefObject, useEffect, useRef, useState } from "react"; import { useEffect, useState } from "react";
import { bracketQueries } from "../queries"; import { bracketQueries } from "../queries";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { useDraggable } from "react-use-draggable-scroll"; // import { useDraggable } from "react-use-draggable-scroll";
import { ref } from "process";
import './styles.module.css'; import './styles.module.css';
import { useIsMobile } from "@/hooks/use-is-mobile"; // import { useIsMobile } from "@/hooks/use-is-mobile";
import useAppShellHeight from "@/hooks/use-appshell-height"; import useAppShellHeight from "@/hooks/use-appshell-height";
import { createBracketMaps, BracketMaps } from "../utils/bracket-maps";
interface Team { interface Team {
id: string; id: string;
name: string; name: string;
} }
interface BracketData { interface Match {
n: number; lid: number;
doubleElim: boolean; round: number;
matches: { [key: string]: any }; order: number | null;
winnersBracket: number[][]; type: string;
losersBracket: number[][]; home: any;
away?: any;
reset?: boolean;
} }
export const PreviewBracketPage: React.FC = () => { interface BracketData {
const isMobile = useIsMobile(); winners: Match[][];
const height = useAppShellHeight(); losers: Match[][];
const refDraggable = useRef<HTMLDivElement>(null); }
const { events } = useDraggable(refDraggable as RefObject<HTMLDivElement>, { isMounted: !!refDraggable.current });
const teamCount = 20;
export const PreviewBracketPage: React.FC = () => {
const height = useAppShellHeight();
const [teamCount, setTeamCount] = useState(20);
const { data, isLoading, error } = useQuery<BracketData>(bracketQueries.preview(teamCount)); const { data, isLoading, error } = useQuery<BracketData>(bracketQueries.preview(teamCount));
// Create teams with proper structure // Create teams with proper structure
const [teams, setTeams] = useState<Team[]>( const [teams, setTeams] = useState<Team[]>([]);
Array.from({ length: teamCount }, (_, i) => ({
// Update teams when teamCount changes
useEffect(() => {
setTeams(Array.from({ length: teamCount }, (_, i) => ({
id: `team-${i + 1}`, id: `team-${i + 1}`,
name: `Team ${i + 1}` name: `Team ${i + 1}`
})) })));
); }, [teamCount]);
const [seededWinnersBracket, setSeededWinnersBracket] = useState<any[][]>([]); const [seededWinnersBracket, setSeededWinnersBracket] = useState<Match[][]>([]);
const [seededLosersBracket, setSeededLosersBracket] = useState<any[][]>([]); const [seededLosersBracket, setSeededLosersBracket] = useState<Match[][]>([]);
const [bracketMaps, setBracketMaps] = useState<BracketMaps | null>(null);
useEffect(() => { useEffect(() => {
if (!data) return; if (!data || teams.length === 0) return;
// Map match IDs to actual match objects with team names // Create bracket maps for easy lookups
const mapBracket = (bracketIds: number[][]) => { const maps = createBracketMaps(data);
return bracketIds.map(roundIds => setBracketMaps(maps);
roundIds.map(lid => {
const match = data.matches[lid];
if (!match) return null;
// Map brackets with team names
const mapBracket = (bracket: Match[][]) => {
return bracket.map(round =>
round.map(match => {
const mappedMatch = { ...match }; const mappedMatch = { ...match };
// Map home slot - handle both uppercase and lowercase type names // Map home slot if it has a seed
if (match.home?.type?.toLowerCase() === 'seed') { if (match.home?.seed && match.home.seed > 0) {
mappedMatch.home = { const teamIndex = match.home.seed - 1;
...match.home, if (teams[teamIndex]) {
team: teams[match.home.seed - 1] mappedMatch.home = {
}; ...match.home,
team: teams[teamIndex]
};
}
} }
// Map away slot if it exists - handle both uppercase and lowercase type names // Map away slot if it has a seed
if (match.away?.type?.toLowerCase() === 'seed') { if (match.away?.seed && match.away.seed > 0) {
mappedMatch.away = { const teamIndex = match.away.seed - 1;
...match.away, if (teams[teamIndex]) {
team: teams[match.away.seed - 1] mappedMatch.away = {
}; ...match.away,
team: teams[teamIndex]
};
}
} }
return mappedMatch; return mappedMatch;
}).filter(m => m !== null) })
); );
}; };
setSeededWinnersBracket(mapBracket(data.winnersBracket)); setSeededWinnersBracket(mapBracket(data.winners));
setSeededLosersBracket(mapBracket(data.losersBracket)); setSeededLosersBracket(mapBracket(data.losers));
}, [teams, data]); }, [teams, data]);
const handleSeedChange = (teamIndex: number, newSeedIndex: number) => { const handleSeedChange = (teamIndex: number, newSeedIndex: number) => {
@@ -95,14 +111,27 @@ export const PreviewBracketPage: React.FC = () => {
if (isLoading) return <p>Loading...</p>; if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error loading bracket</p>; if (error) return <p>Error loading bracket</p>;
if (!data) return <p>No data available</p>; if (!data || !bracketMaps || teams.length === 0) return <p>No data available</p>;
return ( return (
<Container p={0} w="100%" style={{ userSelect: "none" }}> <Container p={0} w="100%" style={{ userSelect: "none" }}>
<Flex w="100%" justify="space-between" h='3rem'> <Flex w="100%" justify="space-between" align="center" h='3rem'>
<Text fw={600} size="lg" mb={16}> <Text fw={600} size="lg">
Preview Bracket ({data.n} teams, {data.doubleElim ? 'Double' : 'Single'} Elimination) Preview Bracket (Double Elimination)
</Text> </Text>
<Group gap="sm">
<Text size="sm" c="dimmed">Teams:</Text>
<NumberInput
value={teamCount}
onChange={(value) => setTeamCount(Number(value) || 12)}
min={12}
max={20}
size="sm"
w={80}
allowDecimal={false}
clampBehavior="strict"
/>
</Group>
</Flex> </Flex>
<Flex w="100%" gap={24}> <Flex w="100%" gap={24}>
<div style={{ minWidth: 250, display: 'none' }}> <div style={{ minWidth: 250, display: 'none' }}>
@@ -112,14 +141,8 @@ export const PreviewBracketPage: React.FC = () => {
<SeedList teams={teams} onSeedChange={handleSeedChange} /> <SeedList teams={teams} onSeedChange={handleSeedChange} />
</div> </div>
<ScrollArea <ScrollArea
px='xs'
viewportRef={refDraggable}
viewportProps={events}
h={`calc(${height} - 4rem)`} h={`calc(${height} - 4rem)`}
className="bracket-container" className="bracket-container"
styles={{
root: { overflow: "auto", flex: 1, gap: 24, display: 'flex', flexDirection: 'column' }
}}
> >
<div> <div>
<Text fw={600} size="md" mb={16}> <Text fw={600} size="md" mb={16}>
@@ -127,7 +150,7 @@ export const PreviewBracketPage: React.FC = () => {
</Text> </Text>
<BracketView <BracketView
bracket={seededWinnersBracket} bracket={seededWinnersBracket}
matches={data.matches} bracketMaps={bracketMaps}
/> />
</div> </div>
<div> <div>
@@ -136,7 +159,7 @@ export const PreviewBracketPage: React.FC = () => {
</Text> </Text>
<BracketView <BracketView
bracket={seededLosersBracket} bracket={seededLosersBracket}
matches={data.matches} bracketMaps={bracketMaps}
/> />
</div> </div>
</ScrollArea> </ScrollArea>

136
src/features/bracket/components/bracket-view.tsx
View File

@@ -1,32 +1,38 @@
import { ActionIcon, Card, Container, Flex, Text } from '@mantine/core'; import { ActionIcon, Card, Container, Flex, Text } from '@mantine/core';
import { PlayIcon } from '@phosphor-icons/react'; import { PlayIcon } from '@phosphor-icons/react';
import React from 'react'; import React from 'react';
import { BracketMaps } from '../utils/bracket-maps';
interface Match {
lid: number;
round: number;
order: number | null;
type: string;
home: any;
away?: any;
reset?: boolean;
}
interface BracketViewProps { interface BracketViewProps {
bracket: any[][]; bracket: Match[][];
matches: { [key: string]: any }; bracketMaps: BracketMaps;
onAnnounce?: (teamOne: any, teamTwo: any) => void; onAnnounce?: (teamOne: any, teamTwo: any) => void;
} }
const BracketView: React.FC<BracketViewProps> = ({ bracket, matches, onAnnounce }) => { const BracketView: React.FC<BracketViewProps> = ({ bracket, bracketMaps, onAnnounce }) => {
// Helper to check match type (handle both uppercase and lowercase) // Helper to check match type
const isMatchType = (type: string, expected: string) => { const isMatchType = (type: string, expected: string) => {
return type?.toLowerCase() === expected.toLowerCase(); return type?.toLowerCase() === expected.toLowerCase();
}; };
// Helper to check slot type (handle both uppercase and lowercase) // Helper to get parent match order number using the new bracket maps
const isSlotType = (type: string, expected: string) => { const getParentMatchOrder = (parentLid: number): number | string => {
return type?.toLowerCase() === expected.toLowerCase(); const parentMatch = bracketMaps.matchByLid.get(parentLid);
};
// Helper to get parent match order number
const getParentMatchOrder = (parentId: number): number | string => {
const parentMatch = matches[parentId];
if (parentMatch && parentMatch.order !== null && parentMatch.order !== undefined) { if (parentMatch && parentMatch.order !== null && parentMatch.order !== undefined) {
return parentMatch.order; return parentMatch.order;
} }
// If no order (like for byes), return the parentId with a different prefix // If no order (like for byes), return the parentLid with a different prefix
return `Match ${parentId}`; return `Match ${parentLid}`;
}; };
return ( return (
@@ -49,33 +55,83 @@ const BracketView: React.FC<BracketViewProps> = ({ bracket, matches, onAnnounce
<Flex direction='row' key={matchIndex} align='center' justify='end' gap={8}> <Flex direction='row' key={matchIndex} align='center' justify='end' gap={8}>
<Text c='dimmed' fw='bolder'>{match.order}</Text> <Text c='dimmed' fw='bolder'>{match.order}</Text>
<Card withBorder pos='relative' w={200} style={{ overflow: 'visible' }}> <Card withBorder pos='relative' w={200} style={{ overflow: 'visible' }}>
<Card.Section withBorder p={4}> <Card.Section withBorder p={0}>
{isSlotType(match.home?.type, 'seed') && ( <Flex align="stretch">
<> {match.home?.seed && (
<Text c='dimmed' size='xs'>Seed {match.home.seed}</Text> <Text
{match.home.team && <Text size='xs'>{match.home.team.name}</Text>} size="xs"
</> fw="bold"
)} py="4"
{isSlotType(match.home?.type, 'tbd') && ( bg="var(--mantine-color-default-hover)"
<Text c='dimmed' size='xs'> style={{
{match.home.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(match.home.parentId || match.home.parent)} width: '32px',
</Text> textAlign: 'center',
)} color: 'var(--mantine-color-text)',
{!match.home && <Text c='dimmed' size='xs' fs='italic'>TBD</Text>} display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderTopLeftRadius: 'var(--mantine-radius-default)',
borderBottomLeftRadius: 'var(--mantine-radius-default)'
}}
>
{match.home.seed}
</Text>
)}
<div style={{ flex: 1, padding: '4px 8px' }}>
{match.home?.seed ? (
match.home.team ? (
<Text size='xs'>{match.home.team.name}</Text>
) : (
<Text size='xs' c='dimmed'>Team {match.home.seed}</Text>
)
) : (match.home?.parent_lid !== null && match.home?.parent_lid !== undefined) ? (
<Text c='dimmed' size='xs'>
{match.home.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(match.home.parent_lid)}
</Text>
) : (
<Text c='dimmed' size='xs' fs='italic'>TBD</Text>
)}
</div>
</Flex>
</Card.Section> </Card.Section>
<Card.Section p={4} mb={-16}> <Card.Section p={0} mb={-16}>
{isSlotType(match.away?.type, 'seed') && ( <Flex align="stretch">
<> {match.away?.seed && (
<Text c='dimmed' size='xs'>Seed {match.away.seed}</Text> <Text
{match.away.team && <Text size='xs'>{match.away.team.name}</Text>} size="xs"
</> fw="bold"
)} py="4"
{isSlotType(match.away?.type, 'tbd') && ( bg="var(--mantine-color-default-hover)"
<Text c='dimmed' size='xs'> style={{
{match.away.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(match.away.parentId || match.away.parent)} width: '32px',
</Text> textAlign: 'center',
)} color: 'var(--mantine-color-text)',
{!match.away && <Text c='dimmed' size='xs' fs='italic'>TBD</Text>} display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderTopLeftRadius: 'var(--mantine-radius-default)',
borderBottomLeftRadius: 'var(--mantine-radius-default)'
}}
>
{match.away.seed}
</Text>
)}
<div style={{ flex: 1, padding: '4px 8px' }}>
{match.away?.seed ? (
match.away.team ? (
<Text size='xs'>{match.away.team.name}</Text>
) : (
<Text size='xs' c='dimmed'>Team {match.away.seed}</Text>
)
) : (match.away?.parent_lid !== null && match.away?.parent_lid !== undefined) ? (
<Text c='dimmed' size='xs'>
{match.away.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(match.away.parent_lid)}
</Text>
) : match.away ? (
<Text c='dimmed' size='xs' fs='italic'>TBD</Text>
) : null}
</div>
</Flex>
</Card.Section> </Card.Section>
{match.reset && ( {match.reset && (
<Text <Text

13
src/features/bracket/server.ts
View File

@@ -6,17 +6,6 @@ import brackets from './utils';
const logger = new Logger("Bracket Generation") const logger = new Logger("Bracket Generation")
// Transform the imported JSON to match the expected format
function transformBracketData(bracketData: any) {
return {
n: bracketData.config.teams,
doubleElim: bracketData.config.doubleElimination,
matches: bracketData.matches,
winnersBracket: bracketData.structure.winners,
losersBracket: bracketData.structure.losers
};
}
export const previewBracket = createServerFn() export const previewBracket = createServerFn()
.validator(z.number()) .validator(z.number())
.middleware([superTokensFunctionMiddleware]) .middleware([superTokensFunctionMiddleware])
@@ -26,5 +15,5 @@ export const previewBracket = createServerFn()
throw Error("Bracket not available") throw Error("Bracket not available")
// Transform the imported data to match expected format // Transform the imported data to match expected format
return transformBracketData(brackets[teams]); return brackets[teams];
}); });

52
src/features/bracket/utils/bracket-maps.ts Normal file
View File

@@ -0,0 +1,52 @@
interface Match {
lid: number;
round: number;
order: number | null;
type: string;
home: any;
away?: any;
reset?: boolean;
}
interface BracketData {
winners: Match[][];
losers: Match[][];
}
export interface BracketMaps {
matchByLid: Map<number, Match>;
matchByOrder: Map<number, Match>;
allMatches: Match[];
}
export function createBracketMaps(bracketData: BracketData): BracketMaps {
const matchByLid = new Map<number, Match>();
const matchByOrder = new Map<number, Match>();
const allMatches: Match[] = [];
[...bracketData.winners, ...bracketData.losers].forEach(round => {
round.forEach(match => {
matchByLid.set(match.lid, match);
if (match.order !== null && match.order !== undefined) {
matchByOrder.set(match.order, match);
}
allMatches.push(match);
});
});
return {
matchByLid,
matchByOrder,
allMatches
};
}
export function getMatchByLid(maps: BracketMaps, lid: number): Match | undefined {
return maps.matchByLid.get(lid);
}
export function getMatchByOrder(maps: BracketMaps, order: number): Match | undefined {
return maps.matchByOrder.get(order);
}

20
src/lib/pocketbase/services/tournaments.ts
View File

@@ -2,31 +2,11 @@ import { logger } from "@/lib/logger";
import type { Tournament, TournamentInput, TournamentUpdateInput } from "@/features/tournaments/types"; import type { Tournament, TournamentInput, TournamentUpdateInput } from "@/features/tournaments/types";
import PocketBase from "pocketbase"; import PocketBase from "pocketbase";
import { transformTournament } from "@/lib/pocketbase/util/transform-types"; import { transformTournament } from "@/lib/pocketbase/util/transform-types";
import { BracketGenerator } from "@/features/bracket/bracket";
export function createTournamentsService(pb: PocketBase) { export function createTournamentsService(pb: PocketBase) {
return { return {
async getTournament(id: string): Promise<Tournament | null> { async getTournament(id: string): Promise<Tournament | null> {
try { try {
const generator = new BracketGenerator(12, true);
console.log("=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--=-=-=-=-=-=-=-=-=-")
console.log('Winners Bracket:');
generator.bracket.forEach((round, i) => {
console.log(`Round ${i}:`);
round.forEach(match => {
console.log('-', match);
});
});
console.log('\nLosers Bracket:');
generator.losersBracket.forEach((round, i) => {
console.log(`Round ${i}:`);
round.forEach(match => {
console.log('-', match);
});
});
logger.info('PocketBase | Getting tournament', id); logger.info('PocketBase | Getting tournament', id);
const result = await pb.collection('tournaments').getOne(id, { const result = await pb.collection('tournaments').getOne(id, {
expand: 'teams, teams.players' expand: 'teams, teams.players'