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

wip

Browse Source
This commit is contained in:
Marc Mintel
2025-12-05 12:47:20 +01:00
parent 5a9cd28d5b
commit b6c2b4a422
7 changed files with 1093 additions and 713 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
apps/website/components/leagues/LeagueScoringSection.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import { Trophy, Award, Star, Target } from 'lucide-react';
import type { LeagueScoringPresetDTO } from '@gridpilot/racing/application/ports/LeagueScoringPresetProvider';
import type { LeagueConfigFormModel } from '@gridpilot/racing/application';
import Button from '@/components/ui/Button';
@@ -185,10 +186,13 @@ export function ScoringPatternSection({
return (
<section className="space-y-4">
<header className="space-y-1">
<h3 className="text-sm font-semibold text-white">Scoring pattern</h3>
<header className="space-y-2">
<div className="flex items-center gap-2">
<Trophy className="w-4 h-4 text-primary-blue" />
<h3 className="text-sm font-semibold text-white">Scoring pattern</h3>
</div>
<p className="text-xs text-gray-400">
Pick an overall scoring style; details can evolve later.
Choose a preset that matches your race weekend format
</p>
</header>
@@ -219,25 +223,44 @@ export function ScoringPatternSection({
<p className="text-xs text-warning-amber">{patternError}</p>
)}
<div className="mt-3 space-y-2 rounded-lg border border-charcoal-outline/70 bg-deep-graphite/70 p-3 text-xs text-gray-300">
<div className="font-semibold text-gray-200">Selected pattern</div>
<div className="mt-3 space-y-3 rounded-lg border border-charcoal-outline/70 bg-iron-gray/40 p-4">
<div className="flex items-center gap-2">
<Star className="w-4 h-4 text-primary-blue" />
<div className="font-semibold text-gray-200">Selected pattern</div>
</div>
{currentPreset ? (
<div className="mt-1 space-y-1 text-[11px]">
<div className="inline-flex items-center gap-2">
<span className="inline-flex rounded-full bg-primary-blue/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-primary-blue">
<div className="space-y-2 text-xs">
<div className="flex items-center gap-2">
<span className="inline-flex rounded-full bg-primary-blue/10 px-3 py-1 text-xs font-medium text-primary-blue">
{currentPreset.name}
</span>
</div>
<p className="text-gray-300">Sessions: {currentPreset.sessionSummary}</p>
<p className="text-gray-300">
Points focus: {currentPreset ? renderPrimaryLabel(currentPreset) : '—'}
</p>
<p className="text-gray-300">
Default drops: {currentPreset.dropPolicySummary}
</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs">
<div className="flex items-start gap-2">
<Target className="w-3 h-3 mt-0.5 text-gray-400 shrink-0" />
<div>
<div className="text-gray-500">Sessions</div>
<div className="text-gray-200">{currentPreset.sessionSummary}</div>
</div>
</div>
<div className="flex items-start gap-2">
<Trophy className="w-3 h-3 mt-0.5 text-gray-400 shrink-0" />
<div>
<div className="text-gray-500">Points focus</div>
<div className="text-gray-200">{renderPrimaryLabel(currentPreset)}</div>
</div>
</div>
<div className="flex items-start gap-2">
<Award className="w-3 h-3 mt-0.5 text-gray-400 shrink-0" />
<div>
<div className="text-gray-500">Default drops</div>
<div className="text-gray-200">{currentPreset.dropPolicySummary}</div>
</div>
</div>
</div>
</div>
) : (
<p className="text-[11px] text-gray-500">
<p className="text-xs text-gray-500">
No pattern selected yet. Pick a card above to define your scoring style.
</p>
)}
@@ -307,21 +330,29 @@ export function ChampionshipsSection({
return (
<section className="space-y-4">
<header className="space-y-1">
<h3 className="text-sm font-semibold text-white">Championships</h3>
<header className="space-y-2">
<div className="flex items-center gap-2">
<Award className="w-4 h-4 text-primary-blue" />
<h3 className="text-sm font-semibold text-white">Championships</h3>
</div>
<p className="text-xs text-gray-400">
Pick which standings you want to maintain for this season.
Select which championship standings to track this season
</p>
</header>
<div className="space-y-3 text-xs text-gray-300">
{/* Driver championship */}
<div className="flex items-start justify-between gap-3 rounded-lg bg-deep-graphite/40 p-3">
<div className="space-y-0.5">
<div className="text-xs font-medium text-gray-100">Driver championship</div>
<p className="text-[11px] text-gray-500">
Per-driver season standings across all points-scoring sessions.
</p>
<div className="flex items-start justify-between gap-3 rounded-lg border border-charcoal-outline/50 bg-iron-gray/30 p-4 transition-all duration-200 hover:border-primary-blue/30">
<div className="flex items-start gap-3">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-blue/10 shrink-0">
<Trophy className="w-4 h-4 text-primary-blue" />
</div>
<div className="space-y-1">
<div className="text-sm font-medium text-gray-100">Driver championship</div>
<p className="text-xs text-gray-500">
Per-driver season standings across all points-scoring sessions.
</p>
</div>
</div>
<div className="shrink-0">
{readOnly ? (
@@ -354,17 +385,22 @@ export function ChampionshipsSection({
</div>
{/* Team championship */}
<div className="flex items-start justify-between gap-3 rounded-lg bg-deep-graphite/40 p-3">
<div className="space-y-0.5">
<div className="text-xs font-medium text-gray-100">Team championship</div>
<p className="text-[11px] text-gray-500">
Aggregated season standings for fixed teams.
</p>
{!isTeamsMode && (
<p className="text-[10px] text-gray-500">
Enable team mode in Structure to turn this on.
<div className={`flex items-start justify-between gap-3 rounded-lg border border-charcoal-outline/50 bg-iron-gray/30 p-4 transition-all duration-200 ${isTeamsMode ? 'hover:border-primary-blue/30' : 'opacity-60'}`}>
<div className="flex items-start gap-3">
<div className={`flex h-8 w-8 items-center justify-center rounded-lg shrink-0 ${isTeamsMode ? 'bg-primary-blue/10' : 'bg-gray-500/10'}`}>
<Award className={`w-4 h-4 ${isTeamsMode ? 'text-primary-blue' : 'text-gray-500'}`} />
</div>
<div className="space-y-1">
<div className="text-sm font-medium text-gray-100">Team championship</div>
<p className="text-xs text-gray-500">
Aggregated season standings for fixed teams.
</p>
)}
{!isTeamsMode && (
<p className="text-xs text-warning-amber/80">
Enable team mode in Structure to activate this
</p>
)}
</div>
</div>
<div className="shrink-0">
{readOnly ? (
@@ -405,12 +441,17 @@ export function ChampionshipsSection({
</div>
{/* Nations championship */}
<div className="flex items-start justify-between gap-3 rounded-lg bg-deep-graphite/40 p-3">
<div className="space-y-0.5">
<div className="text-xs font-medium text-gray-100">Nations Cup</div>
<p className="text-[11px] text-gray-500">
Standings grouped by drivers' nationality or country flag.
</p>
<div className="flex items-start justify-between gap-3 rounded-lg border border-charcoal-outline/50 bg-iron-gray/30 p-4 transition-all duration-200 hover:border-primary-blue/30">
<div className="flex items-start gap-3">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-blue/10 shrink-0">
<Star className="w-4 h-4 text-primary-blue" />
</div>
<div className="space-y-1">
<div className="text-sm font-medium text-gray-100">Nations Cup</div>
<p className="text-xs text-gray-500">
Standings grouped by drivers' nationality or country flag.
</p>
</div>
</div>
<div className="shrink-0">
{readOnly ? (
@@ -443,12 +484,17 @@ export function ChampionshipsSection({
</div>
{/* Trophy championship */}
<div className="flex items-start justify-between gap-3 rounded-lg bg-deep-graphite/40 p-3">
<div className="space-y-0.5">
<div className="text-xs font-medium text-gray-100">Trophy / cup</div>
<p className="text-[11px] text-gray-500">
Extra cup-style standings for special categories or invite-only groups.
</p>
<div className="flex items-start justify-between gap-3 rounded-lg border border-charcoal-outline/50 bg-iron-gray/30 p-4 transition-all duration-200 hover:border-primary-blue/30">
<div className="flex items-start gap-3">
<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-blue/10 shrink-0">
<Award className="w-4 h-4 text-primary-blue" />
</div>
<div className="space-y-1">
<div className="text-sm font-medium text-gray-100">Trophy / cup</div>
<p className="text-xs text-gray-500">
Extra cup-style standings for special categories or invite-only groups.
</p>
</div>
</div>
<div className="shrink-0">
{readOnly ? (
@@ -480,9 +526,12 @@ export function ChampionshipsSection({
</div>
</div>
<p className="pt-1 text-[10px] text-gray-500">
For this alpha slice, only driver standings are fully calculated, but these toggles express intent for future seasons.
</p>
<div className="pt-2 rounded-md bg-deep-graphite/40 p-3 text-xs text-gray-500 border border-charcoal-outline/30">
<p className="flex items-start gap-2">
<span className="shrink-0">ℹ️</span>
<span>For this alpha, only driver standings are fully calculated. These toggles express intent for future seasons.</span>
</p>
</div>
</div>
</section>
);