87 lines
3.3 KiB
TypeScript
87 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { LeagueRulesPanel } from '@/components/leagues/LeagueRulesPanel';
|
|
import type { RulebookViewData } from '@/lib/view-data/leagues/RulebookViewData';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface RulebookTemplateProps {
|
|
viewData: RulebookViewData;
|
|
}
|
|
|
|
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 (
|
|
<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>
|
|
</Box>
|
|
<Text size="sm" color="text-zinc-500">Official rules and regulations for this championship.</Text>
|
|
</Box>
|
|
|
|
<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>
|
|
);
|
|
}
|