404 lines
16 KiB
TypeScript
404 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
FileText,
|
|
Users,
|
|
Calendar,
|
|
Trophy,
|
|
Award,
|
|
Rocket,
|
|
Eye,
|
|
EyeOff,
|
|
Gamepad2,
|
|
User,
|
|
UsersRound,
|
|
Clock,
|
|
Flag,
|
|
Zap,
|
|
Timer,
|
|
TrendingDown,
|
|
Check,
|
|
Globe,
|
|
Medal,
|
|
} from 'lucide-react';
|
|
import type { LeagueConfigFormModel } from '@gridpilot/racing/application';
|
|
import type { LeagueScoringPresetDTO } from '@gridpilot/racing/application/ports/LeagueScoringPresetProvider';
|
|
|
|
interface LeagueReviewSummaryProps {
|
|
form: LeagueConfigFormModel;
|
|
presets: LeagueScoringPresetDTO[];
|
|
}
|
|
|
|
// Individual review card component
|
|
function ReviewCard({
|
|
icon: Icon,
|
|
iconColor = 'text-primary-blue',
|
|
bgColor = 'bg-primary-blue/10',
|
|
title,
|
|
children,
|
|
}: {
|
|
icon: React.ElementType;
|
|
iconColor?: string;
|
|
bgColor?: string;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 space-y-3">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`flex h-9 w-9 items-center justify-center rounded-lg ${bgColor}`}>
|
|
<Icon className={`w-4 h-4 ${iconColor}`} />
|
|
</div>
|
|
<h3 className="text-sm font-semibold text-white">{title}</h3>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Info row component for consistent layout
|
|
function InfoRow({
|
|
icon: Icon,
|
|
label,
|
|
value,
|
|
valueClass = '',
|
|
}: {
|
|
icon?: React.ElementType;
|
|
label: string;
|
|
value: React.ReactNode;
|
|
valueClass?: string;
|
|
}) {
|
|
return (
|
|
<div className="flex items-center justify-between py-2 border-b border-charcoal-outline/20 last:border-0">
|
|
<div className="flex items-center gap-2 text-xs text-gray-500">
|
|
{Icon && <Icon className="w-3.5 h-3.5" />}
|
|
<span>{label}</span>
|
|
</div>
|
|
<div className={`text-sm font-medium text-white ${valueClass}`}>{value}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Badge component for enabled features
|
|
function FeatureBadge({
|
|
icon: Icon,
|
|
label,
|
|
enabled,
|
|
color = 'primary-blue',
|
|
}: {
|
|
icon: React.ElementType;
|
|
label: string;
|
|
enabled: boolean;
|
|
color?: string;
|
|
}) {
|
|
if (!enabled) return null;
|
|
return (
|
|
<span className={`inline-flex items-center gap-1.5 rounded-full bg-${color}/10 px-3 py-1.5 text-xs font-medium text-${color}`}>
|
|
<Icon className="w-3 h-3" />
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export default function LeagueReviewSummary({ form, presets }: LeagueReviewSummaryProps) {
|
|
const { basics, structure, timings, scoring, championships, dropPolicy, stewarding } = form;
|
|
const seasonName = (form as LeagueConfigFormModel & { seasonName?: string }).seasonName;
|
|
|
|
const modeLabel =
|
|
structure.mode === 'solo'
|
|
? 'Solo drivers'
|
|
: 'Team-based';
|
|
|
|
const modeDescription =
|
|
structure.mode === 'solo'
|
|
? 'Individual competition'
|
|
: 'Teams with fixed rosters';
|
|
|
|
const capacityValue = (() => {
|
|
if (structure.mode === 'solo') {
|
|
return typeof structure.maxDrivers === 'number' ? structure.maxDrivers : '—';
|
|
}
|
|
return typeof structure.maxTeams === 'number' ? structure.maxTeams : '—';
|
|
})();
|
|
|
|
const capacityLabel = structure.mode === 'solo' ? 'drivers' : 'teams';
|
|
|
|
const formatMinutes = (value: number | undefined) => {
|
|
if (typeof value !== 'number' || value <= 0) return '—';
|
|
return `${value} min`;
|
|
};
|
|
|
|
const getDropRuleInfo = () => {
|
|
if (dropPolicy.strategy === 'none') {
|
|
return { emoji: '✓', label: 'All count', description: 'Every race counts' };
|
|
}
|
|
if (dropPolicy.strategy === 'bestNResults') {
|
|
return {
|
|
emoji: '🏆',
|
|
label: `Best ${dropPolicy.n ?? 'N'}`,
|
|
description: `Only best ${dropPolicy.n ?? 'N'} results count`,
|
|
};
|
|
}
|
|
if (dropPolicy.strategy === 'dropWorstN') {
|
|
return {
|
|
emoji: '🗑️',
|
|
label: `Drop ${dropPolicy.n ?? 'N'}`,
|
|
description: `Worst ${dropPolicy.n ?? 'N'} dropped`,
|
|
};
|
|
}
|
|
return { emoji: '✓', label: 'All count', description: 'Every race counts' };
|
|
};
|
|
const dropRuleInfo = getDropRuleInfo();
|
|
|
|
const preset = presets.find((p) => p.id === scoring.patternId) ?? null;
|
|
|
|
const seasonStartLabel =
|
|
timings.seasonStartDate
|
|
? new Date(timings.seasonStartDate).toLocaleDateString(undefined, {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
})
|
|
: null;
|
|
|
|
const stewardingLabel = (() => {
|
|
switch (stewarding.decisionMode) {
|
|
case 'admin_only':
|
|
return 'Admin-only decisions';
|
|
case 'steward_vote':
|
|
return 'Steward panel voting';
|
|
default:
|
|
return stewarding.decisionMode;
|
|
}
|
|
})();
|
|
|
|
|
|
const getScoringEmoji = () => {
|
|
if (!preset) return '🏁';
|
|
const name = preset.name.toLowerCase();
|
|
if (name.includes('sprint') || name.includes('double')) return '⚡';
|
|
if (name.includes('endurance') || name.includes('long')) return '🏆';
|
|
if (name.includes('club') || name.includes('casual')) return '🏅';
|
|
return '🏁';
|
|
};
|
|
|
|
// Normalize visibility to new terminology
|
|
const isRanked = basics.visibility === 'ranked' || basics.visibility === 'public';
|
|
const visibilityLabel = isRanked ? 'Ranked' : 'Unranked';
|
|
const visibilityDescription = isRanked
|
|
? 'Competitive • Affects ratings'
|
|
: 'Casual • Friends only';
|
|
|
|
// Calculate total weekend duration
|
|
const totalWeekendMinutes = (timings.practiceMinutes ?? 0) +
|
|
(timings.qualifyingMinutes ?? 0) +
|
|
(timings.sprintRaceMinutes ?? 0) +
|
|
(timings.mainRaceMinutes ?? 0);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* League Summary */}
|
|
<div className="space-y-3">
|
|
<h3 className="text-sm font-semibold text-gray-300">League summary</h3>
|
|
<div className="relative rounded-2xl bg-gradient-to-br from-primary-blue/20 via-iron-gray to-iron-gray border border-primary-blue/30 p-6 overflow-hidden">
|
|
{/* Background decoration */}
|
|
<div className="absolute top-0 right-0 w-32 h-32 bg-primary-blue/10 rounded-full blur-3xl" />
|
|
<div className="absolute bottom-0 left-0 w-24 h-24 bg-neon-aqua/5 rounded-full blur-2xl" />
|
|
|
|
<div className="relative flex items-start gap-4">
|
|
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-blue/20 border border-primary-blue/30 shrink-0">
|
|
<Rocket className="w-7 h-7 text-primary-blue" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h2 className="text-xl font-bold text-white mb-1 truncate">
|
|
{basics.name || 'Your New League'}
|
|
</h2>
|
|
<p className="text-sm text-gray-400 mb-3">
|
|
{basics.description || 'Ready to launch your racing series!'}
|
|
</p>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
{/* Ranked/Unranked Badge */}
|
|
<span className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium ${
|
|
isRanked
|
|
? 'bg-primary-blue/15 text-primary-blue border border-primary-blue/30'
|
|
: 'bg-neon-aqua/15 text-neon-aqua border border-neon-aqua/30'
|
|
}`}>
|
|
{isRanked ? <Trophy className="w-3 h-3" /> : <Users className="w-3 h-3" />}
|
|
<span className="font-semibold">{visibilityLabel}</span>
|
|
<span className="text-[10px] opacity-70">• {visibilityDescription}</span>
|
|
</span>
|
|
<span className="inline-flex items-center gap-1.5 rounded-full bg-charcoal-outline/50 px-3 py-1 text-xs font-medium text-gray-300">
|
|
<Gamepad2 className="w-3 h-3" />
|
|
iRacing
|
|
</span>
|
|
<span className="inline-flex items-center gap-1.5 rounded-full bg-charcoal-outline/50 px-3 py-1 text-xs font-medium text-gray-300">
|
|
{structure.mode === 'solo' ? <User className="w-3 h-3" /> : <UsersRound className="w-3 h-3" />}
|
|
{modeLabel}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Season Summary */}
|
|
<div className="space-y-3">
|
|
<h3 className="text-sm font-semibold text-gray-300">First season summary</h3>
|
|
<div className="flex flex-wrap items-center gap-2 text-xs text-gray-400">
|
|
<span>{seasonName || 'First season of this league'}</span>
|
|
{seasonStartLabel && (
|
|
<>
|
|
<span>•</span>
|
|
<span>Starts {seasonStartLabel}</span>
|
|
</>
|
|
)}
|
|
{typeof timings.roundsPlanned === 'number' && (
|
|
<>
|
|
<span>•</span>
|
|
<span>{timings.roundsPlanned} rounds planned</span>
|
|
</>
|
|
)}
|
|
<span>•</span>
|
|
<span>Stewarding: {stewardingLabel}</span>
|
|
</div>
|
|
{/* Stats Grid */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
{/* Capacity */}
|
|
<div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 text-center">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10 mx-auto mb-2">
|
|
<Users className="w-5 h-5 text-primary-blue" />
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">{capacityValue}</div>
|
|
<div className="text-xs text-gray-500">{capacityLabel}</div>
|
|
</div>
|
|
|
|
{/* Rounds */}
|
|
<div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 text-center">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10 mx-auto mb-2">
|
|
<Flag className="w-5 h-5 text-performance-green" />
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">{timings.roundsPlanned ?? '—'}</div>
|
|
<div className="text-xs text-gray-500">rounds</div>
|
|
</div>
|
|
|
|
{/* Weekend Duration */}
|
|
<div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 text-center">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-warning-amber/10 mx-auto mb-2">
|
|
<Timer className="w-5 h-5 text-warning-amber" />
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">{totalWeekendMinutes > 0 ? `${totalWeekendMinutes}` : '—'}</div>
|
|
<div className="text-xs text-gray-500">min/weekend</div>
|
|
</div>
|
|
|
|
{/* Championships */}
|
|
<div className="rounded-xl bg-iron-gray/50 border border-charcoal-outline/40 p-4 text-center">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-neon-aqua/10 mx-auto mb-2">
|
|
<Award className="w-5 h-5 text-neon-aqua" />
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">
|
|
{[championships.enableDriverChampionship, championships.enableTeamChampionship, championships.enableNationsChampionship, championships.enableTrophyChampionship].filter(Boolean).length}
|
|
</div>
|
|
<div className="text-xs text-gray-500">championships</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Detail Cards Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* Schedule Card */}
|
|
<ReviewCard icon={Calendar} title="Race Weekend">
|
|
<div className="space-y-1">
|
|
{timings.practiceMinutes && timings.practiceMinutes > 0 && (
|
|
<InfoRow icon={Clock} label="Practice" value={formatMinutes(timings.practiceMinutes)} />
|
|
)}
|
|
<InfoRow icon={Clock} label="Qualifying" value={formatMinutes(timings.qualifyingMinutes)} />
|
|
{timings.sprintRaceMinutes && timings.sprintRaceMinutes > 0 && (
|
|
<InfoRow icon={Zap} label="Sprint Race" value={formatMinutes(timings.sprintRaceMinutes)} />
|
|
)}
|
|
<InfoRow icon={Flag} label="Main Race" value={formatMinutes(timings.mainRaceMinutes)} />
|
|
</div>
|
|
</ReviewCard>
|
|
|
|
{/* Scoring Card */}
|
|
<ReviewCard icon={Trophy} iconColor="text-warning-amber" bgColor="bg-warning-amber/10" title="Scoring System">
|
|
<div className="space-y-3">
|
|
{/* Scoring Preset */}
|
|
<div className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite border border-charcoal-outline/30">
|
|
<span className="text-2xl">{getScoringEmoji()}</span>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-medium text-white">{preset?.name ?? 'Custom'}</div>
|
|
<div className="text-xs text-gray-500">{preset?.sessionSummary ?? 'Custom scoring enabled'}</div>
|
|
</div>
|
|
{scoring.customScoringEnabled && (
|
|
<span className="px-2 py-0.5 rounded bg-primary-blue/20 text-[10px] font-medium text-primary-blue">Custom</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Drop Rule */}
|
|
<div className="flex items-center gap-3 p-3 rounded-lg bg-deep-graphite border border-charcoal-outline/30">
|
|
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-charcoal-outline/50">
|
|
<span className="text-base">{dropRuleInfo.emoji}</span>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-medium text-white">{dropRuleInfo.label}</div>
|
|
<div className="text-xs text-gray-500">{dropRuleInfo.description}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ReviewCard>
|
|
</div>
|
|
|
|
{/* Championships Section */}
|
|
<ReviewCard icon={Award} iconColor="text-neon-aqua" bgColor="bg-neon-aqua/10" title="Active Championships">
|
|
<div className="flex flex-wrap gap-2">
|
|
{championships.enableDriverChampionship && (
|
|
<span className="inline-flex items-center gap-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/20 px-3 py-2 text-xs font-medium text-primary-blue">
|
|
<Trophy className="w-3.5 h-3.5" />
|
|
Driver Championship
|
|
<Check className="w-3 h-3 text-performance-green" />
|
|
</span>
|
|
)}
|
|
{championships.enableTeamChampionship && (
|
|
<span className="inline-flex items-center gap-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/20 px-3 py-2 text-xs font-medium text-primary-blue">
|
|
<Award className="w-3.5 h-3.5" />
|
|
Team Championship
|
|
<Check className="w-3 h-3 text-performance-green" />
|
|
</span>
|
|
)}
|
|
{championships.enableNationsChampionship && (
|
|
<span className="inline-flex items-center gap-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/20 px-3 py-2 text-xs font-medium text-primary-blue">
|
|
<Globe className="w-3.5 h-3.5" />
|
|
Nations Cup
|
|
<Check className="w-3 h-3 text-performance-green" />
|
|
</span>
|
|
)}
|
|
{championships.enableTrophyChampionship && (
|
|
<span className="inline-flex items-center gap-1.5 rounded-lg bg-primary-blue/10 border border-primary-blue/20 px-3 py-2 text-xs font-medium text-primary-blue">
|
|
<Medal className="w-3.5 h-3.5" />
|
|
Trophy Championship
|
|
<Check className="w-3 h-3 text-performance-green" />
|
|
</span>
|
|
)}
|
|
{![championships.enableDriverChampionship, championships.enableTeamChampionship, championships.enableNationsChampionship, championships.enableTrophyChampionship].some(Boolean) && (
|
|
<span className="text-sm text-gray-500">No championships enabled</span>
|
|
)}
|
|
</div>
|
|
</ReviewCard>
|
|
|
|
{/* Ready to launch message */}
|
|
<div className="rounded-xl bg-performance-green/5 border border-performance-green/20 p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/20">
|
|
<Check className="w-5 h-5 text-performance-green" />
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-white">Ready to launch!</p>
|
|
<p className="text-xs text-gray-400">
|
|
Click "Create League" to launch your racing series. You can modify all settings later.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |