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
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>
</>