website refactor
This commit is contained in:
@@ -1,15 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Badge } from '@/ui/Badge';
|
||||
import { Grid } from '@/ui/Grid';
|
||||
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { LeagueRulesPanel } from '@/components/leagues/LeagueRulesPanel';
|
||||
import type { RulebookViewData } from '@/lib/view-data/leagues/RulebookViewData';
|
||||
|
||||
interface RulebookTemplateProps {
|
||||
@@ -17,104 +11,77 @@ interface RulebookTemplateProps {
|
||||
}
|
||||
|
||||
export function RulebookTemplate({ viewData }: RulebookTemplateProps) {
|
||||
const rules = [
|
||||
{
|
||||
id: 'points',
|
||||
title: 'Points System',
|
||||
content: `Points are awarded to the top ${viewData.positionPoints.length} finishers. 1st place receives ${viewData.positionPoints[0]?.points || 0} points.`
|
||||
},
|
||||
{
|
||||
id: 'drops',
|
||||
title: 'Drop Policy',
|
||||
content: viewData.hasActiveDropPolicy ? viewData.dropPolicySummary : 'No drop races are active for this season.'
|
||||
},
|
||||
{
|
||||
id: 'platform',
|
||||
title: 'Platform & Sessions',
|
||||
content: `Racing on ${viewData.gameName}. Sessions scored: ${viewData.sessionTypes}.`
|
||||
}
|
||||
];
|
||||
|
||||
if (viewData.hasBonusPoints) {
|
||||
rules.push({
|
||||
id: 'bonus',
|
||||
title: 'Bonus Points',
|
||||
content: viewData.bonusPoints.join('. ')
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack gap={6}>
|
||||
{/* Header */}
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Box>
|
||||
<Heading level={1}>Rulebook</Heading>
|
||||
<Text size="sm" color="text-gray-400" block mt={1}>Official rules and regulations</Text>
|
||||
</Box>
|
||||
<Badge variant="primary">
|
||||
{viewData.scoringPresetName || 'Custom Rules'}
|
||||
</Badge>
|
||||
</Stack>
|
||||
|
||||
{/* Quick Stats */}
|
||||
<Grid cols={4} gap={4}>
|
||||
<StatItem label="Platform" value={viewData.gameName} />
|
||||
<StatItem label="Championships" value={viewData.championshipsCount} />
|
||||
<StatItem label="Sessions Scored" value={viewData.sessionTypes} />
|
||||
<StatItem label="Drop Policy" value={viewData.hasActiveDropPolicy ? 'Active' : 'None'} />
|
||||
</Grid>
|
||||
|
||||
{/* Points Table */}
|
||||
<Card>
|
||||
<Box mb={4}>
|
||||
<Heading level={2}>Points System</Heading>
|
||||
</Box>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>Position</TableHeader>
|
||||
<TableHeader>Points</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{viewData.positionPoints.map((point) => (
|
||||
<TableRow key={point.position}>
|
||||
<TableCell>
|
||||
<Text color="text-white">{point.position}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text color="text-white">{point.points}</Text>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Card>
|
||||
|
||||
{/* Bonus Points */}
|
||||
{viewData.hasBonusPoints && (
|
||||
<Card>
|
||||
<Box mb={4}>
|
||||
<Heading level={2}>Bonus Points</Heading>
|
||||
</Box>
|
||||
<Stack gap={2}>
|
||||
{viewData.bonusPoints.map((bonus, idx) => (
|
||||
<Surface
|
||||
key={idx}
|
||||
variant="muted"
|
||||
rounded="lg"
|
||||
border
|
||||
padding={3}
|
||||
>
|
||||
<Stack direction="row" align="center" gap={4}>
|
||||
<Surface variant="muted" rounded="full" padding={1} w="8" h="8" bg="bg-performance-green/10" borderColor="border-performance-green/20" display="flex" alignItems="center" justifyContent="center" border>
|
||||
<Text color="text-performance-green" weight="bold">+</Text>
|
||||
</Surface>
|
||||
<Text size="sm" color="text-gray-300">{bonus}</Text>
|
||||
</Stack>
|
||||
</Surface>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Drop Policy */}
|
||||
{viewData.hasActiveDropPolicy && (
|
||||
<Card>
|
||||
<Box mb={4}>
|
||||
<Heading level={2}>Drop Policy</Heading>
|
||||
</Box>
|
||||
<Text size="sm" color="text-gray-300">{viewData.dropPolicySummary}</Text>
|
||||
<Box mt={3}>
|
||||
<Text size="xs" color="text-gray-500" block>
|
||||
Drop rules are applied automatically when calculating championship standings.
|
||||
<Box display="flex" flexDirection="col" gap={8}>
|
||||
<Box as="header" display="flex" flexDirection="col" gap={2}>
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">Rulebook</Text>
|
||||
<Box px={2} py={1} bg="blue-500/10" border borderColor="blue-500/20">
|
||||
<Text size="xs" weight="bold" color="text-blue-500" uppercase letterSpacing="widest">
|
||||
{viewData.scoringPresetName || 'Custom Rules'}
|
||||
</Text>
|
||||
</Box>
|
||||
</Card>
|
||||
)}
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
</Box>
|
||||
<Text size="sm" color="text-zinc-500">Official rules and regulations for this championship.</Text>
|
||||
</Box>
|
||||
|
||||
function StatItem({ label, value }: { label: string, value: string | number }) {
|
||||
return (
|
||||
<Surface variant="muted" rounded="lg" border padding={4} bg="bg-neutral-800" borderColor="border-neutral-800">
|
||||
<Text size="xs" color="text-gray-500" uppercase letterSpacing="0.05em" block mb={1}>{label}</Text>
|
||||
<Text weight="semibold" color="text-white" size="lg">{value}</Text>
|
||||
</Surface>
|
||||
<LeagueRulesPanel rules={rules} />
|
||||
|
||||
<Box as="section" mt={8}>
|
||||
<Text as="h3" size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="widest" mb={4} block>Points Classification</Text>
|
||||
<Box overflow="hidden" border borderColor="zinc-800" bg="zinc-900/50">
|
||||
<Box as="table" w="full" textAlign="left">
|
||||
<Box as="thead">
|
||||
<Box as="tr" borderBottom borderColor="zinc-800" bg="zinc-900/80">
|
||||
<Box as="th" px={4} py={2}>
|
||||
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="wider">Position</Text>
|
||||
</Box>
|
||||
<Box as="th" px={4} py={2} textAlign="right">
|
||||
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="wider">Points</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box as="tbody">
|
||||
{viewData.positionPoints.map((point) => (
|
||||
<Box as="tr" key={point.position} hoverBg="zinc-800/50" transition>
|
||||
<Box as="td" px={4} py={2}>
|
||||
<Text size="sm" color="text-zinc-400" font="mono">{point.position}</Text>
|
||||
</Box>
|
||||
<Box as="td" px={4} py={2} textAlign="right">
|
||||
<Text size="sm" weight="bold" color="text-white">{point.points}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user