From 00813ddd584ad3eb0e82c53c60c4a037662e4803 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 18 Dec 2025 11:03:36 -0800 Subject: [PATCH] add ElementBadge component, use in gw event pages --- src/lib/components/ui/ElementBadge.svelte | 72 ++++++++++++++++++ src/routes/(app)/crew/+page.svelte | 76 +------------------ .../(app)/database/gw-events/+page.svelte | 68 +---------------- .../database/gw-events/[id]/+page.svelte | 64 +--------------- 4 files changed, 81 insertions(+), 199 deletions(-) create mode 100644 src/lib/components/ui/ElementBadge.svelte diff --git a/src/lib/components/ui/ElementBadge.svelte b/src/lib/components/ui/ElementBadge.svelte new file mode 100644 index 00000000..f0662197 --- /dev/null +++ b/src/lib/components/ui/ElementBadge.svelte @@ -0,0 +1,72 @@ + + + + + + {label} + + + diff --git a/src/routes/(app)/crew/+page.svelte b/src/routes/(app)/crew/+page.svelte index 992c432b..a3b723c9 100644 --- a/src/routes/(app)/crew/+page.svelte +++ b/src/routes/(app)/crew/+page.svelte @@ -15,6 +15,8 @@ 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 ElementBadge from '$lib/components/ui/ElementBadge.svelte' import type { PageData } from './$types' interface Props { @@ -39,28 +41,6 @@ staleTime: 1000 * 60 * 5 })) - // Element labels (matches GranblueEnums::ELEMENTS) - const elementLabels: Record = { - 0: 'Null', - 1: 'Wind', - 2: 'Fire', - 3: 'Water', - 4: 'Earth', - 5: 'Dark', - 6: 'Light' - } - - // Element colors for badges - const elementColors: Record = { - 0: 'null', - 1: 'wind', - 2: 'fire', - 3: 'water', - 4: 'earth', - 5: 'dark', - 6: 'light' - } - // Mutations const createCrewMutation = useCreateCrew() const updateCrewMutation = useUpdateCrew() @@ -160,11 +140,6 @@ settingsError = null } - // 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() @@ -283,9 +258,7 @@
  • goto(`/crew/events/${event.eventNumber}`)}>
    {event.eventNumber} - - {elementLabels[event.element] ?? 'Unknown'} - +
    {formatDateJST(event.startDate)} – {formatDateJST(event.endDate)} @@ -660,49 +633,6 @@ } } - .element-badge { - display: inline-block; - padding: 2px 8px; - border-radius: layout.$item-corner-small; - font-size: typography.$font-small; - font-weight: typography.$medium; - - &.element-null { - background: rgba(0, 0, 0, 0.04); - color: var(--text-secondary); - } - - &.element-fire { - background: #fee2e2; - color: #dc2626; - } - - &.element-water { - background: #dbeafe; - color: #2563eb; - } - - &.element-earth { - background: #fef3c7; - color: #d97706; - } - - &.element-wind { - background: #d1fae5; - color: #059669; - } - - &.element-light { - background: #fef9c3; - color: #ca8a04; - } - - &.element-dark { - background: #ede9fe; - color: #7c3aed; - } - } - .empty-state { text-align: center; color: var(--text-secondary); diff --git a/src/routes/(app)/database/gw-events/+page.svelte b/src/routes/(app)/database/gw-events/+page.svelte index 340025d6..bece8952 100644 --- a/src/routes/(app)/database/gw-events/+page.svelte +++ b/src/routes/(app)/database/gw-events/+page.svelte @@ -8,6 +8,8 @@ import { gwAdapter } from '$lib/api/adapters/gw.adapter' import Button from '$lib/components/ui/Button.svelte' import { formatDateJST } from '$lib/utils/date' + import { ELEMENT_LABELS } from '$lib/utils/gw' + import ElementBadge from '$lib/components/ui/ElementBadge.svelte' import type { GwEvent } from '$lib/types/api/gw' import type { PageData } from './$types' @@ -27,28 +29,6 @@ staleTime: 1000 * 60 * 5 })) - // Element labels (matches GranblueEnums::ELEMENTS) - const elementLabels: Record = { - 0: 'Null', - 1: 'Wind', - 2: 'Fire', - 3: 'Water', - 4: 'Earth', - 5: 'Dark', - 6: 'Light' - } - - // Element colors for badges - const elementColors: Record = { - 0: 'null', - 1: 'wind', - 2: 'fire', - 3: 'water', - 4: 'earth', - 5: 'dark', - 6: 'light' - } - // Filter events by search const filteredEvents = $derived.by(() => { const events = eventsQuery.data ?? [] @@ -58,7 +38,7 @@ return events.filter( (e) => String(e.eventNumber).includes(term) || - elementLabels[e.element]?.toLowerCase().includes(term) + ELEMENT_LABELS[e.element]?.toLowerCase().includes(term) ) }) @@ -110,9 +90,7 @@ {event.eventNumber} - - {elementLabels[event.element] ?? 'Unknown'} - + @@ -260,44 +238,6 @@ color: #666; } - .element-badge { - display: inline-block; - padding: 2px 8px; - border-radius: 4px; - font-size: typography.$font-small; - font-weight: 500; - - &.element-fire { - background: #fee2e2; - color: #dc2626; - } - - &.element-water { - background: #dbeafe; - color: #2563eb; - } - - &.element-earth { - background: #fef3c7; - color: #d97706; - } - - &.element-wind { - background: #d1fae5; - color: #059669; - } - - &.element-light { - background: #fef9c3; - color: #ca8a04; - } - - &.element-dark { - background: #ede9fe; - color: #7c3aed; - } - } - .dates { font-size: typography.$font-small; color: #666; diff --git a/src/routes/(app)/database/gw-events/[id]/+page.svelte b/src/routes/(app)/database/gw-events/[id]/+page.svelte index c40e814f..fc1c0e41 100644 --- a/src/routes/(app)/database/gw-events/[id]/+page.svelte +++ b/src/routes/(app)/database/gw-events/[id]/+page.svelte @@ -10,6 +10,7 @@ import DetailItem from '$lib/components/ui/DetailItem.svelte' import SidebarHeader from '$lib/components/ui/SidebarHeader.svelte' import { formatDateJST, formatDateLongJST } from '$lib/utils/date' + import ElementBadge from '$lib/components/ui/ElementBadge.svelte' import type { PageData } from './$types' interface Props { @@ -32,27 +33,6 @@ const userRole = $derived(data.role || 0) const canEdit = $derived(userRole >= 7) - // Element labels and colors (matches GranblueEnums::ELEMENTS) - const elementLabels: Record = { - 0: 'Null', - 1: 'Wind', - 2: 'Fire', - 3: 'Water', - 4: 'Earth', - 5: 'Dark', - 6: 'Light' - } - - const elementColors: Record = { - 0: 'null', - 1: 'wind', - 2: 'fire', - 3: 'water', - 4: 'earth', - 5: 'dark', - 6: 'light' - } - // Navigate to edit function handleEdit() { goto(`/database/gw-events/${eventId}/edit`) @@ -90,9 +70,7 @@ - - {elementLabels[event.element] ?? 'Unknown'} - + @@ -159,42 +137,4 @@ display: flex; flex-direction: column; } - - .element-badge { - display: inline-block; - padding: 2px 8px; - border-radius: 4px; - font-size: typography.$font-small; - font-weight: 500; - - &.element-fire { - background: #fee2e2; - color: #dc2626; - } - - &.element-water { - background: #dbeafe; - color: #2563eb; - } - - &.element-earth { - background: #fef3c7; - color: #d97706; - } - - &.element-wind { - background: #d1fae5; - color: #059669; - } - - &.element-light { - background: #fef9c3; - color: #ca8a04; - } - - &.element-dark { - background: #ede9fe; - color: #7c3aed; - } - }