update database pages to use image utils

This commit is contained in:
Justin Edmund 2025-09-24 03:29:15 -07:00
parent f8e9c411f7
commit 3dbb977d47
3 changed files with 13 additions and 17 deletions

View file

@ -18,6 +18,7 @@
import DetailItem from '$lib/components/ui/DetailItem.svelte'
import DetailsHeader from '$lib/components/ui/DetailsHeader.svelte'
import Button from '$lib/components/ui/Button.svelte'
import { getCharacterImage } from '$lib/utils/images'
// Types
import type { PageData } from './$types'
@ -182,9 +183,9 @@
}
// Helper function to get character image
function getCharacterImage(character: any): string {
if (!character?.granblueId) return '/images/placeholders/placeholder-character-main.png'
return `/images/character-grid/${character.granblueId}_01.jpg`
// Helper function for character grid image
function getCharacterGridImage(character: any): string {
return getCharacterImage(character?.granblueId, 'grid', '01')
}
// Calculate uncap properties for the indicator
@ -208,7 +209,7 @@
<DetailsHeader
type="character"
item={character}
image={getCharacterImage(character)}
image={getCharacterGridImage(character)}
onEdit={toggleEditMode}
showEdit={canEdit}
{editMode}

View file

@ -4,6 +4,7 @@
import { goto } from '$app/navigation'
import { getRarityLabel } from '$lib/utils/rarity'
import { getElementLabel, getElementIcon } from '$lib/utils/element'
import { getSummonImage } from '$lib/utils/images'
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
import DetailItem from '$lib/components/ui/DetailItem.svelte'
@ -15,10 +16,9 @@
// Get summon from server data
const summon = $derived(data.summon)
// Helper function to get summon image
function getSummonImage(summon: any): string {
if (!summon?.granblueId) return '/images/placeholders/placeholder-summon-main.png'
return `/images/summon-grid/${summon.granblueId}.jpg`
// Helper function to get summon grid image
function getSummonGridImage(summon: any): string {
return getSummonImage(summon?.granblueId, 'grid')
}
// Calculate uncap properties for the indicator
@ -41,7 +41,7 @@
<div class="summon-detail">
{#if summon}
<div class="summon-content">
<DetailsHeader type="summon" item={summon} image={getSummonImage(summon)} />
<DetailsHeader type="summon" item={summon} image={getSummonGridImage(summon)} />
<DetailsContainer title="HP Stats">
<DetailItem label="Base HP" value={summon.hp?.minHp} />

View file

@ -5,6 +5,7 @@
import { getRarityLabel } from '$lib/utils/rarity'
import { getElementLabel, getElementIcon } from '$lib/utils/element'
import { getProficiencyLabel, getProficiencyIcon } from '$lib/utils/proficiency'
import { getWeaponGridImage } from '$lib/utils/images'
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
import DetailItem from '$lib/components/ui/DetailItem.svelte'
@ -16,15 +17,9 @@
// Get weapon from server data
const weapon = $derived(data.weapon)
// Helper function to get weapon image
// Helper function to get weapon grid image
function getWeaponImage(weapon: any): string {
if (!weapon?.granblueId) return '/images/placeholders/placeholder-weapon-main.png'
// Handle element-specific weapons (primal weapons)
if (weapon.element === 0 && weapon.instanceElement) {
return `/images/weapon-grid/${weapon.granblueId}_${weapon.instanceElement}.jpg`
}
return `/images/weapon-grid/${weapon.granblueId}.jpg`
return getWeaponGridImage(weapon?.granblueId, weapon?.element, weapon?.instanceElement)
}
// Calculate uncap properties for the indicator