refactor bracket feature
This commit is contained in:
yohlo
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user