213 lines
7.4 KiB
TypeScript
213 lines
7.4 KiB
TypeScript
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;
|
|
round: number;
|
|
order: number | null;
|
|
type: string;
|
|
home: any;
|
|
away?: any;
|
|
reset?: boolean;
|
|
}
|
|
|
|
interface BracketViewProps {
|
|
bracket: Match[][];
|
|
bracketMaps: BracketMaps;
|
|
onAnnounce?: (teamOne: any, teamTwo: any) => void;
|
|
}
|
|
|
|
const BracketView: React.FC<BracketViewProps> = ({
|
|
bracket,
|
|
bracketMaps,
|
|
onAnnounce,
|
|
}) => {
|
|
const isMatchType = (type: string, expected: string) => {
|
|
return type?.toLowerCase() === expected.toLowerCase();
|
|
};
|
|
|
|
const getParentMatchOrder = (parentLid: number): number | string => {
|
|
const parentMatch = bracketMaps.matchByLid.get(parentLid);
|
|
if (
|
|
parentMatch &&
|
|
parentMatch.order !== null &&
|
|
parentMatch.order !== undefined
|
|
) {
|
|
return parentMatch.order;
|
|
}
|
|
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"
|
|
>
|
|
{round.map((match, matchIndex) => {
|
|
if (!match) return null;
|
|
|
|
if (
|
|
isMatchType(match.type, "bye") ||
|
|
isMatchType(match.type, "tbye")
|
|
) {
|
|
return <Flex key={matchIndex}></Flex>;
|
|
}
|
|
|
|
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" }}
|
|
>
|
|
<Card.Section withBorder p={0}>
|
|
<Flex align="stretch">
|
|
{match.home?.seed && (
|
|
<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)",
|
|
}}
|
|
>
|
|
{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 p={0} mb={-16}>
|
|
<Flex align="stretch">
|
|
{match.away?.seed && (
|
|
<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)",
|
|
}}
|
|
>
|
|
{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>
|
|
{match.reset && (
|
|
<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"
|
|
top={-20}
|
|
right={-12}
|
|
onClick={() => {
|
|
onAnnounce(match.home.team, match.away.team);
|
|
}}
|
|
bd="none"
|
|
style={{ boxShadow: "none" }}
|
|
size="xs"
|
|
>
|
|
<PlayIcon size={12} />
|
|
</ActionIcon>
|
|
)}
|
|
</Card>
|
|
</Flex>
|
|
);
|
|
})}
|
|
</Flex>
|
|
))}
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default BracketView;
|