add member/phantom gw scores history pages

src/lib/api/adapters/gw.adapter.ts

@@ -12,7 +12,9 @@ import type {
   CreateCrewScoreInput,
   UpdateCrewScoreInput,
   CreateIndividualScoreInput,
-  BatchIndividualScoresInput
+  BatchIndividualScoresInput,
+  MemberGwScores,
+  PhantomGwScores
 } from '$lib/types/api/gw'
 
 /**
@@ -335,6 +337,30 @@ export class GwAdapter extends BaseAdapter {
     this.clearCache('/crew/gw_participations')
     return response.individualScores
   }
+
+  // ==================== Member/Phantom Score History ====================
+
+  /**
+   * Get all GW scores for a specific crew member
+   */
+  async getMemberGwScores(membershipId: string, options?: RequestOptions): Promise<MemberGwScores> {
+    const response = await this.request<MemberGwScores>(
+      `/crew/memberships/${membershipId}/gw_scores`,
+      options
+    )
+    return response
+  }
+
+  /**
+   * Get all GW scores for a specific phantom player
+   */
+  async getPhantomGwScores(phantomId: string, options?: RequestOptions): Promise<PhantomGwScores> {
+    const response = await this.request<PhantomGwScores>(
+      `/crew/phantom_players/${phantomId}/gw_scores`,
+      options
+    )
+    return response
+  }
 }
 
 export const gwAdapter = new GwAdapter(DEFAULT_ADAPTER_CONFIG)

src/lib/api/queries/gw.queries.ts

@@ -80,6 +80,34 @@ export const gwQueries = {
       enabled: !!participationId,
       staleTime: 1000 * 60 * 2, // 2 minutes - scores change during event
       gcTime: 1000 * 60 * 15 // 15 minutes
+    }),
+
+  /**
+   * Member's GW scores history query options
+   *
+   * @param membershipId - Crew membership ID
+   */
+  memberGwScores: (membershipId: string) =>
+    queryOptions({
+      queryKey: ['crew', 'member', membershipId, 'gw_scores'] as const,
+      queryFn: () => gwAdapter.getMemberGwScores(membershipId),
+      enabled: !!membershipId,
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      gcTime: 1000 * 60 * 30 // 30 minutes
+    }),
+
+  /**
+   * Phantom's GW scores history query options
+   *
+   * @param phantomId - Phantom player ID
+   */
+  phantomGwScores: (phantomId: string) =>
+    queryOptions({
+      queryKey: ['crew', 'phantom', phantomId, 'gw_scores'] as const,
+      queryFn: () => gwAdapter.getPhantomGwScores(phantomId),
+      enabled: !!phantomId,
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      gcTime: 1000 * 60 * 30 // 30 minutes
     })
 }
 
@@ -105,5 +133,7 @@ export const gwKeys = {
   events: () => [...gwKeys.all, 'events'] as const,
   event: (eventId: string) => [...gwKeys.all, 'events', eventId] as const,
   participationsAll: () => [...gwKeys.all, 'participations'] as const,
-  participation: (participationId: string) => [...gwKeys.all, 'participations', participationId] as const
+  participation: (participationId: string) => [...gwKeys.all, 'participations', participationId] as const,
+  memberGwScores: (membershipId: string) => ['crew', 'member', membershipId, 'gw_scores'] as const,
+  phantomGwScores: (phantomId: string) => ['crew', 'phantom', phantomId, 'gw_scores'] as const
 }

src/lib/types/api/gw.ts

@@ -148,6 +148,33 @@ export interface BatchIndividualScoresInput {
   scores: BatchScoreEntry[]
 }
 
+// Member/Phantom GW score history
+
+export interface GwEventMinimal {
+  id: string
+  element: number
+  eventNumber: number
+  startDate: string
+  endDate: string
+}
+
+export interface EventScoreSummary {
+  gwEvent: GwEventMinimal
+  totalScore: number
+}
+
+export interface MemberGwScores {
+  member: CrewMembership
+  eventScores: EventScoreSummary[]
+  grandTotal: number
+}
+
+export interface PhantomGwScores {
+  phantom: PhantomPlayer
+  eventScores: EventScoreSummary[]
+  grandTotal: number
+}
+
 // Aggregated data for visualization
 
 export interface GwLeaderboardEntry {

src/routes/(app)/crew/members/[membershipId]/+page.svelte

@@ -0,0 +1,179 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { page } from '$app/stores'
+	import { goto } from '$app/navigation'
+	import { createQuery } from '@tanstack/svelte-query'
+	import { gwQueries } from '$lib/api/queries/gw.queries'
+	import { crewStore } from '$lib/stores/crew.store.svelte'
+	import { formatScore } from '$lib/utils/gw'
+	import ElementBadge from '$lib/components/ui/ElementBadge.svelte'
+	import Button from '$lib/components/ui/Button.svelte'
+
+	const membershipId = $derived($page.params.membershipId ?? '')
+
+	// Query for member's GW scores
+	const scoresQuery = createQuery(() => gwQueries.memberGwScores(membershipId))
+
+	const memberName = $derived(scoresQuery.data?.member?.user?.username ?? 'Member')
+</script>
+
+<div class="scores-page">
+	<header class="page-header">
+		<Button variant="ghost" size="small" icon="arrow-left" onclick={() => history.back()}>
+			Back
+		</Button>
+		<h1>{memberName}</h1>
+	</header>
+
+	{#if scoresQuery.isLoading}
+		<div class="loading">Loading scores...</div>
+	{:else if scoresQuery.isError}
+		<div class="error">Failed to load scores</div>
+	{:else if scoresQuery.data}
+		{@const data = scoresQuery.data}
+
+		<div class="summary">
+			<div class="stat">
+				<span class="stat-label">Total Honors</span>
+				<span class="stat-value">{formatScore(data.grandTotal)}</span>
+			</div>
+			<div class="stat">
+				<span class="stat-label">Events</span>
+				<span class="stat-value">{data.eventScores.length}</span>
+			</div>
+		</div>
+
+		{#if data.eventScores.length === 0}
+			<div class="empty">No GW scores recorded yet.</div>
+		{:else}
+			<ul class="events-list">
+				{#each data.eventScores as eventScore (eventScore.gwEvent.id)}
+					<li class="event-item">
+						<button
+							class="event-button"
+							onclick={() => goto(`/crew/events/${eventScore.gwEvent.eventNumber}`)}
+						>
+							<div class="event-info">
+								<span class="event-number">GW #{eventScore.gwEvent.eventNumber}</span>
+								<ElementBadge element={eventScore.gwEvent.element} />
+							</div>
+							<span class="event-score">{formatScore(eventScore.totalScore)}</span>
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	{/if}
+</div>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as spacing;
+	@use '$src/themes/typography' as typography;
+	@use '$src/themes/layout' as layout;
+
+	.scores-page {
+		padding: spacing.$unit-2x;
+	}
+
+	.page-header {
+		display: flex;
+		align-items: center;
+		gap: spacing.$unit-2x;
+		margin-bottom: spacing.$unit-3x;
+
+		h1 {
+			font-size: typography.$font-large;
+			font-weight: typography.$bold;
+			margin: 0;
+		}
+	}
+
+	.loading,
+	.error,
+	.empty {
+		text-align: center;
+		padding: spacing.$unit-4x;
+		color: var(--text-secondary);
+	}
+
+	.error {
+		color: var(--color-error);
+	}
+
+	.summary {
+		display: flex;
+		gap: spacing.$unit-4x;
+		margin-bottom: spacing.$unit-3x;
+		padding: spacing.$unit-2x;
+		background: var(--card-bg);
+		border-radius: layout.$card-corner;
+	}
+
+	.stat {
+		display: flex;
+		flex-direction: column;
+		gap: spacing.$unit-half;
+	}
+
+	.stat-label {
+		font-size: typography.$font-small;
+		color: var(--text-secondary);
+	}
+
+	.stat-value {
+		font-size: typography.$font-large;
+		font-weight: typography.$bold;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.events-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		gap: spacing.$unit;
+	}
+
+	.event-item {
+		border-radius: layout.$item-corner;
+		overflow: hidden;
+	}
+
+	.event-button {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		padding: spacing.$unit-2x;
+		background: var(--card-bg);
+		border: none;
+		border-radius: layout.$item-corner;
+		cursor: pointer;
+		transition: background-color 0.15s;
+		text-align: left;
+
+		&:hover {
+			background: var(--card-bg-hover);
+		}
+	}
+
+	.event-info {
+		display: flex;
+		align-items: center;
+		gap: spacing.$unit-2x;
+	}
+
+	.event-number {
+		font-size: typography.$font-regular;
+		font-weight: typography.$medium;
+	}
+
+	.event-score {
+		font-size: typography.$font-regular;
+		font-weight: typography.$medium;
+		font-variant-numeric: tabular-nums;
+		color: var(--text-secondary);
+	}
+</style>

src/routes/(app)/crew/phantoms/[phantomId]/+page.svelte

@@ -0,0 +1,187 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { page } from '$app/stores'
+	import { goto } from '$app/navigation'
+	import { createQuery } from '@tanstack/svelte-query'
+	import { gwQueries } from '$lib/api/queries/gw.queries'
+	import { formatScore } from '$lib/utils/gw'
+	import ElementBadge from '$lib/components/ui/ElementBadge.svelte'
+	import Button from '$lib/components/ui/Button.svelte'
+
+	const phantomId = $derived($page.params.phantomId ?? '')
+
+	// Query for phantom's GW scores
+	const scoresQuery = createQuery(() => gwQueries.phantomGwScores(phantomId))
+
+	const phantomName = $derived(scoresQuery.data?.phantom?.name ?? 'Phantom')
+</script>
+
+<div class="scores-page">
+	<header class="page-header">
+		<Button variant="ghost" size="small" icon="arrow-left" onclick={() => history.back()}>
+			Back
+		</Button>
+		<h1>{phantomName}</h1>
+		<span class="phantom-badge">Phantom</span>
+	</header>
+
+	{#if scoresQuery.isLoading}
+		<div class="loading">Loading scores...</div>
+	{:else if scoresQuery.isError}
+		<div class="error">Failed to load scores</div>
+	{:else if scoresQuery.data}
+		{@const data = scoresQuery.data}
+
+		<div class="summary">
+			<div class="stat">
+				<span class="stat-label">Total Honors</span>
+				<span class="stat-value">{formatScore(data.grandTotal)}</span>
+			</div>
+			<div class="stat">
+				<span class="stat-label">Events</span>
+				<span class="stat-value">{data.eventScores.length}</span>
+			</div>
+		</div>
+
+		{#if data.eventScores.length === 0}
+			<div class="empty">No GW scores recorded yet.</div>
+		{:else}
+			<ul class="events-list">
+				{#each data.eventScores as eventScore (eventScore.gwEvent.id)}
+					<li class="event-item">
+						<button
+							class="event-button"
+							onclick={() => goto(`/crew/events/${eventScore.gwEvent.eventNumber}`)}
+						>
+							<div class="event-info">
+								<span class="event-number">GW #{eventScore.gwEvent.eventNumber}</span>
+								<ElementBadge element={eventScore.gwEvent.element} />
+							</div>
+							<span class="event-score">{formatScore(eventScore.totalScore)}</span>
+						</button>
+					</li>
+				{/each}
+			</ul>
+		{/if}
+	{/if}
+</div>
+
+<style lang="scss">
+	@use '$src/themes/spacing' as spacing;
+	@use '$src/themes/typography' as typography;
+	@use '$src/themes/layout' as layout;
+
+	.scores-page {
+		padding: spacing.$unit-2x;
+	}
+
+	.page-header {
+		display: flex;
+		align-items: center;
+		gap: spacing.$unit-2x;
+		margin-bottom: spacing.$unit-3x;
+
+		h1 {
+			font-size: typography.$font-large;
+			font-weight: typography.$bold;
+			margin: 0;
+		}
+	}
+
+	.phantom-badge {
+		font-size: typography.$font-small;
+		padding: 2px 8px;
+		border-radius: layout.$item-corner-small;
+		background: var(--color-purple-light, #ede9fe);
+		color: var(--color-purple-dark, #7c3aed);
+	}
+
+	.loading,
+	.error,
+	.empty {
+		text-align: center;
+		padding: spacing.$unit-4x;
+		color: var(--text-secondary);
+	}
+
+	.error {
+		color: var(--color-error);
+	}
+
+	.summary {
+		display: flex;
+		gap: spacing.$unit-4x;
+		margin-bottom: spacing.$unit-3x;
+		padding: spacing.$unit-2x;
+		background: var(--card-bg);
+		border-radius: layout.$card-corner;
+	}
+
+	.stat {
+		display: flex;
+		flex-direction: column;
+		gap: spacing.$unit-half;
+	}
+
+	.stat-label {
+		font-size: typography.$font-small;
+		color: var(--text-secondary);
+	}
+
+	.stat-value {
+		font-size: typography.$font-large;
+		font-weight: typography.$bold;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.events-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		gap: spacing.$unit;
+	}
+
+	.event-item {
+		border-radius: layout.$item-corner;
+		overflow: hidden;
+	}
+
+	.event-button {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+		padding: spacing.$unit-2x;
+		background: var(--card-bg);
+		border: none;
+		border-radius: layout.$item-corner;
+		cursor: pointer;
+		transition: background-color 0.15s;
+		text-align: left;
+
+		&:hover {
+			background: var(--card-bg-hover);
+		}
+	}
+
+	.event-info {
+		display: flex;
+		align-items: center;
+		gap: spacing.$unit-2x;
+	}
+
+	.event-number {
+		font-size: typography.$font-regular;
+		font-weight: typography.$medium;
+	}
+
+	.event-score {
+		font-size: typography.$font-regular;
+		font-weight: typography.$medium;
+		font-variant-numeric: tabular-nums;
+		color: var(--text-secondary);
+	}
+</style>