granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

redesign member/phantom pages to match crew page styling

Browse source
This commit is contained in:
Justin Edmund 2025-12-18 13:12:11 -08:00
parent 69b1f37418
commit ba5ec72ebd
3 changed files with 316 additions and 249 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/lib/components/crew/GwEventScoreRow.svelte Normal file
View file

@ -0,0 +1,74 @@
<svelte:options runes={true} />
<script lang="ts">
import { goto } from '$app/navigation'
import ElementBadge from '$lib/components/ui/ElementBadge.svelte'
import { formatScore } from '$lib/utils/gw'
import type { EventScoreSummary } from '$lib/types/api/gw'
interface Props {
eventScore: EventScoreSummary
}
let { eventScore }: Props = $props()
</script>
<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>
<style lang="scss">
@use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography;
@use '$src/themes/layout' as layout;
.event-item {
border-radius: layout.$item-corner;
overflow: hidden;
}
.event-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: spacing.$unit spacing.$unit-2x;
background: transparent;
border: none;
border-radius: layout.$item-corner;
cursor: pointer;
transition: background-color 0.15s;
text-align: left;
&:hover {
background: rgba(0, 0, 0, 0.03);
}
}
.event-info {
display: flex;
align-items: center;
gap: spacing.$unit;
}
.event-number {
font-size: typography.$font-small;
font-weight: typography.$medium;
}
.event-score {
font-size: typography.$font-small;
font-weight: typography.$medium;
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
}
</style>

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

@ -2,13 +2,13 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores' import { page } from '$app/stores'
import { goto } from '$app/navigation'
import { createQuery } from '@tanstack/svelte-query' import { createQuery } from '@tanstack/svelte-query'
import { gwQueries } from '$lib/api/queries/gw.queries' import { gwQueries } from '$lib/api/queries/gw.queries'
import { crewStore } from '$lib/stores/crew.store.svelte' import { formatScore, toPlayerHistoryChartData } from '$lib/utils/gw'
import { formatScore } from '$lib/utils/gw' import { formatDateJST } from '$lib/utils/date'
import ElementBadge from '$lib/components/ui/ElementBadge.svelte' import CrewHeader from '$lib/components/crew/CrewHeader.svelte'
import Button from '$lib/components/ui/Button.svelte' import GwEventScoreRow from '$lib/components/crew/GwEventScoreRow.svelte'
import GwCrewHistoryChart from '$lib/components/charts/GwCrewHistoryChart.svelte'
const membershipId = $derived($page.params.membershipId ?? '') const membershipId = $derived($page.params.membershipId ?? '')
@ -16,104 +16,122 @@
const scoresQuery = createQuery(() => gwQueries.memberGwScores(membershipId)) const scoresQuery = createQuery(() => gwQueries.memberGwScores(membershipId))
const memberName = $derived(scoresQuery.data?.member?.user?.username ?? 'Member') const memberName = $derived(scoresQuery.data?.member?.user?.username ?? 'Member')
// Transform data for chart
const historyChartData = $derived(
scoresQuery.data?.eventScores
? toPlayerHistoryChartData(scoresQuery.data.eventScores, formatDateJST)
: []
)
</script> </script>
<div class="scores-page"> <svelte:head>
<header class="page-header"> <title>{memberName} / granblue.team</title>
<Button variant="ghost" size="small" icon="arrow-left" onclick={() => history.back()}> </svelte:head>
Back
</Button>
<h1>{memberName}</h1>
</header>
<div class="page">
<div class="card">
{#if scoresQuery.isLoading} {#if scoresQuery.isLoading}
<div class="loading">Loading scores...</div> <div class="loading-state">
<p>Loading...</p>
</div>
{:else if scoresQuery.isError} {:else if scoresQuery.isError}
<div class="error">Failed to load scores</div> <div class="error-state">
<p>Failed to load scores</p>
</div>
{:else if scoresQuery.data} {:else if scoresQuery.data}
{@const data = scoresQuery.data} {@const data = scoresQuery.data}
<div class="summary"> <CrewHeader title={memberName} backHref="/crew/members" />
<div class="stats-row">
<div class="stat"> <div class="stat">
<span class="stat-label">Total Honors</span>
<span class="stat-value">{formatScore(data.grandTotal)}</span> <span class="stat-value">{formatScore(data.grandTotal)}</span>
<span class="stat-label">Total Honors</span>
</div> </div>
<div class="stat"> <div class="stat">
<span class="stat-label">Events</span>
<span class="stat-value">{data.eventScores.length}</span> <span class="stat-value">{data.eventScores.length}</span>
<span class="stat-label">Events</span>
</div> </div>
</div> </div>
{#if data.eventScores.length === 0} {#if historyChartData.length > 0}
<div class="empty">No GW scores recorded yet.</div> <div class="chart-section">
{:else} <GwCrewHistoryChart data={historyChartData} height={300} />
<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> </div>
<span class="event-score">{formatScore(eventScore.totalScore)}</span> {/if}
</button>
</li> {#if data.eventScores.length === 0}
<div class="empty-state">No GW scores recorded yet.</div>
{:else}
<div class="section-header">
<span class="section-title">Event History</span>
</div>
<ul class="event-list">
{#each data.eventScores as eventScore (eventScore.gwEvent.id)}
<GwEventScoreRow {eventScore} />
{/each} {/each}
</ul> </ul>
{/if} {/if}
{/if} {/if}
</div> </div>
</div>
<style lang="scss"> <style lang="scss">
@use '$src/themes/colors' as colors;
@use '$src/themes/effects' as effects;
@use '$src/themes/spacing' as spacing; @use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography; @use '$src/themes/typography' as typography;
@use '$src/themes/layout' as layout; @use '$src/themes/layout' as layout;
.scores-page { .page {
padding: spacing.$unit-2x; margin: 0 auto;
max-width: var(--main-max-width);
} }
.page-header { .card {
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); background: var(--card-bg);
border-radius: layout.$card-corner; border: 0.5px solid rgba(0, 0, 0, 0.18);
border-radius: layout.$page-corner;
box-shadow: effects.$page-elevation;
overflow: hidden;
}
.loading-state,
.error-state {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: spacing.$unit-4x;
gap: spacing.$unit-2x;
color: var(--text-secondary);
font-size: typography.$font-small;
}
.stats-row {
display: flex;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
} }
.stat { .stat {
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: spacing.$unit-half; align-items: center;
padding: spacing.$unit-2x;
border-right: 1px solid rgba(0, 0, 0, 0.08);
&:last-child {
border-right: none;
}
}
.stat-value {
font-size: typography.$font-medium;
font-weight: typography.$medium;
margin-bottom: 2px;
} }
.stat-label { .stat-label {
@ -121,59 +139,35 @@
color: var(--text-secondary); color: var(--text-secondary);
} }
.stat-value { .chart-section {
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; padding: spacing.$unit-2x;
background: var(--card-bg); border-bottom: 1px solid rgba(0, 0, 0, 0.06);
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 { .section-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: spacing.$unit-2x; padding: spacing.$unit spacing.$unit-2x;
background: rgba(0, 0, 0, 0.02);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
} }
.event-number { .section-title {
font-size: typography.$font-regular; font-size: typography.$font-small;
font-weight: typography.$medium; font-weight: typography.$medium;
}
.event-score {
font-size: typography.$font-regular;
font-weight: typography.$medium;
font-variant-numeric: tabular-nums;
color: var(--text-secondary); color: var(--text-secondary);
} }
.empty-state {
text-align: center;
color: var(--text-secondary);
padding: spacing.$unit-3x;
font-size: typography.$font-small;
}
.event-list {
list-style: none;
margin: 0;
padding: spacing.$unit;
}
</style> </style>

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

@ -2,12 +2,13 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores' import { page } from '$app/stores'
import { goto } from '$app/navigation'
import { createQuery } from '@tanstack/svelte-query' import { createQuery } from '@tanstack/svelte-query'
import { gwQueries } from '$lib/api/queries/gw.queries' import { gwQueries } from '$lib/api/queries/gw.queries'
import { formatScore } from '$lib/utils/gw' import { formatScore, toPlayerHistoryChartData } from '$lib/utils/gw'
import ElementBadge from '$lib/components/ui/ElementBadge.svelte' import { formatDateJST } from '$lib/utils/date'
import Button from '$lib/components/ui/Button.svelte' import CrewHeader from '$lib/components/crew/CrewHeader.svelte'
import GwEventScoreRow from '$lib/components/crew/GwEventScoreRow.svelte'
import GwCrewHistoryChart from '$lib/components/charts/GwCrewHistoryChart.svelte'
const phantomId = $derived($page.params.phantomId ?? '') const phantomId = $derived($page.params.phantomId ?? '')
@ -15,81 +16,106 @@
const scoresQuery = createQuery(() => gwQueries.phantomGwScores(phantomId)) const scoresQuery = createQuery(() => gwQueries.phantomGwScores(phantomId))
const phantomName = $derived(scoresQuery.data?.phantom?.name ?? 'Phantom') const phantomName = $derived(scoresQuery.data?.phantom?.name ?? 'Phantom')
// Transform data for chart
const historyChartData = $derived(
scoresQuery.data?.eventScores
? toPlayerHistoryChartData(scoresQuery.data.eventScores, formatDateJST)
: []
)
</script> </script>
<div class="scores-page"> <svelte:head>
<header class="page-header"> <title>{phantomName} / granblue.team</title>
<Button variant="ghost" size="small" icon="arrow-left" onclick={() => history.back()}> </svelte:head>
Back
</Button>
<h1>{phantomName}</h1>
<span class="phantom-badge">Phantom</span>
</header>
<div class="page">
<div class="card">
{#if scoresQuery.isLoading} {#if scoresQuery.isLoading}
<div class="loading">Loading scores...</div> <div class="loading-state">
<p>Loading...</p>
</div>
{:else if scoresQuery.isError} {:else if scoresQuery.isError}
<div class="error">Failed to load scores</div> <div class="error-state">
<p>Failed to load scores</p>
</div>
{:else if scoresQuery.data} {:else if scoresQuery.data}
{@const data = scoresQuery.data} {@const data = scoresQuery.data}
<div class="summary"> <CrewHeader title={phantomName} backHref="/crew/members">
{#snippet belowTitle()}
<span class="phantom-badge">Phantom</span>
{/snippet}
</CrewHeader>
<div class="stats-row">
<div class="stat"> <div class="stat">
<span class="stat-label">Total Honors</span>
<span class="stat-value">{formatScore(data.grandTotal)}</span> <span class="stat-value">{formatScore(data.grandTotal)}</span>
<span class="stat-label">Total Honors</span>
</div> </div>
<div class="stat"> <div class="stat">
<span class="stat-label">Events</span>
<span class="stat-value">{data.eventScores.length}</span> <span class="stat-value">{data.eventScores.length}</span>
<span class="stat-label">Events</span>
</div> </div>
</div> </div>
{#if data.eventScores.length === 0} {#if historyChartData.length > 0}
<div class="empty">No GW scores recorded yet.</div> <div class="chart-section">
{:else} <GwCrewHistoryChart data={historyChartData} height={300} />
<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> </div>
<span class="event-score">{formatScore(eventScore.totalScore)}</span> {/if}
</button>
</li> {#if data.eventScores.length === 0}
<div class="empty-state">No GW scores recorded yet.</div>
{:else}
<div class="section-header">
<span class="section-title">Event History</span>
</div>
<ul class="event-list">
{#each data.eventScores as eventScore (eventScore.gwEvent.id)}
<GwEventScoreRow {eventScore} />
{/each} {/each}
</ul> </ul>
{/if} {/if}
{/if} {/if}
</div> </div>
</div>
<style lang="scss"> <style lang="scss">
@use '$src/themes/colors' as colors;
@use '$src/themes/effects' as effects;
@use '$src/themes/spacing' as spacing; @use '$src/themes/spacing' as spacing;
@use '$src/themes/typography' as typography; @use '$src/themes/typography' as typography;
@use '$src/themes/layout' as layout; @use '$src/themes/layout' as layout;
.scores-page { .page {
padding: spacing.$unit-2x; margin: 0 auto;
max-width: var(--main-max-width);
} }
.page-header { .card {
background: var(--card-bg);
border: 0.5px solid rgba(0, 0, 0, 0.18);
border-radius: layout.$page-corner;
box-shadow: effects.$page-elevation;
overflow: hidden;
}
.loading-state,
.error-state {
display: flex; display: flex;
flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
padding: spacing.$unit-4x;
gap: spacing.$unit-2x; gap: spacing.$unit-2x;
margin-bottom: spacing.$unit-3x; color: var(--text-secondary);
font-size: typography.$font-small;
h1 {
font-size: typography.$font-large;
font-weight: typography.$bold;
margin: 0;
}
} }
.phantom-badge { .phantom-badge {
display: inline-block;
font-size: typography.$font-small; font-size: typography.$font-small;
padding: 2px 8px; padding: 2px 8px;
border-radius: layout.$item-corner-small; border-radius: layout.$item-corner-small;
@ -97,31 +123,28 @@
color: var(--color-purple-dark, #7c3aed); color: var(--color-purple-dark, #7c3aed);
} }
.loading, .stats-row {
.error,
.empty {
text-align: center;
padding: spacing.$unit-4x;
color: var(--text-secondary);
}
.error {
color: var(--color-error);
}
.summary {
display: flex; display: flex;
gap: spacing.$unit-4x; border-bottom: 1px solid rgba(0, 0, 0, 0.06);
margin-bottom: spacing.$unit-3x;
padding: spacing.$unit-2x;
background: var(--card-bg);
border-radius: layout.$card-corner;
} }
.stat { .stat {
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: spacing.$unit-half; align-items: center;
padding: spacing.$unit-2x;
border-right: 1px solid rgba(0, 0, 0, 0.08);
&:last-child {
border-right: none;
}
}
.stat-value {
font-size: typography.$font-medium;
font-weight: typography.$medium;
margin-bottom: 2px;
} }
.stat-label { .stat-label {
@ -129,59 +152,35 @@
color: var(--text-secondary); color: var(--text-secondary);
} }
.stat-value { .chart-section {
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; padding: spacing.$unit-2x;
background: var(--card-bg); border-bottom: 1px solid rgba(0, 0, 0, 0.06);
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 { .section-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: spacing.$unit-2x; padding: spacing.$unit spacing.$unit-2x;
background: rgba(0, 0, 0, 0.02);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
} }
.event-number { .section-title {
font-size: typography.$font-regular; font-size: typography.$font-small;
font-weight: typography.$medium; font-weight: typography.$medium;
}
.event-score {
font-size: typography.$font-regular;
font-weight: typography.$medium;
font-variant-numeric: tabular-nums;
color: var(--text-secondary); color: var(--text-secondary);
} }
.empty-state {
text-align: center;
color: var(--text-secondary);
padding: spacing.$unit-3x;
font-size: typography.$font-small;
}
.event-list {
list-style: none;
margin: 0;
padding: spacing.$unit;
}
</style> </style>