much better bracket viewer, better bracket structure
This commit is contained in:
yohlo
@@ -1,83 +1,99 @@
|
||||
import { Text, Container, Flex, ScrollArea } from "@mantine/core";
|
||||
import { Text, Container, Flex, ScrollArea, NumberInput, Group } from "@mantine/core";
|
||||
import { SeedList } from "./seed-list";
|
||||
import BracketView from "./bracket-view";
|
||||
import { MutableRefObject, RefObject, useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { bracketQueries } from "../queries";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useDraggable } from "react-use-draggable-scroll";
|
||||
import { ref } from "process";
|
||||
// import { useDraggable } from "react-use-draggable-scroll";
|
||||
import './styles.module.css';
|
||||
import { useIsMobile } from "@/hooks/use-is-mobile";
|
||||
// import { useIsMobile } from "@/hooks/use-is-mobile";
|
||||
import useAppShellHeight from "@/hooks/use-appshell-height";
|
||||
import { createBracketMaps, BracketMaps } from "../utils/bracket-maps";
|
||||
|
||||
interface Team {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface BracketData {
|
||||
n: number;
|
||||
doubleElim: boolean;
|
||||
matches: { [key: string]: any };
|
||||
winnersBracket: number[][];
|
||||
losersBracket: number[][];
|
||||
interface Match {
|
||||
lid: number;
|
||||
round: number;
|
||||
order: number | null;
|
||||
type: string;
|
||||
home: any;
|
||||
away?: any;
|
||||
reset?: boolean;
|
||||
}
|
||||
|
||||
export const PreviewBracketPage: React.FC = () => {
|
||||
const isMobile = useIsMobile();
|
||||
const height = useAppShellHeight();
|
||||
const refDraggable = useRef<HTMLDivElement>(null);
|
||||
const { events } = useDraggable(refDraggable as RefObject<HTMLDivElement>, { isMounted: !!refDraggable.current });
|
||||
interface BracketData {
|
||||
winners: Match[][];
|
||||
losers: Match[][];
|
||||
}
|
||||
|
||||
const teamCount = 20;
|
||||
|
||||
export const PreviewBracketPage: React.FC = () => {
|
||||
const height = useAppShellHeight();
|
||||
|
||||
const [teamCount, setTeamCount] = useState(20);
|
||||
const { data, isLoading, error } = useQuery<BracketData>(bracketQueries.preview(teamCount));
|
||||
|
||||
// Create teams with proper structure
|
||||
const [teams, setTeams] = useState<Team[]>(
|
||||
Array.from({ length: teamCount }, (_, i) => ({
|
||||
const [teams, setTeams] = useState<Team[]>([]);
|
||||
|
||||
// Update teams when teamCount changes
|
||||
useEffect(() => {
|
||||
setTeams(Array.from({ length: teamCount }, (_, i) => ({
|
||||
id: `team-${i + 1}`,
|
||||
name: `Team ${i + 1}`
|
||||
}))
|
||||
);
|
||||
})));
|
||||
}, [teamCount]);
|
||||
|
||||
const [seededWinnersBracket, setSeededWinnersBracket] = useState<any[][]>([]);
|
||||
const [seededLosersBracket, setSeededLosersBracket] = useState<any[][]>([]);
|
||||
const [seededWinnersBracket, setSeededWinnersBracket] = useState<Match[][]>([]);
|
||||
const [seededLosersBracket, setSeededLosersBracket] = useState<Match[][]>([]);
|
||||
const [bracketMaps, setBracketMaps] = useState<BracketMaps | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!data) return;
|
||||
if (!data || teams.length === 0) return;
|
||||
|
||||
// Map match IDs to actual match objects with team names
|
||||
const mapBracket = (bracketIds: number[][]) => {
|
||||
return bracketIds.map(roundIds =>
|
||||
roundIds.map(lid => {
|
||||
const match = data.matches[lid];
|
||||
if (!match) return null;
|
||||
// Create bracket maps for easy lookups
|
||||
const maps = createBracketMaps(data);
|
||||
setBracketMaps(maps);
|
||||
|
||||
// Map brackets with team names
|
||||
const mapBracket = (bracket: Match[][]) => {
|
||||
return bracket.map(round =>
|
||||
round.map(match => {
|
||||
const mappedMatch = { ...match };
|
||||
|
||||
// Map home slot - handle both uppercase and lowercase type names
|
||||
if (match.home?.type?.toLowerCase() === 'seed') {
|
||||
mappedMatch.home = {
|
||||
...match.home,
|
||||
team: teams[match.home.seed - 1]
|
||||
};
|
||||
// Map home slot if it has a seed
|
||||
if (match.home?.seed && match.home.seed > 0) {
|
||||
const teamIndex = match.home.seed - 1;
|
||||
if (teams[teamIndex]) {
|
||||
mappedMatch.home = {
|
||||
...match.home,
|
||||
team: teams[teamIndex]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Map away slot if it exists - handle both uppercase and lowercase type names
|
||||
if (match.away?.type?.toLowerCase() === 'seed') {
|
||||
mappedMatch.away = {
|
||||
...match.away,
|
||||
team: teams[match.away.seed - 1]
|
||||
};
|
||||
// Map away slot if it has a seed
|
||||
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;
|
||||
}).filter(m => m !== null)
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
setSeededWinnersBracket(mapBracket(data.winnersBracket));
|
||||
setSeededLosersBracket(mapBracket(data.losersBracket));
|
||||
setSeededWinnersBracket(mapBracket(data.winners));
|
||||
setSeededLosersBracket(mapBracket(data.losers));
|
||||
}, [teams, data]);
|
||||
|
||||
const handleSeedChange = (teamIndex: number, newSeedIndex: number) => {
|
||||
@@ -95,14 +111,27 @@ export const PreviewBracketPage: React.FC = () => {
|
||||
|
||||
if (isLoading) return <p>Loading...</p>;
|
||||
if (error) return <p>Error loading bracket</p>;
|
||||
if (!data) return <p>No data available</p>;
|
||||
if (!data || !bracketMaps || teams.length === 0) return <p>No data available</p>;
|
||||
|
||||
return (
|
||||
<Container p={0} w="100%" style={{ userSelect: "none" }}>
|
||||
<Flex w="100%" justify="space-between" h='3rem'>
|
||||
<Text fw={600} size="lg" mb={16}>
|
||||
Preview Bracket ({data.n} teams, {data.doubleElim ? 'Double' : 'Single'} Elimination)
|
||||
<Flex w="100%" justify="space-between" align="center" h='3rem'>
|
||||
<Text fw={600} size="lg">
|
||||
Preview Bracket (Double Elimination)
|
||||
</Text>
|
||||
<Group gap="sm">
|
||||
<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}>
|
||||
<div style={{ minWidth: 250, display: 'none' }}>
|
||||
@@ -112,14 +141,8 @@ export const PreviewBracketPage: React.FC = () => {
|
||||
<SeedList teams={teams} onSeedChange={handleSeedChange} />
|
||||
</div>
|
||||
<ScrollArea
|
||||
px='xs'
|
||||
viewportRef={refDraggable}
|
||||
viewportProps={events}
|
||||
h={`calc(${height} - 4rem)`}
|
||||
className="bracket-container"
|
||||
styles={{
|
||||
root: { overflow: "auto", flex: 1, gap: 24, display: 'flex', flexDirection: 'column' }
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Text fw={600} size="md" mb={16}>
|
||||
@@ -127,7 +150,7 @@ export const PreviewBracketPage: React.FC = () => {
|
||||
</Text>
|
||||
<BracketView
|
||||
bracket={seededWinnersBracket}
|
||||
matches={data.matches}
|
||||
bracketMaps={bracketMaps}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -136,7 +159,7 @@ export const PreviewBracketPage: React.FC = () => {
|
||||
</Text>
|
||||
<BracketView
|
||||
bracket={seededLosersBracket}
|
||||
matches={data.matches}
|
||||
bracketMaps={bracketMaps}
|
||||
/>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user