diff --git a/src/lib/api/adapters/raid.adapter.ts b/src/lib/api/adapters/raid.adapter.ts index 1cbed49f..9e3d581f 100644 --- a/src/lib/api/adapters/raid.adapter.ts +++ b/src/lib/api/adapters/raid.adapter.ts @@ -13,6 +13,21 @@ import type { } from '$lib/types/api/raid' import type { Raid, RaidGroup } from '$lib/types/api/entities' +/** + * Response from raid image download status + */ +export interface RaidDownloadStatus { + status: 'queued' | 'processing' | 'completed' | 'failed' | 'not_found' + progress?: number + imagesDownloaded?: number + imagesTotal?: number + error?: string + raidId?: string + slug?: string + images?: Record + updatedAt?: string +} + /** * Adapter for Raid and RaidGroup API operations */ @@ -88,6 +103,77 @@ export class RaidAdapter extends BaseAdapter { this.clearCache(`/raids/${slug}`) } + // ==================== Image Download Operations ==================== + + /** + * Downloads a single image for a raid (synchronous) + * Requires editor role (>= 7) + * @param slug - Raid slug + * @param size - Image size variant ('icon', 'thumbnail', 'lobby', or 'background') + * @param force - Force re-download even if image exists + */ + async downloadRaidImage( + slug: string, + size: 'icon' | 'thumbnail' | 'lobby' | 'background', + force?: boolean, + options?: RequestOptions + ): Promise<{ success: boolean; error?: string }> { + return this.request(`/raids/${slug}/download_image`, { + ...options, + method: 'POST', + body: JSON.stringify({ size, force }) + }) + } + + /** + * Triggers async image download for a raid + * Requires editor role (>= 7) + */ + async downloadRaidImages( + slug: string, + downloadOptions?: { force?: boolean; size?: 'all' | 'icon' | 'thumbnail' | 'lobby' | 'background' }, + requestOptions?: RequestOptions + ): Promise<{ status: string; raidId: string; message: string }> { + return this.request(`/raids/${slug}/download_images`, { + ...requestOptions, + method: 'POST', + body: JSON.stringify({ options: downloadOptions }) + }) + } + + /** + * Gets the status of an ongoing raid image download + * Requires editor role (>= 7) + */ + async getRaidDownloadStatus(slug: string, options?: RequestOptions): Promise { + const response = await this.request<{ + status: string + progress?: number + images_downloaded?: number + images_total?: number + error?: string + raid_id?: string + slug?: string + images?: Record + updated_at?: string + }>(`/raids/${slug}/download_status`, { + ...options, + method: 'GET' + }) + + return { + status: response.status as RaidDownloadStatus['status'], + progress: response.progress, + imagesDownloaded: response.images_downloaded, + imagesTotal: response.images_total, + error: response.error, + raidId: response.raid_id, + slug: response.slug, + images: response.images, + updatedAt: response.updated_at + } + } + // ==================== RaidGroup Operations ==================== /** diff --git a/src/lib/components/database/cells/RaidImageCell.svelte b/src/lib/components/database/cells/RaidImageCell.svelte new file mode 100644 index 00000000..ff5d84da --- /dev/null +++ b/src/lib/components/database/cells/RaidImageCell.svelte @@ -0,0 +1,51 @@ + + + + +
+ {#if raid.enemy_id} + + {:else} +
+ {/if} +
+ + diff --git a/src/lib/components/ui/DetailsHeader.svelte b/src/lib/components/ui/DetailsHeader.svelte index 0c30aea1..2d144e5a 100644 --- a/src/lib/components/ui/DetailsHeader.svelte +++ b/src/lib/components/ui/DetailsHeader.svelte @@ -9,7 +9,7 @@ // Props interface Props { - type: 'character' | 'summon' | 'weapon' | 'job' + type: 'character' | 'summon' | 'weapon' | 'job' | 'raid' item: any // The character/summon/weapon/job object image: string editUrl?: string // URL to navigate to for editing (view mode) @@ -74,7 +74,8 @@ character: '/images/placeholders/placeholder-character-main.png', summon: '/images/placeholders/placeholder-summon-main.png', weapon: '/images/placeholders/placeholder-weapon-main.png', - job: '/images/placeholders/placeholder-job.png' + job: '/images/placeholders/placeholder-job.png', + raid: '/images/placeholders/placeholder-summon-main.png' // Fallback to summon placeholder } as const ;(e.currentTarget as HTMLImageElement).src = placeholders[type] }} diff --git a/src/lib/features/database/detail/DetailScaffold.svelte b/src/lib/features/database/detail/DetailScaffold.svelte index f44b554f..fadffd95 100644 --- a/src/lib/features/database/detail/DetailScaffold.svelte +++ b/src/lib/features/database/detail/DetailScaffold.svelte @@ -11,7 +11,7 @@ export type DetailTab = 'info' | 'images' | 'raw' interface Props { - type: 'character' | 'summon' | 'weapon' | 'job' + type: 'character' | 'summon' | 'weapon' | 'job' | 'raid' item: any image: string showEdit?: boolean diff --git a/src/lib/types/api/entities.ts b/src/lib/types/api/entities.ts index c3e5827f..a4f87b01 100644 --- a/src/lib/types/api/entities.ts +++ b/src/lib/types/api/entities.ts @@ -220,6 +220,9 @@ export interface Raid { name: LocalizedName level: number element: number + enemy_id?: number + summon_id?: number + quest_id?: number group?: RaidGroup } diff --git a/src/lib/types/api/raid.ts b/src/lib/types/api/raid.ts index 25f63614..a0208e17 100644 --- a/src/lib/types/api/raid.ts +++ b/src/lib/types/api/raid.ts @@ -16,6 +16,9 @@ export interface RaidFull { name: LocalizedName level: number element: number + enemy_id?: number + summon_id?: number + quest_id?: number group?: RaidGroupFlat } @@ -45,6 +48,9 @@ export interface CreateRaidInput { level: number element: number group_id: string + enemy_id?: number + summon_id?: number + quest_id?: number } export interface UpdateRaidInput { @@ -54,6 +60,9 @@ export interface UpdateRaidInput { level?: number element?: number group_id?: string + enemy_id?: number + summon_id?: number + quest_id?: number } // Input types for creating/updating raid groups diff --git a/src/routes/(app)/database/raids/+page.svelte b/src/routes/(app)/database/raids/+page.svelte index d346e823..7229a53d 100644 --- a/src/routes/(app)/database/raids/+page.svelte +++ b/src/routes/(app)/database/raids/+page.svelte @@ -17,6 +17,7 @@ import Segment from '$lib/components/ui/segmented-control/Segment.svelte' import RaidGroupNameCell from '$lib/components/database/cells/RaidGroupNameCell.svelte' import RaidGroupFlagsCell from '$lib/components/database/cells/RaidGroupFlagsCell.svelte' + import RaidImageCell from '$lib/components/database/cells/RaidImageCell.svelte' import type { Raid, RaidGroup } from '$lib/types/api/entities' import type { RaidGroupFull } from '$lib/types/api/raid' import { getRaidSectionLabel } from '$lib/utils/raidSection' @@ -364,6 +365,7 @@ + @@ -374,7 +376,7 @@ {#if filteredRaids.length === 0 && !raidsQuery.isLoading} - handleRaidClick(raid)} class="clickable"> + @@ -574,6 +579,11 @@ } } + .col-image { + width: 64px; + padding: 4px !important; + } + .col-name { min-width: 200px; } diff --git a/src/routes/(app)/database/raids/[slug]/+page.svelte b/src/routes/(app)/database/raids/[slug]/+page.svelte index 7a0ad981..17080455 100644 --- a/src/routes/(app)/database/raids/[slug]/+page.svelte +++ b/src/routes/(app)/database/raids/[slug]/+page.svelte @@ -8,9 +8,18 @@ import Button from '$lib/components/ui/Button.svelte' import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte' import DetailItem from '$lib/components/ui/DetailItem.svelte' - import SidebarHeader from '$lib/components/ui/SidebarHeader.svelte' import ElementBadge from '$lib/components/ui/ElementBadge.svelte' + import DetailScaffold, { type DetailTab } from '$lib/features/database/detail/DetailScaffold.svelte' + import EntityImagesTab from '$lib/features/database/detail/tabs/EntityImagesTab.svelte' + import DatabasePageHeader from '$lib/components/database/DatabasePageHeader.svelte' import type { PageData } from './$types' + import type { ImageItem } from '$lib/features/database/detail/tabs/EntityImagesTab.svelte' + + // CDN base URLs for raid images + const ICON_BASE_URL = 'https://prd-game-a-granbluefantasy.akamaized.net/assets_en/img/sp/assets/enemy/m' + const THUMBNAIL_BASE_URL = 'https://prd-game-a1-granbluefantasy.akamaized.net/assets_en/img/sp/assets/summon/qm' + const LOBBY_BASE_URL = 'https://prd-game-a1-granbluefantasy.akamaized.net/assets_en/img/sp/quest/assets/lobby' + const BACKGROUND_BASE_URL = 'https://prd-game-a-granbluefantasy.akamaized.net/assets_en/img/sp/quest/assets/treasureraid' function displayName(input: any): string { if (!input) return '—' @@ -26,6 +35,19 @@ let { data }: Props = $props() + // Tab state from URL + const currentTab = $derived(($page.url.searchParams.get('tab') as DetailTab) || 'info') + + function handleTabChange(tab: DetailTab) { + const url = new URL($page.url) + if (tab === 'info') { + url.searchParams.delete('tab') + } else { + url.searchParams.set('tab', tab) + } + goto(url.toString(), { replaceState: true }) + } + // Get raid slug from URL const raidSlug = $derived($page.params.slug) @@ -40,10 +62,8 @@ const userRole = $derived(data.role || 0) const canEdit = $derived(userRole >= 7) - // Navigate to edit - function handleEdit() { - goto(`/database/raids/${raidSlug}/edit`) - } + // Edit URL for navigation + const editUrl = $derived(raidSlug ? `/database/raids/${raidSlug}/edit` : undefined) // Navigate back function handleBack() { @@ -56,9 +76,119 @@ goto(`/database/raid-groups/${raid.group.id}`) } } + + // Get icon image URL + function getIconUrl(enemyId: number): string { + return `${ICON_BASE_URL}/${enemyId}.png` + } + + // Get thumbnail image URL + function getThumbnailUrl(summonId: number): string { + return `${THUMBNAIL_BASE_URL}/${summonId}_high.png` + } + + // Get lobby image URL (quest_id with "1" appended) + function getLobbyUrl(questId: number): string { + return `${LOBBY_BASE_URL}/${questId}1.png` + } + + // Get background image URL + function getBackgroundUrl(questId: number): string { + return `${BACKGROUND_BASE_URL}/${questId}/raid_image_new.png` + } + + // Get header image - prefer thumbnail, fallback to icon + const headerImage = $derived.by(() => { + if (raid?.summon_id) return getThumbnailUrl(raid.summon_id) + if (raid?.enemy_id) return getIconUrl(raid.enemy_id) + return '' + }) + + // Available image sizes for raids + const raidSizes = $derived.by(() => { + const sizes: string[] = [] + if (raid?.enemy_id) sizes.push('icon') + if (raid?.summon_id) sizes.push('thumbnail') + if (raid?.quest_id) { + sizes.push('lobby') + sizes.push('background') + } + return sizes + }) + + // Generate image items for raid + const raidImages = $derived.by((): ImageItem[] => { + if (!raid) return [] + + const images: ImageItem[] = [] + + // Icon image from enemy + if (raid.enemy_id) { + images.push({ + url: getIconUrl(raid.enemy_id), + label: 'Icon', + variant: 'icon' + }) + } + + // Thumbnail image from summon + if (raid.summon_id) { + images.push({ + url: getThumbnailUrl(raid.summon_id), + label: 'Thumbnail', + variant: 'thumbnail' + }) + } + + // Lobby and background images from quest + if (raid.quest_id) { + images.push({ + url: getLobbyUrl(raid.quest_id), + label: 'Lobby', + variant: 'lobby' + }) + images.push({ + url: getBackgroundUrl(raid.quest_id), + label: 'Background', + variant: 'background' + }) + } + + return images + }) + + // Image download handlers + type RaidImageSize = 'icon' | 'thumbnail' | 'lobby' | 'background' + + async function handleDownloadImage( + size: string, + _transformation: string | undefined, + force: boolean + ) { + if (!raidSlug) return + await raidAdapter.downloadRaidImage(raidSlug, size as RaidImageSize, force) + } + + async function handleDownloadAllImages(force: boolean) { + if (!raidSlug) return + await raidAdapter.downloadRaidImages(raidSlug, { force }) + } + + async function handleDownloadSize(size: string) { + if (!raidSlug) return + await raidAdapter.downloadRaidImage(raidSlug, size as RaidImageSize, false) + }
+ + {#snippet rightAction()} + {#if canEdit && editUrl} + + {/if} + {/snippet} + + {#if raidQuery.isLoading}

Loading raid...

@@ -69,57 +199,73 @@
{:else if raid} - - {#snippet leftAccessory()} - - {/snippet} - {#snippet rightAccessory()} - {#if canEdit} - - {/if} - {/snippet} - + + {#if currentTab === 'info'} +
+ + + + + + + + + + {#if raid.element !== undefined && raid.element !== null} + + {:else} + - + {/if} + + -
- - - - - - - {#if raid.element !== undefined && raid.element !== null} - - {:else} - - - {/if} - - - - - - {#if raid.group} - - {:else} - - - {/if} - - {#if raid.group} - - - {raid.group.hl ? 'Yes' : 'No'} - - - {raid.group.extra ? 'Yes' : 'No'} - - - {raid.group.guidebooks ? 'Yes' : 'No'} - - {/if} - - -
+ + + {#if raid.group} + + {:else} + - + {/if} + + {#if raid.group} + + + {raid.group.hl ? 'Yes' : 'No'} + + + {raid.group.extra ? 'Yes' : 'No'} + + + {raid.group.guidebooks ? 'Yes' : 'No'} + + {/if} + +
+ {:else if currentTab === 'images'} + + {:else if currentTab === 'raw'} +
+

Raw data not available for raids.

+
+ {/if} + {:else}

Raid Not Found

@@ -190,4 +336,10 @@ color: white; } } + + .raw-placeholder { + padding: spacing.$unit-4x; + text-align: center; + color: var(--text-secondary); + } diff --git a/src/routes/(app)/database/raids/[slug]/edit/+page.svelte b/src/routes/(app)/database/raids/[slug]/edit/+page.svelte index c5e922c9..30ab6798 100644 --- a/src/routes/(app)/database/raids/[slug]/edit/+page.svelte +++ b/src/routes/(app)/database/raids/[slug]/edit/+page.svelte @@ -57,7 +57,10 @@ slug: '', level: 0, element: 0, - group_id: '' + group_id: '', + enemy_id: undefined as number | undefined, + summon_id: undefined as number | undefined, + quest_id: undefined as number | undefined }) // Sync edit data when raid changes @@ -69,7 +72,10 @@ slug: raid.slug || '', level: raid.level ?? 0, element: raid.element ?? 0, - group_id: raid.group?.id || '' + group_id: raid.group?.id || '', + enemy_id: raid.enemy_id, + summon_id: raid.summon_id, + quest_id: raid.quest_id } } }) @@ -112,7 +118,10 @@ slug: editData.slug, level: editData.level, element: editData.element, - group_id: editData.group_id + group_id: editData.group_id, + enemy_id: editData.enemy_id, + summon_id: editData.summon_id, + quest_id: editData.quest_id }) // Invalidate queries @@ -183,6 +192,24 @@ editable={true} type="number" /> + + + + + +
Name Level Element
+ {searchTerm || hasActiveFilters ? 'No raids match your filters' : 'No raids yet'} @@ -383,6 +385,9 @@ {:else} {#each filteredRaids as raid}
+ + {displayName(raid)}