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

Merge branch 'main' into caro/badges-stats

Browse Source
This commit is contained in:
thecaroline225
2025-10-16 11:51:12 -05:00
parent 7fa3b06673 470b4ef99c
commit a04a78fbf8
56 changed files with 2759 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/router.tsx
View File

@@ -13,7 +13,7 @@ export function getRouter() {
gcTime: 5 * 60 * 1000, // 5 minutes
refetchOnWindowFocus: false,
refetchOnReconnect: "always",
retry: 3,
retry: 1,
},
},
});

25
src/app/routes/_authed/admin/activities.tsx
View File

@@ -1,12 +1,16 @@
import { createFileRoute } from "@tanstack/react-router";
import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
import { ActivitiesTable, activityQueries } from "@/features/activities";
import { PlayersActivityTable, playerQueries } from "@/features/players";
import { Tabs } from "@mantine/core";
import { useState } from "react";
export const Route = createFileRoute("/_authed/admin/activities")({
component: Stats,
beforeLoad: ({ context }) => {
const queryClient = context.queryClient;
prefetchServerQuery(queryClient, activityQueries.search());
prefetchServerQuery(queryClient, playerQueries.activity());
},
loader: () => ({
withPadding: false,
@@ -15,10 +19,27 @@ export const Route = createFileRoute("/_authed/admin/activities")({
title: "Activities",
withBackButton: true,
},
refresh: [activityQueries.search().queryKey],
refresh: [activityQueries.search().queryKey, playerQueries.activity().queryKey],
}),
});
function Stats() {
return <ActivitiesTable />;
const [activeTab, setActiveTab] = useState<string | null>("server-functions");
return (
<Tabs value={activeTab} onChange={setActiveTab}>
<Tabs.List mb='md'>
<Tabs.Tab value="server-functions">Server Functions</Tabs.Tab>
<Tabs.Tab value="player-activity">Player Activity</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="server-functions">
<ActivitiesTable />
</Tabs.Panel>
<Tabs.Panel value="player-activity">
<PlayersActivityTable />
</Tabs.Panel>
</Tabs>
);
}

66
src/app/routes/_authed/stats.tsx
View File

@@ -1,15 +1,19 @@
import { createFileRoute } from "@tanstack/react-router";
import { playerQueries } from "@/features/players/queries";
import PlayerStatsTable from "@/features/players/components/player-stats-table";
import { Suspense } from "react";
import { Suspense, useState, useDeferredValue } from "react";
import PlayerStatsTableSkeleton from "@/features/players/components/player-stats-table-skeleton";
import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
import LeagueHeadToHead from "@/features/players/components/league-head-to-head";
import { Box, Loader, Tabs, Button, Group, Container, Stack } from "@mantine/core";
export const Route = createFileRoute("/_authed/stats")({
component: Stats,
beforeLoad: ({ context }) => {
const queryClient = context.queryClient;
prefetchServerQuery(queryClient, playerQueries.allStats());
prefetchServerQuery(queryClient, playerQueries.allStats('all'));
prefetchServerQuery(queryClient, playerQueries.allStats('mainline'));
prefetchServerQuery(queryClient, playerQueries.allStats('regional'));
},
loader: () => ({
withPadding: false,
@@ -17,12 +21,62 @@ export const Route = createFileRoute("/_authed/stats")({
header: {
title: "Player Stats"
},
refresh: [playerQueries.allStats().queryKey],
refresh: [playerQueries.allStats().queryKey],
}),
});
function Stats() {
return <Suspense fallback={<PlayerStatsTableSkeleton />}>
<PlayerStatsTable />
</Suspense>;
const [viewType, setViewType] = useState<'all' | 'mainline' | 'regional'>('all');
const deferredViewType = useDeferredValue(viewType);
const isStale = viewType !== deferredViewType;
return (
<Tabs defaultValue="stats">
<Tabs.List grow>
<Tabs.Tab value="stats">Stats</Tabs.Tab>
<Tabs.Tab value="h2h">Head to Head</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="stats">
<Container size="100%" px={0} mt="md">
<Stack gap="xs">
<Group gap="xs" px="md" justify="center">
<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>
<Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
<Suspense key={deferredViewType} fallback={<PlayerStatsTableSkeleton hideFilters />}>
<PlayerStatsTable viewType={deferredViewType} />
</Suspense>
</Box>
</Stack>
</Container>
</Tabs.Panel>
<Tabs.Panel value="h2h">
<Suspense fallback={<Box w='100vw' py='xl'><Loader ml='45vw' /></Box>}>
<LeagueHeadToHead />
</Suspense>
</Tabs.Panel>
</Tabs>
);
}

2
src/components/avatar.tsx
View File

@@ -13,7 +13,7 @@ import { XIcon } from "@phosphor-icons/react";
interface AvatarProps
extends Omit<MantineAvatarProps, "radius" | "color" | "size"> {
name: string;
name?: string;
size?: number;
radius?: string | number;
withBorder?: boolean;

1
src/components/button.tsx
View File

@@ -10,5 +10,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
return <MantineButton fullWidth ref={ref} {...props} />;
});
Button.displayName = "Button";
export default Button;

66
src/components/sheet/drawer.tsx
View File

@@ -1,5 +1,10 @@
import { Box, Container, Flex, Loader, Title, useComputedColorScheme } from "@mantine/core";
import { PropsWithChildren, Suspense, useEffect, useRef } from "react";
import {
Box,
Container,
Title,
useComputedColorScheme,
} from "@mantine/core";
import { PropsWithChildren, useEffect, useRef } from "react";
import { Drawer as VaulDrawer } from "vaul";
import styles from "./styles.module.css";
@@ -17,6 +22,11 @@ const Drawer: React.FC<DrawerProps> = ({
}) => {
const colorScheme = useComputedColorScheme("light");
const contentRef = useRef<HTMLDivElement>(null);
const openedRef = useRef(opened);
useEffect(() => {
openedRef.current = opened;
}, [opened]);
useEffect(() => {
const appElement = document.querySelector(".app") as HTMLElement;
@@ -57,7 +67,7 @@ const Drawer: React.FC<DrawerProps> = ({
appElement.classList.remove("drawer-scaling");
themeColorMeta.content = currentColors.normal;
};
}, [opened, colorScheme]);
}, [opened]);
useEffect(() => {
if (!opened || !contentRef.current) return;
@@ -69,46 +79,44 @@ const Drawer: React.FC<DrawerProps> = ({
if (visualViewport) {
const availableHeight = visualViewport.height;
const maxDrawerHeight = Math.min(availableHeight * 0.75, window.innerHeight * 0.75);
const maxDrawerHeight = Math.min(
availableHeight * 0.75,
window.innerHeight * 0.75
);
drawerContent.style.maxHeight = `${maxDrawerHeight}px`;
} else {
drawerContent.style.maxHeight = '75vh';
drawerContent.style.maxHeight = "75vh";
}
}
};
const resizeObserver = new ResizeObserver(() => {
if (contentRef.current) {
const drawerContent = contentRef.current.closest('[data-vaul-drawer-wrapper]');
if (drawerContent) {
(drawerContent as HTMLElement).style.height = 'auto';
(drawerContent as HTMLElement).offsetHeight;
}
}
});
updateDrawerHeight();
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', updateDrawerHeight);
window.visualViewport.addEventListener("resize", updateDrawerHeight);
}
resizeObserver.observe(contentRef.current);
return () => {
resizeObserver.disconnect();
if (window.visualViewport) {
window.visualViewport.removeEventListener('resize', updateDrawerHeight);
window.visualViewport.removeEventListener("resize", updateDrawerHeight);
}
};
}, [opened, children]);
}, [opened]);
return (
<VaulDrawer.Root repositionInputs={false} open={opened} onOpenChange={onChange}>
<VaulDrawer.Root
repositionInputs={false}
open={opened}
onOpenChange={onChange}
>
<VaulDrawer.Portal>
<VaulDrawer.Overlay className={styles.drawerOverlay} />
<VaulDrawer.Content className={styles.drawerContent} aria-describedby="drawer" ref={contentRef}>
<VaulDrawer.Content
className={styles.drawerContent}
aria-describedby="drawer"
ref={contentRef}
>
<Container flex={1} p="md">
<Box
mb="sm"
@@ -120,14 +128,10 @@ const Drawer: React.FC<DrawerProps> = ({
style={{ borderRadius: "9999px" }}
/>
<Container mx="auto" maw="28rem" px={0}>
<VaulDrawer.Title><Title order={2}>{title}</Title></VaulDrawer.Title>
<Suspense fallback={
<Flex justify='center' align='center' w='100%' h={400}>
<Loader size='lg' />
</Flex>
}>
{children}
</Suspense>
<VaulDrawer.Title>
<Title order={2}>{title}</Title>
</VaulDrawer.Title>
{children}
</Container>
</Container>
</VaulDrawer.Content>

28
src/components/sheet/sheet.tsx
View File

@@ -1,8 +1,8 @@
import { PropsWithChildren, useCallback } from "react";
import { PropsWithChildren, Suspense, useCallback } from "react";
import { useIsMobile } from "@/hooks/use-is-mobile";
import Drawer from "./drawer";
import Modal from "./modal";
import { ScrollArea } from "@mantine/core";
import { ScrollArea, Flex, Loader } from "@mantine/core";
interface SheetProps extends PropsWithChildren {
title?: string;
@@ -16,6 +16,8 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
const SheetComponent = isMobile ? Drawer : Modal;
if (!opened) return null;
return (
<SheetComponent
title={title}
@@ -23,14 +25,20 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
onChange={onChange}
onClose={handleClose}
>
<ScrollArea.Autosize
style={{ flex: 1, maxHeight: '75dvh' }}
scrollbarSize={8}
scrollbars="y"
type="scroll"
>
{children}
</ScrollArea.Autosize>
<Suspense fallback={
<Flex justify='center' align='center' w='100%' style={{ minHeight: '25vh' }}>
<Loader size='lg' />
</Flex>
}>
<ScrollArea.Autosize
style={{ flex: 1, maxHeight: '75dvh' }}
scrollbarSize={8}
scrollbars="y"
type="scroll"
>
{children}
</ScrollArea.Autosize>
</Suspense>
</SheetComponent>
);
};

10
src/components/stats-overview.tsx
View File

@@ -101,10 +101,10 @@ const StatsOverview = ({ statsData, isLoading = false }: StatsOverviewProps) =>
{ label: "Losses", value: overallStats.losses, Icon: XIcon },
{ label: "Cups Made", value: overallStats.total_cups_made, Icon: FireIcon },
{ label: "Cups Against", value: overallStats.total_cups_against, Icon: ShieldIcon },
{ label: "Avg Cups Per Game", value: avgCupsPerMatch > 0 ? avgCupsPerMatch : null, Icon: ChartLineUpIcon },
{ label: "Avg Cups Against", value: avgCupsAgainstPerMatch > 0 ? avgCupsAgainstPerMatch : null, Icon: ShieldCheckIcon },
{ label: "Avg Win Margin", value: avgMarginOfVictory > 0 ? avgMarginOfVictory : null, Icon: ArrowUpIcon },
{ label: "Avg Loss Margin", value: avgMarginOfLoss > 0 ? avgMarginOfLoss : null, Icon: ArrowDownIcon },
{ label: "Avg Cups Per Match", value: avgCupsPerMatch >= 0 ? avgCupsPerMatch : null, Icon: ChartLineUpIcon },
{ label: "Avg Cups Against", value: avgCupsAgainstPerMatch >= 0 ? avgCupsAgainstPerMatch : null, Icon: ShieldCheckIcon },
{ label: "Avg Win Margin", value: avgMarginOfVictory >= 0 ? avgMarginOfVictory : null, Icon: ArrowUpIcon },
{ label: "Avg Loss Margin", value: avgMarginOfLoss >= 0 ? avgMarginOfLoss : null, Icon: ArrowDownIcon },
];
return (
@@ -133,7 +133,7 @@ export const StatsSkeleton = () => {
{ label: "Losses", Icon: XIcon },
{ label: "Cups Made", Icon: FireIcon },
{ label: "Cups Against", Icon: ShieldIcon },
{ label: "Avg Cups Per Game", Icon: ChartLineUpIcon },
{ label: "Avg Cups Per Match", Icon: ChartLineUpIcon },
{ label: "Avg Cups Against", Icon: ShieldCheckIcon },
{ label: "Avg Win Margin", Icon: ArrowUpIcon },
{ label: "Avg Loss Margin", Icon: ArrowDownIcon },

8
src/components/swipeable-tabs.tsx
View File

@@ -18,6 +18,7 @@ interface TabItem {
interface SwipeableTabsProps {
tabs: TabItem[];
defaultTab?: number;
mb?: string | number;
onTabChange?: (index: number, tab: TabItem) => void;
}
@@ -25,6 +26,7 @@ function SwipeableTabs({
tabs,
defaultTab = 0,
onTabChange,
mb,
}: SwipeableTabsProps) {
const router = useRouter();
const search = router.state.location.search as any;
@@ -144,7 +146,7 @@ function SwipeableTabs({
style={{
display: "flex",
paddingInline: "var(--mantine-spacing-md)",
marginBottom: "var(--mantine-spacing-md)",
marginBottom: mb !== undefined ? mb : "var(--mantine-spacing-md)",
zIndex: 100,
backgroundColor: "var(--mantine-color-body)",
}}
@@ -205,11 +207,13 @@ function SwipeableTabs({
height: carouselHeight === "auto" ? "auto" : `${carouselHeight}px`,
transition: "height 300ms ease",
touchAction: "pan-y",
width: "100%",
maxWidth: "100vw",
}}
>
{tabs.map((tab, index) => (
<Carousel.Slide key={`${tab.label}-content-${index}`}>
<Box ref={setSlideRef(index)} style={{ height: "auto" }}>
<Box ref={setSlideRef(index)} style={{ height: "auto", width: "100%", maxWidth: "100vw", overflow: "hidden" }}>
{tab.content}
</Box>
</Carousel.Slide>

4
src/features/activities/components/activities-table.tsx
View File

@@ -92,8 +92,6 @@ const ActivityListItem = memo(({ activity, onClick }: ActivityListItemProps) =>
);
});
ActivityListItem.displayName = "ActivityListItem";
interface ActivityDetailsSheetProps {
activity: Activity | null;
isOpen: boolean;
@@ -205,8 +203,6 @@ const ActivityDetailsSheet = memo(({ activity, isOpen, onClose }: ActivityDetail
);
});
ActivityDetailsSheet.displayName = "ActivityDetailsSheet";
const ActivitiesResults = ({ searchParams, page, setPage, onActivityClick }: any) => {
const { data: result } = useActivities(searchParams);
return (

19
src/features/core/components/providers.tsx
View File

@@ -1,6 +1,9 @@
import { AuthProvider } from "@/contexts/auth-context"
import { SpotifyProvider } from "@/contexts/spotify-context"
import MantineProvider from "@/lib/mantine/mantine-provider"
//import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
//import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
//import { TanStackDevtools } from '@tanstack/react-devtools'
import { Toaster } from "sonner"
const Providers = ({ children }: { children: React.ReactNode }) => {
@@ -8,6 +11,22 @@ const Providers = ({ children }: { children: React.ReactNode }) => {
<AuthProvider>
<SpotifyProvider>
<MantineProvider>
{/*<TanStackDevtools
eventBusConfig={{
debug: false,
connectToServerBus: true,
}}
plugins={[
{
name: 'TanStack Query',
render: <ReactQueryDevtoolsPanel />,
},
{
name: 'TanStack Router',
render: <TanStackRouterDevtoolsPanel />,
}
]}
/>*/}
<Toaster position='top-center' />
{children}
</MantineProvider>

5
src/features/core/components/pullable.tsx
View File

@@ -32,7 +32,10 @@ const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollP
if (refresh.length > 0) {
// TODO: Remove this after testing - or does the delay help ux?
await new Promise(resolve => setTimeout(resolve, 1000));
await queryClient.refetchQueries({ queryKey: refresh, exact: true});
refresh.forEach(async (queryKey) => {
const keyArray = Array.isArray(queryKey) ? queryKey : [queryKey];
await queryClient.refetchQueries({ queryKey: keyArray, exact: true });
});
}
setIsRefreshing(false);
}, [refresh]);

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

@@ -1,20 +1,26 @@
import { Text, Group, Stack, Paper, Indicator, Box, Tooltip } from "@mantine/core";
import { CrownIcon } from "@phosphor-icons/react";
import { Text, Group, Stack, Paper, Indicator, Box, Tooltip, ActionIcon } from "@mantine/core";
import { CrownIcon, FootballHelmetIcon } from "@phosphor-icons/react";
import { useNavigate } from "@tanstack/react-router";
import { Match } from "../types";
import Avatar from "@/components/avatar";
import EmojiBar from "@/features/reactions/components/emoji-bar";
import { Suspense } from "react";
import { useSheet } from "@/hooks/use-sheet";
import Sheet from "@/components/sheet/sheet";
import TeamHeadToHeadSheet from "./team-head-to-head-sheet";
interface MatchCardProps {
match: Match;
hideH2H?: boolean;
}
const MatchCard = ({ match }: MatchCardProps) => {
const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
const navigate = useNavigate();
const h2hSheet = useSheet();
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();
@@ -30,15 +36,13 @@ const MatchCard = ({ match }: MatchCardProps) => {
}
};
const handleH2HClick = (e: React.MouseEvent) => {
e.stopPropagation();
h2hSheet.open();
};
return (
<Indicator
disabled={!isStarted}
size={12}
color="red"
processing
position="top-end"
offset={24}
>
<>
<Box style={{ position: "relative" }}>
<Paper
px="md"
@@ -48,15 +52,62 @@ const MatchCard = ({ match }: MatchCardProps) => {
style={{ position: "relative", zIndex: 2 }}
>
<Stack gap="sm">
<Group gap="xs">
<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>
<Group gap="xs" justify="space-between">
<Group gap="xs" style={{ flex: 1 }}>
{isStarted && (
<Indicator
size={8}
color="red"
processing
position="middle-start"
offset={0}
/>
)}
<Text size="xs" fw={600} lineClamp={1} c="dimmed">
{match.tournament.name}
</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 && !hasPrivate && (
<Tooltip label="Head to Head" withArrow position="left">
<ActionIcon
variant="subtle"
size="sm"
onClick={handleH2HClick}
aria-label="View head-to-head"
w={40}
>
<Group style={{ position: 'relative', width: 27.5, height: 16 }}>
<FootballHelmetIcon
size={14}
style={{
position: 'absolute',
left: 0,
top: 0,
transform: 'rotate(25deg)',
}}
/>
<FootballHelmetIcon
size={14}
style={{
position: 'absolute',
right: 0,
top: 0,
transform: 'scaleX(-1) rotate(25deg)',
}}
/>
</Group>
</ActionIcon>
</Tooltip>
)}
</Group>
<Group justify="space-between" align="center">
@@ -205,7 +256,16 @@ const MatchCard = ({ match }: MatchCardProps) => {
</Suspense>
</Paper>
</Box>
</Indicator>
{match.home && match.away && !hideH2H && h2hSheet.isOpen && (
<Sheet
title="Head to Head"
{...h2hSheet.props}
>
<TeamHeadToHeadSheet team1={match.home} team2={match.away} isOpen={h2hSheet.props.opened} />
</Sheet>
)}
</>
);
};

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

@@ -1,12 +1,13 @@
import { Stack } from "@mantine/core";
import { Stack, Text } from "@mantine/core";
import { Match } from "../types";
import MatchCard from "./match-card";
interface MatchListProps {
matches: Match[];
hideH2H?: boolean;
}
const MatchList = ({ matches }: MatchListProps) => {
const MatchList = ({ matches, hideH2H = false }: MatchListProps) => {
const filteredMatches = matches?.filter(match =>
match.home && match.away && !match.bye && match.status != "tbd"
).sort((a, b) => a.start_time < b.start_time ? 1 : -1) || [];
@@ -15,13 +16,20 @@ const MatchList = ({ matches }: 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}`}
>
<MatchCard match={match} />
<MatchCard match={match} hideH2H={hideH2H} />
</div>
))}
</Stack>

217
src/features/matches/components/team-head-to-head-sheet.tsx Normal file
View File

@@ -0,0 +1,217 @@
import { Stack, Text, Group, Box, Divider, Paper } from "@mantine/core";
import { TeamInfo } from "@/features/teams/types";
import { useTeamHeadToHead } from "../queries";
import { useMemo, useEffect, useState, Suspense } from "react";
import { CrownIcon } from "@phosphor-icons/react";
import MatchList from "./match-list";
import TeamHeadToHeadSkeleton from "./team-head-to-head-skeleton";
interface TeamHeadToHeadSheetProps {
team1: TeamInfo;
team2: TeamInfo;
isOpen?: boolean;
}
const TeamHeadToHeadContent = ({ team1, team2, isOpen = true }: TeamHeadToHeadSheetProps) => {
const [shouldFetch, setShouldFetch] = useState(false);
useEffect(() => {
if (isOpen && !shouldFetch) {
setShouldFetch(true);
}
}, [isOpen, shouldFetch]);
const { data: matches, isLoading } = useTeamHeadToHead(team1.id, team2.id, shouldFetch);
const stats = useMemo(() => {
if (!matches || matches.length === 0) {
return {
team1Wins: 0,
team2Wins: 0,
team1CupsFor: 0,
team2CupsFor: 0,
team1CupsAgainst: 0,
team2CupsAgainst: 0,
team1AvgMargin: 0,
team2AvgMargin: 0,
};
}
let team1Wins = 0;
let team2Wins = 0;
let team1CupsFor = 0;
let team2CupsFor = 0;
let team1CupsAgainst = 0;
let team2CupsAgainst = 0;
let team1TotalWinMargin = 0;
let team2TotalWinMargin = 0;
matches.forEach((match) => {
const isTeam1Home = match.home?.id === team1.id;
const team1Cups = isTeam1Home ? match.home_cups : match.away_cups;
const team2Cups = isTeam1Home ? match.away_cups : match.home_cups;
if (team1Cups > team2Cups) {
team1Wins++;
team1TotalWinMargin += (team1Cups - team2Cups);
} else if (team2Cups > team1Cups) {
team2Wins++;
team2TotalWinMargin += (team2Cups - team1Cups);
}
team1CupsFor += team1Cups;
team2CupsFor += team2Cups;
team1CupsAgainst += team2Cups;
team2CupsAgainst += team1Cups;
});
const team1AvgMargin = team1Wins > 0
? team1TotalWinMargin / team1Wins
: 0;
const team2AvgMargin = team2Wins > 0
? team2TotalWinMargin / team2Wins
: 0;
return {
team1Wins,
team2Wins,
team1CupsFor,
team2CupsFor,
team1CupsAgainst,
team2CupsAgainst,
team1AvgMargin,
team2AvgMargin,
};
}, [matches, team1.id]);
if (isLoading) {
return (
<Stack p="md" gap="md">
<Text size="sm" c="dimmed" ta="center">Loading...</Text>
</Stack>
);
}
if (!matches || matches.length === 0) {
return (
<Stack p="md" gap="md">
<Text size="sm" c="dimmed" ta="center">
These teams have not faced each other yet.
</Text>
</Stack>
);
}
const totalMatches = stats.team1Wins + stats.team2Wins;
const leader = stats.team1Wins > stats.team2Wins ? team1 : stats.team2Wins > stats.team1Wins ? team2 : null;
return (
<Stack gap="md">
<Paper p="md" withBorder radius="md">
<Stack gap="sm">
<Group justify="center" gap="xs">
<Text size="lg" fw={700}>{team1.name}</Text>
<Text size="sm" c="dimmed">vs</Text>
<Text size="lg" fw={700}>{team2.name}</Text>
</Group>
<Group justify="center" gap="lg">
<Stack gap={0} align="center">
<Text size="xl" fw={700}>{stats.team1Wins}</Text>
<Text size="xs" c="dimmed">{team1.name}</Text>
</Stack>
<Text size="md" c="dimmed">-</Text>
<Stack gap={0} align="center">
<Text size="xl" fw={700}>{stats.team2Wins}</Text>
<Text size="xs" c="dimmed">{team2.name}</Text>
</Stack>
</Group>
{leader && (
<Group justify="center" gap="xs">
<CrownIcon size={16} weight="fill" color="gold" />
<Text size="xs" c="dimmed">
{leader.name} leads the series
</Text>
</Group>
)}
{!leader && totalMatches > 0 && (
<Text size="xs" c="dimmed" ta="center">
Series is tied
</Text>
)}
</Stack>
</Paper>
<Stack gap={0}>
<Text size="sm" fw={600} px="md" mb="xs">Stats Comparison</Text>
<Paper withBorder>
<Stack gap={0}>
<Group justify="space-between" px="md" py="sm">
<Group gap="xs">
<Text size="sm" fw={600}>{stats.team1CupsFor}</Text>
<Text size="xs" c="dimmed">cups</Text>
</Group>
<Text size="xs" fw={500}>Total Cups</Text>
<Group gap="xs">
<Text size="xs" c="dimmed">cups</Text>
<Text size="sm" fw={600}>{stats.team2CupsFor}</Text>
</Group>
</Group>
<Divider />
<Group justify="space-between" px="md" py="sm">
<Group gap="xs">
<Text size="sm" fw={600}>
{totalMatches > 0 ? (stats.team1CupsFor / totalMatches).toFixed(1) : '0.0'}
</Text>
<Text size="xs" c="dimmed">avg</Text>
</Group>
<Text size="xs" fw={500}>Avg Cups/Match</Text>
<Group gap="xs">
<Text size="xs" c="dimmed">avg</Text>
<Text size="sm" fw={600}>
{totalMatches > 0 ? (stats.team2CupsFor / totalMatches).toFixed(1) : '0.0'}
</Text>
</Group>
</Group>
<Divider />
<Group justify="space-between" px="md" py="sm">
<Group gap="xs">
<Text size="sm" fw={600}>
{!isNaN(stats.team1AvgMargin) ? stats.team1AvgMargin.toFixed(1) : '0.0'}
</Text>
<Text size="xs" c="dimmed">margin</Text>
</Group>
<Text size="xs" fw={500}>Avg Win Margin</Text>
<Group gap="xs">
<Text size="xs" c="dimmed">margin</Text>
<Text size="sm" fw={600}>
{!isNaN(stats.team2AvgMargin) ? stats.team2AvgMargin.toFixed(1) : '0.0'}
</Text>
</Group>
</Group>
</Stack>
</Paper>
</Stack>
<Stack gap="xs">
<Text size="sm" fw={600} px="md">Match History ({totalMatches} match{totalMatches !== 1 ? 'es' : ''})</Text>
<MatchList matches={matches} hideH2H />
</Stack>
</Stack>
);
};
const TeamHeadToHeadSheet = (props: TeamHeadToHeadSheetProps) => {
return (
<Suspense fallback={<TeamHeadToHeadSkeleton />}>
<TeamHeadToHeadContent {...props} />
</Suspense>
);
};
export default TeamHeadToHeadSheet;

72
src/features/matches/components/team-head-to-head-skeleton.tsx Normal file
View File

@@ -0,0 +1,72 @@
import { Stack, Skeleton, Group, Paper, Divider } from "@mantine/core";
const TeamHeadToHeadSkeleton = () => {
return (
<Stack gap="md">
<Paper p="md" withBorder radius="md">
<Stack gap="sm">
<Group justify="center" gap="xs">
<Skeleton height={28} width={140} />
<Skeleton height={20} width={20} />
<Skeleton height={28} width={140} />
</Group>
<Group justify="center" gap="lg">
<Stack gap={0} align="center">
<Skeleton height={32} width={40} />
<Skeleton height={16} width={100} mt={4} />
</Stack>
<Skeleton height={24} width={10} />
<Stack gap={0} align="center">
<Skeleton height={32} width={40} />
<Skeleton height={16} width={100} mt={4} />
</Stack>
</Group>
<Group justify="center">
<Skeleton height={16} width={150} />
</Group>
</Stack>
</Paper>
<Stack gap={0}>
<Skeleton height={18} width={130} ml="md" mb="xs" />
<Paper withBorder>
<Stack gap={0}>
<Group justify="space-between" px="md" py="sm">
<Skeleton height={20} width={60} />
<Skeleton height={16} width={80} />
<Skeleton height={20} width={60} />
</Group>
<Divider />
<Group justify="space-between" px="md" py="sm">
<Skeleton height={20} width={60} />
<Skeleton height={16} width={100} />
<Skeleton height={20} width={60} />
</Group>
<Divider />
<Group justify="space-between" px="md" py="sm">
<Skeleton height={20} width={60} />
<Skeleton height={16} width={110} />
<Skeleton height={20} width={60} />
</Group>
</Stack>
</Paper>
</Stack>
<Stack gap="xs">
<Skeleton height={18} width={150} ml="md" />
<Stack gap="sm" p="md">
<Skeleton height={100} />
<Skeleton height={100} />
<Skeleton height={100} />
</Stack>
</Stack>
</Stack>
);
};
export default TeamHeadToHeadSkeleton;

30
src/features/matches/queries.ts Normal file
View File

@@ -0,0 +1,30 @@
import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";
import { getMatchesBetweenTeams, getMatchesBetweenPlayers } from "./server";
export const matchKeys = {
headToHeadTeams: (team1Id: string, team2Id: string) => ['matches', 'headToHead', 'teams', team1Id, team2Id] as const,
headToHeadPlayers: (player1Id: string, player2Id: string) => ['matches', 'headToHead', 'players', player1Id, player2Id] as const,
};
export const matchQueries = {
headToHeadTeams: (team1Id: string, team2Id: string) => ({
queryKey: matchKeys.headToHeadTeams(team1Id, team2Id),
queryFn: () => getMatchesBetweenTeams({ data: { team1Id, team2Id } }),
}),
headToHeadPlayers: (player1Id: string, player2Id: string) => ({
queryKey: matchKeys.headToHeadPlayers(player1Id, player2Id),
queryFn: () => getMatchesBetweenPlayers({ data: { player1Id, player2Id } }),
}),
};
export const useTeamHeadToHead = (team1Id: string, team2Id: string, enabled = true) =>
useServerSuspenseQuery({
...matchQueries.headToHeadTeams(team1Id, team2Id),
enabled,
});
export const usePlayerHeadToHead = (player1Id: string, player2Id: string, enabled = true) =>
useServerSuspenseQuery({
...matchQueries.headToHeadPlayers(player1Id, player2Id),
enabled,
});

32
src/features/matches/server.ts
View File

@@ -347,3 +347,35 @@ export const getMatchReactions = createServerFn()
return reactions as Reaction[]
})
);
const matchesBetweenPlayersSchema = z.object({
player1Id: z.string(),
player2Id: z.string(),
});
export const getMatchesBetweenPlayers = createServerFn()
.inputValidator(matchesBetweenPlayersSchema)
.middleware([superTokensFunctionMiddleware])
.handler(async ({ data: { player1Id, player2Id } }) =>
toServerResult(async () => {
logger.info("Getting matches between players", { player1Id, player2Id });
const matches = await pbAdmin.getMatchesBetweenPlayers(player1Id, player2Id);
return matches;
})
);
const matchesBetweenTeamsSchema = z.object({
team1Id: z.string(),
team2Id: z.string(),
});
export const getMatchesBetweenTeams = createServerFn()
.inputValidator(matchesBetweenTeamsSchema)
.middleware([superTokensFunctionMiddleware])
.handler(async ({ data: { team1Id, team2Id } }) =>
toServerResult(async () => {
logger.info("Getting matches between teams", { team1Id, team2Id });
const matches = await pbAdmin.getMatchesBetweenTeams(team1Id, team2Id);
return matches;
})
);

276
src/features/players/components/league-head-to-head.tsx Normal file
View File

@@ -0,0 +1,276 @@
import { Stack, Text, TextInput, Box, Paper, Group, Divider, Center, ActionIcon, Badge } from "@mantine/core";
import { useState, useMemo } from "react";
import { MagnifyingGlassIcon, XIcon, ArrowRightIcon } from "@phosphor-icons/react";
import { useAllPlayerStats } from "../queries";
import { useSheet } from "@/hooks/use-sheet";
import Sheet from "@/components/sheet/sheet";
import PlayerHeadToHeadSheet from "./player-head-to-head-sheet";
import Avatar from "@/components/avatar";
const LeagueHeadToHead = () => {
const [player1Id, setPlayer1Id] = useState<string | null>(null);
const [player2Id, setPlayer2Id] = useState<string | null>(null);
const [search, setSearch] = useState("");
const { data: allPlayerStats } = useAllPlayerStats();
const h2hSheet = useSheet();
const player1Name = useMemo(() => {
if (!player1Id || !allPlayerStats) return "";
return allPlayerStats.find((p) => p.player_id === player1Id)?.player_name || "";
}, [player1Id, allPlayerStats]);
const player2Name = useMemo(() => {
if (!player2Id || !allPlayerStats) return "";
return allPlayerStats.find((p) => p.player_id === player2Id)?.player_name || "";
}, [player2Id, allPlayerStats]);
const filteredPlayers = useMemo(() => {
if (!allPlayerStats) return [];
return allPlayerStats
.filter((stat) => {
if (player1Id && stat.player_id === player1Id) return false;
if (player2Id && stat.player_id === player2Id) return false;
return true;
})
.filter((stat) =>
stat.player_name.toLowerCase().includes(search.toLowerCase())
)
.sort((a, b) => b.matches - a.matches);
}, [allPlayerStats, player1Id, player2Id, search]);
const handlePlayerClick = (playerId: string) => {
if (!player1Id) {
setPlayer1Id(playerId);
} else if (!player2Id) {
setPlayer2Id(playerId);
h2hSheet.open();
}
};
const handleClearPlayer1 = () => {
setPlayer1Id(null);
if (player2Id) {
setPlayer1Id(player2Id);
setPlayer2Id(null);
}
};
const handleClearPlayer2 = () => {
setPlayer2Id(null);
};
const activeStep = !player1Id ? 1 : !player2Id ? 2 : 0;
return (
<>
<Stack gap="md">
<Paper px="md" pt="md" pb="sm" withBorder shadow="sm">
<Stack gap="xs">
<Group gap="xs" wrap="nowrap">
<Paper
p="sm"
withBorder
style={{
flex: 1,
minHeight: 70,
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
borderWidth: 2,
borderColor: activeStep === 1 ? "var(--mantine-primary-color-filled)" : undefined,
backgroundColor: player1Id && activeStep !== 1 ? "var(--mantine-color-default-hover)" : undefined,
cursor: player1Id && activeStep === 0 ? "pointer" : undefined,
transition: "all 150ms ease",
}}
onClick={player1Id && activeStep === 0 ? handleClearPlayer1 : undefined}
>
{player1Id ? (
<>
<Stack gap={4} align="center" style={{ flex: 1 }}>
<Avatar name={player1Name} size={36} />
<Text size="xs" fw={600} ta="center" lineClamp={1}>
{player1Name}
</Text>
</Stack>
<ActionIcon
variant="light"
color="gray"
size="xs"
radius="xl"
onClick={(e) => {
e.stopPropagation();
handleClearPlayer1();
}}
style={{ position: "absolute", top: 4, right: 4 }}
>
<XIcon size={10} />
</ActionIcon>
</>
) : (
<Stack gap={4} align="center">
<Avatar size={36} />
<Text size="xs" c="dimmed" fw={500}>
Player 1
</Text>
</Stack>
)}
</Paper>
<Center>
<Text size="xl" fw={700} c="dimmed">
VS
</Text>
</Center>
<Paper
p="sm"
withBorder
style={{
flex: 1,
minHeight: 70,
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "relative",
borderWidth: 2,
borderColor: activeStep === 2 ? "var(--mantine-primary-color-filled)" : undefined,
backgroundColor: player2Id && activeStep !== 2 ? "var(--mantine-color-default-hover)" : undefined,
cursor: player2Id && activeStep === 0 ? "pointer" : undefined,
transition: "all 150ms ease",
}}
onClick={player2Id && activeStep === 0 ? handleClearPlayer2 : undefined}
>
{player2Id ? (
<>
<Stack gap={4} align="center" style={{ flex: 1 }}>
<Avatar name={player2Name} size={36} />
<Text size="xs" fw={600} ta="center" lineClamp={1}>
{player2Name}
</Text>
</Stack>
<ActionIcon
variant="light"
color="gray"
size="xs"
radius="xl"
onClick={(e) => {
e.stopPropagation();
handleClearPlayer2();
}}
style={{ position: "absolute", top: 4, right: 4 }}
>
<XIcon size={10} />
</ActionIcon>
</>
) : (
<Stack gap={4} align="center">
<Avatar size={36} />
<Text size="xs" c="dimmed" fw={500}>
Player 2
</Text>
</Stack>
)}
</Paper>
</Group>
{activeStep > 0 ? (
<Badge
variant="light"
size="sm"
radius="sm"
fullWidth
styles={{ label: { textTransform: "none" } }}
>
{activeStep === 1 && "Select first player"}
{activeStep === 2 && "Select second player"}
</Badge>
) : (
<Group justify="center">
<Text
size="xs"
c="dimmed"
style={{ cursor: "pointer" }}
onClick={() => {
setPlayer1Id(null);
setPlayer2Id(null);
}}
td="underline"
>
Clear both players
</Text>
</Group>
)}
</Stack>
</Paper>
<TextInput
placeholder="Search players"
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
leftSection={<MagnifyingGlassIcon size={16} />}
size="md"
px="md"
/>
<Box px="md" pb="md">
<Paper withBorder>
{filteredPlayers.length === 0 && (
<Text size="sm" c="dimmed" ta="center" py="xl">
{search ? `No players found matching "${search}"` : "No players available"}
</Text>
)}
{filteredPlayers.map((player, index) => (
<Box key={player.player_id}>
<Group
p="md"
gap="sm"
wrap="nowrap"
style={{
cursor: "pointer",
transition: "background-color 150ms ease",
}}
onClick={() => handlePlayerClick(player.player_id)}
styles={{
root: {
"&:hover": {
backgroundColor: "var(--mantine-color-default-hover)",
},
},
}}
>
<Avatar name={player.player_name} size={44} />
<Box style={{ flex: 1, minWidth: 0 }}>
<Text size="sm" fw={600} truncate>
{player.player_name}
</Text>
</Box>
<ActionIcon variant="subtle" color="gray" size="lg" radius="xl">
<ArrowRightIcon size={18} />
</ActionIcon>
</Group>
{index < filteredPlayers.length - 1 && <Divider />}
</Box>
))}
</Paper>
</Box>
</Stack>
{player1Id && player2Id && (
<Sheet title="Head to Head" {...h2hSheet.props}>
<PlayerHeadToHeadSheet
player1Id={player1Id}
player1Name={player1Name}
player2Id={player2Id}
player2Name={player2Name}
isOpen={h2hSheet.props.opened}
/>
</Sheet>
)}
</>
);
};
export default LeagueHeadToHead;

279
src/features/players/components/player-head-to-head-sheet.tsx Normal file
View File

@@ -0,0 +1,279 @@
import { Stack, Text, Group, Box, Divider, Paper } from "@mantine/core";
import { usePlayerHeadToHead } from "@/features/matches/queries";
import { useMemo, useEffect, useState, Suspense } from "react";
import { CrownIcon } from "@phosphor-icons/react";
import MatchList from "@/features/matches/components/match-list";
import PlayerHeadToHeadSkeleton from "./player-head-to-head-skeleton";
interface PlayerHeadToHeadSheetProps {
player1Id: string;
player1Name: string;
player2Id: string;
player2Name: string;
isOpen?: boolean;
}
const PlayerHeadToHeadContent = ({
player1Id,
player1Name,
player2Id,
player2Name,
isOpen = true,
}: PlayerHeadToHeadSheetProps) => {
const [shouldFetch, setShouldFetch] = useState(false);
useEffect(() => {
if (isOpen && !shouldFetch) {
setShouldFetch(true);
}
}, [isOpen, shouldFetch]);
const { data: matches, isLoading } = usePlayerHeadToHead(player1Id, player2Id, shouldFetch);
const stats = useMemo(() => {
if (!matches || matches.length === 0) {
return {
player1Wins: 0,
player2Wins: 0,
player1CupsFor: 0,
player2CupsFor: 0,
player1CupsAgainst: 0,
player2CupsAgainst: 0,
player1AvgMargin: 0,
player2AvgMargin: 0,
};
}
let player1Wins = 0;
let player2Wins = 0;
let player1CupsFor = 0;
let player2CupsFor = 0;
let player1CupsAgainst = 0;
let player2CupsAgainst = 0;
let player1TotalWinMargin = 0;
let player2TotalWinMargin = 0;
matches.forEach((match) => {
const isPlayer1Home = match.home?.players?.some((p) => p.id === player1Id);
const player1Cups = isPlayer1Home ? match.home_cups : match.away_cups;
const player2Cups = isPlayer1Home ? match.away_cups : match.home_cups;
if (player1Cups > player2Cups) {
player1Wins++;
player1TotalWinMargin += (player1Cups - player2Cups);
} else if (player2Cups > player1Cups) {
player2Wins++;
player2TotalWinMargin += (player2Cups - player1Cups);
}
player1CupsFor += player1Cups;
player2CupsFor += player2Cups;
player1CupsAgainst += player2Cups;
player2CupsAgainst += player1Cups;
});
const player1AvgMargin =
player1Wins > 0 ? player1TotalWinMargin / player1Wins : 0;
const player2AvgMargin =
player2Wins > 0 ? player2TotalWinMargin / player2Wins : 0;
return {
player1Wins,
player2Wins,
player1CupsFor,
player2CupsFor,
player1CupsAgainst,
player2CupsAgainst,
player1AvgMargin,
player2AvgMargin,
};
}, [matches, player1Id]);
if (isLoading) {
return (
<Stack p="md" gap="md">
<Text size="sm" c="dimmed" ta="center">
Loading...
</Text>
</Stack>
);
}
if (!matches || matches.length === 0) {
return (
<Stack p="md" gap="md">
<Text size="sm" c="dimmed" ta="center">
These players have not faced each other yet.
</Text>
</Stack>
);
}
const totalMatches = stats.player1Wins + stats.player2Wins;
const leader =
stats.player1Wins > stats.player2Wins
? player1Name
: stats.player2Wins > stats.player1Wins
? player2Name
: null;
return (
<Stack gap="md">
<Paper p="md" withBorder radius="md">
<Stack gap="sm">
<Group justify="center" gap="xs">
<Text size="lg" fw={700}>
{player1Name}
</Text>
<Text size="sm" c="dimmed">
vs
</Text>
<Text size="lg" fw={700}>
{player2Name}
</Text>
</Group>
<Group justify="center" gap="lg">
<Stack gap={0} align="center">
<Text size="xl" fw={700}>
{stats.player1Wins}
</Text>
<Text size="xs" c="dimmed">
{player1Name}
</Text>
</Stack>
<Text size="md" c="dimmed">
-
</Text>
<Stack gap={0} align="center">
<Text size="xl" fw={700}>
{stats.player2Wins}
</Text>
<Text size="xs" c="dimmed">
{player2Name}
</Text>
</Stack>
</Group>
{leader && (
<Group justify="center" gap="xs">
<CrownIcon size={16} weight="fill" color="gold" />
<Text size="xs" c="dimmed">
{leader} leads the series
</Text>
</Group>
)}
{!leader && totalMatches > 0 && (
<Text size="xs" c="dimmed" ta="center">
Series is tied
</Text>
)}
</Stack>
</Paper>
<Stack gap={0}>
<Text size="sm" fw={600} px="md" mb="xs">
Stats Comparison
</Text>
<Paper withBorder>
<Stack gap={0}>
<Group justify="space-between" px="md" py="sm">
<Group gap="xs">
<Text size="sm" fw={600}>
{stats.player1CupsFor}
</Text>
<Text size="xs" c="dimmed">
cups
</Text>
</Group>
<Text size="xs" fw={500}>
Total Cups
</Text>
<Group gap="xs">
<Text size="xs" c="dimmed">
cups
</Text>
<Text size="sm" fw={600}>
{stats.player2CupsFor}
</Text>
</Group>
</Group>
<Divider />
<Group justify="space-between" px="md" py="sm">
<Group gap="xs">
<Text size="sm" fw={600}>
{totalMatches > 0
? (stats.player1CupsFor / totalMatches).toFixed(1)
: "0.0"}
</Text>
<Text size="xs" c="dimmed">
avg
</Text>
</Group>
<Text size="xs" fw={500}>
Avg Cups/Match
</Text>
<Group gap="xs">
<Text size="xs" c="dimmed">
avg
</Text>
<Text size="sm" fw={600}>
{totalMatches > 0
? (stats.player2CupsFor / totalMatches).toFixed(1)
: "0.0"}
</Text>
</Group>
</Group>
<Divider />
<Group justify="space-between" px="md" py="sm">
<Group gap="xs">
<Text size="sm" fw={600}>
{!isNaN(stats.player1AvgMargin)
? stats.player1AvgMargin.toFixed(1)
: "0.0"}
</Text>
<Text size="xs" c="dimmed">
margin
</Text>
</Group>
<Text size="xs" fw={500}>
Avg Win Margin
</Text>
<Group gap="xs">
<Text size="xs" c="dimmed">
margin
</Text>
<Text size="sm" fw={600}>
{!isNaN(stats.player2AvgMargin)
? stats.player2AvgMargin.toFixed(1)
: "0.0"}
</Text>
</Group>
</Group>
</Stack>
</Paper>
</Stack>
<Stack gap="xs">
<Text size="sm" fw={600} px="md">
Match History ({totalMatches})
</Text>
<MatchList matches={matches} hideH2H />
</Stack>
</Stack>
);
};
const PlayerHeadToHeadSheet = (props: PlayerHeadToHeadSheetProps) => {
return (
<Suspense fallback={<PlayerHeadToHeadSkeleton />}>
<PlayerHeadToHeadContent {...props} />
</Suspense>
);
};
export default PlayerHeadToHeadSheet;

72
src/features/players/components/player-head-to-head-skeleton.tsx Normal file
View File

@@ -0,0 +1,72 @@
import { Stack, Skeleton, Group, Paper, Divider } from "@mantine/core";
const PlayerHeadToHeadSkeleton = () => {
return (
<Stack gap="md">
<Paper p="md" withBorder radius="md">
<Stack gap="sm">
<Group justify="center" gap="xs">
<Skeleton height={28} width={120} />
<Skeleton height={20} width={20} />
<Skeleton height={28} width={120} />
</Group>
<Group justify="center" gap="lg">
<Stack gap={0} align="center">
<Skeleton height={32} width={40} />
<Skeleton height={16} width={80} mt={4} />
</Stack>
<Skeleton height={24} width={10} />
<Stack gap={0} align="center">
<Skeleton height={32} width={40} />
<Skeleton height={16} width={80} mt={4} />
</Stack>
</Group>
<Group justify="center">
<Skeleton height={16} width={150} />
</Group>
</Stack>
</Paper>
<Stack gap={0}>
<Skeleton height={18} width={130} ml="md" mb="xs" />
<Paper withBorder>
<Stack gap={0}>
<Group justify="space-between" px="md" py="sm">
<Skeleton height={20} width={60} />
<Skeleton height={16} width={80} />
<Skeleton height={20} width={60} />
</Group>
<Divider />
<Group justify="space-between" px="md" py="sm">
<Skeleton height={20} width={60} />
<Skeleton height={16} width={100} />
<Skeleton height={20} width={60} />
</Group>
<Divider />
<Group justify="space-between" px="md" py="sm">
<Skeleton height={20} width={60} />
<Skeleton height={16} width={110} />
<Skeleton height={20} width={60} />
</Group>
</Stack>
</Paper>
</Stack>
<Stack gap="xs">
<Skeleton height={18} width={130} ml="md" />
<Stack gap="sm" p="md">
<Skeleton height={100} />
<Skeleton height={100} />
<Skeleton height={100} />
</Stack>
</Stack>
</Stack>
);
};
export default PlayerHeadToHeadSkeleton;

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

@@ -5,68 +5,86 @@ import {
Container,
Divider,
Skeleton,
ScrollArea,
} from "@mantine/core";
const PlayerListItemSkeleton = () => {
return (
<Box p="md">
<Group justify="space-between" align="center" w="100%">
<Group gap="sm" align="center">
<Skeleton height={45} circle />
<Stack gap={2}>
<Group gap='xs'>
<Skeleton height={16} width={120} />
<Skeleton height={12} width={60} />
<Skeleton height={12} width={80} />
</Group>
<Group gap="md" ta="center">
<Stack gap={0}>
<Group gap="sm" align="center" w="100%" wrap="nowrap" style={{ overflow: 'hidden' }}>
<Skeleton height={40} width={40} circle style={{ flexShrink: 0 }} />
<Stack gap={2} style={{ flexGrow: 1, overflow: 'hidden', minWidth: 0 }}>
<Group gap='xs'>
<Skeleton height={16} width={120} />
<Skeleton height={12} width={30} />
<Skeleton height={12} width={30} />
</Group>
<ScrollArea type="never">
<Group gap='xs' wrap="nowrap">
<Stack gap={0} style={{ flexShrink: 0 }}>
<Skeleton height={10} width={25} />
<Skeleton height={10} width={30} />
</Stack>
<Stack gap={0}>
<Stack gap={0} style={{ flexShrink: 0 }}>
<Skeleton height={10} width={10} />
<Skeleton height={10} width={15} />
</Stack>
<Stack gap={0}>
<Stack gap={0} style={{ flexShrink: 0 }}>
<Skeleton height={10} width={10} />
<Skeleton height={10} width={15} />
</Stack>
<Stack gap={0}>
<Stack gap={0} style={{ flexShrink: 0 }}>
<Skeleton height={10} width={20} />
<Skeleton height={10} width={25} />
</Stack>
<Stack gap={0}>
<Stack gap={0} style={{ flexShrink: 0 }}>
<Skeleton height={10} width={25} />
<Skeleton height={10} width={20} />
</Stack>
<Stack gap={0}>
<Stack gap={0} style={{ flexShrink: 0 }}>
<Skeleton height={10} width={25} />
<Skeleton height={10} width={20} />
</Stack>
<Stack gap={0} style={{ flexShrink: 0 }}>
<Skeleton height={10} width={30} />
<Skeleton height={10} width={25} />
</Stack>
<Stack gap={0} style={{ flexShrink: 0 }}>
<Skeleton height={10} width={30} />
<Skeleton height={10} width={25} />
</Stack>
<Stack gap={0} style={{ flexShrink: 0 }}>
<Skeleton height={10} width={15} />
<Skeleton height={10} width={25} />
</Stack>
<Stack gap={0}>
<Stack gap={0} style={{ flexShrink: 0 }}>
<Skeleton height={10} width={15} />
<Skeleton height={10} width={25} />
</Stack>
</Group>
</Stack>
</Group>
</ScrollArea>
</Stack>
</Group>
</Box>
);
};
const PlayerStatsTableSkeleton = () => {
interface PlayerStatsTableSkeletonProps {
hideFilters?: boolean;
}
const PlayerStatsTableSkeleton = ({ hideFilters = false }: PlayerStatsTableSkeletonProps) => {
return (
<Container size="100%" px={0}>
<Stack gap="xs">
<Box px="md" pb="xs">
<Skeleton mx="md" height={12} width={100} />
<Box px="md" pb={4}>
<Skeleton height={40} />
</Box>
<Group px="md" justify="space-between" align="center">
<Skeleton height={12} width={100} />
<Group gap="xs">
<Group justify="space-between" align="center" w='100%'>
<Group ml="auto" gap="xs">
<Skeleton height={12} width={200} />
</Group>
</Group>

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

@@ -1,4 +1,4 @@
import { useState, useMemo, useCallback, memo } from "react";
import { useState, useMemo, useCallback, memo, useRef, useEffect } from "react";
import {
Text,
TextInput,
@@ -12,6 +12,7 @@ import {
UnstyledButton,
Popover,
ActionIcon,
ScrollArea,
} from "@mantine/core";
import {
MagnifyingGlassIcon,
@@ -37,9 +38,41 @@ interface PlayerListItemProps {
stat: PlayerStats;
onPlayerClick: (playerId: string) => void;
mmr: number;
onRegisterViewport: (viewport: HTMLDivElement) => void;
onUnregisterViewport: (viewport: HTMLDivElement) => void;
}
const PlayerListItem = memo(({ stat, onPlayerClick, mmr }: PlayerListItemProps) => {
interface StatCellProps {
label: string;
value: string | number;
}
const StatCell = memo(({ label, value }: StatCellProps) => (
<Stack justify="center" gap={0} style={{ textAlign: 'center', flexShrink: 0 }}>
<Text size="xs" c="dimmed" fw={700}>
{label}
</Text>
<Text size="xs" c="dimmed">
{value}
</Text>
</Stack>
));
const PlayerListItem = memo(({ stat, onPlayerClick, mmr, onRegisterViewport, onUnregisterViewport }: PlayerListItemProps) => {
const viewportRef = useRef<HTMLDivElement>(null);
const avg_cups_against = useMemo(() => stat.total_cups_against / stat.matches || 0, [stat.total_cups_against, stat.matches]);
useEffect(() => {
if (viewportRef.current) {
onRegisterViewport(viewportRef.current);
return () => {
if (viewportRef.current) {
onUnregisterViewport(viewportRef.current);
}
};
}
}, [onRegisterViewport, onUnregisterViewport]);
return (
<>
@@ -59,92 +92,62 @@ const PlayerListItem = memo(({ stat, onPlayerClick, mmr }: PlayerListItemProps)
},
}}
>
<Group justify="space-between" align="center" w="100%">
<Group gap="sm" align="center">
<Avatar name={stat.player_name} size={40} />
<Stack gap={2}>
<Group gap='xs'>
<Text size="sm" fw={600}>
{stat.player_name}
</Text>
<Text size="xs" c="dimmed" ta="right">
{stat.matches} matches
</Text>
<Text size="xs" c="dimmed" ta="right">
{stat.tournaments} tournaments
</Text>
<Group p={0} gap="sm" align="center" w="100%" wrap="nowrap" style={{ overflow: 'hidden' }}>
<Avatar name={stat.player_name} size={40} style={{ flexShrink: 0 }} />
<Stack gap={2} style={{ flexGrow: 1, overflow: 'hidden', minWidth: 0 }}>
<Group gap='xs'>
<Text size="sm" fw={600}>
{stat.player_name}
</Text>
<Text size="xs" c="dimmed" ta="right">
{stat.matches}
<Text span fw={800}>M</Text>
</Text>
<Text size="xs" c="dimmed" ta="right">
{stat.tournaments}
<Text span fw={800}>T</Text>
</Text>
</Group>
<ScrollArea
viewportRef={viewportRef}
type="never"
styles={{
viewport: {
WebkitOverflowScrolling: 'touch',
scrollBehavior: 'auto',
willChange: 'scroll-position',
transform: 'translateZ(0)',
backfaceVisibility: 'hidden',
},
}}
>
<Group gap='xs' wrap="nowrap">
<StatCell label="MMR" value={mmr.toFixed(1)} />
<StatCell label="W" value={stat.wins} />
<StatCell label="L" value={stat.losses} />
<StatCell label="W%" value={`${stat.win_percentage.toFixed(1)}%`} />
<StatCell label="AWM" value={stat.margin_of_victory?.toFixed(1) || 0} />
<StatCell label="ALM" value={stat.margin_of_loss?.toFixed(1) || 0} />
<StatCell label="AC" value={stat.avg_cups_per_match.toFixed(1)} />
<StatCell label="ACA" value={avg_cups_against?.toFixed(1) || 0} />
<StatCell label="CF" value={stat.total_cups_made} />
<StatCell label="CA" value={stat.total_cups_against} />
</Group>
<Group gap="md" ta="center">
<Stack gap={0}>
<Text size="xs" c="dimmed" fw={700}>
MMR
</Text>
<Text size="xs" c="dimmed">
{mmr.toFixed(1)}
</Text>
</Stack>
<Stack gap={0}>
<Text size="xs" c="dimmed" fw={700}>
W
</Text>
<Text size="xs" c="dimmed">
{stat.wins}
</Text>
</Stack>
<Stack gap={0}>
<Text size="xs" c="dimmed" fw={700}>
L
</Text>
<Text size="xs" c="dimmed">
{stat.losses}
</Text>
</Stack>
<Stack gap={0}>
<Text size="xs" c="dimmed" fw={700}>
W%
</Text>
<Text size="xs" c="dimmed">
{stat.win_percentage.toFixed(1)}%
</Text>
</Stack>
<Stack gap={0}>
<Text size="xs" c="dimmed" fw={700}>
AVG
</Text>
<Text size="xs" c="dimmed">
{stat.avg_cups_per_match.toFixed(1)}
</Text>
</Stack>
<Stack gap={0}>
<Text size="xs" c="dimmed" fw={700}>
CF
</Text>
<Text size="xs" c="dimmed">
{stat.total_cups_made}
</Text>
</Stack>
<Stack gap={0}>
<Text size="xs" c="dimmed" fw={700}>
CA
</Text>
<Text size="xs" c="dimmed">
{stat.total_cups_against}
</Text>
</Stack>
</Group>
</Stack>
</Group>
</ScrollArea>
</Stack>
</Group>
</UnstyledButton>
</>
);
});
PlayerListItem.displayName = 'PlayerListItem';
interface PlayerStatsTableProps {
viewType?: 'all' | 'mainline' | 'regional';
}
const PlayerStatsTable = () => {
const { data: playerStats } = useAllPlayerStats();
const PlayerStatsTable = ({ viewType = 'all' }: PlayerStatsTableProps) => {
const { data: playerStats } = useAllPlayerStats(viewType);
const navigate = useNavigate();
const [search, setSearch] = useState("");
const [sortConfig, setSortConfig] = useState<SortConfig>({
@@ -152,6 +155,64 @@ const PlayerStatsTable = () => {
direction: "desc",
});
const viewportsRef = useRef<Set<HTMLDivElement>>(new Set());
const scrollHandlersRef = useRef<Map<HTMLDivElement, (e: Event) => void>>(new Map());
const scrollLeaderRef = useRef<HTMLDivElement | null>(null);
const scrollTimeoutRef = useRef<number | null>(null);
const handleRegisterViewport = useCallback((viewport: HTMLDivElement) => {
viewportsRef.current.add(viewport);
const handleScrollStart = () => {
scrollLeaderRef.current = viewport;
};
const handleScroll = (e: Event) => {
const target = e.target as HTMLDivElement;
if (!scrollLeaderRef.current) {
scrollLeaderRef.current = target;
}
if (scrollLeaderRef.current !== target) {
return;
}
const scrollLeft = target.scrollLeft;
viewportsRef.current.forEach((vp) => {
if (vp !== target && Math.abs(vp.scrollLeft - scrollLeft) > 0.5) {
vp.scrollLeft = scrollLeft;
}
});
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
scrollTimeoutRef.current = window.setTimeout(() => {
scrollLeaderRef.current = null;
}, 150);
};
viewport.addEventListener('touchstart', handleScrollStart, { passive: true });
viewport.addEventListener('mousedown', handleScrollStart, { passive: true });
viewport.addEventListener('scroll', handleScroll, { passive: true });
scrollHandlersRef.current.set(viewport, handleScroll);
}, []);
const handleUnregisterViewport = useCallback((viewport: HTMLDivElement) => {
viewportsRef.current.delete(viewport);
const handler = scrollHandlersRef.current.get(viewport);
if (handler) {
viewport.removeEventListener('scroll', handler);
viewport.removeEventListener('touchstart', handler);
viewport.removeEventListener('mousedown', handler);
scrollHandlersRef.current.delete(viewport);
}
}, []);
const calculateMMR = (stat: PlayerStats): number => {
if (stat.matches === 0) return 0;
@@ -235,22 +296,23 @@ 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}>
<Stack gap="xs">
<Text px="md" size="10px" lh={0} c="dimmed">
Showing {filteredAndSortedStats.length} of {playerStats.length} players
</Text>
<TextInput
placeholder="Search players"
value={search}
@@ -261,11 +323,9 @@ const PlayerStatsTable = () => {
/>
<Group px="md" justify="space-between" align="center">
<Text size="10px" lh={0} c="dimmed">
{filteredAndSortedStats.length} of {playerStats.length} players
</Text>
<Group gap="xs">
<Text size="xs" c="dimmed">Sort:</Text>
<Group gap="xs" w="100%">
<div></div>
<Text ml='auto' size="xs" c="dimmed">Sort:</Text>
<UnstyledButton
onClick={() => handleSort("mmr")}
style={{ display: "flex", alignItems: "center", gap: 4 }}
@@ -303,6 +363,48 @@ const PlayerStatsTable = () => {
</Popover.Target>
<Popover.Dropdown>
<Box maw={280}>
<Text size="sm" fw={500} mb="xs">
Stat Abbreviations:
</Text>
<Text size="xs" mb={2}>
• <strong>M:</strong> Matches
</Text>
<Text size="xs" mb={2}>
• <strong>T:</strong> Tournaments
</Text>
<Text size="xs" mb={2}>
• <strong>MMR:</strong> Matchmaking Rating
</Text>
<Text size="xs" mb={2}>
• <strong>W:</strong> Wins
</Text>
<Text size="xs" mb={2}>
• <strong>L:</strong> Losses
</Text>
<Text size="xs" mb={2}>
• <strong>W%:</strong> Win Percentage
</Text>
<Text size="xs" mb={2}>
• <strong>AWM:</strong> Average Win Margin
</Text>
<Text size="xs" mb={2}>
• <strong>ALM:</strong> Average Loss Margin
</Text>
<Text size="xs" mb={2}>
• <strong>AC:</strong> Average Cups Per Match
</Text>
<Text size="xs" mb={2}>
• <strong>ACA:</strong> Average Cups Against
</Text>
<Text size="xs" mb={2}>
• <strong>CF:</strong> Cups For
</Text>
<Text size="xs" mb={2}>
• <strong>CA:</strong> Cups Against
</Text>
<Divider my="sm" />
<Text size="sm" fw={500} mb="xs">
MMR Calculation:
</Text>
@@ -337,6 +439,8 @@ const PlayerStatsTable = () => {
stat={stat}
onPlayerClick={handlePlayerClick}
mmr={stat.mmr}
onRegisterViewport={handleRegisterViewport}
onUnregisterViewport={handleUnregisterViewport}
/>
{index < filteredAndSortedStats.length - 1 && <Divider />}
</Box>

118
src/features/players/components/players-activity-table.tsx Normal file
View File

@@ -0,0 +1,118 @@
import { memo } from "react";
import {
Text,
Stack,
Group,
Box,
Container,
Divider,
UnstyledButton,
} from "@mantine/core";
import { Player } from "../types";
import { usePlayersActivity } from "../queries";
interface PlayerActivityItemProps {
player: Player;
}
const PlayerActivityItem = memo(({ player }: PlayerActivityItemProps) => {
const playerName = player.first_name && player.last_name
? `${player.first_name} ${player.last_name}`
: player.first_name || player.last_name || "Unknown Player";
const formatDate = (dateStr?: string) => {
if (!dateStr) return "Never";
const date = new Date(dateStr);
return date.toLocaleString();
};
const getTimeSince = (dateStr?: string) => {
if (!dateStr) return "Never active";
const date = new Date(dateStr);
const now = new Date();
const diffMs = now.getTime() - date.getTime();
const diffMins = Math.floor(diffMs / 60000);
const diffHours = Math.floor(diffMins / 60);
const diffDays = Math.floor(diffHours / 24);
if (diffMins < 1) return "Just now";
if (diffMins < 60) return `${diffMins}m ago`;
if (diffHours < 24) return `${diffHours}h ago`;
if (diffDays < 30) return `${diffDays}d ago`;
return formatDate(dateStr);
};
const isActive = player.last_activity &&
(new Date().getTime() - new Date(player.last_activity).getTime()) < 5 * 60 * 1000;
return (
<Box
w="100%"
p="md"
style={{
borderRadius: 0,
}}
>
<Group justify="space-between" align="flex-start" w="100%">
<Stack gap={4} flex={1}>
<Group gap="xs">
<Text size="sm" fw={600}>
{playerName}
</Text>
{isActive && (
<Box
w={8}
h={8}
style={{
borderRadius: "50%",
backgroundColor: "var(--mantine-color-green-6)",
}}
/>
)}
</Group>
<Group gap="md">
<Text size="xs" c="dimmed">
{getTimeSince(player.last_activity)}
</Text>
{player.last_activity && (
<Text size="xs" c="dimmed">
{formatDate(player.last_activity)}
</Text>
)}
</Group>
</Stack>
</Group>
</Box>
);
});
export const PlayersActivityTable = () => {
const { data: players } = usePlayersActivity();
return (
<Container size="100%" px={0}>
<Stack gap="xs">
<Group px="md" justify="space-between" align="center">
<Text size="10px" lh={0} c="dimmed">
{players.length} players
</Text>
</Group>
<Stack gap={0}>
{players.map((player: Player, index: number) => (
<Box key={player.id}>
<PlayerActivityItem player={player} />
{index < players.length - 1 && <Divider />}
</Box>
))}
</Stack>
{players.length === 0 && (
<Text ta="center" c="dimmed" py="xl">
No player activity found
</Text>
)}
</Stack>
</Container>
);
};

75
src/features/players/components/profile/header.tsx
View File

@@ -1,23 +1,29 @@
import Sheet from "@/components/sheet/sheet";
import { useAuth } from "@/contexts/auth-context";
import { Flex, Title, ActionIcon } from "@mantine/core";
import { PencilIcon } from "@phosphor-icons/react";
import { Flex, Title, ActionIcon, Stack, Button, Box } from "@mantine/core";
import { PencilIcon, FootballHelmetIcon } from "@phosphor-icons/react";
import { useMemo } from "react";
import NameUpdateForm from "./name-form";
import Avatar from "@/components/avatar";
import { useSheet } from "@/hooks/use-sheet";
import { Player } from "../../types";
import PlayerHeadToHeadSheet from "../player-head-to-head-sheet";
interface HeaderProps {
player: Player;
}
const Header = ({ player }: HeaderProps) => {
const sheet = useSheet();
const nameSheet = useSheet();
const h2hSheet = useSheet();
const { user: authUser } = useAuth();
const owner = useMemo(() => authUser?.id === player.id, [authUser?.id, player.id]);
const name = useMemo(() => `${player.first_name} ${player.last_name}`, [player.first_name, player.last_name]);
const authUserName = useMemo(() => {
if (!authUser) return "";
return `${authUser.first_name} ${authUser.last_name}`;
}, [authUser]);
const fontSize = useMemo(() => {
const baseSize = 28;
@@ -33,19 +39,62 @@ const Header = ({ player }: HeaderProps) => {
return (
<>
<Flex h="15dvh" px='xl' w='100%' align='self-end' gap='md'>
<Avatar name={name} size={100} />
<Flex align='center' justify='center' gap={4} pb={20} w='100%'>
<Title ta='center' style={{ fontSize, lineHeight: 1.2 }}>{name}</Title>
<ActionIcon display={owner ? 'block' : 'none'} radius='xl' variant='subtle' onClick={sheet.open}>
<PencilIcon size={20} />
</ActionIcon>
<Stack gap="sm" align="center" pt="md">
<Flex h="15dvh" px='xl' w='100%' align='self-end' gap='md'>
<Avatar name={name} size={100} />
<Flex align='center' justify='center' gap={4} pb={20} w='100%'>
<Title ta='center' style={{ fontSize, lineHeight: 1.2 }}>{name}</Title>
<ActionIcon display={owner ? 'block' : 'none'} radius='xl' variant='subtle' onClick={nameSheet.open}>
<PencilIcon size={20} />
</ActionIcon>
<ActionIcon
variant="subtle"
size="sm"
radius="xl"
onClick={h2hSheet.open}
w={40}
display={!owner ? 'block' : 'none'}
>
<Box style={{ position: 'relative', width: 27.5, height: 16 }}>
<FootballHelmetIcon
size={14}
style={{
position: 'absolute',
left: 0,
top: 0,
transform: 'rotate(25deg)'
}}
/>
<FootballHelmetIcon
size={14}
style={{
position: 'absolute',
right: 0,
top: 0,
transform: 'scaleX(-1) rotate(25deg)'
}}
/>
</Box>
</ActionIcon>
</Flex>
</Flex>
</Flex>
</Stack>
<Sheet title='Update Name' {...sheet.props}>
<NameUpdateForm player={player} toggle={sheet.toggle} />
<Sheet title='Update Name' {...nameSheet.props}>
<NameUpdateForm player={player} toggle={nameSheet.toggle} />
</Sheet>
{!owner && authUser && (
<Sheet title="Head to Head" {...h2hSheet.props}>
<PlayerHeadToHeadSheet
player1Id={authUser.id}
player1Name={authUserName}
player2Id={player.id}
player2Name={name}
isOpen={h2hSheet.props.opened}
/>
</Sheet>
)}
</>
)
};

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} />
</>,
},
{

4
src/features/players/index.ts
View File

@@ -1,3 +1,5 @@
import { Logger } from "@/lib/logger";
export const logger = new Logger('Players');
export const logger = new Logger('Players');
export * from "./queries";
export { PlayersActivityTable } from "./components/players-activity-table";

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

@@ -1,5 +1,5 @@
import { useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";
import { listPlayers, getPlayer, getUnassociatedPlayers, fetchMe, getPlayerStats, getAllPlayerStats, getPlayerMatches, getUnenrolledPlayers } from "./server";
import { listPlayers, getPlayer, getUnassociatedPlayers, fetchMe, getPlayerStats, getAllPlayerStats, getPlayerMatches, getUnenrolledPlayers, getPlayersActivity } from "./server";
export const playerKeys = {
auth: ['auth'],
@@ -7,9 +7,10 @@ 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'],
};
export const playerQueries = {
@@ -33,18 +34,22 @@ 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),
queryFn: async () => await getPlayerMatches({ data: id })
}),
activity: () => ({
queryKey: playerKeys.activity,
queryFn: async () => await getPlayersActivity()
}),
};
export const useMe = () => {
@@ -79,14 +84,17 @@ 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));
export const useUnenrolledPlayers = (tournamentId: string) =>
useServerSuspenseQuery(playerQueries.unenrolled(tournamentId));
useServerSuspenseQuery(playerQueries.unenrolled(tournamentId));
export const usePlayersActivity = () =>
useServerSuspenseQuery(playerQueries.activity());

18
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()
@@ -161,3 +165,9 @@ export const getUnenrolledPlayers = createServerFn()
.handler(async ({ data: tournamentId }) =>
toServerResult(async () => await pbAdmin.getUnenrolledPlayers(tournamentId))
);
export const getPlayersActivity = createServerFn()
.middleware([superTokensFunctionMiddleware])
.handler(async () =>
toServerResult<Player[]>(async () => await pbAdmin.getPlayersActivity())
);

5
src/features/players/types.ts
View File

@@ -14,6 +14,7 @@ export interface Player {
last_name?: string;
created?: string;
updated?: string;
last_activity?: string;
teams?: TeamInfo[];
}
@@ -23,7 +24,9 @@ export const playerInputSchema = z.object({
last_name: z.string().min(2).max(20).regex(/^[a-zA-Z0-9\s]+$/, "Last name must be 2-20 characters long and contain only letters and spaces"),
});
export const playerUpdateSchema = playerInputSchema.partial();
export const playerUpdateSchema = playerInputSchema.extend({
last_activity: z.string().optional(),
}).partial();
export type PlayerInput = z.infer<typeof playerInputSchema>;
export type PlayerUpdateInput = z.infer<typeof playerUpdateSchema>;

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

@@ -22,12 +22,21 @@ const TeamListItem = React.memo(({ team }: TeamListItemProps) => {
[team.players]
);
const teamNameSize = useMemo(() => {
const nameLength = team.name.length;
if (nameLength > 20) return 'xs';
if (nameLength > 15) return 'sm';
return 'md';
}, [team.name]);
return (
<Group justify="space-between" w="100%">
<Text fw={500}>{`${team.name}`}</Text>
<Stack ml="auto" gap={0}>
{playerNames.map((name) => (
<Text size="xs" c="dimmed" ta="right">
<Group justify="space-between" w="100%" wrap="nowrap">
<Text fw={500} size={teamNameSize} style={{ flexShrink: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{`${team.name}`}
</Text>
<Stack ml="auto" gap={0} style={{ flexShrink: 0 }}>
{playerNames.map((name, idx) => (
<Text key={idx} size="xs" c="dimmed" ta="right">
{name}
</Text>
))}
@@ -46,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}` });
}
},
@@ -91,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/components/upcoming-tournament/enroll-team/team-selection-view.tsx
View File

@@ -79,6 +79,4 @@ const TeamSelectionView: React.FC<TeamSelectionViewProps> = React.memo(({
);
});
TeamSelectionView.displayName = 'TeamSelectionView';
export default TeamSelectionView;

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({

22
src/lib/pocketbase/services/badges.ts
View File

@@ -99,7 +99,7 @@ export function createBadgesService(pb: PocketBase) {
async calculateMatchBadgeProgress(playerId: string, badge: Badge): Promise<number> {
const criteria = badge.criteria;
const stats = await pb.collection("player_stats").getFirstListItem<PlayerStats>(
const stats = await pb.collection("player_mainline_stats").getFirstListItem<PlayerStats>(
`player_id = "${playerId}"`
).catch(() => null);
@@ -111,8 +111,8 @@ export function createBadgesService(pb: PocketBase) {
if (criteria.overtime_matches !== undefined || criteria.overtime_wins !== undefined) {
const matches = await pb.collection("matches").getFullList({
filter: `(home.players.id ?~ "${playerId}" || away.players.id ?~ "${playerId}") && status = "ended" && ot_count > 0`,
expand: 'home,away,home.players,away.players',
filter: `(home.players.id ?~ "${playerId}" || away.players.id ?~ "${playerId}") && status = "ended" && ot_count > 0 && (tournament.regional = false || tournament.regional = null)`,
expand: 'tournament,home,away,home.players,away.players',
});
if (criteria.overtime_matches !== undefined) {
@@ -139,8 +139,8 @@ export function createBadgesService(pb: PocketBase) {
if (criteria.margin_of_victory !== undefined) {
const matches = await pb.collection("matches").getFullList({
filter: `(home.players.id ?~ "${playerId}" || away.players.id ?~ "${playerId}") && status = "ended"`,
expand: 'home,away,home.players,away.players',
filter: `(home.players.id ?~ "${playerId}" || away.players.id ?~ "${playerId}") && status = "ended" && (tournament.regional = false || tournament.regional = null)`,
expand: 'tournament,home,away,home.players,away.players',
});
const bigWins = matches.filter(m => {
@@ -167,7 +167,7 @@ export function createBadgesService(pb: PocketBase) {
const criteria = badge.criteria;
const matches = await pb.collection("matches").getFullList({
filter: `(home.players.id ?~ "${playerId}" || away.players.id ?~ "${playerId}") && status = "ended"`,
filter: `(home.players.id ?~ "${playerId}" || away.players.id ?~ "${playerId}") && status = "ended" && (tournament.regional = false || tournament.regional = null)`,
expand: 'tournament,home,away,home.players,away.players',
});
@@ -217,8 +217,8 @@ export function createBadgesService(pb: PocketBase) {
for (const tournamentId of tournamentIds) {
const tournamentMatches = await pb.collection("matches").getFullList({
filter: `tournament = "${tournamentId}" && status = "ended"`,
expand: 'home,away,home.players,away.players',
filter: `tournament = "${tournamentId}" && status = "ended" && (tournament.regional = false || tournament.regional = null)`,
expand: 'tournament,home,away,home.players,away.players',
});
const winnersMatches = tournamentMatches.filter(m => !m.is_losers_bracket);
@@ -249,8 +249,8 @@ export function createBadgesService(pb: PocketBase) {
for (const tournamentId of tournamentIds) {
const tournamentMatches = await pb.collection("matches").getFullList({
filter: `tournament = "${tournamentId}" && status = "ended"`,
expand: 'home,away,home.players,away.players',
filter: `tournament = "${tournamentId}" && status = "ended" && (tournament.regional = false || tournament.regional = null)`,
expand: 'tournament,home,away,home.players,away.players',
});
if (criteria.placement === 2) {
@@ -301,6 +301,7 @@ export function createBadgesService(pb: PocketBase) {
if (criteria.tournament_record !== undefined) {
const tournaments = await pb.collection("tournaments").getFullList({
filter: 'regional = false || regional = null',
sort: 'start_time',
});
@@ -352,6 +353,7 @@ export function createBadgesService(pb: PocketBase) {
if (criteria.consecutive_wins !== undefined) {
const tournaments = await pb.collection("tournaments").getFullList({
filter: 'regional = false || regional = null',
sort: 'start_time',
});

72
src/lib/pocketbase/services/matches.ts
View File

@@ -32,7 +32,7 @@ export function createMatchesService(pb: PocketBase) {
},
async createMatch(data: MatchInput): Promise<Match> {
logger.info("PocketBase | Creating match", data);
// logger.info("PocketBase | Creating match", data);
const result = await pb.collection("matches").create<Match>(data);
return result;
},
@@ -71,5 +71,75 @@ export function createMatchesService(pb: PocketBase) {
matches.map((match) => pb.collection("matches").delete(match.id))
);
},
async getMatchesBetweenPlayers(player1Id: string, player2Id: string): Promise<Match[]> {
logger.info("PocketBase | Getting matches between players", { player1Id, player2Id });
const player1Teams = await pb.collection("teams").getFullList({
filter: `players ~ "${player1Id}"`,
fields: "id",
});
const player2Teams = await pb.collection("teams").getFullList({
filter: `players ~ "${player2Id}"`,
fields: "id",
});
const player1TeamIds = player1Teams.map(t => t.id);
const player2TeamIds = player2Teams.map(t => t.id);
if (player1TeamIds.length === 0 || player2TeamIds.length === 0) {
return [];
}
const allTeamIds = [...new Set([...player1TeamIds, ...player2TeamIds])];
const batchSize = 10;
const allMatches: any[] = [];
for (let i = 0; i < allTeamIds.length; i += batchSize) {
const batch = allTeamIds.slice(i, i + batchSize);
const teamFilters = batch.map(id => `home="${id}" || away="${id}"`).join(' || ');
const results = await pb.collection("matches").getFullList({
filter: teamFilters,
expand: "tournament, home, away, home.players, away.players",
sort: "-created",
});
allMatches.push(...results);
}
const uniqueMatches = Array.from(
new Map(allMatches.map(m => [m.id, m])).values()
);
return uniqueMatches
.filter(match => {
const homeTeamId = typeof match.home === 'string' ? match.home : match.home?.id;
const awayTeamId = typeof match.away === 'string' ? match.away : match.away?.id;
const player1InHome = player1TeamIds.includes(homeTeamId);
const player1InAway = player1TeamIds.includes(awayTeamId);
const player2InHome = player2TeamIds.includes(homeTeamId);
const player2InAway = player2TeamIds.includes(awayTeamId);
return (player1InHome && player2InAway) || (player1InAway && player2InHome);
})
.map(match => transformMatch(match));
},
async getMatchesBetweenTeams(team1Id: string, team2Id: string): Promise<Match[]> {
logger.info("PocketBase | Getting matches between teams", { team1Id, team2Id });
const filter = `(home="${team1Id}" && away="${team2Id}") || (home="${team2Id}" && away="${team1Id}")`;
const results = await pb.collection("matches").getFullList({
filter,
expand: "tournament, home, away, home.players, away.players",
sort: "-created",
});
return results.map(match => transformMatch(match));
},
};
}

53
src/lib/pocketbase/services/players.ts
View File

@@ -8,7 +8,6 @@ import type {
import type { Match } from "@/features/matches/types";
import { transformPlayer, transformPlayerInfo, transformMatch } from "@/lib/pocketbase/util/transform-types";
import PocketBase from "pocketbase";
import { DataFetchOptions } from "./base";
export function createPlayersService(pb: PocketBase) {
return {
@@ -65,15 +64,45 @@ export function createPlayersService(pb: PocketBase) {
return result.map(transformPlayer);
},
async getPlayerStats(playerId: string): Promise<PlayerStats> {
const result = await pb.collection("player_stats").getFirstListItem<PlayerStats>(
`player_id = "${playerId}"`
);
return result;
async getPlayerStats(playerId: string, viewType: 'all' | 'mainline' | 'regional' = 'all'): Promise<PlayerStats> {
try {
const collectionMap = {
all: 'player_stats',
mainline: 'player_mainline_stats',
regional: 'player_regional_stats',
};
const result = await pb.collection(collectionMap[viewType]).getFirstListItem<PlayerStats>(
`player_id = "${playerId}"`
);
return result;
} catch (error) {
return {
id: "",
player_id: playerId,
player_name: "",
matches: 0,
tournaments: 0,
wins: 0,
losses: 0,
total_cups_made: 0,
total_cups_against: 0,
win_percentage: 0,
avg_cups_per_match: 0,
margin_of_victory: 0,
margin_of_loss: 0,
};
}
},
async getAllPlayerStats(): Promise<PlayerStats[]> {
const result = await pb.collection("player_stats").getFullList<PlayerStats>({
async getAllPlayerStats(viewType: 'all' | 'mainline' | 'regional' = 'all'): Promise<PlayerStats[]> {
const collectionMap = {
all: 'player_stats',
mainline: 'player_mainline_stats',
regional: 'player_regional_stats',
};
const result = await pb.collection(collectionMap[viewType]).getFullList<PlayerStats>({
sort: "-win_percentage,-total_cups_made",
});
return result;
@@ -148,5 +177,13 @@ export function createPlayersService(pb: PocketBase) {
return allPlayers.map(transformPlayer);
}
},
async getPlayersActivity(): Promise<Player[]> {
const result = await pb.collection("players").getFullList<Player>({
sort: "-last_activity",
fields: "id,first_name,last_name,auth_id,last_activity",
});
return result.map(transformPlayer);
},
};
}

4
src/lib/pocketbase/services/tournaments.ts
View File

@@ -34,7 +34,7 @@ export function createTournamentsService(pb: PocketBase) {
.getFirstListItem('',
{
expand: "teams, teams.players, matches, matches.tournament, matches.home, matches.away, matches.home.players, matches.away.players",
sort: "-created",
sort: "-start_time",
}
);
@@ -52,7 +52,7 @@ export function createTournamentsService(pb: PocketBase) {
.collection("tournaments")
.getFullList({
expand: "teams,teams.players,matches",
sort: "-created",
sort: "-start_time",
});
const tournamentsWithStats = await Promise.all(result.map(async (tournament) => {

16
src/lib/pocketbase/util/transform-types.ts
View File

@@ -1,4 +1,3 @@
import { Reaction } from "@/features/matches/server";
import { Match } from "@/features/matches/types";
import { Player, PlayerInfo } from "@/features/players/types";
import { Team, TeamInfo } from "@/features/teams/types";
@@ -25,7 +24,8 @@ export function transformTeamInfo(record: any): TeamInfo {
primary_color: record.primary_color,
accent_color: record.accent_color,
players,
logo: record.logo
logo: record.logo,
private: record.private || false,
};
}
@@ -107,6 +107,7 @@ export const transformTournamentInfo = (record: any): TournamentInfo => {
end_time: record.end_time,
logo: record.logo,
glitch_logo: record.glitch_logo,
regional: record.regional || false,
first_place,
second_place,
third_place,
@@ -116,6 +117,7 @@ export const transformTournamentInfo = (record: any): TournamentInfo => {
export function transformPlayer(record: any): Player {
const teams =
record.expand?.teams
?.filter((team: any) => !team.private)
?.sort((a: any, b: any) =>
new Date(a.created) < new Date(b.created) ? -1 : 0
)
@@ -128,19 +130,13 @@ export function transformPlayer(record: any): Player {
auth_id: record.auth_id,
created: record.created,
updated: record.updated,
last_activity: record.last_activity,
teams,
};
}
export function transformFreeAgent(record: any) {
const player = record.expand?.player ? transformPlayerInfo(record.expand.player) : undefined;
const tournaments =
record.expand?.tournaments
?.sort((a: any, b: any) =>
new Date(a.created!) < new Date(b.created!) ? -1 : 0
)
?.map(transformTournamentInfo) ?? [];
return {
id: record.id as string,
phone: record.phone as string,
@@ -179,6 +175,7 @@ export function transformTeam(record: any): Team {
updated: record.updated,
players,
tournaments,
private: record.private || false,
};
}
@@ -263,6 +260,7 @@ export function transformTournament(record: any, isAdmin: boolean = false): Tour
end_time: record.end_time,
created: record.created,
updated: record.updated,
regional: record.regional || false,
teams,
matches,
first_place,

1
src/lib/tanstack-query/hooks/use-server-query.ts
View File

@@ -8,6 +8,7 @@ export function useServerQuery<TData>(
queryFn: () => Promise<ServerResult<TData>>;
options?: Omit<UseQueryOptions<TData, Error, TData>, 'queryFn' | 'queryKey'>
showErrorToast?: boolean;
enabled?: boolean;
}
) {
const { queryKey, queryFn, showErrorToast = true, options: queryOptions } = options;

1
src/lib/tanstack-query/hooks/user-server-suspense-query.ts
View File

@@ -8,6 +8,7 @@ export function useServerSuspenseQuery<TData>(
queryFn: () => Promise<ServerResult<TData>>;
options?: Omit<UseQueryOptions<TData, Error, TData>, 'queryFn' | 'queryKey'>
showErrorToast?: boolean;
enabled?: boolean;
}
) {
const { queryKey, queryFn, showErrorToast = true, options: queryOptions } = options;

43
src/lib/tanstack-query/utils/to-server-result.ts
View File

@@ -1,5 +1,7 @@
import { logger } from "../../logger";
import { ErrorType, ServerError, ServerResult } from "../types";
import { pbAdmin } from "../../pocketbase/client";
import { getRequest } from "@tanstack/react-start/server";
export const createServerError = (
type: ErrorType,
@@ -15,14 +17,53 @@ export const createServerError = (
context,
});
export const toServerResult = async <T>(serverFn: () => Promise<T>): Promise<ServerResult<T>> => {
export const toServerResult = async <T>(
serverFn: () => Promise<T>
): Promise<ServerResult<T>> => {
const startTime = Date.now();
try {
const data = await serverFn();
return { success: true, data };
} catch (error) {
const duration = Date.now() - startTime;
logger.error('Server Fn Error', error);
const mappedError = mapKnownError(error);
let fnName = 'unknown';
try {
const request = getRequest();
const url = new URL(request.url);
const functionId = url.searchParams.get('_serverFnId') || url.pathname;
if (functionId.includes('--')) {
const match = functionId.match(/--([^_]+)_/);
fnName = match?.[1] || functionId.split('--')[1]?.split('_')[0] || 'unknown';
} else {
fnName = serverFn.name || 'unknown';
}
} catch {
fnName = serverFn.name || 'unknown';
}
try {
await pbAdmin.authPromise;
await pbAdmin.createActivity({
name: fnName,
duration,
success: false,
error: mappedError.message,
arguments: {
errorType: mappedError.code,
statusCode: mappedError.statusCode,
userMessage: mappedError.userMessage,
},
});
} catch (activityError) {
}
return { success: false, error: mappedError };
}
};

12
src/utils/supertokens.ts
View File

@@ -11,6 +11,7 @@ import { getSessionForStart } from "@/lib/supertokens/recipes/start-session";
import { Logger } from "@/lib/logger";
import z from "zod";
import { serverFnLoggingMiddleware } from "./activities";
import { pbAdmin } from "@/lib/pocketbase/client";
const logger = new Logger("Middleware");
const verifySuperTokensSession = async (
@@ -75,6 +76,17 @@ export const getSessionContext = createServerOnlyFn(async (request: Request, opt
phone: session.context.phone
};
try {
const player = await pbAdmin.getPlayerByAuthId(session.context.userAuthId);
if (player) {
await pbAdmin.updatePlayer(player.id, {
last_activity: new Date().toISOString(),
});
}
} catch (error) {
logger.error("Failed to update player last_activity", error);
}
return context;
});