badge redesign again
This commit is contained in:
yohlo
@@ -1,45 +1,45 @@
|
||||
import { Box, Card, Skeleton, Text } from "@mantine/core";
|
||||
import { Box, Skeleton, Text } from "@mantine/core";
|
||||
|
||||
const BadgeShowcaseSkeleton = () => {
|
||||
return (
|
||||
<Box mb="lg">
|
||||
<Card
|
||||
withBorder
|
||||
radius="md"
|
||||
p={0}
|
||||
<Box
|
||||
px="md"
|
||||
style={{
|
||||
overflow: 'hidden',
|
||||
maxHeight: '220px',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
p="md"
|
||||
style={{
|
||||
background: 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6))',
|
||||
borderBottom: '1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))',
|
||||
}}
|
||||
>
|
||||
<Text size="sm" fw={600} tt="uppercase" c="dimmed" style={{ letterSpacing: '0.5px' }}>
|
||||
Badges
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
p="md"
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))',
|
||||
gap: 'var(--mantine-spacing-sm)',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(85px, 1fr))',
|
||||
gap: 'var(--mantine-spacing-md)',
|
||||
paddingBottom: 'var(--mantine-spacing-sm)',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{[1, 2, 3, 4, 5, 6].map((i) => (
|
||||
<Skeleton
|
||||
<Box
|
||||
key={i}
|
||||
height={70}
|
||||
radius="md"
|
||||
/>
|
||||
style={{
|
||||
aspectRatio: '1',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<Skeleton
|
||||
height="100%"
|
||||
radius="12px"
|
||||
style={{
|
||||
aspectRatio: '1',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -88,18 +88,13 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
|
||||
|
||||
return (
|
||||
<Box mb="lg">
|
||||
<Box mb="sm" px="md">
|
||||
<Text size="sm" fw={600} tt="uppercase" c="dimmed" style={{ letterSpacing: '0.5px' }}>
|
||||
Badges
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
px="md"
|
||||
style={{
|
||||
maxHeight: '200px',
|
||||
maxHeight: '220px',
|
||||
overflowY: 'auto',
|
||||
overflowX: 'hidden',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@@ -108,13 +103,13 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(85px, 1fr))',
|
||||
gap: 'var(--mantine-spacing-md)',
|
||||
paddingBottom: 'var(--mantine-spacing-sm)',
|
||||
width: '100%',
|
||||
}}
|
||||
>
|
||||
{badgesToDisplay.map((display) => {
|
||||
const isStackableBadge = display.badge.criteria?.tournament_wins !== undefined ||
|
||||
display.badge.criteria?.placement !== undefined;
|
||||
const isStackableBadge = ['winner_badge', 'silver_medal_badge', 'bronze_medal_badge'].includes(display.badge.key);
|
||||
const stackCount = display.earned && isStackableBadge
|
||||
? Math.floor((display.progress?.progress || 0) / getTargetProgress(display.badge))
|
||||
? (display.progress?.progress || 0)
|
||||
: 1;
|
||||
const showStack = stackCount > 1;
|
||||
|
||||
@@ -133,32 +128,32 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
|
||||
{[...Array(Math.min(stackCount - 1, 2))].map((_, i) => (
|
||||
<Box
|
||||
key={i}
|
||||
style={(theme) => ({
|
||||
style={{
|
||||
aspectRatio: '1',
|
||||
borderRadius: '12px',
|
||||
background: `linear-gradient(135deg, ${theme.colors[theme.primaryColor][5]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
|
||||
border: `2px solid ${theme.colors[theme.primaryColor][6]}`,
|
||||
background: 'transparent',
|
||||
border: '2px solid var(--mantine-primary-color-5)',
|
||||
position: 'absolute',
|
||||
top: `${(i + 1) * 3}px`,
|
||||
left: `${(i + 1) * 3}px`,
|
||||
right: `-${(i + 1) * 3}px`,
|
||||
bottom: `-${(i + 1) * 3}px`,
|
||||
opacity: 0.6 - (i * 0.2),
|
||||
opacity: 0.4 - (i * 0.15),
|
||||
zIndex: -(i + 1),
|
||||
})}
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Box
|
||||
style={(theme) => ({
|
||||
style={{
|
||||
aspectRatio: '1',
|
||||
borderRadius: '12px',
|
||||
background: display.earned
|
||||
? `linear-gradient(135deg, ${theme.colors[theme.primaryColor][5]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`
|
||||
: 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6))',
|
||||
border: `2px solid ${display.earned ? theme.colors[theme.primaryColor][6] : 'light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4))'}`,
|
||||
background: 'light-dark(var(--mantine-color-white), var(--mantine-color-dark-7))',
|
||||
border: display.earned
|
||||
? '2px solid var(--mantine-primary-color-6)'
|
||||
: '2px dashed var(--mantine-primary-color-4)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@@ -167,46 +162,33 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
|
||||
padding: 'var(--mantine-spacing-xs)',
|
||||
position: 'relative',
|
||||
boxShadow: display.earned
|
||||
? `0 2px 8px ${theme.colors[theme.primaryColor][6]}30`
|
||||
: '0 1px 3px rgba(0, 0, 0, 0.1)',
|
||||
opacity: display.earned ? 1 : 0.5,
|
||||
? '0 0 0 1px color-mix(in srgb, var(--mantine-primary-color-6) 20%, transparent)'
|
||||
: 'none',
|
||||
opacity: display.earned ? 1 : 0.4,
|
||||
zIndex: 1,
|
||||
':hover': {
|
||||
transform: 'translateY(-2px)',
|
||||
boxShadow: display.earned
|
||||
? `0 4px 12px ${theme.colors[theme.primaryColor][6]}40`
|
||||
: '0 2px 6px rgba(0, 0, 0, 0.15)',
|
||||
},
|
||||
})}
|
||||
}}
|
||||
>
|
||||
{display.earned ? (
|
||||
<MedalIcon
|
||||
size={32}
|
||||
weight="fill"
|
||||
style={{
|
||||
color: 'white',
|
||||
filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))',
|
||||
}}
|
||||
color="var(--mantine-primary-color-6)"
|
||||
/>
|
||||
) : (
|
||||
<LockKeyIcon
|
||||
size={28}
|
||||
weight="regular"
|
||||
style={{
|
||||
color: 'var(--mantine-color-dimmed)',
|
||||
}}
|
||||
color="var(--mantine-color-dimmed)"
|
||||
/>
|
||||
)}
|
||||
|
||||
{showStack && (
|
||||
<Box
|
||||
style={(theme) => ({
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '4px',
|
||||
right: '4px',
|
||||
background: theme.colors[theme.primaryColor][8],
|
||||
color: 'white',
|
||||
borderRadius: '50%',
|
||||
color: 'var(--mantine-primary-color-6)',
|
||||
width: '20px',
|
||||
height: '20px',
|
||||
display: 'flex',
|
||||
@@ -214,11 +196,9 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
|
||||
justifyContent: 'center',
|
||||
fontSize: '10px',
|
||||
fontWeight: 700,
|
||||
border: '2px solid white',
|
||||
boxShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
|
||||
})}
|
||||
}}
|
||||
>
|
||||
{stackCount}
|
||||
x{stackCount}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
@@ -226,10 +206,9 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
|
||||
size="xs"
|
||||
fw={display.earned ? 600 : 500}
|
||||
ta="center"
|
||||
c={display.earned ? 'white' : 'dimmed'}
|
||||
c={display.earned ? undefined : 'dimmed'}
|
||||
style={{
|
||||
lineHeight: 1.2,
|
||||
textShadow: display.earned ? '0 1px 2px rgba(0, 0, 0, 0.3)' : 'none',
|
||||
}}
|
||||
>
|
||||
{display.badge.name}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Box } from "@mantine/core";
|
||||
import { Box, Stack, Text, Divider } from "@mantine/core";
|
||||
import { Suspense } from "react";
|
||||
import Header from "./header";
|
||||
import SwipeableTabs from "@/components/swipeable-tabs";
|
||||
@@ -21,14 +21,19 @@ const Profile = ({ id }: ProfileProps) => {
|
||||
const tabs = [
|
||||
{
|
||||
label: "Overview",
|
||||
content: (
|
||||
<>
|
||||
content: <>
|
||||
<Stack px="md">
|
||||
<Text size="md" fw={700}>Badges</Text>
|
||||
<Suspense fallback={<BadgeShowcaseSkeleton />}>
|
||||
<BadgeShowcase playerId={id} />
|
||||
</Suspense>
|
||||
</Stack>
|
||||
<Divider my="md" />
|
||||
<Stack>
|
||||
<Text px="md" size="md" fw={700}>Statistics</Text>
|
||||
<StatsOverview statsData={stats} isLoading={statsLoading} />
|
||||
</>
|
||||
),
|
||||
</Stack>
|
||||
</>,
|
||||
},
|
||||
{
|
||||
label: "Matches",
|
||||
|
||||
Reference in New Issue
Block a user