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

regionals

Browse Source
This commit is contained in:
yohlo
2026-03-01 16:21:27 -06:00
parent f83a7d69c8
commit 6199afc687
14 changed files with 849 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,10 +7,14 @@ import { Match } from "@/features/matches/types";
interface BracketViewProps {
bracket: BracketData;
showControls?: boolean
showControls?: boolean;
groupConfig?: {
num_groups: number;
advance_per_group: number;
};
}
const BracketView: React.FC<BracketViewProps> = ({ bracket, showControls }) => {
const BracketView: React.FC<BracketViewProps> = ({ bracket, showControls, groupConfig }) => {
const height = useAppShellHeight();
const orders = useMemo(() => {
const map: Record<number, number> = {};
@@ -32,14 +36,14 @@ const BracketView: React.FC<BracketViewProps> = ({ bracket, showControls }) => {
<Text fw={600} size="md" m={16}>
Winners Bracket
</Text>
<Bracket rounds={bracket.winners} orders={orders} showControls={showControls} />
<Bracket rounds={bracket.winners} orders={orders} showControls={showControls} groupConfig={groupConfig} />
</div>
{bracket.losers && (
<div>
<Text fw={600} size="md" m={16}>
Losers Bracket
</Text>
<Bracket rounds={bracket.losers} orders={orders} showControls={showControls} />
<Bracket rounds={bracket.losers} orders={orders} showControls={showControls} groupConfig={groupConfig} />
</div>
)}
</ScrollArea>

6
src/features/bracket/components/bracket.tsx
View File

@@ -7,12 +7,17 @@ interface BracketProps {
rounds: Match[][];
orders: Record<number, number>;
showControls?: boolean;
groupConfig?: {
num_groups: number;
advance_per_group: number;
};
}
export const Bracket: React.FC<BracketProps> = ({
rounds,
orders,
showControls,
groupConfig,
}) => {
const containerRef = useRef<HTMLDivElement>(null);
const svgRef = useRef<SVGSVGElement>(null);
@@ -132,6 +137,7 @@ export const Bracket: React.FC<BracketProps> = ({
match={match}
orders={orders}
showControls={showControls}
groupConfig={groupConfig}
/>
</div>
)

35
src/features/bracket/components/match-card.tsx
View File

@@ -17,16 +17,38 @@ interface MatchCardProps {
match: Match;
orders: Record<number, number>;
showControls?: boolean;
groupConfig?: {
num_groups: number;
advance_per_group: number;
};
}
export const MatchCard: React.FC<MatchCardProps> = ({
match,
orders,
showControls,
groupConfig,
}) => {
const queryClient = useQueryClient();
const editSheet = useSheet();
const { playTrack, pause } = useSpotifyPlayback();
const getGroupLabel = useCallback((seed: number | undefined) => {
if (!seed || !groupConfig) return undefined;
const groupNames = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
const teamsPerRank = groupConfig.num_groups;
const rankIndex = Math.floor((seed - 1) / teamsPerRank);
const groupIndex = (seed - 1) % teamsPerRank;
const rank = rankIndex + 1;
const groupName = groupNames[groupIndex] || `${groupIndex + 1}`;
const rankSuffix = rank === 1 ? '1st' : rank === 2 ? '2nd' : rank === 3 ? '3rd' : `${rank}th`;
return `${groupName} ${rankSuffix}`;
}, [groupConfig]);
const homeSlot = useMemo(
() => ({
from: orders[match.home_from_lid],
@@ -39,8 +61,9 @@ export const MatchCard: React.FC<MatchCardProps> = ({
match.home_cups !== undefined &&
match.away_cups !== undefined &&
match.home_cups > match.away_cups,
groupLabel: !match.home && match.home_seed ? getGroupLabel(match.home_seed) : undefined,
}),
[match]
[match, getGroupLabel]
);
const awaySlot = useMemo(
() => ({
@@ -54,8 +77,9 @@ export const MatchCard: React.FC<MatchCardProps> = ({
match.away_cups !== undefined &&
match.home_cups !== undefined &&
match.away_cups > match.home_cups,
groupLabel: !match.away && match.away_seed ? getGroupLabel(match.away_seed) : undefined,
}),
[match]
[match, getGroupLabel]
);
const showToolbar = useMemo(
@@ -179,8 +203,11 @@ export const MatchCard: React.FC<MatchCardProps> = ({
data: match.id,
});
// Play walkout sequence after starting the match
if (hasWalkoutData && match.home?.name && match.away?.name) {
// Skip announcements for regional tournaments
const isRegional = match.tournament?.regional === true;
// Play walkout sequence after starting the match (only for non-regional tournaments)
if (!isRegional && hasWalkoutData && match.home?.name && match.away?.name) {
try {
const homeTeam = match.home as Team;
const awayTeam = match.away as Team;

16
src/features/bracket/components/match-slot.tsx
View File

@@ -11,6 +11,7 @@ interface MatchSlotProps {
seed?: number;
cups?: number;
isWinner?: boolean;
groupLabel?: string;
}
export const MatchSlot: React.FC<MatchSlotProps> = ({
@@ -19,7 +20,8 @@ export const MatchSlot: React.FC<MatchSlotProps> = ({
team,
seed,
cups,
isWinner
isWinner,
groupLabel
}) => (
<Flex
align="stretch"
@@ -34,7 +36,7 @@ export const MatchSlot: React.FC<MatchSlotProps> = ({
<Flex align="center" gap={4} flex={1}>
{team ? (
<>
<Text
<Text
size={team.name.length > 12 ? (team.name.length > 18 ? '10px' : '11px') : 'xs'}
truncate
style={{ minWidth: 0, flex: 1, lineHeight: "12px" }}
@@ -43,18 +45,22 @@ export const MatchSlot: React.FC<MatchSlotProps> = ({
</Text>
{isWinner && (
<CrownIcon
size={14}
size={14}
weight="fill"
style={{
style={{
color: 'gold',
marginLeft: '2px',
marginTop: '-1px',
filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.3))',
flexShrink: 0
}}
}}
/>
)}
</>
) : groupLabel ? (
<Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
{groupLabel}
</Text>
) : from ? (
<Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
{from_loser ? "Loser" : "Winner"} of Match {from}