121 lines
3.2 KiB
TypeScript
121 lines
3.2 KiB
TypeScript
import {
|
|
Text,
|
|
Container,
|
|
Flex,
|
|
NumberInput,
|
|
Group,
|
|
Loader,
|
|
} from "@mantine/core";
|
|
import { useEffect, useState } from "react";
|
|
import { bracketQueries, useBracketPreview } from "../queries";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { createBracketMaps, BracketMaps } from "../utils/bracket-maps";
|
|
import { BracketData, Match } from "../types";
|
|
import Bracket from "./bracket";
|
|
import "./styles.module.css";
|
|
|
|
interface PreviewTeam {
|
|
id: string;
|
|
name: string;
|
|
}
|
|
|
|
export const PreviewBracket: React.FC = () => {
|
|
const [teamCount, setTeamCount] = useState(20);
|
|
const { data, isLoading, error } = useBracketPreview(teamCount);
|
|
|
|
const [teams, setTeams] = useState<PreviewTeam[]>([]);
|
|
|
|
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;
|
|
})
|
|
);
|
|
};
|
|
|
|
const bracketData = data as BracketData;
|
|
setSeededWinnersBracket(mapBracket(bracketData.winners));
|
|
setSeededLosersBracket(mapBracket(bracketData.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">
|
|
<Group gap="sm" mx="auto">
|
|
<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>
|
|
);
|
|
};
|