restarting brackets
This commit is contained in:
yohlo
@@ -1,48 +0,0 @@
|
||||
import { Flex, Text } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import { MatchCard } from './match-card';
|
||||
import { Match } from '../types';
|
||||
|
||||
interface BracketRoundProps {
|
||||
matches: Match[];
|
||||
roundIndex: number;
|
||||
getParentMatchOrder: (parentLid: number) => number | string;
|
||||
onAnnounce?: (teamOne: any, teamTwo: any) => void;
|
||||
}
|
||||
|
||||
export const BracketRound: React.FC<BracketRoundProps> = ({
|
||||
matches,
|
||||
roundIndex,
|
||||
getParentMatchOrder,
|
||||
onAnnounce,
|
||||
}) => {
|
||||
const isBye = (type: string) => type?.toLowerCase() === 'bye';
|
||||
|
||||
return (
|
||||
<Flex direction="column" key={roundIndex} gap={24} justify="space-around">
|
||||
{matches.map((match, matchIndex) => {
|
||||
if (!match) return null;
|
||||
if (isBye(match.type)) return <></>; // for spacing
|
||||
|
||||
return (
|
||||
<Flex
|
||||
direction="row"
|
||||
key={matchIndex}
|
||||
align="center"
|
||||
justify="end"
|
||||
gap={8}
|
||||
>
|
||||
<Text c="dimmed" fw="bolder">
|
||||
{match.order}
|
||||
</Text>
|
||||
<MatchCard
|
||||
match={match}
|
||||
getParentMatchOrder={getParentMatchOrder}
|
||||
onAnnounce={onAnnounce}
|
||||
/>
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
@@ -1,46 +0,0 @@
|
||||
import { Flex } from '@mantine/core';
|
||||
import React, { useCallback } from 'react';
|
||||
import { BracketMaps } from '../utils/bracket-maps';
|
||||
import { BracketRound } from './bracket-round';
|
||||
import { Match } from '../types';
|
||||
|
||||
interface BracketViewProps {
|
||||
bracket: Match[][];
|
||||
bracketMaps: BracketMaps;
|
||||
onAnnounce?: (teamOne: any, teamTwo: any) => void;
|
||||
}
|
||||
|
||||
const BracketView: React.FC<BracketViewProps> = ({
|
||||
bracket,
|
||||
bracketMaps,
|
||||
onAnnounce,
|
||||
}) => {
|
||||
|
||||
const getParentMatchOrder = useCallback((parentLid: number): number | string => {
|
||||
const parentMatch = bracketMaps.matchByLid.get(parentLid);
|
||||
if (
|
||||
parentMatch &&
|
||||
parentMatch.order !== null &&
|
||||
parentMatch.order !== undefined
|
||||
) {
|
||||
return parentMatch.order;
|
||||
}
|
||||
return `Match ${parentLid}`;
|
||||
}, [bracketMaps]);
|
||||
|
||||
return (
|
||||
<Flex direction="row" gap={24} justify="left" pos="relative" p="xl">
|
||||
{bracket.map((round, roundIndex) => (
|
||||
<BracketRound
|
||||
key={roundIndex}
|
||||
matches={round}
|
||||
roundIndex={roundIndex}
|
||||
getParentMatchOrder={getParentMatchOrder}
|
||||
onAnnounce={onAnnounce}
|
||||
/>
|
||||
))}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default BracketView;
|
||||
@@ -1,46 +0,0 @@
|
||||
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>Bracket 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;
|
||||
@@ -1,120 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user