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

style upgrades

Browse Source
This commit is contained in:
yohlo
2026-07-12 21:26:39 -07:00
parent ec334bbed4
commit 4f81f3c0ca
72 changed files with 1541 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/site.webmanifest
+2 -2
View File
@@ -18,8 +18,8 @@
],
"start_url": "/",
"display": "standalone",
"theme_color": "#1e293b",
"background_color": "#0f172a",
"theme_color": "#242424",
"background_color": "#242424",
"orientation": "portrait-primary",
"scope": "/",
"categories": ["games", "social", "beer pong"],
public/styles.css
+24
View File
@@ -28,4 +28,28 @@
[data-drawer-level="3"].drawer-scaling {
transform: scale(0.90) translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
.app,
[data-drawer-level] {
transition: none;
}
.app.drawer-scaling,
[data-drawer-level].drawer-scaling {
transform: none;
border-radius: 0;
}
[data-vaul-drawer],
[data-vaul-overlay] {
animation: none !important;
transition: none !important;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(0deg); }
}
}
src/app/router.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ export function getRouter() {
defaultPreload: "intent",
defaultErrorComponent: DefaultCatchBoundary,
scrollRestoration: true,
defaultViewTransition: false,
defaultViewTransition: true,
});
setupRouterSsrQueryIntegration({
src/app/routes/__root.tsx
+12 -2
View File
@@ -19,6 +19,7 @@ import { HeaderConfig } from "@/features/core/types/header-config";
import { playerQueries } from "@/features/players/queries";
import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
import FullScreenLoader from "@/components/full-screen-loader";
import { CHROME_COLORS } from "@/lib/mantine/theme-colors";
import mantineCssUrl from '@mantine/core/styles.css?url'
import mantineDatesCssUrl from '@mantine/dates/styles.css?url'
import mantineCarouselCssUrl from '@mantine/carousel/styles.css?url'
@@ -41,11 +42,10 @@ export const Route = createRootRouteWithContext<{
{
name: "viewport",
content:
"width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, interactive-widget=resizes-content",
"width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, interactive-widget=resizes-content, viewport-fit=cover",
},
{ name: 'description', content: 'Amicus meus madidus' },
{ name: 'keywords', content: 'FLXN, beer pong, tournament, sports, statistics, pong' },
{ name: 'theme-color', content: '#1e293b' },
{ property: 'og:title', content: 'FLXN' },
{ property: 'og:description', content: 'Amicus meus madidus' },
{ property: 'og:url', content: 'https://flexxon.app' },
@@ -179,6 +179,16 @@ function RootDocument({ children }: { children: React.ReactNode }) {
>
<head>
<HeadContent />
<meta
name="theme-color"
media="(prefers-color-scheme: light)"
content={CHROME_COLORS.light.base}
/>
<meta
name="theme-color"
media="(prefers-color-scheme: dark)"
content={CHROME_COLORS.dark.base}
/>
<ColorSchemeScript />
<link rel="stylesheet" href="/styles.css" />
</head>
src/app/routes/_authed.tsx
+16 -4
View File
@@ -1,7 +1,7 @@
import { redirect, createFileRoute, Outlet } from "@tanstack/react-router";
import Layout from "@/features/core/components/layout";
import { useServerEvents } from "@/hooks/use-server-events";
import { Flex, Loader } from "@mantine/core";
import { Group, Skeleton, Stack } from "@mantine/core";
export const Route = createFileRoute("/_authed")({
beforeLoad: ({ context }) => {
@@ -26,9 +26,21 @@ export const Route = createFileRoute("/_authed")({
},
pendingComponent: () => (
<Layout>
<Flex w='100%' h="40dvh" justify="center" align="flex-end">
<Loader size='xl' />
</Flex>
<Stack gap="md" p="md" w="100%">
<Group gap="sm">
<Skeleton height={40} width={40} radius="sm" />
<Skeleton height={24} width="45%" radius="sm" />
</Group>
{Array.from({ length: 4 }).map((_, index) => (
<Skeleton
key={`authed-pending-${index}`}
height={96}
w="100%"
radius="md"
style={{ opacity: Math.max(1 - index * 0.18, 0.3) }}
/>
))}
</Stack>
</Layout>
),
});
src/app/routes/_authed/admin/activities.tsx
+32 -4
View File
@@ -2,8 +2,8 @@ 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";
import { Box, Divider, Group, Skeleton, Stack, Tabs } from "@mantine/core";
import { Suspense, useState } from "react";
export const Route = createFileRoute("/_authed/admin/activities")({
component: Stats,
@@ -23,6 +23,30 @@ export const Route = createFileRoute("/_authed/admin/activities")({
}),
});
function ActivityRowsSkeleton({ withSearch = false }: { withSearch?: boolean }) {
return (
<Stack gap={0}>
{withSearch && (
<Box px="md" pb="sm">
<Skeleton height={42} radius="sm" />
</Box>
)}
{Array.from({ length: 8 }).map((_, index) => (
<div key={`activity-skeleton-${index}`} style={{ opacity: Math.max(1 - index * 0.1, 0.35) }}>
<Group p="md" wrap="nowrap" w="100%" justify="space-between">
<Stack gap={6}>
<Skeleton height={14} width={160} radius="sm" />
<Skeleton height={10} width={100} radius="sm" />
</Stack>
<Skeleton height={10} width={60} radius="sm" />
</Group>
<Divider />
</div>
))}
</Stack>
);
}
function Stats() {
const [activeTab, setActiveTab] = useState<string | null>("server-functions");
@@ -34,11 +58,15 @@ function Stats() {
</Tabs.List>
<Tabs.Panel value="server-functions">
<ActivitiesTable />
<Suspense fallback={<ActivityRowsSkeleton withSearch />}>
<ActivitiesTable />
</Suspense>
</Tabs.Panel>
<Tabs.Panel value="player-activity">
<PlayersActivityTable />
<Suspense fallback={<ActivityRowsSkeleton />}>
<PlayersActivityTable />
</Suspense>
</Tabs.Panel>
</Tabs>
);
src/app/routes/_authed/admin/tournaments/$id/assign-partners.tsx
+16 -1
View File
@@ -1,7 +1,7 @@
import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
import { tournamentQueries, useFreeAgents, useTournament } from "@/features/tournaments/queries";
import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
import { Stack, Text, Button, Alert, LoadingOverlay, Group } from "@mantine/core";
import { Stack, Text, Button, Alert, LoadingOverlay, Group, Skeleton } from "@mantine/core";
import { useState } from "react";
import useGenerateRandomTeams from "@/features/tournaments/hooks/use-generate-random-teams";
import useConfirmTeamAssignments from "@/features/tournaments/hooks/use-confirm-team-assignments";
@@ -27,8 +27,23 @@ export const Route = createFileRoute("/_authed/admin/tournaments/$id/assign-part
},
}),
component: RouteComponent,
pendingComponent: AssignPartnersPending,
});
function AssignPartnersPending() {
return (
<Stack gap="lg">
<Stack gap="xs">
<Group gap="xs" align="baseline">
<Skeleton height={28} width={36} radius="sm" />
<Skeleton height={14} width={110} radius="sm" />
</Group>
<Skeleton height={36} w="100%" radius="sm" style={{ opacity: 0.7 }} />
</Stack>
</Stack>
);
}
interface TeamAssignment {
player1: PlayerInfo;
player2: PlayerInfo;
src/app/routes/_authed/admin/tournaments/$id/index.tsx
+19
View File
@@ -2,6 +2,7 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
import { tournamentQueries } from "@/features/tournaments/queries";
import ManageTournament from "@/features/tournaments/components/manage-tournament";
import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
import { Divider, Group, Skeleton, Stack } from "@mantine/core";
export const Route = createFileRoute("/_authed/admin/tournaments/$id/")({
beforeLoad: async ({ context, params }) => {
@@ -23,8 +24,26 @@ export const Route = createFileRoute("/_authed/admin/tournaments/$id/")({
withPadding: false,
}),
component: RouteComponent,
pendingComponent: ManageTournamentPending,
});
function ManageTournamentPending() {
return (
<Stack gap={0}>
{Array.from({ length: 5 }).map((_, index) => (
<div key={`manage-tournament-skeleton-${index}`} style={{ opacity: Math.max(1 - index * 0.14, 0.4) }}>
<Group p="md" wrap="nowrap" w="100%">
<Skeleton height={20} width={20} radius="sm" />
<Skeleton height={16} width="45%" radius="sm" />
<Skeleton ml="auto" height={20} width={20} radius="sm" />
</Group>
<Divider />
</div>
))}
</Stack>
);
}
function RouteComponent() {
const { id } = Route.useParams();
return <ManageTournament tournamentId={id} />;
src/app/routes/_authed/admin/tournaments/$id/teams.tsx
+30
View File
@@ -2,6 +2,7 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
import { tournamentQueries } from "@/features/tournaments/queries";
import ManageTeams from "@/features/teams/components/manage-teams";
import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
import { Box, Divider, Group, Skeleton, Stack } from "@mantine/core";
export const Route = createFileRoute("/_authed/admin/tournaments/$id/teams")({
beforeLoad: async ({ context, params }) => {
@@ -23,8 +24,37 @@ export const Route = createFileRoute("/_authed/admin/tournaments/$id/teams")({
withPadding: false,
}),
component: RouteComponent,
pendingComponent: ManageTeamsPending,
});
function ManageTeamsPending() {
return (
<Stack gap="xs">
<Box px="md">
<Skeleton height={42} radius="sm" />
</Box>
<Box px="md">
<Skeleton height={12} width={90} radius="sm" />
</Box>
<Stack gap={0}>
{Array.from({ length: 8 }).map((_, index) => (
<div key={`manage-teams-skeleton-${index}`} style={{ opacity: Math.max(1 - index * 0.1, 0.35) }}>
<Group p="xs" wrap="nowrap" w="100%">
<Skeleton height={40} width={40} radius="sm" />
<Skeleton height={16} width="45%" radius="sm" />
<Stack ml="auto" gap={6} align="flex-end">
<Skeleton height={10} width={90} radius="sm" />
<Skeleton height={10} width={70} radius="sm" />
</Stack>
</Group>
<Divider />
</div>
))}
</Stack>
</Stack>
);
}
function RouteComponent() {
const { id } = Route.useParams();
const { tournament } = Route.useRouteContext();
src/app/routes/_authed/admin/tournaments/index.tsx
+25 -3
View File
@@ -1,12 +1,14 @@
import ManageTournaments from "@/features/admin/components/manage-tournaments";
import { tournamentQueries } from "@/features/tournaments/queries";
import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
import { Divider, Group, Skeleton, Stack } from "@mantine/core";
import { createFileRoute } from "@tanstack/react-router";
import { Suspense } from "react";
export const Route = createFileRoute("/_authed/admin/tournaments/")({
beforeLoad: async ({ context }) => {
beforeLoad: ({ context }) => {
const { queryClient } = context;
await prefetchServerQuery(queryClient, tournamentQueries.list());
prefetchServerQuery(queryClient, tournamentQueries.list());
},
loader: () => ({
header: {
@@ -19,6 +21,26 @@ export const Route = createFileRoute("/_authed/admin/tournaments/")({
component: RouteComponent,
});
function TournamentListSkeleton() {
return (
<Stack gap={0}>
{Array.from({ length: 6 }).map((_, index) => (
<div key={`manage-tournaments-skeleton-${index}`} style={{ opacity: Math.max(1 - index * 0.12, 0.4) }}>
<Group p="md" wrap="nowrap" w="100%">
<Skeleton height={16} width="55%" radius="sm" />
<Skeleton ml="auto" height={20} width={20} radius="sm" />
</Group>
<Divider />
</div>
))}
</Stack>
);
}
function RouteComponent() {
return <ManageTournaments />;
return (
<Suspense fallback={<TournamentListSkeleton />}>
<ManageTournaments />
</Suspense>
);
}
src/app/routes/_authed/admin/tournaments/run.$id.tsx
+39 -1
View File
@@ -7,7 +7,7 @@ import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
import SeedTournament from "@/features/tournaments/components/seed-tournament";
import SetupGroupStage from "@/features/tournaments/components/setup-group-stage";
import GroupStageView from "@/features/tournaments/components/group-stage-view";
import { Container, Stack, Divider, Title } from "@mantine/core";
import { Container, Stack, Divider, Title, Box, Card, Group, Skeleton, SimpleGrid } from "@mantine/core";
import { useMemo } from "react";
import { BracketData } from "@/features/bracket/types";
import { Match } from "@/features/matches/types";
@@ -37,8 +37,46 @@ export const Route = createFileRoute("/_authed/admin/tournaments/run/$id")({
},
}),
component: RouteComponent,
pendingComponent: RunTournamentPending,
});
function RunTournamentPending() {
return (
<Container size="md" px={0}>
<Box p="md">
<Stack gap="md">
<Group gap={0} grow mb="md">
{Array.from({ length: 4 }).map((_, index) => (
<Skeleton
key={`run-pending-tab-${index}`}
height={44}
radius="sm"
style={{ opacity: 0.85 - index * 0.1 }}
/>
))}
</Group>
<Card withBorder radius="md" p={0}>
<Group justify="space-between" p="sm">
<Skeleton height={16} width={120} radius="sm" />
<Skeleton height={22} width={22} radius="xl" />
</Group>
</Card>
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
{Array.from({ length: 6 }).map((_, index) => (
<Skeleton
key={`run-pending-match-${index}`}
height={100}
radius="md"
style={{ opacity: Math.max(1 - index * 0.12, 0.4) }}
/>
))}
</SimpleGrid>
</Stack>
</Box>
</Container>
);
}
function RouteComponent() {
const { id } = Route.useParams();
const { data: tournament } = useTournament(id);
src/app/routes/_authed/stats.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ function Stats() {
</Button>
</Group>
<Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
<Suspense key={deferredViewType} fallback={<PlayerStatsTableSkeleton hideFilters />}>
<Suspense fallback={<PlayerStatsTableSkeleton hideFilters />}>
<PlayerStatsTable viewType={deferredViewType} />
</Suspense>
</Box>
src/app/routes/_authed/tournaments/$id.bracket.tsx
+42 -1
View File
@@ -4,7 +4,7 @@ import {
useTournament,
} from "@/features/tournaments/queries";
import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
import { Container } from "@mantine/core";
import { Box, Container, Flex, Skeleton, Stack } from "@mantine/core";
import { useMemo } from "react";
import { BracketData } from "@/features/bracket/types";
import { Match } from "@/features/matches/types";
@@ -31,8 +31,49 @@ export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
},
}),
component: RouteComponent,
pendingComponent: BracketPending,
});
function BracketPending() {
const columns = [4, 2, 1];
return (
<Container size="md" px={0}>
<Box
p={0}
style={{
overflow: "hidden",
backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
backgroundSize: "16px 16px",
backgroundPosition: "0 0, 8px 8px",
minHeight: "70dvh",
}}
>
<Skeleton height={18} width={140} radius="sm" m={16} />
<Flex gap="xl" px={16} align="stretch">
{columns.map((count, columnIndex) => (
<Stack
key={`bracket-pending-round-${columnIndex}`}
gap="xl"
justify="space-around"
style={{ opacity: 1 - columnIndex * 0.25 }}
>
{Array.from({ length: count }).map((_, matchIndex) => (
<Skeleton
key={`bracket-pending-match-${columnIndex}-${matchIndex}`}
height={84}
width={220}
radius="md"
/>
))}
</Stack>
))}
</Flex>
</Box>
</Container>
);
}
function RouteComponent() {
const { id } = Route.useParams();
const { data: tournament } = useTournament(id);
src/app/routes/_authed/tournaments/$id.groups.tsx
+39 -1
View File
@@ -5,7 +5,7 @@ import {
} from "@/features/tournaments/queries";
import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
import GroupStageView from "@/features/tournaments/components/group-stage-view";
import { Container } from "@mantine/core";
import { Box, Card, Container, Group, Skeleton, SimpleGrid, Stack } from "@mantine/core";
export const Route = createFileRoute("/_authed/tournaments/$id/groups")({
beforeLoad: async ({ context, params }) => {
@@ -28,8 +28,46 @@ export const Route = createFileRoute("/_authed/tournaments/$id/groups")({
},
}),
component: RouteComponent,
pendingComponent: GroupsPending,
});
function GroupsPending() {
return (
<Container size="md" px={0}>
<Box p="md">
<Stack gap="md">
<Group gap={0} grow mb="md">
{Array.from({ length: 4 }).map((_, index) => (
<Skeleton
key={`groups-pending-tab-${index}`}
height={44}
radius="sm"
style={{ opacity: 0.85 - index * 0.1 }}
/>
))}
</Group>
<Card withBorder radius="md" p={0}>
<Group justify="space-between" p="sm">
<Skeleton height={16} width={120} radius="sm" />
<Skeleton height={22} width={22} radius="xl" />
</Group>
</Card>
<SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
{Array.from({ length: 6 }).map((_, index) => (
<Skeleton
key={`groups-pending-match-${index}`}
height={100}
radius="md"
style={{ opacity: Math.max(1 - index * 0.12, 0.4) }}
/>
))}
</SimpleGrid>
</Stack>
</Box>
</Container>
);
}
function RouteComponent() {
const { id } = Route.useParams();
const { data: tournament } = useTournament(id);
src/app/routes/_authed/tournaments/index.tsx
+7 -1
View File
@@ -23,7 +23,13 @@ export const Route = createFileRoute('/_authed/tournaments/')({
function RouteComponent() {
return <Suspense fallback={<Stack gap="md">
{Array(10).fill(null).map((_, index) => (
<Skeleton height="120px" w="100%" />
<Skeleton
key={`tournament-card-skeleton-${index}`}
height="120px"
w="100%"
radius="md"
style={{ opacity: Math.max(1 - index * 0.08, 0.35) }}
/>
))}
</Stack>}>
<TournamentCardList />
src/components/avatar.tsx
+4 -3
View File
@@ -98,20 +98,21 @@ const Avatar = ({
>
<div style={{ position: 'relative', maxWidth: '90vw', maxHeight: '90vh' }}>
<ActionIcon
variant="filled"
variant="white"
color="dark"
size="lg"
radius="xl"
aria-label="Close image preview"
style={{
position: 'absolute',
top: -10,
right: -10,
zIndex: 1000,
backgroundColor: 'rgba(0, 0, 0, 0.7)',
backgroundColor: 'rgba(255, 255, 255, 0.9)',
}}
onClick={() => setIsFullscreenOpen(false)}
>
<XIcon size={18} color="white" />
<XIcon size={18} />
</ActionIcon>
<Image
src/components/countdown.module.css
+36
View File
@@ -0,0 +1,36 @@
.time {
transition: color 300ms ease-out;
}
.seconds {
display: inline-block;
}
.tick {
animation: digit-tick 200ms ease-out;
}
.finalTick {
animation: final-tick 250ms ease-out;
}
@keyframes digit-tick {
from {
opacity: 0.2;
transform: translateY(-0.12em);
}
}
@keyframes final-tick {
from {
opacity: 0.4;
transform: scale(1.15);
}
}
@media (prefers-reduced-motion: reduce) {
.tick,
.finalTick {
animation: none;
}
}
src/components/countdown.tsx
+31 -13
View File
@@ -1,6 +1,7 @@
import useNow from '@/hooks/use-now';
import { Text, Group } from '@mantine/core';
import { useMemo } from 'react';
import classes from './countdown.module.css';
interface CountdownProps {
date: Date;
@@ -17,7 +18,7 @@ interface TimeLeft {
function calculateTimeLeft(targetDate: Date, currentTime = new Date()): TimeLeft {
const difference = targetDate.getTime() - currentTime.getTime();
if (difference <= 0) {
return { days: 0, hours: 0, minutes: 0, seconds: 0 };
}
@@ -30,28 +31,45 @@ function calculateTimeLeft(targetDate: Date, currentTime = new Date()): TimeLeft
};
}
const pad = (num: number) => num.toString().padStart(2, '0');
export function Countdown({ date, label, color }: CountdownProps) {
const now = useNow();
const timeLeft = useMemo(() => calculateTimeLeft(date, now), [date, now]);
const formatTime = () => {
const pad = (num: number) => num.toString().padStart(2, '0');
if (timeLeft.days > 0) {
return `${timeLeft.days}d ${pad(timeLeft.hours)}:${pad(timeLeft.minutes)}:${pad(timeLeft.seconds)}`;
} else {
return `${pad(timeLeft.hours)}:${pad(timeLeft.minutes)}:${pad(timeLeft.seconds)}`;
}
};
const totalSecondsLeft = Math.max(
0,
Math.floor((date.getTime() - now.getTime()) / 1000)
);
const isFinalStretch = totalSecondsLeft > 0 && totalSecondsLeft <= 10;
const prefix =
timeLeft.days > 0
? `${timeLeft.days}d ${pad(timeLeft.hours)}:${pad(timeLeft.minutes)}:`
: `${pad(timeLeft.hours)}:${pad(timeLeft.minutes)}:`;
return (
<Group gap="xs">
{label && <Text size='sm' fw={500}>{label}:</Text>}
<Text size='sm' fw={600} c={color} ff="monospace">
{formatTime()}
<Text
size='sm'
fw={600}
c={isFinalStretch ? 'red' : color}
ff="monospace"
className={classes.time}
>
{prefix}
<span
key={timeLeft.seconds}
className={`${classes.seconds} ${
isFinalStretch ? classes.finalTick : classes.tick
}`}
>
{pad(timeLeft.seconds)}
</span>
</Text>
</Group>
);
}
export default Countdown;
export default Countdown;
src/components/empty-state.tsx
+32
View File
@@ -0,0 +1,32 @@
import { Stack, Text, ThemeIcon, Title } from "@mantine/core";
import { ReactNode } from "react";
interface EmptyStateProps {
icon: ReactNode;
title: string;
description?: string;
action?: ReactNode;
}
const EmptyState = ({ icon, title, description, action }: EmptyStateProps) => {
return (
<Stack align="center" gap="md" py="xl">
<ThemeIcon size="xl" variant="light" radius="md">
{icon}
</ThemeIcon>
<Stack align="center" gap={4}>
<Title order={3} c="dimmed" ta="center">
{title}
</Title>
{description && (
<Text size="sm" c="dimmed" ta="center" maw={280}>
{description}
</Text>
)}
</Stack>
{action}
</Stack>
);
};
export default EmptyState;
src/components/glitch-avatar.tsx
+16 -5
View File
@@ -16,6 +16,7 @@ interface GlitchAvatarProps
contain?: boolean;
children?: React.ReactNode;
px?: string | number;
frame?: boolean;
}
const GlitchAvatar = ({
@@ -28,6 +29,7 @@ const GlitchAvatar = ({
contain = false,
children,
px,
frame = false,
...props
}: GlitchAvatarProps) => {
const [showGlitch, setShowGlitch] = useState(false);
@@ -37,13 +39,16 @@ const GlitchAvatar = ({
useEffect(() => {
if (!glitchSrc) return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
let timeoutId: ReturnType<typeof setTimeout>;
const scheduleNextGlitch = () => {
const delay = Math.random() * 10000 + 5000;
return setTimeout(() => {
timeoutId = setTimeout(() => {
setShowGlitch(true);
setIsPlaying(true);
setTimeout(() => {
timeoutId = setTimeout(() => {
setShowGlitch(false);
setIsPlaying(false);
scheduleNextGlitch();
@@ -51,7 +56,7 @@ const GlitchAvatar = ({
}, delay);
};
const timeoutId = scheduleNextGlitch();
scheduleNextGlitch();
return () => clearTimeout(timeoutId);
}, [glitchSrc]);
@@ -94,12 +99,18 @@ const GlitchAvatar = ({
? `${radius + 8}px`
: "calc(var(--mantine-radius-md) + 8px)",
position: "relative",
...(frame && {
boxShadow:
"0 0 0 1px color-mix(in srgb, var(--mantine-primary-color-filled) 35%, transparent), 0 8px 32px -8px color-mix(in srgb, var(--mantine-primary-color-filled) 30%, transparent)",
}),
}}
>
<Box
style={{
opacity: showGlitch ? 0 : 1,
transition: "opacity 0.05s ease-in-out",
transition: showGlitch
? "opacity 0.05s ease-in"
: "opacity 0.25s ease-out",
}}
>
<Paper
@@ -141,7 +152,7 @@ const GlitchAvatar = ({
left: "8px",
opacity: showGlitch ? 1 : 0,
visibility: showGlitch ? "visible" : "hidden",
transition: "opacity 0.05s ease-in-out",
transition: showGlitch ? "opacity 0.05s ease-in" : "none",
pointerEvents: "none",
}}
>
src/components/list-button.tsx
+2
View File
@@ -1,5 +1,6 @@
import { Divider, Group, Loader, Text, UnstyledButton } from "@mantine/core";
import { CaretRightIcon, Icon } from "@phosphor-icons/react";
import styles from "./list-row.module.css";
interface ListButtonProps {
label: string;
@@ -12,6 +13,7 @@ const ListButton = ({ label, onClick, Icon, loading }: ListButtonProps) => {
return (
<>
<UnstyledButton
className={styles.listRow}
w="100%"
p="md"
component={"button"}
src/components/list-link.tsx
+3 -1
View File
@@ -1,6 +1,7 @@
import { Divider, NavLink, Text } from "@mantine/core";
import { CaretRightIcon, Icon } from "@phosphor-icons/react";
import { Link, useNavigate } from "@tanstack/react-router";
import { useNavigate } from "@tanstack/react-router";
import styles from "./list-row.module.css";
interface ListLinkProps {
label: string;
@@ -15,6 +16,7 @@ const ListLink = ({ label, to, Icon, disabled=false }: ListLinkProps) => {
return (
<>
<NavLink
className={styles.listRow}
disabled={disabled}
w="100%"
p="md"
src/components/list-row.module.css
+23
View File
@@ -0,0 +1,23 @@
.listRow {
-webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
.listRow:hover:not(:disabled) {
background-color: var(--mantine-color-default-hover);
}
}
.listRow:active:not(:disabled) {
background-color: var(--mantine-color-default-hover);
}
@media (prefers-reduced-motion: no-preference) {
.listRow {
transition: background-color 120ms ease-out, transform 120ms ease-out;
}
.listRow:active:not(:disabled) {
transform: translateY(1px);
}
}
src/components/sheet/drawer.tsx
+16 -45
View File
@@ -1,17 +1,15 @@
import {
Box,
Container,
Title,
useComputedColorScheme,
} from "@mantine/core";
import { Box, Container, Title, useComputedColorScheme } from "@mantine/core";
import { PropsWithChildren, useEffect, useRef } from "react";
import { Drawer as VaulDrawer } from "vaul";
import { CHROME_COLORS, setThemeColorMeta } from "@/lib/mantine/theme-colors";
import styles from "./styles.module.css";
interface DrawerProps extends PropsWithChildren {
title?: string;
opened: boolean;
onChange: (next: boolean) => void;
onClose?: () => void;
onExited?: () => void;
}
const Drawer: React.FC<DrawerProps> = ({
@@ -19,55 +17,25 @@ const Drawer: React.FC<DrawerProps> = ({
children,
opened,
onChange,
onExited,
}) => {
const colorScheme = useComputedColorScheme("light");
const contentRef = useRef<HTMLDivElement>(null);
const openedRef = useRef(opened);
useEffect(() => {
openedRef.current = opened;
}, [opened]);
if (!opened) return;
useEffect(() => {
const appElement = document.querySelector(".app") as HTMLElement;
const appElement = document.querySelector<HTMLElement>(".app");
const colors = CHROME_COLORS[colorScheme];
if (!appElement) return;
let themeColorMeta = document.querySelector(
'meta[name="theme-color"]'
) as HTMLMetaElement;
if (!themeColorMeta) {
themeColorMeta = document.createElement("meta");
themeColorMeta.name = "theme-color";
document.head.appendChild(themeColorMeta);
}
const colors = {
light: {
normal: "rgb(255,255,255)",
overlay: "rgb(153,153,153)",
},
dark: {
normal: "rgb(36,36,36)",
overlay: "rgb(22,22,22)",
},
};
const currentColors = colors[colorScheme] || colors.light;
if (opened) {
appElement.classList.add("drawer-scaling");
themeColorMeta.content = currentColors.overlay;
} else {
appElement.classList.remove("drawer-scaling");
themeColorMeta.content = currentColors.normal;
}
appElement?.classList.add("drawer-scaling");
setThemeColorMeta(colors.dimmed);
return () => {
appElement.classList.remove("drawer-scaling");
themeColorMeta.content = currentColors.normal;
appElement?.classList.remove("drawer-scaling");
setThemeColorMeta(colors.base);
};
}, [opened]);
}, [opened, colorScheme]);
useEffect(() => {
if (!opened || !contentRef.current) return;
@@ -109,6 +77,9 @@ const Drawer: React.FC<DrawerProps> = ({
repositionInputs={false}
open={opened}
onOpenChange={onChange}
onAnimationEnd={(open) => {
if (!open) onExited?.();
}}
>
<VaulDrawer.Portal>
<VaulDrawer.Overlay className={styles.drawerOverlay} />
src/components/sheet/modal.tsx
+18 -1
View File
@@ -5,13 +5,30 @@ interface ModalProps extends PropsWithChildren {
title?: string;
opened: boolean;
onClose: () => void;
onChange?: (next: boolean) => void;
onExited?: () => void;
}
const Modal: React.FC<ModalProps> = ({ title, children, opened, onClose }) => (
const Modal: React.FC<ModalProps> = ({
title,
children,
opened,
onClose,
onExited,
}) => (
<MantineModal
opened={opened}
onClose={onClose}
title={<Title order={3}>{title}</Title>}
radius={20}
transitionProps={{
transition: "pop",
duration: 200,
timingFunction: "ease-out",
onExited,
}}
overlayProps={{ backgroundOpacity: 0.4 }}
closeButtonProps={{ "aria-label": "Close" }}
>
<Suspense
fallback={
src/components/sheet/sheet.tsx
+32 -2
View File
@@ -1,4 +1,11 @@
import { PropsWithChildren, Suspense, useCallback } from "react";
import {
PropsWithChildren,
Suspense,
useCallback,
useEffect,
useRef,
useState,
} from "react";
import { useIsMobile } from "@/hooks/use-is-mobile";
import Drawer from "./drawer";
import Modal from "./modal";
@@ -10,13 +17,35 @@ interface SheetProps extends PropsWithChildren {
onChange: (next: boolean) => void;
}
const DRAWER_EXIT_MS = 500;
const MODAL_EXIT_MS = 200;
const EXIT_BUFFER_MS = 100;
const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
const isMobile = useIsMobile();
const handleClose = useCallback(() => onChange(false), [onChange]);
const [mounted, setMounted] = useState(opened);
const openedRef = useRef(opened);
openedRef.current = opened;
const handleExited = useCallback(() => {
if (!openedRef.current) setMounted(false);
}, []);
useEffect(() => {
if (opened) {
setMounted(true);
return;
}
const exitDuration =
(isMobile ? DRAWER_EXIT_MS : MODAL_EXIT_MS) + EXIT_BUFFER_MS;
const timer = window.setTimeout(() => setMounted(false), exitDuration);
return () => window.clearTimeout(timer);
}, [opened, isMobile]);
const SheetComponent = isMobile ? Drawer : Modal;
if (!opened) return null;
if (!opened && !mounted) return null;
return (
<SheetComponent
@@ -24,6 +53,7 @@ const Sheet: React.FC<SheetProps> = ({ title, children, opened, onChange }) => {
opened={opened}
onChange={onChange}
onClose={handleClose}
onExited={handleExited}
>
<Suspense fallback={
<Flex justify='center' align='center' w='100%' style={{ minHeight: '25vh' }}>
src/components/sheet/slide-panel/slide-panel.tsx
+6 -1
View File
@@ -150,7 +150,11 @@ const SlidePanel = ({
{panelConfig && (
<>
<Group justify="space-between" p="md" align="center" w="100%">
<ActionIcon variant="transparent" onClick={closePanel}>
<ActionIcon
variant="transparent"
onClick={closePanel}
aria-label="Back"
>
<ArrowLeftIcon size={24} />
</ActionIcon>
<Text fw={500}>{panelConfig.title}</Text>
@@ -158,6 +162,7 @@ const SlidePanel = ({
variant="transparent"
color="green"
onClick={handleConfirm}
aria-label="Confirm"
>
<CheckIcon size={24} />
</ActionIcon>
src/components/sheet/styles.module.css
+6
View File
@@ -20,3 +20,9 @@
outline: none;
transition: height 0.2s ease-out, max-height 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
.drawerContent {
transition: none;
}
}
src/features/activities/components/activities-table.tsx
+13 -5
View File
@@ -12,6 +12,8 @@ import {
Pagination,
Code,
Alert,
ThemeIcon,
Title,
} from "@mantine/core";
import {
MagnifyingGlassIcon,
@@ -20,6 +22,7 @@ import {
CheckIcon,
XIcon,
ChecksIcon,
PulseIcon,
} from "@phosphor-icons/react";
import { Activity, ActivitySearchParams } from "../types";
import { useActivities } from "../queries";
@@ -220,9 +223,14 @@ const ActivitiesResults = ({ searchParams, page, setPage, onActivityClick }: any
</Stack>
{result.items.length === 0 && (
<Text ta="center" c="dimmed" py="xl">
No activities found
</Text>
<Stack align="center" gap="md" py="xl">
<ThemeIcon size="xl" variant="light" radius="md">
<PulseIcon size={32} />
</ThemeIcon>
<Title order={3} c="dimmed">
No Activities Found
</Title>
</Stack>
)}
{result.totalPages > 1 && (
@@ -339,7 +347,7 @@ export const ActivitiesTable = () => {
<Text
size="xs"
fw={sortBy.includes("created") ? 600 : 400}
c={sortBy.includes("created") ? "dark" : "dimmed"}
c={sortBy.includes("created") ? "var(--mantine-color-text)" : "dimmed"}
>
Date
</Text>
@@ -355,7 +363,7 @@ export const ActivitiesTable = () => {
<Text
size="xs"
fw={sortBy.includes("duration") ? 600 : 400}
c={sortBy.includes("duration") ? "dark" : "dimmed"}
c={sortBy.includes("duration") ? "var(--mantine-color-text)" : "dimmed"}
>
Duration
</Text>
src/features/admin/components/manage-tournaments.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ const ManageTournaments = () => {
return (
<List p="0">
{tournaments.map((t) => (
<ListLink label={t.name} to={`/admin/tournaments/${t.id}`} />
<ListLink key={t.id} label={t.name} to={`/admin/tournaments/${t.id}`} />
))}
</List>
);
src/features/badges/components/badge-showcase.tsx
+26 -1
View File
@@ -57,6 +57,28 @@ export const BadgeIcon = ({ badge, filled, size = 48 }: BadgeIconProps & { size?
};
const badgeTileCss = `
.flxn-badge-tile {
transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}
@media (hover: hover) {
.flxn-badge-tile:hover {
transform: translateY(-2px);
}
}
.flxn-badge-tile:active {
transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
.flxn-badge-tile,
.flxn-badge-tile:hover,
.flxn-badge-tile:active {
transition: none;
transform: none;
}
}
`;
const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
const { user } = useAuth();
const { data: badgeProgress } = usePlayerBadges(playerId);
@@ -138,6 +160,9 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
return (
<Box mb="lg">
<style href="flxn-badge-tile" precedence="medium">
{badgeTileCss}
</style>
<Box
px="md"
style={{
@@ -167,9 +192,9 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
<Popover key={display.badge.id} width={280} position="top" withArrow shadow="md" withinPortal>
<Popover.Target>
<Box
className="flxn-badge-tile"
style={{
cursor: "pointer",
transition: 'all 0.2s ease',
position: 'relative',
}}
>
src/features/bracket/components/bracket-view.tsx
+2 -1
View File
@@ -4,6 +4,7 @@ import { BracketData } from "../types";
import { Bracket } from "./bracket";
import useAppShellHeight from "@/hooks/use-appshell-height";
import { Match } from "@/features/matches/types";
import styles from "./styles.module.css";
interface BracketViewProps {
bracket: BracketData;
@@ -25,7 +26,7 @@ const BracketView: React.FC<BracketViewProps> = ({ bracket, showControls, groupC
return <ScrollArea
h={`calc(${height})`}
className="bracket-container"
className={styles["bracket-container"]}
style={{
backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
backgroundSize: "16px 16px",
src/features/bracket/components/match-card.tsx
+8 -2
View File
@@ -134,6 +134,7 @@ export const MatchCard: React.FC<MatchCardProps> = ({
queryClient.invalidateQueries({
queryKey: tournamentKeys.details(match.tournament.id),
});
editSheet.close();
},
});
@@ -149,9 +150,8 @@ export const MatchCard: React.FC<MatchCardProps> = ({
matchId: match.id,
},
});
editSheet.close();
},
[match.id, editSheet]
[end, match.id]
);
const speak = useCallback((text: string): Promise<void> => {
@@ -311,6 +311,7 @@ export const MatchCard: React.FC<MatchCardProps> = ({
variant="subtle"
color="gray"
onClick={handleSpeakerClick}
aria-label="Announce matchup"
>
<SpeakerHighIcon size={12} />
</ActionIcon>
@@ -323,10 +324,12 @@ export const MatchCard: React.FC<MatchCardProps> = ({
<ActionIcon
color="green"
onClick={handleStart}
loading={start.isPending}
size="sm"
h="100%"
radius="sm"
ml={-4}
aria-label="Start match"
style={{
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
@@ -343,10 +346,12 @@ export const MatchCard: React.FC<MatchCardProps> = ({
<ActionIcon
color="blue"
onClick={editSheet.open}
loading={end.isPending}
size="sm"
h="100%"
radius="sm"
ml={-4}
aria-label="Edit match score"
style={{
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
@@ -363,6 +368,7 @@ export const MatchCard: React.FC<MatchCardProps> = ({
match={match}
onSubmit={handleFormSubmit}
onCancel={editSheet.close}
loading={end.isPending}
/>
</Sheet>
</Flex>
src/features/bracket/components/match-form.tsx
+11 -3
View File
@@ -10,12 +10,14 @@ interface MatchFormProps {
ot_count: number;
}) => void;
onCancel: () => void;
loading?: boolean;
}
export const MatchForm: React.FC<MatchFormProps> = ({
match,
onSubmit,
onCancel,
loading = false,
}) => {
const form = useForm({
initialValues: {
@@ -35,7 +37,6 @@ export const MatchForm: React.FC<MatchFormProps> = ({
return "At least one team must have 10 cups";
}
// Both teams can't have 10 cups
if (homeCups === 10 && awayCups === 10) {
return "Both teams cannot have 10 cups";
}
@@ -145,8 +146,15 @@ export const MatchForm: React.FC<MatchFormProps> = ({
</Flex>
<Stack mt="md">
<Button type="submit">Update Match</Button>
<Button variant="subtle" color="red" onClick={onCancel}>
<Button type="submit" loading={loading}>
Update Match
</Button>
<Button
variant="subtle"
color="red"
onClick={onCancel}
disabled={loading}
>
Cancel
</Button>
</Stack>
src/features/bracket/components/match-slot.module.css
+16
View File
@@ -0,0 +1,16 @@
.slotEnter {
animation: slot-enter 300ms ease-out;
}
@keyframes slot-enter {
from {
opacity: 0;
transform: translateY(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.slotEnter {
animation: none;
}
}
src/features/bracket/components/match-slot.tsx
+77 -55
View File
@@ -1,8 +1,10 @@
import { Flex, Text } from "@mantine/core";
import React from "react";
import React, { useEffect, useRef, useState } from "react";
import { CrownIcon } from "@phosphor-icons/react";
import { SeedBadge } from "./seed-badge";
import { TeamInfo } from "@/features/teams/types";
import AnimatedScore from "@/features/matches/components/animated-score";
import classes from "./match-slot.module.css";
interface MatchSlotProps {
from?: number;
@@ -22,60 +24,80 @@ export const MatchSlot: React.FC<MatchSlotProps> = ({
cups,
isWinner,
groupLabel
}) => (
<Flex
align="stretch"
style={{
backgroundColor: isWinner ? 'var(--mantine-color-green-light)' : 'transparent',
borderRadius: 'var(--mantine-radius-sm)',
transition: 'background-color 200ms ease',
}}
>
{(seed && seed > 0) ? <SeedBadge seed={seed} /> : undefined}
<Flex p="6px 10px" w='100%' align="center">
<Flex align="center" gap={4} flex={1}>
{team ? (
<>
<Text
size={team.name.length > 12 ? (team.name.length > 18 ? '10px' : '11px') : 'xs'}
truncate
style={{ minWidth: 0, flex: 1, lineHeight: "12px" }}
>
{team.name}
}) => {
const teamId = team?.id;
const previousTeamIdRef = useRef<string | undefined>(teamId);
const [entranceKey, setEntranceKey] = useState(0);
useEffect(() => {
const previousTeamId = previousTeamIdRef.current;
previousTeamIdRef.current = teamId;
if (teamId && previousTeamId !== teamId) {
setEntranceKey((key) => key + 1);
}
}, [teamId]);
return (
<Flex
align="stretch"
style={{
backgroundColor: isWinner ? 'var(--mantine-color-green-light)' : 'transparent',
borderRadius: 'var(--mantine-radius-sm)',
transition: 'background-color 200ms ease',
}}
>
{(seed && seed > 0) ? <SeedBadge seed={seed} /> : undefined}
<Flex p="6px 10px" w='100%' align="center">
<Flex
key={entranceKey}
className={entranceKey > 0 ? classes.slotEnter : undefined}
align="center"
gap={4}
flex={1}
>
{team ? (
<>
<Text
size={team.name.length > 12 ? (team.name.length > 18 ? '10px' : '11px') : 'xs'}
truncate
style={{ minWidth: 0, flex: 1, lineHeight: "12px" }}
>
{team.name}
</Text>
{isWinner && (
<CrownIcon
size={14}
weight="fill"
style={{
color: 'gold',
marginLeft: '2px',
marginTop: '-1px',
filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.3))',
flexShrink: 0
}}
/>
)}
</>
) : groupLabel ? (
<Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
{groupLabel}
</Text>
{isWinner && (
<CrownIcon
size={14}
weight="fill"
style={{
color: 'gold',
marginLeft: '2px',
marginTop: '-1px',
filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.3))',
flexShrink: 0
}}
/>
)}
</>
) : groupLabel ? (
<Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
{groupLabel}
</Text>
) : from ? (
<Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
{from_loser ? "Loser" : "Winner"} of Match {from}
</Text>
) : (
<Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
TBD
</Text>
)}
) : from ? (
<Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
{from_loser ? "Loser" : "Winner"} of Match {from}
</Text>
) : (
<Text c="dimmed" size="xs" truncate style={{ minWidth: 0, flex: 1 }}>
TBD
</Text>
)}
</Flex>
{
cups !== undefined ? (
<AnimatedScore ta='center' w={15} fw={800} ml={4} size="xs" value={cups} />
) : undefined
}
</Flex>
{
cups !== undefined ? (
<Text ta='center' w={15} fw="800" ml={4} size="xs">{cups}</Text>
) : undefined
}
</Flex>
</Flex>
);
);
};
src/features/core/components/back-button.tsx
+5 -4
View File
@@ -1,4 +1,4 @@
import { Box } from "@mantine/core"
import { UnstyledButton } from "@mantine/core"
import { ArrowLeftIcon } from "@phosphor-icons/react"
import { useRouter } from "@tanstack/react-router"
@@ -6,15 +6,16 @@ const BackButton = ({ top=20, left=20 }: { top?: number, left?: number }) => {
const router = useRouter()
return (
<Box
style={{ cursor: 'pointer', zIndex: 1000 }}
<UnstyledButton
aria-label='Go back'
style={{ cursor: 'pointer', zIndex: 1000, display: 'flex' }}
onClick={() => router.history.back()}
pos='absolute'
left={left}
top={top}
>
<ArrowLeftIcon weight='bold' size={20} />
</Box>
</UnstyledButton>
);
}
src/features/core/components/header.tsx
+15 -5
View File
@@ -1,19 +1,29 @@
import { Title, AppShell, Flex, Box, Paper } from "@mantine/core";
import { Title, AppShell, Flex } from "@mantine/core";
import { HeaderConfig } from "../types/header-config";
import BackButton from "./back-button";
interface HeaderProps extends HeaderConfig {}
interface HeaderProps extends HeaderConfig {
elevated?: boolean;
}
const Header = ({ collapsed, title, withBackButton }: HeaderProps) => {
const Header = ({ collapsed, title, withBackButton, elevated }: HeaderProps) => {
return (
<AppShell.Header
id='app-header'
display={collapsed ? 'none' : 'flex'}
style={{ alignItems: 'center', justifyContent: 'center' }}
withBorder={false}
style={{
alignItems: 'center',
justifyContent: 'center',
borderBottom: `1px solid ${elevated ? 'var(--app-shell-border-color, var(--mantine-color-default-border))' : 'transparent'}`,
transition: 'border-color 200ms ease-out',
}}
>
{ withBackButton && <BackButton /> }
<Flex justify='center' px='md' mt={8}>
<Title order={1}>{title?.toLocaleUpperCase()}</Title>
<Title order={1} lts='0.08em' style={{ userSelect: 'none' }}>
{title?.toLocaleUpperCase()}
</Title>
</Flex>
</AppShell.Header>
);
src/features/core/components/layout.tsx
+4 -3
View File
@@ -6,6 +6,7 @@ import Pullable from './pullable';
import useVisualViewportSize from '../hooks/use-visual-viewport-size';
import useRouterConfig from '../hooks/use-router-config';
import Page from '@/components/page';
import './route-transition.css';
const Layout: React.FC<PropsWithChildren> = ({ children }) => {
const { header } = useRouterConfig();
@@ -37,15 +38,15 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
// top: viewport.top
}}
>
<Header {...header} />
<Header {...header} elevated={scrollPosition.y > 2} />
<AppShell.Main
pos='relative'
h='100%'
mah='100%'
pb={{ base: 65, sm: 0 }}
pb={{ base: 'calc(65px + env(safe-area-inset-bottom, 0px))', sm: 0 }}
px={{ base: 0.01, sm: 100, md: 200, lg: 300 }}
maw='100dvw'
style={{ transition: 'none', overflow: 'hidden' }}
style={{ overflow: 'hidden' }}
>
<Pullable scrollPosition={scrollPosition} onScrollPositionChange={setScrollPosition}>
<Page noPadding={!withPadding} fullWidth={fullWidth}>
src/features/core/components/nav-link/nav-link.tsx
+2
View File
@@ -35,6 +35,8 @@ export const NavLink = ({
to={href}
className={styles.navLinkBox}
p={{ base: 0, sm: 8 }}
aria-label={label}
aria-current={isActive ? "page" : undefined}
>
<Flex
direction={{ base: "column", md: "row" }}
src/features/core/components/nav-link/styles.module.css
+21
View File
@@ -2,5 +2,26 @@
text-decoration: none;
border-radius: var(--mantine-radius-md);
color: unset;
min-width: 2.75rem;
min-height: 2.75rem;
width: fit-content;
display: flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
}
.navLinkBox svg,
.navLinkBox p {
transition: color 150ms ease-out;
}
@media (prefers-reduced-motion: no-preference) {
.navLinkBox {
transition: transform 150ms cubic-bezier(0.32, 0.72, 0, 1);
}
.navLinkBox:active {
transform: scale(0.92);
}
}
src/features/core/components/navbar.tsx
+5 -7
View File
@@ -1,4 +1,4 @@
import { AppShell, ScrollArea, Stack, Group, Paper, useMantineColorScheme } from "@mantine/core";
import { AppShell, ScrollArea, Stack, Group, Paper } from "@mantine/core";
import { NavLink } from "./nav-link";
import { useIsMobile } from "@/hooks/use-is-mobile";
import { useAuth } from "@/contexts/auth-context";
@@ -9,18 +9,16 @@ import { useIsPWA } from "@/hooks/use-is-pwa";
const Navbar = () => {
const { user, roles } = useAuth()
const isMobile = useIsMobile();
const { colorScheme } = useMantineColorScheme();
const isPWA = useIsPWA();
const links = useLinks(user?.id, roles);
const isDark = colorScheme === 'dark';
const borderColor = isDark ? 'var(--mantine-color-dimmed)' : 'black';
const boxShadowColor = isDark ? 'var(--mantine-color-dimmed)' : 'black';
// boxShadow: `5px 5px ${boxShadowColor}`, borderColor
const bottomOffset = isPWA
? 'max(env(safe-area-inset-bottom, 0px), 0.5rem)'
: 'env(safe-area-inset-bottom, 0px)';
if (isMobile) return (
<Paper component='nav' role='navigation' withBorder shadow="sm" radius='lg' h='4rem' w='calc(100% - 1rem)' pos='fixed' m='0.5rem' bottom={isPWA ? '1rem' : '0'} style={{ zIndex: 10 }}>
<Paper component='nav' role='navigation' withBorder shadow="sm" radius='lg' h='4rem' w='calc(100% - 1rem)' pos='fixed' m='0.5rem' bottom={bottomOffset} style={{ zIndex: 10 }}>
<Group gap='xs' justify='space-around' h='100%' w='100%' px={{ base: 12, sm: 0 }}>
{links.map((link) => (
<NavLink key={link.href} {...link} />
src/features/core/components/pullable.tsx
+12 -18
View File
@@ -1,7 +1,7 @@
import { ActionIcon, Box, Button, Flex, ScrollArea } from "@mantine/core";
import { Box, Flex, ScrollArea } from "@mantine/core";
import { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from "react";
import useAppShellHeight from "@/hooks/use-appshell-height";
import { ArrowClockwiseIcon, SpinnerIcon } from "@phosphor-icons/react";
import { SpinnerIcon } from "@phosphor-icons/react";
import { useQueryClient } from "@tanstack/react-query";
import useRouterConfig from "../hooks/use-router-config";
import { useLocation } from "@tanstack/react-router";
@@ -13,9 +13,6 @@ interface PullableProps extends PropsWithChildren {
onScrollPositionChange: (position: { x: number, y: number }) => void;
}
/**
* Pullable is a component that allows the user to pull down to refresh the page
*/
const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollPositionChange }) => {
const height = useAppShellHeight();
const [isRefreshing, setIsRefreshing] = useState(false);
@@ -29,16 +26,18 @@ const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollP
const onTrigger = useCallback(async () => {
setIsRefreshing(true);
const minSpinnerDisplay = new Promise((resolve) => setTimeout(resolve, 400));
if (refresh.length > 0) {
// TODO: Remove this after testing - or does the delay help ux?
await new Promise(resolve => setTimeout(resolve, 1000));
refresh.forEach(async (queryKey) => {
const keyArray = Array.isArray(queryKey) ? queryKey : [queryKey];
await queryClient.refetchQueries({ queryKey: keyArray, exact: true });
});
await Promise.all(
refresh.map((queryKey) => {
const keyArray = Array.isArray(queryKey) ? queryKey : [queryKey];
return queryClient.refetchQueries({ queryKey: keyArray, exact: true });
})
);
}
await minSpinnerDisplay;
setIsRefreshing(false);
}, [refresh]);
}, [refresh, queryClient]);
useEffect(() => {
if (!isRefreshing && scrollY > THRESHOLD) {
@@ -85,7 +84,6 @@ const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollP
return () => void ac.abort();
}, []);
// Fix wheel scrolling over child elements
useEffect(() => {
const scrollWrapper = document.getElementById('scroll-wrapper');
if (!scrollWrapper) return;
@@ -96,33 +94,29 @@ const Pullable: React.FC<PullableProps> = ({ children, scrollPosition, onScrollP
const handleWheel = (e: WheelEvent) => {
const target = e.target as HTMLElement;
// Check if the target is inside a nested scrollable container
let element = target;
while (element && element !== viewport) {
const overflow = window.getComputedStyle(element).overflow;
const overflowY = window.getComputedStyle(element).overflowY;
const overflowX = window.getComputedStyle(element).overflowX;
// If we found a scrollable ancestor (not the main viewport), don't interfere
if (
(overflow === 'auto' || overflow === 'scroll' ||
overflowY === 'auto' || overflowY === 'scroll' ||
overflowX === 'auto' || overflowX === 'scroll') &&
element !== viewport
) {
// Check if this element can actually scroll in the wheel direction
const canScrollY = element.scrollHeight > element.clientHeight;
const canScrollX = element.scrollWidth > element.clientWidth;
if ((e.deltaY !== 0 && canScrollY) || (e.deltaX !== 0 && canScrollX)) {
return; // Let the nested scroller handle it
return;
}
}
element = element.parentElement as HTMLElement;
}
// No nested scroller found, scroll the main viewport
viewport.scrollTop += e.deltaY;
viewport.scrollLeft += e.deltaX;
};
src/features/core/components/route-transition.css
+29
View File
@@ -0,0 +1,29 @@
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root) {
animation: flxn-route-fade-out 120ms ease-out both;
}
::view-transition-new(root) {
animation: flxn-route-fade-in 200ms ease-out both;
}
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
animation: none !important;
}
}
@keyframes flxn-route-fade-out {
to {
opacity: 0;
}
}
@keyframes flxn-route-fade-in {
from {
opacity: 0;
}
}
src/features/core/components/settings-button.tsx
+6 -5
View File
@@ -1,4 +1,4 @@
import { Box } from "@mantine/core"
import { UnstyledButton } from "@mantine/core"
import { GearIcon } from "@phosphor-icons/react"
import { useNavigate } from "@tanstack/react-router"
import { memo } from "react";
@@ -13,16 +13,17 @@ const SettingsButton = ({ to }: SettingButtonProps) => {
const navigate = useNavigate();
return (
<Box
style={{ cursor: 'pointer', zIndex: 1000 }}
<UnstyledButton
aria-label='Settings'
style={{ cursor: 'pointer', zIndex: 1000, display: 'flex' }}
onClick={() => navigate({ to })}
pos='absolute'
right={20}
top={6}
>
<GearIcon weight='bold' size={20} />
</Box>
</UnstyledButton>
);
}
export default memo(SettingsButton, (prev, next) => prev.to !== next.to);
export default memo(SettingsButton, (prev, next) => prev.to === next.to);
src/features/login/components/layout.tsx
+10 -3
View File
@@ -1,7 +1,7 @@
import GlitchAvatar from '@/components/glitch-avatar';
import useVisualViewportSize from '@/features/core/hooks/use-visual-viewport-size';
import { useCurrentTournament } from '@/features/tournaments/queries';
import { AppShell, Flex, Paper, em, Title, Stack } from '@mantine/core';
import { AppShell, Flex, Paper, em, Title, Text, Stack } from '@mantine/core';
import { useMediaQuery, useViewportSize } from '@mantine/hooks';
import { TrophyIcon } from '@phosphor-icons/react';
import { PropsWithChildren } from 'react';
@@ -27,7 +27,8 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
style={{ transition: 'padding-top 0.1s ease' }}
>
<Paper
shadow='none'
shadow='md'
withBorder
p='md'
w='100%'
maw='375px'
@@ -37,6 +38,7 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
<GlitchAvatar
name={tournament.name}
contain
frame
src={
tournament.logo
? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
@@ -54,7 +56,12 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
>
<TrophyIcon size={32} />
</GlitchAvatar>
<Title order={1} ta='center'>Welcome to FLXN</Title>
<Stack align='center' gap={2}>
<Title order={1} ta='center'>Welcome to FLXN</Title>
<Text size='sm' c='dimmed' fs='italic' ta='center'>
Amicus meus madidus
</Text>
</Stack>
</Stack>
{children}
</Paper>
src/features/login/components/login-flow.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ const LoginFlow = () => {
}
return <Center>
<Loader color="blue" size="xl" type="dots" />
<Loader size="xl" type="dots" />
</Center>;
};
src/features/login/components/player-prompt/index.tsx
+1
View File
@@ -88,6 +88,7 @@ const PlayerPrompt = () => {
return <>
<UnstyledButton
aria-label="Go back"
onClick={() => setStage(undefined)}
style={{
position: 'absolute',
src/features/matches/components/animated-score.module.css
+20
View File
@@ -0,0 +1,20 @@
.value {
display: inline-block;
}
.pulse {
animation: score-pulse 250ms ease-out;
}
@keyframes score-pulse {
from {
transform: scale(1.3);
color: var(--mantine-color-red-filled);
}
}
@media (prefers-reduced-motion: reduce) {
.pulse {
animation: none;
}
}
src/features/matches/components/animated-score.tsx
+34
View File
@@ -0,0 +1,34 @@
import { Text, TextProps } from "@mantine/core";
import { useEffect, useRef, useState } from "react";
import classes from "./animated-score.module.css";
interface AnimatedScoreProps extends TextProps {
value: number;
}
const AnimatedScore = ({ value, ...textProps }: AnimatedScoreProps) => {
const previousValueRef = useRef<number>(value);
const [pulseKey, setPulseKey] = useState(0);
useEffect(() => {
if (previousValueRef.current !== value) {
previousValueRef.current = value;
setPulseKey((key) => key + 1);
}
}, [value]);
return (
<Text {...textProps}>
<span
key={pulseKey}
className={
pulseKey > 0 ? `${classes.value} ${classes.pulse}` : classes.value
}
>
{value}
</span>
</Text>
);
};
export default AnimatedScore;
src/features/matches/components/match-card.tsx
+7 -8
View File
@@ -8,6 +8,7 @@ import { Suspense } from "react";
import { useSheet } from "@/hooks/use-sheet";
import Sheet from "@/components/sheet/sheet";
import TeamHeadToHeadSheet from "./team-head-to-head-sheet";
import AnimatedScore from "./animated-score";
interface MatchCardProps {
match: Match;
@@ -146,14 +147,13 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
</Text>
))}
</Stack>
<Text
<AnimatedScore
size="xl"
fw={700}
c={"dimmed"}
display={match.status === "ended" ? undefined : "none"}
>
{match.home_cups}
</Text>
value={match.home_cups}
/>
</Group>
<Group justify="space-between" align="center">
@@ -192,14 +192,13 @@ const MatchCard = ({ match, hideH2H = false }: MatchCardProps) => {
</Text>
))}
</Stack>
<Text
<AnimatedScore
size="xl"
fw={700}
c={"dimmed"}
display={match.status === "ended" ? undefined : "none"}
>
{match.away_cups}
</Text>
value={match.away_cups}
/>
</Group>
</Stack>
</Paper>
src/features/players/components/player-stats-table.tsx
+4 -4
View File
@@ -330,7 +330,7 @@ const PlayerStatsTable = ({ viewType = 'all' }: PlayerStatsTableProps) => {
onClick={() => handleSort("mmr")}
style={{ display: "flex", alignItems: "center", gap: 4 }}
>
<Text size="xs" fw={sortConfig.key === "mmr" ? 600 : 400} c={sortConfig.key === "mmr" ? "dark" : "dimmed"}>
<Text size="xs" fw={sortConfig.key === "mmr" ? 600 : 400} c={sortConfig.key === "mmr" ? "var(--mantine-color-text)" : "dimmed"}>
MMR
</Text>
{getSortIcon("mmr")}
@@ -340,7 +340,7 @@ const PlayerStatsTable = ({ viewType = 'all' }: PlayerStatsTableProps) => {
onClick={() => handleSort("wins")}
style={{ display: "flex", alignItems: "center", gap: 4 }}
>
<Text size="xs" fw={sortConfig.key === "wins" ? 600 : 400} c={sortConfig.key === "wins" ? "dark" : "dimmed"}>
<Text size="xs" fw={sortConfig.key === "wins" ? 600 : 400} c={sortConfig.key === "wins" ? "var(--mantine-color-text)" : "dimmed"}>
Wins
</Text>
{getSortIcon("wins")}
@@ -350,14 +350,14 @@ const PlayerStatsTable = ({ viewType = 'all' }: PlayerStatsTableProps) => {
onClick={() => handleSort("matches")}
style={{ display: "flex", alignItems: "center", gap: 4 }}
>
<Text size="xs" fw={sortConfig.key === "matches" ? 600 : 400} c={sortConfig.key === "matches" ? "dark" : "dimmed"}>
<Text size="xs" fw={sortConfig.key === "matches" ? 600 : 400} c={sortConfig.key === "matches" ? "var(--mantine-color-text)" : "dimmed"}>
Matches
</Text>
{getSortIcon("matches")}
</UnstyledButton>
<Popover position="bottom-end" withArrow shadow="md">
<Popover.Target>
<ActionIcon variant="subtle" size="sm">
<ActionIcon variant="subtle" size="sm" aria-label="Stat abbreviations and MMR info">
<InfoIcon size={14} />
</ActionIcon>
</Popover.Target>
src/features/players/components/profile/index.tsx
+3 -3
View File
@@ -30,7 +30,7 @@ const StatsWithFilter = ({ id }: { id: string }) => {
</Group>
</Group>
<Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
<Suspense key={deferredViewType} fallback={<StatsSkeleton />}>
<Suspense fallback={<StatsSkeleton />}>
<StatsContent id={id} viewType={deferredViewType} />
</Suspense>
</Box>
@@ -39,8 +39,8 @@ const StatsWithFilter = ({ id }: { id: string }) => {
};
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 { data: stats } = usePlayerStats(id, viewType);
return <StatsOverview statsData={stats} />;
};
const Profile = ({ id }: ProfileProps) => {
src/features/players/components/profile/skeleton.tsx
+57 -13
View File
@@ -1,31 +1,75 @@
import { Box, Flex, Loader } from "@mantine/core";
import Header from "./header";
import { Box, Divider, Group, Paper, Skeleton, Stack } from "@mantine/core";
import SwipeableTabs from "@/components/swipeable-tabs";
import { usePlayer, usePlayerMatches, usePlayerStats } from "../../queries";
import TeamList from "@/features/teams/components/team-list";
import StatsOverview, { StatsSkeleton } from "@/components/stats-overview";
import MatchList from "@/features/matches/components/match-list";
import { StatsSkeleton } from "@/components/stats-overview";
import BadgeShowcaseSkeleton from "@/features/badges/components/badge-showcase-skeleton";
import HeaderSkeleton from "./header-skeleton";
const SkeletonLoader = () => (
<Flex h="30vh" w="100%" align="center" justify="center">
<Loader />
</Flex>
)
const MatchCardSkeleton = ({ opacity = 1 }: { opacity?: number }) => (
<Paper px="md" py="md" withBorder radius="md" style={{ opacity }}>
<Stack gap="sm">
<Skeleton height={12} width="55%" radius="sm" />
{[0, 1].map((row) => (
<Group key={row} justify="space-between" align="center" wrap="nowrap">
<Group gap="sm" wrap="nowrap" style={{ flex: 1 }}>
<Skeleton height={40} width={40} radius="sm" />
<Skeleton height={14} width="40%" radius="sm" />
</Group>
<Skeleton height={12} width={64} radius="sm" />
</Group>
))}
</Stack>
</Paper>
);
const MatchListSkeleton = ({ count = 4 }: { count?: number }) => (
<Stack p="md" gap="sm">
{Array.from({ length: count }).map((_, index) => (
<MatchCardSkeleton
key={`match-skeleton-${index}`}
opacity={Math.max(1 - index * 0.15, 0.4)}
/>
))}
</Stack>
);
const OverviewSkeleton = () => (
<>
<Stack px="md">
<Group justify="space-between" align="center">
<Skeleton height={16} width={70} radius="sm" />
<Skeleton height={14} width={100} radius="sm" />
</Group>
<BadgeShowcaseSkeleton />
</Stack>
<Divider my="md" />
<Stack>
<Group gap="xs" px="md" justify="space-between" align="center">
<Skeleton height={16} width={80} radius="sm" />
<Group gap="xs">
<Skeleton height={22} width={40} radius="xl" />
<Skeleton height={22} width={64} radius="xl" />
<Skeleton height={22} width={62} radius="xl" />
</Group>
</Group>
<StatsSkeleton />
</Stack>
</>
);
const ProfileSkeleton = () => {
const tabs = [
{
label: "Overview",
content: <StatsSkeleton />,
content: <OverviewSkeleton />,
},
{
label: "Matches",
content: <SkeletonLoader />,
content: <MatchListSkeleton />,
},
{
label: "Teams",
content: <SkeletonLoader />,
content: <TeamList teams={[]} loading />,
},
];
src/features/reactions/components/emoji-bar.module.css
+20
View File
@@ -0,0 +1,20 @@
.count {
display: inline-block;
}
.countTick {
animation: count-tick 180ms ease-out;
}
@keyframes count-tick {
from {
opacity: 0;
transform: translateY(-0.35em);
}
}
@media (prefers-reduced-motion: reduce) {
.countTick {
animation: none;
}
}
src/features/reactions/components/emoji-bar.tsx
+121 -81
View File
@@ -2,31 +2,64 @@ import {
Group,
Button,
Text,
TextProps,
Stack,
ScrollArea,
Paper,
} from "@mantine/core";
import { useDisclosure } from "@mantine/hooks";
import { useState, useRef, useCallback } from "react";
import { useState, useRef, useEffect, useCallback } from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import Sheet from "@/components/sheet/sheet";
import PlayerList from "@/features/players/components/player-list";
import EmojiPicker from "./emoji-picker";
import { useMatchReactions, useToggleMatchReaction } from "../queries";
import { useAuth } from "@/contexts/auth-context";
import { Reaction } from "@/features/matches/server";
import classes from "./emoji-bar.module.css";
interface EmojiBarProps {
matchId: string;
onReactionPress?: (emoji: string) => void;
}
const EASE: [number, number, number, number] = [0.32, 0.72, 0, 1];
interface TickingCountProps extends TextProps {
value: number;
}
const TickingCount = ({ value, ...textProps }: TickingCountProps) => {
const mountedRef = useRef(false);
useEffect(() => {
mountedRef.current = true;
}, []);
return (
<Text component="span" {...textProps}>
<span
key={value}
className={
mountedRef.current
? `${classes.count} ${classes.countTick}`
: classes.count
}
>
{value}
</span>
</Text>
);
};
const EmojiBar = ({
matchId,
onReactionPress,
}: EmojiBarProps) => {
const { user } = useAuth();
const { data: reactions } = useMatchReactions(matchId);
const toggleReaction = useToggleMatchReaction(matchId);
const toggleReaction = useToggleMatchReaction(matchId, user);
const reduceMotion = useReducedMotion();
const [opened, { open, close }] = useDisclosure(false);
const [selectedEmoji, setSelectedEmoji] = useState<string | null>(null);
@@ -71,87 +104,96 @@ const EmojiBar = ({
const groupedCount = groupedReactions.reduce((sum, r) => sum + r.count, 0);
const userHasReactedToGrouped = groupedReactions.some(r => hasReacted(r));
const chipMotionProps = {
layout: !reduceMotion,
initial: reduceMotion ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 },
animate: { opacity: 1, scale: 1 },
exit: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.8 },
transition: { duration: reduceMotion ? 0 : 0.18, ease: EASE },
};
return (
<>
<Group gap="xs" wrap="wrap" justify="space-between">
<Group gap="xs" wrap="wrap">
{visibleReactions.map((reaction) => (
<Button
key={reaction.emoji}
variant={"light"}
bd={hasReacted(reaction) ? "1px solid var(--mantine-primary-color-filled)" : undefined}
size="compact-xs"
radius="xl"
onMouseDown={() => handleLongPressStart(reaction.emoji)}
onMouseUp={handleLongPressEnd}
onMouseLeave={handleLongPressEnd}
onTouchStart={() => handleLongPressStart(reaction.emoji)}
onTouchEnd={handleLongPressEnd}
onClick={() => handleReactionClick(reaction.emoji)}
style={{
userSelect: "none",
WebkitUserSelect: "none",
MozUserSelect: "none",
msUserSelect: "none",
}}
>
<Group gap={2} align="center">
<Text size="xs" style={{ lineHeight: 1 }}>
{reaction.emoji}
</Text>
<Text size="xs" fw={600}>
{reaction.count}
</Text>
</Group>
</Button>
))}
{hasGrouped && (
<Button
variant={"light"}
bd={userHasReactedToGrouped ? "1px solid var(--mantine-primary-color-filled)" : undefined}
size="compact-xs"
radius="xl"
onMouseDown={() => handleLongPressStart(groupedReactions[0]?.emoji || "")}
onMouseUp={handleLongPressEnd}
onMouseLeave={handleLongPressEnd}
onTouchStart={() => handleLongPressStart(groupedReactions[0]?.emoji || "")}
onTouchEnd={handleLongPressEnd}
onClick={() => {
setSelectedEmoji(groupedReactions[0]?.emoji || "");
open();
}}
style={{
userSelect: "none",
WebkitUserSelect: "none",
MozUserSelect: "none",
msUserSelect: "none",
position: "relative",
}}
>
<Group gap={2} align="center">
<div style={{
display: "flex",
gap: "1px",
alignItems: "center",
fontSize: "10px",
lineHeight: 1
}}>
{groupedReactions.slice(0, 2).map((reaction) => (
<span key={reaction.emoji}>{reaction.emoji}</span>
))}
{groupedReactions.length > 2 && (
<Text size="8px" fw={600} c="dimmed">
+{groupedReactions.length - 2}
<AnimatePresence initial={false} mode="popLayout">
{visibleReactions.map((reaction) => (
<motion.div key={reaction.emoji} {...chipMotionProps}>
<Button
variant={"light"}
bd={hasReacted(reaction) ? "1px solid var(--mantine-primary-color-filled)" : undefined}
size="compact-xs"
radius="xl"
onMouseDown={() => handleLongPressStart(reaction.emoji)}
onMouseUp={handleLongPressEnd}
onMouseLeave={handleLongPressEnd}
onTouchStart={() => handleLongPressStart(reaction.emoji)}
onTouchEnd={handleLongPressEnd}
onClick={() => handleReactionClick(reaction.emoji)}
style={{
userSelect: "none",
WebkitUserSelect: "none",
MozUserSelect: "none",
msUserSelect: "none",
}}
>
<Group gap={2} align="center">
<Text size="xs" style={{ lineHeight: 1 }}>
{reaction.emoji}
</Text>
)}
</div>
<Text size="xs" fw={600}>
{groupedCount}
</Text>
</Group>
</Button>
)}
<TickingCount size="xs" fw={600} value={reaction.count} />
</Group>
</Button>
</motion.div>
))}
{hasGrouped && (
<motion.div key="grouped-reactions" {...chipMotionProps}>
<Button
variant={"light"}
bd={userHasReactedToGrouped ? "1px solid var(--mantine-primary-color-filled)" : undefined}
size="compact-xs"
radius="xl"
onMouseDown={() => handleLongPressStart(groupedReactions[0]?.emoji || "")}
onMouseUp={handleLongPressEnd}
onMouseLeave={handleLongPressEnd}
onTouchStart={() => handleLongPressStart(groupedReactions[0]?.emoji || "")}
onTouchEnd={handleLongPressEnd}
onClick={() => {
setSelectedEmoji(groupedReactions[0]?.emoji || "");
open();
}}
style={{
userSelect: "none",
WebkitUserSelect: "none",
MozUserSelect: "none",
msUserSelect: "none",
position: "relative",
}}
>
<Group gap={2} align="center">
<div style={{
display: "flex",
gap: "1px",
alignItems: "center",
fontSize: "10px",
lineHeight: 1
}}>
{groupedReactions.slice(0, 2).map((reaction) => (
<span key={reaction.emoji}>{reaction.emoji}</span>
))}
{groupedReactions.length > 2 && (
<Text size="8px" fw={600} c="dimmed">
+{groupedReactions.length - 2}
</Text>
)}
</div>
<TickingCount size="xs" fw={600} value={groupedCount} />
</Group>
</Button>
</motion.div>
)}
</AnimatePresence>
</Group>
<EmojiPicker
onSelect={onReactionPress || ((emoji) => toggleReaction.mutate({ data: { matchId, emoji } }))}
@@ -175,9 +217,7 @@ const EmojiBar = ({
>
<Group gap={4} align="center">
<Text size="sm">{reaction.emoji}</Text>
<Text size="xs" fw={600}>
{reaction.count}
</Text>
<TickingCount size="xs" fw={600} value={reaction.count} />
</Group>
</Button>
))}
src/features/reactions/queries.ts
+61 -11
View File
@@ -1,6 +1,13 @@
import { useServerMutation, useServerSuspenseQuery } from "@/lib/tanstack-query/hooks";
import { getMatchReactions, toggleMatchReaction } from "@/features/matches/server";
import { useQueryClient } from "@tanstack/react-query";
import {
useOptimisticMutation,
useServerSuspenseQuery,
} from "@/lib/tanstack-query/hooks";
import {
getMatchReactions,
toggleMatchReaction,
Reaction,
} from "@/features/matches/server";
import { PlayerInfo } from "@/features/players/types";
export const reactionKeys = {
match: (matchId: string) => ['reactions', 'match', matchId] as const,
@@ -16,15 +23,58 @@ export const reactionQueries = {
export const useMatchReactions = (matchId: string) =>
useServerSuspenseQuery(reactionQueries.match(matchId));
export const useToggleMatchReaction = (matchId: string) => {
const queryClient = useQueryClient();
const toggleReactionInList = (
reactions: Reaction[],
emoji: string,
user: PlayerInfo
): Reaction[] => {
const existing = reactions.find((reaction) => reaction.emoji === emoji);
const hasReacted =
existing?.players.some((player) => player.id === user.id) ?? false;
return useServerMutation({
if (hasReacted) {
return reactions
.map((reaction) =>
reaction.emoji === emoji
? {
...reaction,
count: reaction.count - 1,
players: reaction.players.filter(
(player) => player.id !== user.id
),
}
: reaction
)
.filter((reaction) => reaction.count > 0);
}
const optimisticPlayer: PlayerInfo = {
id: user.id,
first_name: user.first_name,
last_name: user.last_name,
};
if (existing) {
return reactions.map((reaction) =>
reaction.emoji === emoji
? {
...reaction,
count: reaction.count + 1,
players: [...reaction.players, optimisticPlayer],
}
: reaction
);
}
return [...reactions, { emoji, count: 1, players: [optimisticPlayer] }];
};
export const useToggleMatchReaction = (matchId: string, user?: PlayerInfo) =>
useOptimisticMutation({
mutationFn: toggleMatchReaction,
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: reactionKeys.match(matchId)
});
queryKey: reactionKeys.match(matchId),
optimisticUpdate: (oldData: Reaction[] | undefined, variables) => {
if (!oldData || !user) return oldData;
return toggleReactionInList(oldData, variables.data.emoji, user);
},
});
};
src/features/teams/components/team-profile/index.tsx
+13 -4
View File
@@ -2,10 +2,11 @@ import { Box, Divider, Text, Stack } from "@mantine/core";
import Header from "./header";
import SwipeableTabs from "@/components/swipeable-tabs";
import TournamentList from "@/features/tournaments/components/tournament-list";
import StatsOverview from "@/components/stats-overview";
import StatsOverview, { StatsSkeleton } from "@/components/stats-overview";
import { useTeam, useTeamMatches, useTeamStats } from "../../queries";
import MatchList from "@/features/matches/components/match-list";
import PlayerList from "@/features/players/components/player-list";
import { MatchListSkeleton } from "./skeleton";
interface ProfileProps {
id: string;
@@ -13,7 +14,7 @@ interface ProfileProps {
const TeamProfile = ({ id }: ProfileProps) => {
const { data: team } = useTeam(id);
const { data: matches } = useTeamMatches(id);
const { data: matches, isLoading: matchesLoading } = useTeamMatches(id);
const { data: stats, isLoading: statsLoading, error: statsError } = useTeamStats(id);
if (!team) return <Text p="md">Team not found</Text>;
@@ -28,13 +29,21 @@ const TeamProfile = ({ id }: ProfileProps) => {
<Divider my="md" />
<Stack>
<Text px="md" size="md" fw={700}>Statistics</Text>
<StatsOverview statsData={statsError ? null : stats || null} isLoading={statsLoading} />
{statsLoading ? (
<StatsSkeleton />
) : (
<StatsOverview statsData={statsError ? null : stats || null} />
)}
</Stack>
</>,
},
{
label: "Matches",
content: <MatchList matches={matches || []} />,
content: matchesLoading ? (
<MatchListSkeleton />
) : (
<MatchList matches={matches || []} />
),
},
{
label: "Tournaments",
src/features/teams/components/team-profile/skeleton.tsx
+63 -9
View File
@@ -1,26 +1,80 @@
import { Box, Flex, Loader } from "@mantine/core";
import { Box, Divider, Group, List, ListItem, Paper, Skeleton, Stack } from "@mantine/core";
import SwipeableTabs from "@/components/swipeable-tabs";
import TournamentList from "@/features/tournaments/components/tournament-list";
import { StatsSkeleton } from "@/components/stats-overview";
import HeaderSkeleton from "./header-skeleton";
const SkeletonLoader = () => (
<Flex h="30vh" w="100%" align="center" justify="center">
<Loader />
</Flex>
)
const MatchCardSkeleton = ({ opacity = 1 }: { opacity?: number }) => (
<Paper px="md" py="md" withBorder radius="md" style={{ opacity }}>
<Stack gap="sm">
<Skeleton height={12} width="55%" radius="sm" />
{[0, 1].map((row) => (
<Group key={row} justify="space-between" align="center" wrap="nowrap">
<Group gap="sm" wrap="nowrap" style={{ flex: 1 }}>
<Skeleton height={40} width={40} radius="sm" />
<Skeleton height={14} width="40%" radius="sm" />
</Group>
<Skeleton height={12} width={64} radius="sm" />
</Group>
))}
</Stack>
</Paper>
);
export const MatchListSkeleton = ({ count = 4 }: { count?: number }) => (
<Stack p="md" gap="sm">
{Array.from({ length: count }).map((_, index) => (
<MatchCardSkeleton
key={`match-skeleton-${index}`}
opacity={Math.max(1 - index * 0.15, 0.4)}
/>
))}
</Stack>
);
const PlayerListSkeleton = ({ count = 2 }: { count?: number }) => (
<List>
{Array.from({ length: count }).map((_, index) => (
<ListItem
py="xs"
key={`player-skeleton-${index}`}
icon={<Skeleton circle height={40} width={40} />}
>
<Skeleton height={16} width={180} radius="sm" />
</ListItem>
))}
</List>
);
export const OverviewSkeleton = () => (
<>
<Stack px="md">
<Skeleton height={16} width={70} radius="sm" />
<PlayerListSkeleton />
</Stack>
<Divider my="md" />
<Stack>
<Box px="md">
<Skeleton height={16} width={80} radius="sm" />
</Box>
<StatsSkeleton />
</Stack>
</>
);
const ProfileSkeleton = () => {
const tabs = [
{
label: "Overview",
content: <SkeletonLoader />,
content: <OverviewSkeleton />,
},
{
label: "Matches",
content: <SkeletonLoader />,
content: <MatchListSkeleton />,
},
{
label: "Tournaments",
content: <SkeletonLoader />,
content: <TournamentList tournaments={[]} loading />,
},
];
src/features/tournaments/components/group-match-card.tsx
+10 -8
View File
@@ -10,6 +10,7 @@ import { tournamentKeys } from "@/features/tournaments/queries";
import { useQueryClient } from "@tanstack/react-query";
import { MatchForm } from "@/features/bracket/components/match-form";
import TeamAvatar from "@/components/team-avatar";
import AnimatedScore from "@/features/matches/components/animated-score";
interface GroupMatchCardProps {
match: Match;
@@ -104,14 +105,13 @@ const GroupMatchCard: React.FC<GroupMatchCardProps> = ({ match, showControls })
</Text>
</Group>
{isEnded && match.home_cups !== undefined && (
<Text
<AnimatedScore
value={match.home_cups}
size="xl"
fw={700}
c={homeWon ? "green" : "dimmed"}
style={{ minWidth: 32, textAlign: 'center' }}
>
{match.home_cups}
</Text>
/>
)}
</Group>
@@ -135,14 +135,13 @@ const GroupMatchCard: React.FC<GroupMatchCardProps> = ({ match, showControls })
</Text>
</Group>
{isEnded && match.away_cups !== undefined && (
<Text
<AnimatedScore
value={match.away_cups}
size="xl"
fw={700}
c={awayWon ? "green" : "dimmed"}
style={{ minWidth: 32, textAlign: 'center' }}
>
{match.away_cups}
</Text>
/>
)}
</Group>
</Stack>
@@ -152,6 +151,7 @@ const GroupMatchCard: React.FC<GroupMatchCardProps> = ({ match, showControls })
{showStartButton && (
<ActionIcon
color="green"
aria-label="Start match"
onClick={handleStartMatch}
loading={start.isPending}
size="md"
@@ -170,6 +170,7 @@ const GroupMatchCard: React.FC<GroupMatchCardProps> = ({ match, showControls })
{showEditButton && (
<ActionIcon
color="blue"
aria-label="Edit match score"
onClick={editSheet.open}
size="md"
h="100%"
@@ -191,6 +192,7 @@ const GroupMatchCard: React.FC<GroupMatchCardProps> = ({ match, showControls })
match={match}
onSubmit={handleFormSubmit}
onCancel={editSheet.close}
loading={end.isPending}
/>
</Sheet>
)}
src/features/tournaments/components/group-stage-view.tsx
+5 -1
View File
@@ -367,7 +367,11 @@ const GroupStageView: React.FC<GroupStageViewProps> = ({
<Text fw={600} size="sm">
Standings ({standings.length})
</Text>
<ActionIcon variant="subtle" size="sm">
<ActionIcon
variant="subtle"
size="sm"
aria-label={expandedTeams[group.id] ? "Collapse standings" : "Expand standings"}
>
{expandedTeams[group.id] ? <CaretCircleUpIcon size={16} /> : <CaretCircleDownIcon size={16} />}
</ActionIcon>
</MantineGroup>
src/features/tournaments/components/podium.tsx
+125 -81
View File
@@ -1,101 +1,145 @@
import { Stack, Group, Text, ThemeIcon, Box, Center } from "@mantine/core";
import { Stack, Group, Text, ThemeIcon } from "@mantine/core";
import { CrownIcon, MedalIcon } from "@phosphor-icons/react";
import { TeamInfo } from "@/features/teams/types";
import { Tournament } from "../types";
interface PodiumProps {
tournament: Tournament;
}
type PodiumTier = "first" | "second" | "third";
const tierStyles: Record<PodiumTier, React.CSSProperties> = {
first: {
background:
"light-dark(color-mix(in srgb, var(--mantine-color-yellow-4) 10%, var(--mantine-color-white)), color-mix(in srgb, var(--mantine-color-yellow-8) 16%, var(--mantine-color-dark-6)))",
border:
"1px solid light-dark(color-mix(in srgb, var(--mantine-color-yellow-6) 45%, var(--mantine-color-gray-3)), color-mix(in srgb, var(--mantine-color-yellow-6) 35%, var(--mantine-color-dark-4)))",
borderRadius: "var(--mantine-radius-md)",
boxShadow: "var(--mantine-shadow-md)",
},
second: {
background:
"light-dark(color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-white)), color-mix(in srgb, var(--mantine-color-gray-5) 10%, var(--mantine-color-dark-6)))",
border:
"1px solid light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4))",
borderRadius: "var(--mantine-radius-md)",
boxShadow: "var(--mantine-shadow-xs)",
},
third: {
background:
"light-dark(color-mix(in srgb, var(--mantine-color-orange-5) 8%, var(--mantine-color-white)), color-mix(in srgb, var(--mantine-color-orange-9) 14%, var(--mantine-color-dark-6)))",
border:
"1px solid light-dark(color-mix(in srgb, var(--mantine-color-orange-6) 35%, var(--mantine-color-gray-3)), color-mix(in srgb, var(--mantine-color-orange-7) 30%, var(--mantine-color-dark-4)))",
borderRadius: "var(--mantine-radius-md)",
boxShadow: "var(--mantine-shadow-xs)",
},
};
const tierConfig: Record<
PodiumTier,
{
color: string;
label: string;
labelColor: string;
icon: React.ReactNode;
iconSize: "xl" | "lg";
padding: "md" | "xs";
nameSize: "md" | "sm";
}
> = {
first: {
color: "yellow",
label: "Champions",
labelColor:
"light-dark(var(--mantine-color-yellow-8), var(--mantine-color-yellow-4))",
icon: <CrownIcon size={24} />,
iconSize: "xl",
padding: "md",
nameSize: "md",
},
second: {
color: "gray",
label: "2nd place",
labelColor:
"light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-4))",
icon: <MedalIcon size={20} />,
iconSize: "lg",
padding: "xs",
nameSize: "sm",
},
third: {
color: "orange",
label: "3rd place",
labelColor:
"light-dark(var(--mantine-color-orange-8), var(--mantine-color-orange-4))",
icon: <MedalIcon size={18} />,
iconSize: "lg",
padding: "xs",
nameSize: "sm",
},
};
const PodiumRow = ({ team, tier }: { team: TeamInfo; tier: PodiumTier }) => {
const config = tierConfig[tier];
return (
<Group gap="md" p={config.padding} style={tierStyles[tier]}>
<ThemeIcon
size={config.iconSize}
color={config.color}
variant="light"
radius="xl"
>
{config.icon}
</ThemeIcon>
<Stack gap={4} style={{ flex: 1 }}>
<Text size={config.nameSize} fw={tier === "first" ? 700 : 600}>
{team.name}
</Text>
<Group gap="xs">
{team.players?.map((player) => (
<Text
key={player.id}
size={tier === "first" ? "sm" : "xs"}
c="dimmed"
>
{player.first_name} {player.last_name}
</Text>
))}
</Group>
</Stack>
<Text
size="10px"
fw={700}
tt="uppercase"
style={{
letterSpacing: "0.08em",
alignSelf: "flex-start",
color: config.labelColor,
}}
mt={4}
mr={4}
>
{config.label}
</Text>
</Group>
);
};
export const Podium = ({ tournament }: PodiumProps) => {
if (!tournament.first_place) return;
return (
<Stack gap="xs" px="md">
{tournament.first_place && (
<Group
gap="md"
p="md"
style={{
backgroundColor: 'var(--mantine-color-yellow-light)',
borderRadius: 'var(--mantine-radius-md)',
border: '3px solid var(--mantine-color-yellow-outline)',
boxShadow: 'var(--mantine-shadow-md)',
}}
>
<ThemeIcon size="xl" color="yellow" variant="light" radius="xl">
<CrownIcon size={24} />
</ThemeIcon>
<Stack gap={4} style={{ flex: 1 }}>
<Text size="md" fw={600}>
{tournament.first_place.name}
</Text>
<Group gap="xs">
{tournament.first_place.players?.map((player) => (
<Text key={player.id} size="sm" c="dimmed">
{player.first_name} {player.last_name}
</Text>
))}
</Group>
</Stack>
</Group>
<PodiumRow team={tournament.first_place} tier="first" />
)}
{tournament.second_place && (
<Group
gap="md"
p="xs"
style={{
backgroundColor: 'var(--mantine-color-default)',
borderRadius: 'var(--mantine-radius-md)',
border: '2px solid var(--mantine-color-default-border)',
boxShadow: 'var(--mantine-shadow-sm)',
}}
>
<ThemeIcon size="lg" color="gray" variant="light" radius="xl">
<MedalIcon size={20} />
</ThemeIcon>
<Stack gap={4} style={{ flex: 1 }}>
<Text size="sm" fw={600}>
{tournament.second_place.name}
</Text>
<Group gap="xs">
{tournament.second_place.players?.map((player) => (
<Text key={player.id} size="xs" c="dimmed">
{player.first_name} {player.last_name}
</Text>
))}
</Group>
</Stack>
</Group>
<PodiumRow team={tournament.second_place} tier="second" />
)}
{tournament.third_place && (
<Group
gap="md"
p="xs"
style={{
backgroundColor: 'var(--mantine-color-orange-light)',
borderRadius: 'var(--mantine-radius-md)',
border: '2px solid var(--mantine-color-orange-outline)',
boxShadow: 'var(--mantine-shadow-sm)',
}}
>
<ThemeIcon size="lg" color="orange" variant="light" radius="xl">
<MedalIcon size={18} />
</ThemeIcon>
<Stack gap={4} style={{ flex: 1 }}>
<Text size="sm" fw={600}>
{tournament.third_place.name}
</Text>
<Group gap="xs">
{tournament.third_place.players?.map((player) => (
<Text key={player.id} size="xs" c="dimmed">
{player.first_name} {player.last_name}
</Text>
))}
</Group>
</Stack>
</Group>
<PodiumRow team={tournament.third_place} tier="third" />
)}
</Stack>
);
src/features/tournaments/components/profile/skeleton.tsx
+72 -9
View File
@@ -1,26 +1,89 @@
import { Box, Flex, Loader } from "@mantine/core";
import { Box, Divider, Group, Paper, Skeleton, Stack } from "@mantine/core";
import SwipeableTabs from "@/components/swipeable-tabs";
import TeamList from "@/features/teams/components/team-list";
import HeaderSkeleton from "./header-skeleton";
const SkeletonLoader = () => (
<Flex h="30vh" w="100%" align="center" justify="center">
<Loader />
</Flex>
)
const MatchCardSkeleton = ({ opacity = 1 }: { opacity?: number }) => (
<Paper px="md" py="md" withBorder radius="md" style={{ opacity }}>
<Stack gap="sm">
<Skeleton height={12} width="55%" radius="sm" />
{[0, 1].map((row) => (
<Group key={row} justify="space-between" align="center" wrap="nowrap">
<Group gap="sm" wrap="nowrap" style={{ flex: 1 }}>
<Skeleton height={40} width={40} radius="sm" />
<Skeleton height={14} width="40%" radius="sm" />
</Group>
<Skeleton height={12} width={64} radius="sm" />
</Group>
))}
</Stack>
</Paper>
);
const MatchListSkeleton = ({ count = 4 }: { count?: number }) => (
<Stack p="md" gap="sm">
{Array.from({ length: count }).map((_, index) => (
<MatchCardSkeleton
key={`match-skeleton-${index}`}
opacity={Math.max(1 - index * 0.15, 0.4)}
/>
))}
</Stack>
);
const ResultRowSkeleton = ({ opacity = 1 }: { opacity?: number }) => (
<Box p="md" style={{ opacity }}>
<Group gap="sm" align="center" wrap="nowrap">
<Skeleton height={40} width={40} radius="sm" />
<Stack gap={8} style={{ flex: 1 }}>
<Skeleton height={14} width="45%" radius="sm" />
<Group gap="md" wrap="nowrap">
{Array.from({ length: 6 }).map((_, index) => (
<Skeleton key={`result-stat-${index}`} height={20} width={22} radius="sm" />
))}
</Group>
</Stack>
</Group>
</Box>
);
const OverviewSkeleton = () => (
<Stack gap="md">
<Box>
<Group p="md" wrap="nowrap" w="100%">
<Skeleton height={20} width={20} radius="sm" />
<Skeleton height={16} width={110} radius="sm" />
<Skeleton ml="auto" height={20} width={20} radius="sm" />
</Group>
<Divider />
</Box>
<Stack gap={0}>
<Box px="md" pb="xs">
<Skeleton height={18} width={70} radius="sm" />
</Box>
{Array.from({ length: 4 }).map((_, index) => (
<Box key={`result-row-${index}`}>
<ResultRowSkeleton opacity={Math.max(1 - index * 0.15, 0.4)} />
{index < 3 && <Divider />}
</Box>
))}
</Stack>
</Stack>
);
const ProfileSkeleton = () => {
const tabs = [
{
label: "Overview",
content: <SkeletonLoader />,
content: <OverviewSkeleton />,
},
{
label: "Matches",
content: <SkeletonLoader />,
content: <MatchListSkeleton />,
},
{
label: "Teams",
content: <SkeletonLoader />,
content: <TeamList teams={[]} loading />,
},
];
src/features/tournaments/components/tournament-card-list.tsx
+13 -4
View File
@@ -2,10 +2,11 @@ import { useAuth } from "@/contexts/auth-context";
import { useTournaments } from "../queries";
import { useSheet } from "@/hooks/use-sheet";
import { Button, Stack } from "@mantine/core";
import { PlusIcon } from "@phosphor-icons/react";
import { PlusIcon, TrophyIcon } from "@phosphor-icons/react";
import Sheet from "@/components/sheet/sheet";
import TournamentForm from "./tournament-form";
import { TournamentCard } from "./tournament-card";
import EmptyState from "@/components/empty-state";
const TournamentCardList = () => {
const { data: tournaments } = useTournaments();
@@ -27,9 +28,17 @@ const TournamentCardList = () => {
</Sheet>
</>
) : null}
{tournaments?.map((tournament: any) => (
<TournamentCard key={tournament.id} tournament={tournament} />
))}
{tournaments && tournaments.length > 0 ? (
tournaments.map((tournament: any) => (
<TournamentCard key={tournament.id} tournament={tournament} />
))
) : (
<EmptyState
icon={<TrophyIcon size={32} />}
title="No Tournaments Yet"
description="The cups are racked and waiting. Check back soon."
/>
)}
</Stack>
);
};
src/features/tournaments/components/tournament-card.tsx
+25 -4
View File
@@ -20,6 +20,27 @@ interface TournamentCardProps {
tournament: TournamentInfo;
}
const tournamentCardCss = `
.flxn-tournament-card {
transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
@media (hover: hover) {
.flxn-tournament-card.flxn-tournament-card:hover {
border-color: color-mix(in srgb, var(--mantine-primary-color-filled) 40%, var(--mantine-color-default-border));
box-shadow: var(--mantine-shadow-sm);
}
}
.flxn-tournament-card.flxn-tournament-card:active {
border-color: color-mix(in srgb, var(--mantine-primary-color-filled) 55%, var(--mantine-color-default-border));
box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
.flxn-tournament-card {
transition: none;
}
}
`;
export const TournamentCard = ({ tournament }: TournamentCardProps) => {
const navigate = useNavigate();
@@ -29,15 +50,15 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}
style={{ borderRadius: "var(--mantine-radius-md)" }}
>
<style href="flxn-tournament-card" precedence="medium">
{tournamentCardCss}
</style>
<Card
withBorder
radius="md"
p="lg"
w="100%"
style={{
transition: "all 0.15s ease",
border: "1px solid var(--mantine-color-default-border)",
}}
className="flxn-tournament-card"
>
<Group justify="space-between" align="center">
<Group gap="md" align="center">
src/features/tournaments/components/tournament-list.tsx
+3 -4
View File
@@ -2,7 +2,7 @@ import { List, ListItem, Divider, Skeleton, Text, Group, Box, ThemeIcon, Stack }
import { useNavigate } from "@tanstack/react-router";
import Avatar from "@/components/avatar";
import { TournamentInfo } from "../types";
import { useCallback } from "react";
import { Fragment, useCallback } from "react";
import React from "react";
import { TrophyIcon, CalendarIcon, MapPinIcon } from "@phosphor-icons/react";
@@ -99,9 +99,8 @@ const TournamentList = ({ tournaments, loading = false }: TournamentListProps) =
return (
<List p="0">
{tournaments.map((tournament) => (
<>
<Fragment key={tournament.id}>
<ListItem
key={tournament.id}
p="xs"
icon={
<Avatar
@@ -129,7 +128,7 @@ const TournamentList = ({ tournaments, loading = false }: TournamentListProps) =
<TournamentListItem tournament={tournament} />
</ListItem>
<Divider />
</>
</Fragment>
))}
</List>
);
src/features/tournaments/components/upcoming-tournament/enrolled-free-agent.tsx
+2 -1
View File
@@ -98,7 +98,7 @@ const EnrolledFreeAgent: React.FC<{ tournamentId: string, isRegional?: boolean }
{freeAgents
.filter(agent => agent.player)
.map((agent) => (
<Group key={agent.id} justify="space-between" align="center" wrap="nowrap" p="xs" style={{ borderRadius: '8px', backgroundColor: 'var(--mantine-color-gray-0)' }}>
<Group key={agent.id} justify="space-between" align="center" wrap="nowrap" p="xs" style={{ borderRadius: '8px', backgroundColor: 'var(--mantine-color-default-hover)' }}>
<Text size="sm" fw={500} truncate>
{agent.player?.first_name} {agent.player?.last_name}
</Text>
@@ -107,6 +107,7 @@ const EnrolledFreeAgent: React.FC<{ tournamentId: string, isRegional?: boolean }
<ActionIcon
variant="subtle"
size="sm"
aria-label="Copy phone number"
onClick={() => copyToClipboard(agent.phone!)}
style={{ cursor: 'pointer' }}
>
src/features/tournaments/components/upcoming-tournament/index.tsx
+10 -1
View File
@@ -55,7 +55,16 @@ const UpcomingTournament: React.FC<{ tournament: Tournament }> = ({
<Stack px="xs">
{tournament.desc && <Text px="md" ta="center" size="sm" style={{ whiteSpace: 'pre-wrap' }}>{tournament.desc}</Text>}
<Card withBorder radius="lg" p="lg">
<Card
withBorder
radius="lg"
p="lg"
style={{
borderTop: "3px solid var(--mantine-primary-color-filled)",
backgroundImage:
"linear-gradient(to bottom, var(--mantine-primary-color-light), transparent 110px)",
}}
>
<Stack gap="xs">
<Group gap="xs" align="center">
<UsersIcon size={16} />
src/features/tournaments/components/upcoming-tournament/unenroll-team.tsx
+3 -3
View File
@@ -13,7 +13,7 @@ interface UnenrollTeamProps {
const UnenrollTeam = ({ tournamentId, teamId, onSubmit }: UnenrollTeamProps) => {
const { open, isOpen, toggle } = useSheet();
const { mutate: unenrollTeam } = useUnenrollTeam();
const { mutate: unenrollTeam, isPending } = useUnenrollTeam();
const handleUnenrollTeam = useCallback(
async () => {
await unenrollTeam({ tournamentId, teamId }, {
@@ -35,8 +35,8 @@ const UnenrollTeam = ({ tournamentId, teamId, onSubmit }: UnenrollTeamProps) =>
<Sheet title={"Unenroll Team"} opened={isOpen} onChange={toggle}>
<Stack gap='xs'>
<Text size="sm" fw={500}>Are you sure you want to unenroll from this tournament? You can enroll again at any point before the deadline.</Text>
<Button onClick={handleUnenrollTeam}>Confirm</Button>
<Button variant="subtle" color="red" onClick={toggle}>Cancel</Button>
<Button onClick={handleUnenrollTeam} loading={isPending}>Confirm</Button>
<Button variant="subtle" color="red" onClick={toggle} disabled={isPending}>Cancel</Button>
</Stack>
</Sheet>
</>
src/lib/mantine/color-scheme-provider.tsx
+20 -9
View File
@@ -1,27 +1,38 @@
import { useAuth } from "@/contexts/auth-context";
import { useMantineTheme } from "@mantine/core";
import { useMantineColorScheme } from "@mantine/core";
import { useEffect } from "react";
import { CHROME_COLORS, setThemeColorMeta } from "./theme-colors";
const ColorSchemeProvider = ({ children }: { children: React.ReactNode }) => {
const {
metadata: { colorScheme },
} = useAuth();
const { setColorScheme } = useMantineColorScheme();
const theme = useMantineTheme();
useEffect(() => {
if (!colorScheme) return;
setColorScheme(colorScheme);
const themeColorMeta = document.querySelector('meta[name="theme-color"]');
if (themeColorMeta) {
themeColorMeta.setAttribute(
"content",
colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[0]
);
const media = window.matchMedia("(prefers-color-scheme: dark)");
const applyThemeColor = () => {
const resolved =
colorScheme === "auto"
? media.matches
? "dark"
: "light"
: colorScheme;
setThemeColorMeta(CHROME_COLORS[resolved].base);
};
applyThemeColor();
if (colorScheme === "auto") {
media.addEventListener("change", applyThemeColor);
return () => media.removeEventListener("change", applyThemeColor);
}
}, [colorScheme]);
}, [colorScheme, setColorScheme]);
return children;
};
src/lib/mantine/mantine-provider.tsx
+28 -6
View File
@@ -15,10 +15,28 @@ const commonInputStyles = {
},
};
const pressFeedbackCss = `
.flxn-press {
transition: transform 120ms cubic-bezier(0.32, 0.72, 0, 1);
}
.flxn-press:active:not(:disabled):not([data-disabled]):not([data-loading]) {
transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
.flxn-press,
.flxn-press:active {
transition: none;
transform: none;
}
}
`;
const theme = createTheme({
defaultRadius: "sm",
respectReducedMotion: true,
fontFamily: '"Inter", sans-serif',
headings: { fontFamily: '"League Spartan", sans-serif' },
activeClassName: "flxn-press",
components: {
TextInput: {
styles: commonInputStyles,
@@ -35,14 +53,15 @@ const theme = createTheme({
Autocomplete: {
styles: commonInputStyles,
},
DateTiemPicker: {
Card: {
defaultProps: {
shadow: "xs",
},
},
Title: {
styles: {
root: {
zIndex: 1000,
},
input: {
zIndex: 1000,
backgroundColor: "red",
letterSpacing: "-0.01em",
},
},
},
@@ -65,6 +84,9 @@ const MantineProvider = ({ children }: { children: React.ReactNode }) => {
defaultColorScheme={colorScheme}
theme={{ ...theme, primaryColor }}
>
<style href="flxn-press-feedback" precedence="medium">
{pressFeedbackCss}
</style>
<ColorSchemeProvider>{children}</ColorSchemeProvider>
</MantineProviderCore>
);
src/lib/mantine/theme-colors.ts
+27
View File
@@ -0,0 +1,27 @@
export type ChromeColorScheme = "light" | "dark";
export const CHROME_COLORS: Record<
ChromeColorScheme,
{ base: string; dimmed: string }
> = {
light: { base: "#ffffff", dimmed: "#999999" },
dark: { base: "#242424", dimmed: "#161616" },
};
export function setThemeColorMeta(color: string): void {
if (typeof document === "undefined") return;
const metas = document.querySelectorAll<HTMLMetaElement>(
'meta[name="theme-color"]'
);
if (metas.length === 0) {
const meta = document.createElement("meta");
meta.name = "theme-color";
meta.content = color;
document.head.appendChild(meta);
return;
}
metas.forEach((meta) => meta.setAttribute("content", color));
}