diff --git a/src/app/(home)/players/[id]/page.tsx b/src/app/(home)/players/[id]/page.tsx index 280ffd0..327aafb 100644 --- a/src/app/(home)/players/[id]/page.tsx +++ b/src/app/(home)/players/[id]/page.tsx @@ -9,7 +9,6 @@ export default async function PlayerPage({ }: { params: Promise<{ id: string }> }) { - const session = await auth() const { id } = await params if (id) { await Promise.all([ diff --git a/src/app/(home)/players/[id]/user.tsx b/src/app/(home)/players/[id]/user.tsx index 67c7860..b90e06f 100644 --- a/src/app/(home)/players/[id]/user.tsx +++ b/src/app/(home)/players/[id]/user.tsx @@ -5,14 +5,13 @@ import { TooltipContent, TooltipProvider, TooltipTrigger, -} from '@/components/ui/tooltip' +} from '@/components/ui/mobile-tooltip' import type React from 'react' import { useState } from 'react' import { GamesTable } from '@/app/players/[id]/_components/games-table' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Badge } from '@/components/ui/badge' -import { Card, CardContent, CardHeader } from '@/components/ui/card' import { Select, SelectContent, @@ -78,7 +77,6 @@ export function UserInfo() { channel_id: RANKED_CHANNEL, user_id: id, }) - console.log({ vanillaUserRank, rankedUserRank }) // Filter games by leaderboard if needed const filteredGamesByLeaderboard = @@ -142,304 +140,298 @@ export function UserInfo() { .at(0) return ( -
-
- - -
-
- - - - {profileData.username.slice(0, 2).toUpperCase()} - - +
+
+
+
+
+ + + + {profileData.username.slice(0, 2).toUpperCase()} + + +
+ +
+
+

+ {profileData.username} +

+ + + + + + +
+

Also known as:

+
    + {aliases.map((alias) => ( +
  • {alias}
    • + ))} +
+
+ + +
-
-
-

- {profileData.username} -

- - - - - - -
-

Also known as:

-
    - {aliases.map((alias) => ( -
  • {alias}
    • - ))} -
-
- - - -
- -

- {firstGame ? ( - <>First game: {dateFormatter.format(firstGame.gameTime)} - ) : ( - <>No games played yet - )} -

-
- {!!rankedLeaderboard && ( - - - - Ranked Queue:{' '} - {isNonNullish(rankedUserRank?.rank) - ? `#${rankedUserRank.rank}` - : 'N/A'} - - - )} - {!!vanillaLeaderboard && ( - - - - Vanilla Queue:{' '} - {isNonNullish(vanillaUserRank?.rank) - ? `#${vanillaUserRank.rank}` - : 'N/A'} - - - )} -
-
-
+ {firstGame ? ( + <>First game: {dateFormatter.format(firstGame.gameTime)} + ) : ( + <>No games played yet )} - > - } - description='Total matches' - /> - } - description={`${profileData.winRate}% win rate`} - accentColor='text-emerald-500' - /> - } - description={`${profileData.lossRate}% loss rate`} - accentColor='text-rose-500' - /> - {isNonNullish(rankedUserRank?.mmr) && ( - 0 - ? 'text-emerald-500' - : 'text-rose-500' - )} - > - {lastRankedGame.mmrChange === 0 ? ( - 'Tied' - ) : lastRankedGame.mmrChange > 0 ? ( - - ) : ( - - )} - {lastRankedGame.mmrChange !== 0 - ? numberFormatter.format( - Math.trunc(lastRankedGame.mmrChange) - ) - : null}{' '} - last match - - ) : null - } - icon={ - - } - accentColor='text-zink-800 dark:text-zink-200' - /> +

+
+ {!!rankedLeaderboard && ( + + + + Ranked Queue:{' '} + {isNonNullish(rankedUserRank?.rank) + ? `#${rankedUserRank.rank}` + : 'N/A'} + + )} - {isNonNullish(vanillaUserRank?.mmr) && ( - - } - accentColor='text-zink-800 dark:text-zink-200' - description={ - lastVanillaGame ? ( - 0 - ? 'text-emerald-500' - : 'text-rose-500' - )} - > - {lastVanillaGame.mmrChange === 0 ? ( - 'Tied' - ) : lastVanillaGame.mmrChange > 0 ? ( - - ) : ( - - )} - {lastVanillaGame.mmrChange !== 0 - ? numberFormatter.format( - Math.trunc(lastVanillaGame.mmrChange) - ) - : null}{' '} - last match - - ) : null - } - /> + {!!vanillaLeaderboard && ( + + + + Vanilla Queue:{' '} + {isNonNullish(vanillaUserRank?.rank) + ? `#${vanillaUserRank.rank}` + : 'N/A'} + + )}
- +
+ } + description='Total matches' + /> + } + description={`${profileData.winRate}% win rate`} + accentColor='text-emerald-500' + /> + } + description={`${profileData.lossRate}% loss rate`} + accentColor='text-rose-500' + /> + {isNonNullish(rankedUserRank?.mmr) && ( + 0 + ? 'text-emerald-500' + : 'text-rose-500' + )} + > + {lastRankedGame.mmrChange === 0 ? ( + 'Tied' + ) : lastRankedGame.mmrChange > 0 ? ( + + ) : ( + + )} + {lastRankedGame.mmrChange !== 0 + ? numberFormatter.format( + Math.trunc(lastRankedGame.mmrChange) + ) + : null}{' '} + last match + + ) : null + } + icon={ + + } + accentColor='text-zink-800 dark:text-zink-200' + /> + )} + {isNonNullish(vanillaUserRank?.mmr) && ( + + } + accentColor='text-zink-800 dark:text-zink-200' + description={ + lastVanillaGame ? ( + 0 + ? 'text-emerald-500' + : 'text-rose-500' + )} + > + {lastVanillaGame.mmrChange === 0 ? ( + 'Tied' + ) : lastVanillaGame.mmrChange > 0 ? ( + + ) : ( + + )} + {lastVanillaGame.mmrChange !== 0 + ? numberFormatter.format( + Math.trunc(lastVanillaGame.mmrChange) + ) + : null}{' '} + last match + + ) : null + } + /> + )} +
+
+
- - -
- - Match History - Statistics - Achievements - + +
+ + Match History + Statistics + Achievements + -
-
- - -
- - - -
+
+
+ +
- -
-
- + + +
+
+ + +
+
+ +
+
+ + + +
+ {(rankedLeaderboard || lastRankedGame) && ( + } + accentColor='text-violet-500' + /> + )} + + {(vanillaLeaderboard || lastVanillaGame) && ( + } + accentColor='text-amber-500' + /> + )} + + {!rankedLeaderboard && + !vanillaLeaderboard && + !lastRankedGame && + !lastVanillaGame && ( +
+

+ No leaderboard data available +

-
- + )} +
+ - -
- {(rankedLeaderboard || lastRankedGame) && ( - } - accentColor='text-violet-500' - /> - )} - - {(vanillaLeaderboard || lastVanillaGame) && ( - } - accentColor='text-amber-500' - /> - )} - - {!rankedLeaderboard && - !vanillaLeaderboard && - !lastRankedGame && - !lastVanillaGame && ( -
-

- No leaderboard data available -

-
- )} -
- - - -
-

- Achievements coming soon -

-
- - - - + +
+

+ Achievements coming soon +

+
+ +
) diff --git a/src/app/_components/leaderboard.tsx b/src/app/_components/leaderboard.tsx index 903bff5..f120e47 100644 --- a/src/app/_components/leaderboard.tsx +++ b/src/app/_components/leaderboard.tsx @@ -169,7 +169,7 @@ export function LeaderboardPage() { return (
-
+
diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx index da41a77..9df16c2 100644 --- a/src/app/docs/layout.tsx +++ b/src/app/docs/layout.tsx @@ -4,7 +4,6 @@ import type { ReactNode } from 'react' import { source } from '../../../lib/source' export default function Layout({ children }: { children: ReactNode }) { - console.log(baseOptions) return ( {children} diff --git a/src/components/ui/mobile-tooltip.tsx b/src/components/ui/mobile-tooltip.tsx new file mode 100644 index 0000000..f2e82e5 --- /dev/null +++ b/src/components/ui/mobile-tooltip.tsx @@ -0,0 +1,71 @@ +'use client' + +import type { + PopoverContentProps, + PopoverProps, + PopoverTriggerProps, +} from '@radix-ui/react-popover' +import type { + TooltipContentProps, + TooltipProps, + TooltipProviderProps, + TooltipTriggerProps, +} from '@radix-ui/react-tooltip' +import { createContext, useContext, useEffect, useState } from 'react' +import { Popover, PopoverContent, PopoverTrigger } from './popover' +import { + Tooltip as OriginalTooltip, + TooltipContent as OriginalTooltipContent, + TooltipProvider as OriginalTooltipProvider, + TooltipTrigger as OriginalTooltipTrigger, +} from './tooltip' + +const TouchContext = createContext(undefined) +const useTouch = () => useContext(TouchContext) + +export const TooltipProvider = ({ + children, + ...props +}: TooltipProviderProps) => { + const [isTouch, setTouch] = useState(undefined) + + useEffect(() => { + setTouch(window.matchMedia('(pointer: coarse)').matches) + }, []) + + return ( + + {children} + + ) +} + +export const Tooltip = (props: TooltipProps & PopoverProps) => { + const isTouch = useTouch() + + return isTouch ? : +} + +export const TooltipTrigger = ( + props: TooltipTriggerProps & PopoverTriggerProps +) => { + const isTouch = useTouch() + + return isTouch ? ( + + ) : ( + + ) +} + +export const TooltipContent = ( + props: TooltipContentProps & PopoverContentProps +) => { + const isTouch = useTouch() + + return isTouch ? ( + + ) : ( + + ) +}