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>
);
}
}

9
src/features/bracket/queries.ts
View File

@@ -1,13 +1,18 @@
import { queryOptions } from "@tanstack/react-query";
import { previewBracket } from "./server";
import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";
import { BracketData } from "./types";
const bracketKeys = {
preview: (teams: number) => ['bracket', 'preview', teams] as const,
preview: (teams: number) => ["bracket", "preview", teams] as const,
};
export const bracketQueries = {
preview: (teams: number) => queryOptions({
preview: (teams: number) => ({
queryKey: bracketKeys.preview(teams),
queryFn: () => previewBracket({ data: teams }),
}),
};
export const useBracketPreview = (teams: number) =>
useServerSuspenseQuery<BracketData>(bracketQueries.preview(teams));

17
src/features/bracket/server.ts
View File

@@ -2,17 +2,20 @@ import { superTokensFunctionMiddleware } from "@/utils/supertokens";
import { createServerFn } from "@tanstack/react-start";
import { z } from "zod";
import { Logger } from "@/lib/logger";
import brackets from './utils';
import brackets from "./utils";
import { BracketData } from "./types";
import { toServerResult } from "@/lib/tanstack-query/utils/to-server-result";
const logger = new Logger("Bracket Generation")
const logger = new Logger("Bracket Generation");
export const previewBracket = createServerFn()
.validator(z.number())
.middleware([superTokensFunctionMiddleware])
.handler(async ({ data: teams }) => {
logger.info('Generating bracket', teams);
if (!Object.keys(brackets).includes(teams.toString()))
throw Error("Bracket not available")
.handler(async ({ data: teams }) =>
toServerResult(async () => {
logger.info("Generating bracket", teams);
if (!Object.keys(brackets).includes(teams.toString()))
throw Error("Bracket not available");
return brackets[teams as keyof typeof brackets] as BracketData;
});
})
);

1
src/features/bracket/types.ts
View File

@@ -1,4 +1,3 @@
export interface Slot {
seed?: number;
team?: any;

22
src/features/bracket/utils/bracket-maps.ts
View File

@@ -11,14 +11,14 @@ export function createBracketMaps(bracketData: BracketData): BracketMaps {
const matchByOrder = new Map<number, Match>();
const allMatches: Match[] = [];
[...bracketData.winners, ...bracketData.losers].forEach(round => {
round.forEach(match => {
[...bracketData.winners, ...bracketData.losers].forEach((round) => {
round.forEach((match) => {
matchByLid.set(match.lid, match);
if (match.order !== null && match.order !== undefined) {
matchByOrder.set(match.order, match);
}
allMatches.push(match);
});
});
@@ -26,14 +26,20 @@ export function createBracketMaps(bracketData: BracketData): BracketMaps {
return {
matchByLid,
matchByOrder,
allMatches
allMatches,
};
}
export function getMatchByLid(maps: BracketMaps, lid: number): Match | undefined {
export function getMatchByLid(
maps: BracketMaps,
lid: number
): Match | undefined {
return maps.matchByLid.get(lid);
}
export function getMatchByOrder(maps: BracketMaps, order: number): Match | undefined {
export function getMatchByOrder(
maps: BracketMaps,
order: number
): Match | undefined {
return maps.matchByOrder.get(order);
}
}

38
src/features/bracket/utils/index.ts
View File

@@ -1,24 +1,24 @@
/**
* Imports saved json dumps of bracket generation from a python script that I didn't prioritize converting to TS
*/
import b12 from '../../../../scripts/brackets/12.json';
import b13 from '../../../../scripts/brackets/13.json';
import b14 from '../../../../scripts/brackets/14.json';
import b15 from '../../../../scripts/brackets/15.json';
import b16 from '../../../../scripts/brackets/16.json';
import b17 from '../../../../scripts/brackets/17.json';
import b18 from '../../../../scripts/brackets/18.json';
import b19 from '../../../../scripts/brackets/19.json';
import b20 from '../../../../scripts/brackets/20.json';
import b12 from "../../../../scripts/brackets/12.json";
import b13 from "../../../../scripts/brackets/13.json";
import b14 from "../../../../scripts/brackets/14.json";
import b15 from "../../../../scripts/brackets/15.json";
import b16 from "../../../../scripts/brackets/16.json";
import b17 from "../../../../scripts/brackets/17.json";
import b18 from "../../../../scripts/brackets/18.json";
import b19 from "../../../../scripts/brackets/19.json";
import b20 from "../../../../scripts/brackets/20.json";
export default {
12: b12,
13: b13,
14: b14,
15: b15,
16: b16,
17: b17,
18: b18,
19: b19,
20: b20,
}
12: b12,
13: b13,
14: b14,
15: b15,
16: b16,
17: b17,
18: b18,
19: b19,
20: b20,
};