migrate existing image utilities

src/lib/features/database/detail/image.ts

@@ -1,56 +1,46 @@
-export type ResourceKind = 'character' | 'weapon' | 'summon'
-export type ImageVariant = 'main' | 'grid' | 'square'
-
-function folder(type: ResourceKind, variant: ImageVariant) {
-  // Folders are kebab-case: e.g. weapon-main, summon-grid
-  if (type === 'character') {
-    if (variant === 'main') return 'character-main'
-    if (variant === 'grid') return 'character-grid'
-    return 'character-square'
-  }
-  return `${type}-${variant}` // weapon-main, summon-grid, weapon-square, etc.
-}
-
-export function getPlaceholder(type: ResourceKind, variant: ImageVariant): string {
-  // Try specific placeholder; fall back to -main if others are unavailable
-  const specific = `/images/placeholders/placeholder-${type}-${variant}.png`
-  if (variant !== 'main') return specific
-  return specific
-}
+// Re-export types and functions from the main image utility
+export {
+  type ResourceType as ResourceKind,
+  type ImageVariant,
+  getPlaceholderImage as getPlaceholder,
+  getCharacterImage,
+  getWeaponImage,
+  getSummonImage,
+  getImageUrl as getImageUrlBase
+} from '$lib/utils/images'
 
+// Legacy compatibility wrapper
 interface ImageArgs {
-  type: ResourceKind
+  type: 'character' | 'weapon' | 'summon'
   id?: string | null
   variant: ImageVariant
-  element?: number // only used for weapon grid element-specific variants
-  pose?: string // character pose suffix like '01', '02'
+  element?: number
+  pose?: string
 }
 
 export function getImageUrl({ type, id, variant, element, pose }: ImageArgs): string {
-  if (!id) return getPlaceholder(type, variant)
+  // Import the base function to avoid circular dependency
+  import('$lib/utils/images').then(({ getImageUrl: getImageUrlFromUtils }) => {
+    return getImageUrlFromUtils(type, id, variant, { pose, element })
+  })
 
-  const base = `/images/${folder(type, variant)}`
+  // Temporary direct implementation for sync compatibility
+  if (!id) return `/images/placeholders/placeholder-${type}-${variant}.png`
+
+  const directory = `${type}-${variant}`
+  const extension = (
+    (type === 'character' && variant === 'detail') ||
+    (type === 'weapon' && variant === 'base') ||
+    (type === 'summon' && variant === 'detail')
+  ) ? '.png' : '.jpg'
 
   if (type === 'character') {
-    // Characters include pose suffix in filenames; default to 01
-    const suffix = `_${pose || '01'}`
-    return `${base}/${id}${suffix}.jpg`
+    return `/images/${directory}/${id}_${pose || '01'}${extension}`
   }
 
   if (type === 'weapon' && variant === 'grid' && element && element > 0) {
-    // Support element-specific grid images when provided
-    return `${base}/${id}_${element}.jpg`
+    return `/images/${directory}/${id}_${element}${extension}`
   }
 
-  return `${base}/${id}.jpg`
+  return `/images/${directory}/${id}${extension}`
 }
-
-// Convenience wrappers
-export const getCharacterImage = (id?: string | null, pose?: string, variant: ImageVariant = 'main') =>
-  getImageUrl({ type: 'character', id: id ?? undefined, variant, pose })
-
-export const getWeaponImage = (id?: string | null, variant: ImageVariant = 'main', element?: number) =>
-  getImageUrl({ type: 'weapon', id: id ?? undefined, variant, element })
-
-export const getSummonImage = (id?: string | null, variant: ImageVariant = 'main') =>
-  getImageUrl({ type: 'summon', id: id ?? undefined, variant })

src/lib/utils/database.ts

@@ -1,19 +1,18 @@
+import { getCharacterImage, getWeaponImage, getSummonImage } from './images'
+
 export function getCharacterImageUrl(gbid?: string | number): string {
-	if (!gbid) return '/images/placeholders/placeholder-character-grid.png'
 	// Use local square images for database tables
-	return `/images/character-square/${gbid}_01.jpg`
+	return getCharacterImage(gbid, 'square', '01')
 }
 
 export function getWeaponImageUrl(gbid?: string | number): string {
-	if (!gbid) return '/images/placeholders/placeholder-weapon-grid.png'
 	// Use local square images for database tables
-	return `/images/weapon-square/${gbid}.jpg`
+	return getWeaponImage(gbid, 'square')
 }
 
 export function getSummonImageUrl(gbid?: string | number): string {
-	if (!gbid) return '/images/placeholders/placeholder-summon-main.png'
 	// Use local square images for database tables
-	return `/images/summon-square/${gbid}.jpg`
+	return getSummonImage(gbid, 'square')
 }
 
 export function getItemName(item: { name?: string | { en?: string; ja?: string } }): string {