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

add gap rows to member and phantom profile pages

Browse source
This commit is contained in:
Justin Edmund 2025-12-18 19:36:56 -08:00
parent 38f2e7399a
commit 90eb4b6659
2 changed files with 130 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
<svelte:options runes={true} />
<script lang="ts">
import { goto } from '$app/navigation'
import { page } from '$app/stores'
import { createQuery } from '@tanstack/svelte-query'
import { gwQueries } from '$lib/api/queries/gw.queries'
@ -9,6 +10,7 @@
import CrewHeader from '$lib/components/crew/CrewHeader.svelte'
import GwEventScoreRow from '$lib/components/crew/GwEventScoreRow.svelte'
import GwCrewHistoryChart from '$lib/components/charts/GwCrewHistoryChart.svelte'
import ElementBadge from '$lib/components/ui/ElementBadge.svelte'
const username = $derived($page.params.username ?? '')
@ -17,6 +19,11 @@
const memberName = $derived(scoresQuery.data?.member?.user?.username ?? 'Member')
// Count only events where player was in crew
const eventsInCrew = $derived(
scoresQuery.data?.eventScores.filter((e) => e.inCrew).length ?? 0
)
// Transform data for chart
const historyChartData = $derived(
scoresQuery.data?.eventScores
@ -50,7 +57,7 @@
<span class="stat-label">Total Honors</span>
</div>
<div class="stat">
<span class="stat-value">{data.eventScores.length}</span>
<span class="stat-value">{eventsInCrew}</span>
<span class="stat-label">Events</span>
</div>
</div>
@ -70,7 +77,22 @@
<ul class="event-list">
{#each data.eventScores as eventScore (eventScore.gwEvent.id)}
<GwEventScoreRow {eventScore} />
{#if eventScore.inCrew}
<GwEventScoreRow {eventScore} />
{:else}
<li class="gap-row">
<button
class="gap-button"
onclick={() => goto(`/crew/events/${eventScore.gwEvent.eventNumber}`)}
>
<div class="gap-info">
<span class="event-number">GW #{eventScore.gwEvent.eventNumber}</span>
<ElementBadge element={eventScore.gwEvent.element} />
</div>
<span class="gap-indicator">Not in crew</span>
</button>
</li>
{/if}
{/each}
</ul>
{/if}
@ -170,4 +192,45 @@
margin: 0;
padding: spacing.$unit;
}
.gap-row {
border-radius: layout.$item-corner;
overflow: hidden;
}
.gap-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: spacing.$unit spacing.$unit-2x;
background: rgba(0, 0, 0, 0.02);
border: none;
border-radius: layout.$item-corner;
cursor: pointer;
transition: background-color 0.15s;
text-align: left;
&:hover {
background: rgba(0, 0, 0, 0.04);
}
}
.gap-info {
display: flex;
align-items: center;
gap: spacing.$unit;
}
.gap-info .event-number {
font-size: typography.$font-small;
font-weight: typography.$medium;
color: var(--text-tertiary);
}
.gap-indicator {
font-size: typography.$font-small;
font-style: italic;
color: var(--text-tertiary);
}
</style>

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

@ -1,6 +1,7 @@
<svelte:options runes={true} />
<script lang="ts">
import { goto } from '$app/navigation'
import { page } from '$app/stores'
import { createQuery } from '@tanstack/svelte-query'
import { gwQueries } from '$lib/api/queries/gw.queries'
@ -9,6 +10,7 @@
import CrewHeader from '$lib/components/crew/CrewHeader.svelte'
import GwEventScoreRow from '$lib/components/crew/GwEventScoreRow.svelte'
import GwCrewHistoryChart from '$lib/components/charts/GwCrewHistoryChart.svelte'
import ElementBadge from '$lib/components/ui/ElementBadge.svelte'
const phantomId = $derived($page.params.phantomId ?? '')
@ -17,6 +19,11 @@
const phantomName = $derived(scoresQuery.data?.phantom?.name ?? 'Phantom')
// Count only events where phantom has a score
const eventsWithScores = $derived(
scoresQuery.data?.eventScores.filter((e) => e.inCrew).length ?? 0
)
// Transform data for chart
const historyChartData = $derived(
scoresQuery.data?.eventScores
@ -54,7 +61,7 @@
<span class="stat-label">Total Honors</span>
</div>
<div class="stat">
<span class="stat-value">{data.eventScores.length}</span>
<span class="stat-value">{eventsWithScores}</span>
<span class="stat-label">Events</span>
</div>
</div>
@ -74,7 +81,22 @@
<ul class="event-list">
{#each data.eventScores as eventScore (eventScore.gwEvent.id)}
<GwEventScoreRow {eventScore} />
{#if eventScore.inCrew}
<GwEventScoreRow {eventScore} />
{:else}
<li class="gap-row">
<button
class="gap-button"
onclick={() => goto(`/crew/events/${eventScore.gwEvent.eventNumber}`)}
>
<div class="gap-info">
<span class="event-number">GW #{eventScore.gwEvent.eventNumber}</span>
<ElementBadge element={eventScore.gwEvent.element} />
</div>
<span class="gap-indicator">No score</span>
</button>
</li>
{/if}
{/each}
</ul>
{/if}
@ -183,4 +205,45 @@
margin: 0;
padding: spacing.$unit;
}
.gap-row {
border-radius: layout.$item-corner;
overflow: hidden;
}
.gap-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: spacing.$unit spacing.$unit-2x;
background: rgba(0, 0, 0, 0.02);
border: none;
border-radius: layout.$item-corner;
cursor: pointer;
transition: background-color 0.15s;
text-align: left;
&:hover {
background: rgba(0, 0, 0, 0.04);
}
}
.gap-info {
display: flex;
align-items: center;
gap: spacing.$unit;
}
.gap-info .event-number {
font-size: typography.$font-small;
font-weight: typography.$medium;
color: var(--text-tertiary);
}
.gap-indicator {
font-size: typography.$font-small;
font-style: italic;
color: var(--text-tertiary);
}
</style>