refactor bracket feature
This commit is contained in:
yohlo
@@ -1,4 +1,4 @@
|
||||
import { PreviewBracketPage } from '@/features/bracket/components/bracket-page'
|
||||
import { PreviewBracket } from '@/features/bracket/components/preview'
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
|
||||
export const Route = createFileRoute('/_authed/admin/preview')({
|
||||
@@ -6,5 +6,5 @@ export const Route = createFileRoute('/_authed/admin/preview')({
|
||||
})
|
||||
|
||||
function RouteComponent() {
|
||||
return <PreviewBracketPage />
|
||||
return <PreviewBracket />
|
||||
}
|
||||
|
||||
@@ -1,172 +0,0 @@
|
||||
import { Text, Container, Flex, ScrollArea, NumberInput, Group } from "@mantine/core";
|
||||
import { SeedList } from "./seed-list";
|
||||
import BracketView from "./bracket-view";
|
||||
import { useEffect, useState } from "react";
|
||||
import { bracketQueries } from "../queries";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import './styles.module.css';
|
||||
import useAppShellHeight from "@/hooks/use-appshell-height";
|
||||
import { createBracketMaps, BracketMaps } from "../utils/bracket-maps";
|
||||
|
||||
interface Team {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface Match {
|
||||
lid: number;
|
||||
round: number;
|
||||
order: number | null;
|
||||
type: string;
|
||||
home: any;
|
||||
away?: any;
|
||||
reset?: boolean;
|
||||
}
|
||||
|
||||
interface BracketData {
|
||||
winners: Match[][];
|
||||
losers: Match[][];
|
||||
}
|
||||
|
||||
|
||||
export const PreviewBracketPage: React.FC = () => {
|
||||
const height = useAppShellHeight();
|
||||
|
||||
const [teamCount, setTeamCount] = useState(20);
|
||||
const { data, isLoading, error } = useQuery<BracketData>(bracketQueries.preview(teamCount));
|
||||
|
||||
// Create teams with proper structure
|
||||
const [teams, setTeams] = useState<Team[]>([]);
|
||||
|
||||
// Update teams when teamCount changes
|
||||
useEffect(() => {
|
||||
setTeams(Array.from({ length: teamCount }, (_, i) => ({
|
||||
id: `team-${i + 1}`,
|
||||
name: `Team ${i + 1}`
|
||||
})));
|
||||
}, [teamCount]);
|
||||
|
||||
const [seededWinnersBracket, setSeededWinnersBracket] = useState<Match[][]>([]);
|
||||
const [seededLosersBracket, setSeededLosersBracket] = useState<Match[][]>([]);
|
||||
const [bracketMaps, setBracketMaps] = useState<BracketMaps | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!data || teams.length === 0) return;
|
||||
|
||||
// Create bracket maps for easy lookups
|
||||
const maps = createBracketMaps(data);
|
||||
setBracketMaps(maps);
|
||||
|
||||
// Map brackets with team names
|
||||
const mapBracket = (bracket: Match[][]) => {
|
||||
return bracket.map(round =>
|
||||
round.map(match => {
|
||||
const mappedMatch = { ...match };
|
||||
|
||||
// Map home slot if it has a seed
|
||||
if (match.home?.seed && match.home.seed > 0) {
|
||||
const teamIndex = match.home.seed - 1;
|
||||
if (teams[teamIndex]) {
|
||||
mappedMatch.home = {
|
||||
...match.home,
|
||||
team: teams[teamIndex]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Map away slot if it has a seed
|
||||
if (match.away?.seed && match.away.seed > 0) {
|
||||
const teamIndex = match.away.seed - 1;
|
||||
if (teams[teamIndex]) {
|
||||
mappedMatch.away = {
|
||||
...match.away,
|
||||
team: teams[teamIndex]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return mappedMatch;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
setSeededWinnersBracket(mapBracket(data.winners));
|
||||
setSeededLosersBracket(mapBracket(data.losers));
|
||||
}, [teams, data]);
|
||||
|
||||
const handleSeedChange = (teamIndex: number, newSeedIndex: number) => {
|
||||
const newTeams = [...teams];
|
||||
const movingTeam = newTeams[teamIndex];
|
||||
|
||||
// Remove the team from its current position
|
||||
newTeams.splice(teamIndex, 1);
|
||||
|
||||
// Insert it at the new position
|
||||
newTeams.splice(newSeedIndex, 0, movingTeam);
|
||||
|
||||
setTeams(newTeams);
|
||||
};
|
||||
|
||||
if (isLoading) return <p>Loading...</p>;
|
||||
if (error) return <p>Error loading bracket</p>;
|
||||
if (!data || !bracketMaps || teams.length === 0) return <p>No data available</p>;
|
||||
|
||||
return (
|
||||
<Container p={0} w="100%" style={{ userSelect: "none" }}>
|
||||
<Flex w="100%" justify="space-between" align="center" h='3rem'>
|
||||
<Text fw={600} size="lg">
|
||||
Preview Bracket (Double Elimination)
|
||||
</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 w="100%" gap={24}>
|
||||
<div style={{ minWidth: 250, display: 'none' }}>
|
||||
<Text fw={600} pb={16}>
|
||||
Seed Teams
|
||||
</Text>
|
||||
<SeedList teams={teams} onSeedChange={handleSeedChange} />
|
||||
</div>
|
||||
<ScrollArea
|
||||
h={`calc(${height} - 4rem)`}
|
||||
className="bracket-container"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
|
||||
backgroundSize: '16px 16px',
|
||||
backgroundPosition: '0 0, 8px 8px'
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Text fw={600} size="md" m={16}>
|
||||
Winners Bracket
|
||||
</Text>
|
||||
<BracketView
|
||||
bracket={seededWinnersBracket}
|
||||
bracketMaps={bracketMaps}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Text fw={600} size="md" m={16}>
|
||||
Losers Bracket
|
||||
</Text>
|
||||
<BracketView
|
||||
bracket={seededLosersBracket}
|
||||
bracketMaps={bracketMaps}
|
||||
/>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</Flex>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
@@ -1,7 +1,7 @@
|
||||
import { ActionIcon, Card, Flex, Text } from '@mantine/core';
|
||||
import { PlayIcon } from '@phosphor-icons/react';
|
||||
import React from 'react';
|
||||
import { BracketMaps } from '../utils/bracket-maps';
|
||||
import { ActionIcon, Card, Flex, Text } from "@mantine/core";
|
||||
import { PlayIcon } from "@phosphor-icons/react";
|
||||
import React from "react";
|
||||
import { BracketMaps } from "../utils/bracket-maps";
|
||||
|
||||
interface Match {
|
||||
lid: number;
|
||||
@@ -19,77 +19,106 @@ interface BracketViewProps {
|
||||
onAnnounce?: (teamOne: any, teamTwo: any) => void;
|
||||
}
|
||||
|
||||
const BracketView: React.FC<BracketViewProps> = ({ bracket, bracketMaps, onAnnounce }) => {
|
||||
// Helper to check match type
|
||||
const BracketView: React.FC<BracketViewProps> = ({
|
||||
bracket,
|
||||
bracketMaps,
|
||||
onAnnounce,
|
||||
}) => {
|
||||
const isMatchType = (type: string, expected: string) => {
|
||||
return type?.toLowerCase() === expected.toLowerCase();
|
||||
};
|
||||
|
||||
// Helper to get parent match order number using the new bracket maps
|
||||
const getParentMatchOrder = (parentLid: number): number | string => {
|
||||
const parentMatch = bracketMaps.matchByLid.get(parentLid);
|
||||
if (parentMatch && parentMatch.order !== null && parentMatch.order !== undefined) {
|
||||
if (
|
||||
parentMatch &&
|
||||
parentMatch.order !== null &&
|
||||
parentMatch.order !== undefined
|
||||
) {
|
||||
return parentMatch.order;
|
||||
}
|
||||
// If no order (like for byes), return the parentLid with a different prefix
|
||||
return `Match ${parentLid}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Flex direction='row' gap={24} justify='left' pos='relative' p='xl'>
|
||||
{bracket.map((round, roundIndex) => (
|
||||
<Flex direction='column' key={roundIndex} gap={24} justify='space-around'>
|
||||
<Flex direction="row" gap={24} justify="left" pos="relative" p="xl">
|
||||
{bracket.map((round, roundIndex) => (
|
||||
<Flex
|
||||
direction="column"
|
||||
key={roundIndex}
|
||||
gap={24}
|
||||
justify="space-around"
|
||||
>
|
||||
{round.map((match, matchIndex) => {
|
||||
if (!match) return null;
|
||||
|
||||
// Handle bye matches (no away slot) - check both 'TBye' and 'bye'
|
||||
if (isMatchType(match.type, 'bye') || isMatchType(match.type, 'tbye')) {
|
||||
return (
|
||||
<Flex key={matchIndex}>
|
||||
</Flex>
|
||||
);
|
||||
if (
|
||||
isMatchType(match.type, "bye") ||
|
||||
isMatchType(match.type, "tbye")
|
||||
) {
|
||||
return <Flex key={matchIndex}></Flex>;
|
||||
}
|
||||
|
||||
// Regular matches with both home and away
|
||||
return (
|
||||
<Flex direction='row' key={matchIndex} align='center' justify='end' gap={8}>
|
||||
<Text c='dimmed' fw='bolder'>{match.order}</Text>
|
||||
<Card withBorder pos='relative' w={200} style={{ overflow: 'visible' }}>
|
||||
<Flex
|
||||
direction="row"
|
||||
key={matchIndex}
|
||||
align="center"
|
||||
justify="end"
|
||||
gap={8}
|
||||
>
|
||||
<Text c="dimmed" fw="bolder">
|
||||
{match.order}
|
||||
</Text>
|
||||
<Card
|
||||
withBorder
|
||||
pos="relative"
|
||||
w={200}
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<Card.Section withBorder p={0}>
|
||||
<Flex align="stretch">
|
||||
{match.home?.seed && (
|
||||
<Text
|
||||
size="xs"
|
||||
<Text
|
||||
size="xs"
|
||||
fw="bold"
|
||||
py="4"
|
||||
bg="var(--mantine-color-default-hover)"
|
||||
style={{
|
||||
width: '32px',
|
||||
textAlign: 'center',
|
||||
color: 'var(--mantine-color-text)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderTopLeftRadius: 'var(--mantine-radius-default)',
|
||||
borderBottomLeftRadius: 'var(--mantine-radius-default)'
|
||||
style={{
|
||||
width: "32px",
|
||||
textAlign: "center",
|
||||
color: "var(--mantine-color-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' }}>
|
||||
<div style={{ flex: 1, padding: "4px 8px" }}>
|
||||
{match.home?.seed ? (
|
||||
match.home.team ? (
|
||||
<Text size='xs'>{match.home.team.name}</Text>
|
||||
<Text size="xs">{match.home.team.name}</Text>
|
||||
) : (
|
||||
<Text size='xs' c='dimmed'>Team {match.home.seed}</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)}
|
||||
) : 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>
|
||||
<Text c="dimmed" size="xs" fs="italic">
|
||||
TBD
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</Flex>
|
||||
@@ -97,67 +126,75 @@ const BracketView: React.FC<BracketViewProps> = ({ bracket, bracketMaps, onAnnou
|
||||
<Card.Section p={0} mb={-16}>
|
||||
<Flex align="stretch">
|
||||
{match.away?.seed && (
|
||||
<Text
|
||||
size="xs"
|
||||
<Text
|
||||
size="xs"
|
||||
fw="bold"
|
||||
py="4"
|
||||
bg="var(--mantine-color-default-hover)"
|
||||
style={{
|
||||
width: '32px',
|
||||
textAlign: 'center',
|
||||
color: 'var(--mantine-color-text)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderTopLeftRadius: 'var(--mantine-radius-default)',
|
||||
borderBottomLeftRadius: 'var(--mantine-radius-default)'
|
||||
style={{
|
||||
width: "32px",
|
||||
textAlign: "center",
|
||||
color: "var(--mantine-color-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' }}>
|
||||
<div style={{ flex: 1, padding: "4px 8px" }}>
|
||||
{match.away?.seed ? (
|
||||
match.away.team ? (
|
||||
<Text size='xs'>{match.away.team.name}</Text>
|
||||
<Text size="xs">{match.away.team.name}</Text>
|
||||
) : (
|
||||
<Text size='xs' c='dimmed'>Team {match.away.seed}</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)}
|
||||
) : 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>
|
||||
<Text c="dimmed" size="xs" fs="italic">
|
||||
TBD
|
||||
</Text>
|
||||
) : null}
|
||||
</div>
|
||||
</Flex>
|
||||
</Card.Section>
|
||||
{match.reset && (
|
||||
<Text
|
||||
pos='absolute'
|
||||
top={-8}
|
||||
left={8}
|
||||
size='xs'
|
||||
c='orange'
|
||||
fw='bold'
|
||||
<Text
|
||||
pos="absolute"
|
||||
top={-8}
|
||||
left={8}
|
||||
size="xs"
|
||||
c="orange"
|
||||
fw="bold"
|
||||
>
|
||||
IF NECESSARY
|
||||
</Text>
|
||||
)}
|
||||
{onAnnounce && match.home?.team && match.away?.team && (
|
||||
<ActionIcon
|
||||
pos='absolute'
|
||||
variant='filled'
|
||||
color='green'
|
||||
pos="absolute"
|
||||
variant="filled"
|
||||
color="green"
|
||||
top={-20}
|
||||
right={-12}
|
||||
onClick={() => {
|
||||
onAnnounce(match.home.team, match.away.team);
|
||||
}}
|
||||
bd='none'
|
||||
style={{ boxShadow: 'none' }}
|
||||
size='xs'
|
||||
bd="none"
|
||||
style={{ boxShadow: "none" }}
|
||||
size="xs"
|
||||
>
|
||||
<PlayIcon size={12} />
|
||||
</ActionIcon>
|
||||
@@ -172,4 +209,4 @@ const BracketView: React.FC<BracketViewProps> = ({ bracket, bracketMaps, onAnnou
|
||||
);
|
||||
};
|
||||
|
||||
export default BracketView;
|
||||
export default BracketView;
|
||||
|
||||
46
src/features/bracket/components/bracket.tsx
Normal file
46
src/features/bracket/components/bracket.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { ScrollArea, Text } from "@mantine/core";
|
||||
import BracketView from "./bracket-view";
|
||||
import { Match } from "../types";
|
||||
import useAppShellHeight from "@/hooks/use-appshell-height";
|
||||
import { BracketMaps } from "../utils/bracket-maps";
|
||||
|
||||
interface BracketProps {
|
||||
winners: Match[][],
|
||||
losers?: Match[][],
|
||||
bracketMaps: BracketMaps | null
|
||||
}
|
||||
|
||||
const Bracket: React.FC<BracketProps> = ({ winners, losers, bracketMaps }) => {
|
||||
const height = useAppShellHeight();
|
||||
|
||||
if (!bracketMaps) return <p>Data not available.</p>
|
||||
|
||||
return (
|
||||
<ScrollArea
|
||||
h={`calc(${height} - 4rem)`}
|
||||
className="bracket-container"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
|
||||
backgroundSize: "16px 16px",
|
||||
backgroundPosition: "0 0, 8px 8px",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Text fw={600} size="md" m={16}>
|
||||
Winners Bracket
|
||||
</Text>
|
||||
<BracketView bracket={winners} bracketMaps={bracketMaps} />
|
||||
</div>
|
||||
{
|
||||
losers && <div>
|
||||
<Text fw={600} size="md" m={16}>
|
||||
Losers Bracket
|
||||
</Text>
|
||||
<BracketView bracket={losers} bracketMaps={bracketMaps} />
|
||||
</div>
|
||||
}
|
||||
</ScrollArea>
|
||||
);
|
||||
};
|
||||
|
||||
export default Bracket;
|
||||
119
src/features/bracket/components/preview.tsx
Normal file
119
src/features/bracket/components/preview.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
import {
|
||||
Text,
|
||||
Container,
|
||||
Flex,
|
||||
NumberInput,
|
||||
Group,
|
||||
Loader,
|
||||
} from "@mantine/core";
|
||||
import { useEffect, useState } from "react";
|
||||
import { bracketQueries } from "../queries";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { createBracketMaps, BracketMaps } from "../utils/bracket-maps";
|
||||
import { BracketData, Match, Team } from "../types";
|
||||
import Bracket from "./bracket";
|
||||
import "./styles.module.css";
|
||||
|
||||
export const PreviewBracket: React.FC = () => {
|
||||
const [teamCount, setTeamCount] = useState(20);
|
||||
const { data, isLoading, error } = useQuery<BracketData>(
|
||||
bracketQueries.preview(teamCount)
|
||||
);
|
||||
|
||||
const [teams, setTeams] = useState<Team[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
setTeams(
|
||||
Array.from({ length: teamCount }, (_, i) => ({
|
||||
id: `team-${i + 1}`,
|
||||
name: `Team ${i + 1}`,
|
||||
}))
|
||||
);
|
||||
}, [teamCount]);
|
||||
|
||||
const [seededWinnersBracket, setSeededWinnersBracket] = useState<Match[][]>(
|
||||
[]
|
||||
);
|
||||
const [seededLosersBracket, setSeededLosersBracket] = useState<Match[][]>([]);
|
||||
const [bracketMaps, setBracketMaps] = useState<BracketMaps | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!data || teams.length === 0) return;
|
||||
|
||||
const maps = createBracketMaps(data);
|
||||
setBracketMaps(maps);
|
||||
|
||||
const mapBracket = (bracket: Match[][]) => {
|
||||
return bracket.map((round) =>
|
||||
round.map((match) => {
|
||||
const mappedMatch = { ...match };
|
||||
|
||||
if (match.home?.seed && match.home.seed > 0) {
|
||||
const teamIndex = match.home.seed - 1;
|
||||
if (teams[teamIndex]) {
|
||||
mappedMatch.home = {
|
||||
...match.home,
|
||||
team: teams[teamIndex],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (match.away?.seed && match.away.seed > 0) {
|
||||
const teamIndex = match.away.seed - 1;
|
||||
if (teams[teamIndex]) {
|
||||
mappedMatch.away = {
|
||||
...match.away,
|
||||
team: teams[teamIndex],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return mappedMatch;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
setSeededWinnersBracket(mapBracket(data.winners));
|
||||
setSeededLosersBracket(mapBracket(data.losers));
|
||||
}, [teams, data]);
|
||||
|
||||
if (error) return <p>Error loading bracket</p>;
|
||||
|
||||
return (
|
||||
<Container p={0} w="100%" style={{ userSelect: "none" }}>
|
||||
<Flex w="100%" justify="space-between" align="center" h="3rem">
|
||||
<Text fw={600} size="lg">
|
||||
Preview Bracket (Double Elimination)
|
||||
</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 w="100%" gap={24}>
|
||||
{isLoading ? (
|
||||
<Flex justify="center" align="center" h="20vh" w="100%">
|
||||
<Loader size="xl" />
|
||||
</Flex>
|
||||
) : (
|
||||
<Bracket
|
||||
winners={seededWinnersBracket}
|
||||
losers={seededLosersBracket}
|
||||
bracketMaps={bracketMaps}
|
||||
/>
|
||||
)}
|
||||
</Flex>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
19
src/features/bracket/types.ts
Normal file
19
src/features/bracket/types.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
export interface Team {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface Match {
|
||||
lid: number;
|
||||
round: number;
|
||||
order: number | null;
|
||||
type: string;
|
||||
home: any;
|
||||
away?: any;
|
||||
reset?: boolean;
|
||||
}
|
||||
|
||||
export interface BracketData {
|
||||
winners: Match[][];
|
||||
losers: Match[][];
|
||||
}
|
||||
Reference in New Issue
Block a user