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
2025-10-16 09:12:11 -05:00
parent 612f1f28bf
commit 470b4ef99c
28 changed files with 962 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/features/matches/components/match-card.tsx
View File

@@ -20,6 +20,7 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
const isHomeWin = match.home_cups > match.away_cups;
const isAwayWin = match.away_cups > match.home_cups;
const isStarted = match.status === "started";
const hasPrivate = match.home?.private || match.away?.private;
const handleHomeTeamClick = (e: React.MouseEvent) => {
e.stopPropagation();
@@ -65,13 +66,17 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
<Text size="xs" fw={600} lineClamp={1} c="dimmed">
{match.tournament.name}
</Text>
<Text c="dimmed">-</Text>
<Text size="xs" c="dimmed">
Round {match.round + 1}
{match.is_losers_bracket && " (Losers)"}
</Text>
{!match.tournament.regional && (
<>
<Text c="dimmed">-</Text>
<Text size="xs" c="dimmed">
Round {match.round + 1}
{match.is_losers_bracket && " (Losers)"}
</Text>
</>
)}
</Group>
{match.home && match.away && !hideH2H && (
{match.home && match.away && !hideH2H && !hasPrivate && (
<Tooltip label="Head to Head" withArrow position="left">
<ActionIcon
variant="subtle"

9
src/features/matches/components/match-list.tsx
View File

@@ -1,4 +1,4 @@
import { Stack } from "@mantine/core";
import { Stack, Text } from "@mantine/core";
import { Match } from "../types";
import MatchCard from "./match-card";
@@ -16,8 +16,15 @@ const MatchList = ({ matches, hideH2H = false }: MatchListProps) => {
return undefined;
}
const isRegional = filteredMatches[0]?.tournament?.regional;
return (
<Stack p="md" gap="sm">
{isRegional && (
<Text size="xs" c="dimmed" ta="center" px="md">
Matches for regionals are unordered
</Text>
)}
{filteredMatches.map((match, index) => (
<div
key={`match-${match.id}-${index}`}

6
src/features/players/components/player-stats-table-skeleton.tsx
View File

@@ -70,7 +70,11 @@ const PlayerListItemSkeleton = () => {
);
};
const PlayerStatsTableSkeleton = () => {
interface PlayerStatsTableSkeletonProps {
hideFilters?: boolean;
}
const PlayerStatsTableSkeleton = ({ hideFilters = false }: PlayerStatsTableSkeletonProps) => {
return (
<Container size="100%" px={0}>
<Stack gap="xs">

28
src/features/players/components/player-stats-table.tsx
View File

@@ -142,8 +142,12 @@ const PlayerListItem = memo(({ stat, onPlayerClick, mmr, onRegisterViewport, onU
);
});
const PlayerStatsTable = () => {
const { data: playerStats } = useAllPlayerStats();
interface PlayerStatsTableProps {
viewType?: 'all' | 'mainline' | 'regional';
}
const PlayerStatsTable = ({ viewType = 'all' }: PlayerStatsTableProps) => {
const { data: playerStats } = useAllPlayerStats(viewType);
const navigate = useNavigate();
const [search, setSearch] = useState("");
const [sortConfig, setSortConfig] = useState<SortConfig>({
@@ -292,21 +296,19 @@ const PlayerStatsTable = () => {
if (playerStats.length === 0) {
return (
<Container px={0} size="md">
<Stack align="center" gap="md" py="xl">
<ThemeIcon size="xl" variant="light" radius="md">
<ChartBarIcon size={32} />
</ThemeIcon>
<Title order={3} c="dimmed">
No Stats Available
</Title>
</Stack>
</Container>
<Stack align="center" gap="md" py="xl">
<ThemeIcon size="xl" variant="light" radius="md">
<ChartBarIcon size={32} />
</ThemeIcon>
<Title order={3} c="dimmed">
No Stats Available
</Title>
</Stack>
);
}
return (
<Container size="100%" px={0} mt="md">
<Container size="100%" px={0}>
<Stack gap="xs">
<Text px="md" size="10px" lh={0} c="dimmed">
Showing {filteredAndSortedStats.length} of {playerStats.length} players

41
src/features/players/components/profile/index.tsx
View File

@@ -1,10 +1,10 @@
import { Box, Stack, Text, Divider } from "@mantine/core";
import { Suspense } from "react";
import { Box, Stack, Text, Divider, Group, Button } from "@mantine/core";
import { Suspense, useState, useDeferredValue } from "react";
import Header from "./header";
import SwipeableTabs from "@/components/swipeable-tabs";
import { usePlayer, usePlayerMatches, usePlayerStats } from "../../queries";
import TeamList from "@/features/teams/components/team-list";
import StatsOverview from "@/components/stats-overview";
import StatsOverview, { StatsSkeleton } from "@/components/stats-overview";
import MatchList from "@/features/matches/components/match-list";
import BadgeShowcase from "@/features/badges/components/badge-showcase";
import BadgeShowcaseSkeleton from "@/features/badges/components/badge-showcase-skeleton";
@@ -13,10 +13,38 @@ interface ProfileProps {
id: string;
}
const StatsWithFilter = ({ id }: { id: string }) => {
const [viewType, setViewType] = useState<'all' | 'mainline' | 'regional'>('all');
const deferredViewType = useDeferredValue(viewType);
const isStale = viewType !== deferredViewType;
return (
<Stack>
<Group gap="xs" px="md" justify="space-between" align="center">
<Text size="md" fw={700}>Statistics</Text>
<Group gap="xs">
<Button variant={viewType === 'all' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('all')}>All</Button>
<Button variant={viewType === 'mainline' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('mainline')}>Mainline</Button>
<Button variant={viewType === 'regional' ? 'filled' : 'light'} size="compact-xs" onClick={() => setViewType('regional')}>Regional</Button>
</Group>
</Group>
<Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
<Suspense key={deferredViewType} fallback={<StatsSkeleton />}>
<StatsContent id={id} viewType={deferredViewType} />
</Suspense>
</Box>
</Stack>
);
};
const StatsContent = ({ id, viewType }: { id: string; viewType: 'all' | 'mainline' | 'regional' }) => {
const { data: stats, isLoading: statsLoading } = usePlayerStats(id, viewType);
return <StatsOverview statsData={stats} isLoading={statsLoading} />;
};
const Profile = ({ id }: ProfileProps) => {
const { data: player } = usePlayer(id);
const { data: matches } = usePlayerMatches(id);
const { data: stats, isLoading: statsLoading } = usePlayerStats(id);
const tabs = [
{
@@ -29,10 +57,7 @@ const Profile = ({ id }: ProfileProps) => {
</Suspense>
</Stack>
<Divider my="md" />
<Stack>
<Text px="md" size="md" fw={700}>Statistics</Text>
<StatsOverview statsData={stats} isLoading={statsLoading} />
</Stack>
<StatsWithFilter id={id} />
</>,
},
{

24
src/features/players/queries.ts
View File

@@ -7,8 +7,8 @@ export const playerKeys = {
details: (id: string) => ['players', 'details', id],
unassociated: ['players','unassociated'],
unenrolled: (tournamentId: string) => ['players', 'unenrolled', tournamentId],
stats: (id: string) => ['players', 'stats', id],
allStats: ['players', 'stats', 'all'],
stats: (id: string, viewType?: 'all' | 'mainline' | 'regional') => ['players', 'stats', id, viewType ?? 'all'],
allStats: (viewType?: 'all' | 'mainline' | 'regional') => ['players', 'stats', 'all', viewType ?? 'all'],
matches: (id: string) => ['players', 'matches', id],
activity: ['players', 'activity'],
};
@@ -34,13 +34,13 @@ export const playerQueries = {
queryKey: playerKeys.unenrolled(tournamentId),
queryFn: async () => await getUnenrolledPlayers({ data: tournamentId })
}),
stats: (id: string) => ({
queryKey: playerKeys.stats(id),
queryFn: async () => await getPlayerStats({ data: id })
stats: (id: string, viewType?: 'all' | 'mainline' | 'regional') => ({
queryKey: playerKeys.stats(id, viewType),
queryFn: async () => await getPlayerStats({ data: { playerId: id, viewType } })
}),
allStats: () => ({
queryKey: playerKeys.allStats,
queryFn: async () => await getAllPlayerStats()
allStats: (viewType?: 'all' | 'mainline' | 'regional') => ({
queryKey: playerKeys.allStats(viewType),
queryFn: async () => await getAllPlayerStats({ data: viewType })
}),
matches: (id: string) => ({
queryKey: playerKeys.matches(id),
@@ -84,11 +84,11 @@ export const usePlayers = () =>
export const useUnassociatedPlayers = () =>
useServerSuspenseQuery(playerQueries.unassociated());
export const usePlayerStats = (id: string) =>
useServerSuspenseQuery(playerQueries.stats(id));
export const usePlayerStats = (id: string, viewType?: 'all' | 'mainline' | 'regional') =>
useServerSuspenseQuery(playerQueries.stats(id, viewType));
export const useAllPlayerStats = () =>
useServerSuspenseQuery(playerQueries.allStats());
export const useAllPlayerStats = (viewType?: 'all' | 'mainline' | 'regional') =>
useServerSuspenseQuery(playerQueries.allStats(viewType));
export const usePlayerMatches = (id: string) =>
useServerSuspenseQuery(playerQueries.matches(id));

12
src/features/players/server.ts
View File

@@ -136,16 +136,20 @@ export const getUnassociatedPlayers = createServerFn()
);
export const getPlayerStats = createServerFn()
.inputValidator(z.string())
.inputValidator(z.object({
playerId: z.string(),
viewType: z.enum(['all', 'mainline', 'regional']).optional()
}))
.middleware([superTokensFunctionMiddleware])
.handler(async ({ data }) =>
toServerResult<PlayerStats>(async () => await pbAdmin.getPlayerStats(data))
toServerResult<PlayerStats>(async () => await pbAdmin.getPlayerStats(data.playerId, data.viewType))
);
export const getAllPlayerStats = createServerFn()
.inputValidator(z.enum(['all', 'mainline', 'regional']).optional())
.middleware([superTokensFunctionMiddleware])
.handler(async () =>
toServerResult<PlayerStats[]>(async () => await pbAdmin.getAllPlayerStats())
.handler(async ({ data }) =>
toServerResult<PlayerStats[]>(async () => await pbAdmin.getAllPlayerStats(data))
);
export const getPlayerMatches = createServerFn()

6
src/features/teams/components/team-list.tsx
View File

@@ -55,10 +55,10 @@ const TeamList = ({ teams, loading = false, onTeamClick }: TeamListProps) => {
const navigate = useNavigate();
const handleClick = useCallback(
(teamId: string) => {
(teamId: string, priv: boolean) => {
if (onTeamClick) {
onTeamClick(teamId);
} else {
} else if (!priv) {
navigate({ to: `/teams/${teamId}` });
}
},
@@ -100,7 +100,7 @@ const TeamList = ({ teams, loading = false, onTeamClick }: TeamListProps) => {
/>
}
style={{ cursor: "pointer" }}
onClick={() => handleClick(team.id)}
onClick={() => handleClick(team.id, team.private)}
styles={{
itemWrapper: { width: "100%" },
itemLabel: { width: "100%" },

2
src/features/teams/types.ts
View File

@@ -19,6 +19,7 @@ export interface Team {
updated: string;
players: PlayerInfo[];
tournaments: TournamentInfo[];
private: boolean;
}
export interface TeamInfo {
@@ -28,6 +29,7 @@ export interface TeamInfo {
accent_color: string;
logo?: string;
players: PlayerInfo[];
private: boolean;
}
export const teamInputSchema = z

2
src/features/tournaments/components/tournament-card.tsx
View File

@@ -58,7 +58,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
<Title mb={-6} order={3} lineClamp={2}>
{tournament.name}
</Title>
{(tournament.first_place || tournament.second_place || tournament.third_place) && (
{((tournament.first_place || tournament.second_place || tournament.third_place) && !tournament.regional) && (
<Stack gap={6} >
{tournament.first_place && (
<Badge

10
src/features/tournaments/components/tournament-stats.tsx
View File

@@ -9,9 +9,10 @@ import {
Center,
ThemeIcon,
Divider,
Alert,
} from "@mantine/core";
import { Tournament } from "@/features/tournaments/types";
import { CrownIcon, MedalIcon, TreeStructureIcon } from "@phosphor-icons/react";
import { CrownIcon, TreeStructureIcon, InfoIcon } from "@phosphor-icons/react";
import Avatar from "@/components/avatar";
import ListLink from "@/components/list-link";
import { Podium } from "./podium";
@@ -156,7 +157,12 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
return (
<Container size="100%" px={0}>
<Stack gap="md">
<Podium tournament={tournament} />
{tournament.regional && (
<Alert px="md" variant="light" title="Regional Tournament" icon={<InfoIcon size={16} />}>
Regional tournaments are a work in progress. Some features might not work as expected.
</Alert>
)}
{!tournament.regional && <Podium tournament={tournament} />}
<ListLink
label={`View Bracket`}
to={`/tournaments/${tournament.id}/bracket`}

2
src/features/tournaments/types.ts
View File

@@ -29,6 +29,7 @@ export interface TournamentInfo {
first_place?: TeamInfo;
second_place?: TeamInfo;
third_place?: TeamInfo;
regional?: boolean;
}
export interface Tournament {
@@ -50,6 +51,7 @@ export interface Tournament {
second_place?: TeamInfo;
third_place?: TeamInfo;
team_stats?: TournamentTeamStats[];
regional?: boolean;
}
export const tournamentInputSchema = z.object({