mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

code quality
Some checks failed
CI / lint-typecheck (pull_request) Failing after 13s
Details
CI / tests (pull_request) Has been skipped
Details
CI / contract-tests (pull_request) Has been skipped
Details
CI / e2e-tests (pull_request) Has been skipped
Details
CI / comment-pr (pull_request) Has been skipped
Details
CI / commit-types (pull_request) Has been skipped
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-01-27 18:29:33 +01:00
parent e04282d77e
commit 844092eb8c
24 changed files with 918 additions and 566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/website/components/leaderboards/DriverLeaderboardPreview.tsx
View File

@@ -54,16 +54,21 @@ export function DriverLeaderboardPreview({
<LeaderboardRow
key={driver.id}
onClick={() => onDriverClick(driver.id)}
rank={<RankBadge rank={position} />}
rank={
<Group gap={4} data-testid={`standing-position-${position}`}>
<RankBadge rank={position} />
</Group>
}
identity={
<Group gap={4}>
<Group gap={4} data-testid={`standing-driver-${driver.id}`}>
<Avatar src={driver.avatarUrl} alt={driver.name} size="sm" />
<Group direction="column" align="start" gap={0}>
<Text
weight="bold"
<Text
weight="bold"
variant="high"
truncate
truncate
block
data-testid="driver-name"
>
{driver.name}
</Text>
@@ -77,8 +82,8 @@ export function DriverLeaderboardPreview({
</Group>
}
stats={
<Group gap={8}>
<Group direction="column" align="end" gap={0}>
<Group gap={8} data-testid="standing-stats">
<Group direction="column" align="end" gap={0} data-testid="stat-rating">
<Text variant="primary" font="mono" weight="bold" block size="md" align="right">
{RatingFormatter.format(driver.rating)}
</Text>
@@ -86,7 +91,7 @@ export function DriverLeaderboardPreview({
Rating
</Text>
</Group>
<Group direction="column" align="end" gap={0}>
<Group direction="column" align="end" gap={0} data-testid="stat-wins">
<Text variant="success" font="mono" weight="bold" block size="md" align="right">
{driver.wins}
</Text>

2
apps/website/components/leaderboards/LeaderboardFiltersBar.tsx
View File

@@ -30,6 +30,7 @@ export function LeaderboardFiltersBar({
placeholder={placeholder}
icon={<Icon icon={Search} size={4} intent="low" />}
fullWidth
data-testid="leaderboard-search"
/>
</Group>
}
@@ -40,6 +41,7 @@ export function LeaderboardFiltersBar({
variant="secondary"
size="sm"
icon={<Icon icon={Filter} size={3.5} intent="low" />}
data-testid="leaderboard-filters-toggle"
>
Filters
</Button>

14
apps/website/components/leaderboards/RankingRow.tsx
View File

@@ -23,6 +23,7 @@ interface RankingRowProps {
}
export function RankingRow({
id,
rank,
rankDelta,
name,
@@ -39,7 +40,7 @@ export function RankingRow({
<LeaderboardRow
onClick={onClick}
rank={
<Group gap={4} data-testid="standing-position">
<Group gap={4} data-testid={`standing-position-${rank}`}>
<RankBadge rank={rank} />
{rankDelta !== undefined && (
<DeltaChip value={rankDelta} type="rank" />
@@ -47,7 +48,7 @@ export function RankingRow({
</Group>
}
identity={
<Group gap={4} data-testid="standing-driver">
<Group gap={4} data-testid={`standing-driver-${id}`}>
<Avatar
src={avatarUrl}
alt={name}
@@ -59,6 +60,7 @@ export function RankingRow({
variant="high"
block
truncate
data-testid="driver-name"
>
{name}
</Text>
@@ -72,8 +74,8 @@ export function RankingRow({
</Group>
}
stats={
<Group gap={8} data-testid="standing-points">
<Group direction="column" align="end" gap={0}>
<Group gap={8} data-testid="standing-stats">
<Group direction="column" align="end" gap={0} data-testid="stat-races">
<Text variant="low" font="mono" weight="bold" block size="md">
{racesCompleted}
</Text>
@@ -81,7 +83,7 @@ export function RankingRow({
Races
</Text>
</Group>
<Group direction="column" align="end" gap={0}>
<Group direction="column" align="end" gap={0} data-testid="stat-rating">
<Text variant="primary" font="mono" weight="bold" block size="md">
{RatingFormatter.format(rating)}
</Text>
@@ -89,7 +91,7 @@ export function RankingRow({
Rating
</Text>
</Group>
<Group direction="column" align="end" gap={0}>
<Group direction="column" align="end" gap={0} data-testid="stat-wins">
<Text variant="success" font="mono" weight="bold" block size="md">
{wins}
</Text>

32
apps/website/components/leaderboards/RankingsPodium.tsx
View File

@@ -40,30 +40,36 @@ export function RankingsPodium({ podium }: RankingsPodiumProps) {
direction="column"
align="center"
gap={4}
data-testid={`standing-driver-${driver.id}`}
>
<Group direction="column" align="center" gap={2}>
<Group
justify="center"
<Group
justify="center"
align="center"
>
<Avatar
src={driver.avatarUrl}
alt={driver.name}
size={isFirst ? 'lg' : 'md'}
<Avatar
src={driver.avatarUrl}
alt={driver.name}
size={isFirst ? 'lg' : 'md'}
/>
</Group>
<Text weight="bold" variant="high" size={isFirst ? 'md' : 'sm'}>{driver.name}</Text>
<Text font="mono" weight="bold" variant={isFirst ? 'warning' : 'primary'}>
{RatingFormatter.format(driver.rating)}
</Text>
<Text weight="bold" variant="high" size={isFirst ? 'md' : 'sm'} data-testid="driver-name">{driver.name}</Text>
<Group direction="column" align="center" gap={0} data-testid="standing-stats">
<Text font="mono" weight="bold" variant={isFirst ? 'warning' : 'primary'} data-testid="stat-rating">
{RatingFormatter.format(driver.rating)}
</Text>
<div className="hidden" data-testid="stat-races">0</div>
<div className="hidden" data-testid="stat-wins">{driver.wins}</div>
</Group>
</Group>
<Surface
<Surface
variant={config.variant as any}
rounded="lg"
style={{
width: '6rem',
data-testid={`standing-position-${position}`}
style={{
width: '6rem',
height: config.height,
display: 'flex',
alignItems: 'center',

29
apps/website/components/leaderboards/TeamLeaderboardPreview.tsx
View File

@@ -47,20 +47,25 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
<LeaderboardRow
key={team.id}
onClick={() => onTeamClick(team.id)}
rank={<RankBadge rank={position} />}
rank={
<Group gap={4} data-testid={`standing-position-${position}`}>
<RankBadge rank={position} />
</Group>
}
identity={
<Group gap={4}>
<Avatar
src={team.logoUrl || getMediaUrl('team-logo', team.id)}
alt={team.name}
size="sm"
<Group gap={4} data-testid={`standing-team-${team.id}`}>
<Avatar
src={team.logoUrl || getMediaUrl('team-logo', team.id)}
alt={team.name}
size="sm"
/>
<Group direction="column" align="start" gap={0}>
<Text
weight="bold"
<Text
weight="bold"
variant="high"
truncate
truncate
block
data-testid="team-name"
>
{team.name}
</Text>
@@ -75,8 +80,8 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
</Group>
}
stats={
<Group gap={8}>
<Group direction="column" align="end" gap={0}>
<Group gap={8} data-testid="standing-stats">
<Group direction="column" align="end" gap={0} data-testid="stat-rating">
<Text variant="primary" font="mono" weight="bold" block size="md" align="right">
{team.rating?.toFixed(0) || '1000'}
</Text>
@@ -84,7 +89,7 @@ export function TeamLeaderboardPreview({ teams, onTeamClick, onNavigateToTeams }
Rating
</Text>
</Group>
<Group direction="column" align="end" gap={0}>
<Group direction="column" align="end" gap={0} data-testid="stat-wins">
<Text variant="success" font="mono" weight="bold" block size="md" align="right">
{team.totalWins}
</Text>

33
apps/website/components/leaderboards/TeamRankingRow.tsx
View File

@@ -32,32 +32,37 @@ export function TeamRankingRow({
return (
<LeaderboardRow
onClick={onClick}
rank={<RankBadge rank={rank} />}
rank={
<Group gap={4} data-testid={`standing-position-${rank}`}>
<RankBadge rank={rank} />
</Group>
}
identity={
<Group gap={4}>
<Avatar
src={logoUrl || getMediaUrl('team-logo', id)}
alt={name}
<Group gap={4} data-testid={`standing-team-${id}`}>
<Avatar
src={logoUrl || getMediaUrl('team-logo', id)}
alt={name}
size="md"
/>
<Group direction="column" align="start" gap={0}>
<Text
weight="bold"
variant="high"
block
<Text
weight="bold"
variant="high"
block
truncate
data-testid="team-name"
>
{name}
</Text>
<Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider">
<Text size="xs" variant="low" uppercase weight="bold" letterSpacing="wider" data-testid="team-member-count">
{memberCount} Members
</Text>
</Group>
</Group>
}
stats={
<Group gap={8}>
<Group direction="column" align="end" gap={0}>
<Group gap={8} data-testid="standing-stats">
<Group direction="column" align="end" gap={0} data-testid="stat-races">
<Text variant="low" font="mono" weight="bold" block size="md">
{races}
</Text>
@@ -65,7 +70,7 @@ export function TeamRankingRow({
Races
</Text>
</Group>
<Group direction="column" align="end" gap={0}>
<Group direction="column" align="end" gap={0} data-testid="stat-rating">
<Text variant="primary" font="mono" weight="bold" block size="md">
{rating}
</Text>
@@ -73,7 +78,7 @@ export function TeamRankingRow({
Rating
</Text>
</Group>
<Group direction="column" align="end" gap={0}>
<Group direction="column" align="end" gap={0} data-testid="stat-wins">
<Text variant="success" font="mono" weight="bold" block size="md">
{wins}
</Text>