kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

much better bracket viewer, better bracket structure

Browse Source
This commit is contained in:
yohlo
2025-08-23 13:42:35 -05:00
parent 942374d45d
commit ee97606279
6 changed files with 229 additions and 541 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/features/bracket/components/bracket-view.tsx
View File

@@ -1,32 +1,38 @@
import { ActionIcon, Card, Container, 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: any[][];
matches: { [key: string]: any };
bracket: Match[][];
bracketMaps: BracketMaps;
onAnnounce?: (teamOne: any, teamTwo: any) => void;
}
const BracketView: React.FC<BracketViewProps> = ({ bracket, matches, onAnnounce }) => {
// Helper to check match type (handle both uppercase and lowercase)
const BracketView: React.FC<BracketViewProps> = ({ bracket, bracketMaps, onAnnounce }) => {
// Helper to check match type
const isMatchType = (type: string, expected: string) => {
return type?.toLowerCase() === expected.toLowerCase();
};
// Helper to check slot type (handle both uppercase and lowercase)
const isSlotType = (type: string, expected: string) => {
return type?.toLowerCase() === expected.toLowerCase();
};
// Helper to get parent match order number
const getParentMatchOrder = (parentId: number): number | string => {
const parentMatch = matches[parentId];
// 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) {
return parentMatch.order;
}
// If no order (like for byes), return the parentId with a different prefix
return `Match ${parentId}`;
// If no order (like for byes), return the parentLid with a different prefix
return `Match ${parentLid}`;
};
return (
@@ -49,33 +55,83 @@ const BracketView: React.FC<BracketViewProps> = ({ bracket, matches, onAnnounce
<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={4}>
{isSlotType(match.home?.type, 'seed') && (
<>
<Text c='dimmed' size='xs'>Seed {match.home.seed}</Text>
{match.home.team && <Text size='xs'>{match.home.team.name}</Text>}
</>
)}
{isSlotType(match.home?.type, 'tbd') && (
<Text c='dimmed' size='xs'>
{match.home.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(match.home.parentId || match.home.parent)}
</Text>
)}
{!match.home && <Text c='dimmed' size='xs' fs='italic'>TBD</Text>}
<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={4} mb={-16}>
{isSlotType(match.away?.type, 'seed') && (
<>
<Text c='dimmed' size='xs'>Seed {match.away.seed}</Text>
{match.away.team && <Text size='xs'>{match.away.team.name}</Text>}
</>
)}
{isSlotType(match.away?.type, 'tbd') && (
<Text c='dimmed' size='xs'>
{match.away.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(match.away.parentId || match.away.parent)}
</Text>
)}
{!match.away && <Text c='dimmed' size='xs' fs='italic'>TBD</Text>}
<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