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

integrate gw score charts into crew and event pages

Browse source
This commit is contained in:
Justin Edmund 2025-12-18 13:12:06 -08:00
parent 37a3f73735
commit 69b1f37418
2 changed files with 47 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/routes/(app)/crew/+page.svelte
View file

@ -15,8 +15,9 @@
import Input from '$lib/components/ui/Input.svelte'
import CrewHeader from '$lib/components/crew/CrewHeader.svelte'
import { formatDateJST } from '$lib/utils/date'
import { formatScore } from '$lib/utils/gw'
import { formatScore, toCrewHistoryChartData } from '$lib/utils/gw'
import ElementBadge from '$lib/components/ui/ElementBadge.svelte'
import GwCrewHistoryChart from '$lib/components/charts/GwCrewHistoryChart.svelte'
import type { PageData } from './$types'
interface Props {
@ -152,6 +153,11 @@
}
return status
}
// Transform events data for history chart
const historyChartData = $derived(
eventsQuery.data ? toCrewHistoryChartData(eventsQuery.data, formatDateJST) : []
)
</script>
<svelte:head>
@ -248,6 +254,12 @@
<span class="section-title">Unite and Fight</span>
</div>
{#if historyChartData.length > 0}
<div class="chart-section">
<GwCrewHistoryChart data={historyChartData} />
</div>
{/if}
{#if eventsQuery.isLoading}
<div class="loading-state">
<p>Loading events...</p>
@ -559,6 +571,12 @@
color: var(--text-secondary);
}
// Chart section
.chart-section {
padding: spacing.$unit-2x;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
// Event list (similar to member list)
.event-list {
list-style: none;

29
src/routes/(app)/crew/events/[eventNumber]/+page.svelte
View file

@ -18,8 +18,10 @@
import SegmentedControl from '$lib/components/ui/segmented-control/SegmentedControl.svelte'
import Segment from '$lib/components/ui/segmented-control/Segment.svelte'
import { formatDateJST } from '$lib/utils/date'
import { formatScore } from '$lib/utils/gw'
import { formatScore, toMultiPlayerChartData, toCrewBattleChartData } from '$lib/utils/gw'
import { GW_ROUND_LABELS, type GwRound, type GwCrewScore } from '$lib/types/api/gw'
import GwMultiPlayerChart from '$lib/components/charts/GwMultiPlayerChart.svelte'
import GwCrewBattleChart from '$lib/components/charts/GwCrewBattleChart.svelte'
import type { PageData } from './$types'
interface Props {
@ -63,6 +65,14 @@
// Crew scores from participation (Finals Day 1-4 only: rounds 2-5)
const crewScores = $derived(participation?.crewScores ?? [])
// Chart data transformations
const multiPlayerChartData = $derived(
participation?.individualScores
? toMultiPlayerChartData(participation.individualScores)
: new Map()
)
const crewBattleChartData = $derived(toCrewBattleChartData(crewScores))
const playerScores = $derived.by(() => {
const scoreMap = new Map<string, PlayerScore>()
@ -208,6 +218,12 @@
<!-- Individual Honors Tab -->
{#if activeTab === 'individual'}
{#if multiPlayerChartData.size > 0}
<div class="chart-section">
<GwMultiPlayerChart playerScores={multiPlayerChartData} />
</div>
{/if}
<div class="section-header">
<span class="section-title">Individual Scores</span>
</div>
@ -230,6 +246,12 @@
<!-- Crew Honors Tab -->
{#if activeTab === 'crew'}
{#if crewBattleChartData.length > 0}
<div class="chart-section">
<GwCrewBattleChart data={crewBattleChartData} />
</div>
{/if}
<div class="crew-score-table">
<div class="crew-score-header">
<span class="col-round">Round</span>
@ -441,6 +463,11 @@
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.chart-section {
padding: spacing.$unit-2x;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.section-title {
font-size: typography.$font-small;
font-weight: typography.$medium;