diff --git a/src/lib/types/api/gw.ts b/src/lib/types/api/gw.ts index 34802efe..af7c945b 100644 --- a/src/lib/types/api/gw.ts +++ b/src/lib/types/api/gw.ts @@ -30,6 +30,7 @@ export interface GwEvent { endDate: string eventNumber: number // GW #XX status?: GwEventStatus + crewTotalScore?: number // Included when user has a crew with participation createdAt?: string updatedAt?: string } diff --git a/src/routes/(app)/crew/+page.svelte b/src/routes/(app)/crew/+page.svelte index 81c76966..9cf63f95 100644 --- a/src/routes/(app)/crew/+page.svelte +++ b/src/routes/(app)/crew/+page.svelte @@ -168,6 +168,11 @@ }) } + // Helper for formatting scores with commas + function formatScore(score: number): string { + return score.toLocaleString() + } + function formatEventStatus(status: string, startDate: string): string { if (status === 'upcoming') { const now = new Date() @@ -293,6 +298,11 @@ {formatDate(event.startDate)} – {formatDate(event.endDate)} + + {#if event.crewTotalScore !== undefined} + {formatScore(event.crewTotalScore)} + {/if} + {formatEventStatus(event.status ?? 'unknown', event.startDate)} @@ -593,8 +603,8 @@ .event-item { display: flex; - justify-content: space-between; align-items: center; + gap: spacing.$unit-2x; padding: spacing.$unit spacing.$unit-2x; border-radius: layout.$item-corner; transition: background-color 0.15s; @@ -609,6 +619,7 @@ display: flex; align-items: center; gap: spacing.$unit; + width: 140px; } .event-number { @@ -618,15 +629,28 @@ } .event-dates { + flex: 1; font-size: typography.$font-small; color: var(--text-secondary); } + .event-score { + width: 140px; + font-size: typography.$font-small; + font-weight: typography.$medium; + font-variant-numeric: tabular-nums; + text-align: right; + color: var(--text-primary); + } + .event-status { + width: 80px; font-size: typography.$font-small; padding: 2px 6px; border-radius: layout.$item-corner-small; + text-align: center; text-transform: capitalize; + white-space: nowrap; &.status-active { background: var(--color-green-light, #dcfce7);