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

significant refactor

Browse Source
This commit is contained in:
Kyle Yohler
2025-08-30 01:42:23 -05:00
parent 7136f646a3
commit 052f53444e
106 changed files with 1994 additions and 1701 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,15 +5,15 @@ import useAppShellHeight from "@/hooks/use-appshell-height";
import { BracketMaps } from "../utils/bracket-maps";
interface BracketProps {
winners: Match[][],
losers?: Match[][],
bracketMaps: BracketMaps | null
winners: Match[][];
losers?: Match[][];
bracketMaps: BracketMaps | null;
}
const Bracket: React.FC<BracketProps> = ({ winners, losers, bracketMaps }) => {
const height = useAppShellHeight();
if (!bracketMaps) return <p>Bracket not available.</p>
if (!bracketMaps) return <p>Bracket not available.</p>;
return (
<ScrollArea
@@ -31,14 +31,14 @@ const Bracket: React.FC<BracketProps> = ({ winners, losers, bracketMaps }) => {
</Text>
<BracketView bracket={winners} bracketMaps={bracketMaps} />
</div>
{
losers && <div>
{losers && (
<div>
<Text fw={600} size="md" m={16}>
Losers Bracket
</Text>
<BracketView bracket={losers} bracketMaps={bracketMaps} />
</div>
}
)}
</ScrollArea>
);
};

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

@@ -1,43 +1,51 @@
import { Flex, Text } from '@mantine/core';
import React from 'react';
import { SeedBadge } from './seed-badge';
import { Flex, Text } from "@mantine/core";
import React from "react";
import { SeedBadge } from "./seed-badge";
interface MatchSlotProps {
slot: any;
getParentMatchOrder: (parentLid: number) => number | string;
}
export const MatchSlot: React.FC<MatchSlotProps> = ({ slot, getParentMatchOrder }) => {
export const MatchSlot: React.FC<MatchSlotProps> = ({
slot,
getParentMatchOrder,
}) => {
const renderSlotContent = () => {
if (slot?.seed) {
return slot.team ? (
<Text size='xs'>{slot.team.name}</Text>
<Text size="xs">{slot.team.name}</Text>
) : (
<Text size='xs' c='dimmed'>Team {slot.seed}</Text>
);
}
if (slot?.parent_lid !== null && slot?.parent_lid !== undefined) {
return (
<Text c='dimmed' size='xs'>
{slot.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(slot.parent_lid)}
<Text size="xs" c="dimmed">
Team {slot.seed}
</Text>
);
}
if (slot) {
return <Text c='dimmed' size='xs' fs='italic'>TBD</Text>;
if (slot?.parent_lid !== null && slot?.parent_lid !== undefined) {
return (
<Text c="dimmed" size="xs">
{slot.loser ? "Loser" : "Winner"} of Match{" "}
{getParentMatchOrder(slot.parent_lid)}
</Text>
);
}
if (slot) {
return (
<Text c="dimmed" size="xs" fs="italic">
TBD
</Text>
);
}
return null;
};
return (
<Flex align="stretch">
{slot?.seed && <SeedBadge seed={slot.seed} />}
<div style={{ flex: 1, padding: '4px 8px' }}>
{renderSlotContent()}
</div>
<div style={{ flex: 1, padding: "4px 8px" }}>{renderSlotContent()}</div>
</Flex>
);
};
};

10
src/features/bracket/components/preview.tsx
View File

@@ -7,7 +7,7 @@ import {
Loader,
} from "@mantine/core";
import { useEffect, useState } from "react";
import { bracketQueries } from "../queries";
import { bracketQueries, useBracketPreview } from "../queries";
import { useQuery } from "@tanstack/react-query";
import { createBracketMaps, BracketMaps } from "../utils/bracket-maps";
import { BracketData, Match } from "../types";
@@ -21,9 +21,7 @@ interface PreviewTeam {
export const PreviewBracket: React.FC = () => {
const [teamCount, setTeamCount] = useState(20);
const { data, isLoading, error } = useQuery(
bracketQueries.preview(teamCount)
);
const { data, isLoading, error } = useBracketPreview(teamCount);
const [teams, setTeams] = useState<PreviewTeam[]>([]);
@@ -45,7 +43,7 @@ export const PreviewBracket: React.FC = () => {
useEffect(() => {
if (!data || teams.length === 0) return;
const maps = createBracketMaps(data as BracketData);
const maps = createBracketMaps(data);
setBracketMaps(maps);
const mapBracket = (bracket: Match[][]) => {
@@ -88,7 +86,7 @@ export const PreviewBracket: React.FC = () => {
return (
<Container p={0} w="100%" style={{ userSelect: "none" }}>
<Flex w="100%" justify="space-between" align="center" h="3rem">
<Group gap="sm" mx='auto'>
<Group gap="sm" mx="auto">
<Text size="sm" c="dimmed">
Teams:
</Text>

22
src/features/bracket/components/seed-badge.tsx
View File

@@ -1,5 +1,5 @@
import { Text } from '@mantine/core';
import React from 'react';
import { Text } from "@mantine/core";
import React from "react";
interface SeedBadgeProps {
seed: number;
@@ -13,17 +13,17 @@ export const SeedBadge: React.FC<SeedBadgeProps> = ({ seed }) => {
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)',
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)",
}}
>
{seed}
</Text>
);
};
};

8
src/features/bracket/components/seed-list.tsx
View File

@@ -1,4 +1,4 @@
import { Flex, Text, Select, Card } from '@mantine/core';
import { Flex, Text, Select, Card } from "@mantine/core";
interface Team {
id: string;
@@ -13,11 +13,11 @@ interface SeedListProps {
export function SeedList({ teams, onSeedChange }: SeedListProps) {
const seedOptions = teams.map((_, index) => ({
value: index.toString(),
label: `Seed ${index + 1}`
label: `Seed ${index + 1}`,
}));
return (
<Flex direction='column' gap={8}>
<Flex direction="column" gap={8}>
{teams.map((team, index) => (
<Card key={team.id} withBorder p="xs">
<Flex align="center" gap="xs" justify="space-between">
@@ -45,4 +45,4 @@ export function SeedList({ teams, onSeedChange }: SeedListProps) {
))}
</Flex>
);
}
}