From 90ea38e15f9afc738a06f88e1009bfe36d52d519 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 16 Dec 2025 21:17:00 -0800
Subject: [PATCH] handle null element weapon images in frontend

---
 .../collection/CollectionWeaponCard.svelte       |  7 +++++--
 .../collection/CollectionWeaponRow.svelte        |  4 ++--
 src/lib/components/units/WeaponUnit.svelte       |  4 ++--
 src/lib/utils/images.ts                          | 16 +++++++++-------
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/collection/CollectionWeaponCard.svelte b/src/lib/components/collection/CollectionWeaponCard.svelte
index 941c920d..f382d5d4 100644
--- a/src/lib/components/collection/CollectionWeaponCard.svelte
+++ b/src/lib/components/collection/CollectionWeaponCard.svelte
@@ -13,13 +13,16 @@
 	// Get transformation suffix for transcendence
 	const transformation = $derived(weapon.transcendenceStep > 0 ? '02' : undefined)
 
-	// Use instance element for element-changeable weapons
-	const displayElement = $derived(weapon.weapon?.element === 0 ? weapon.element : undefined)
+	// Use instance element for element-changeable weapons, default to 0 (no element image) if not set
+	const displayElement = $derived(weapon.weapon?.element === 0 ? (weapon.element ?? 0) : undefined)
 
 	const imageUrl = $derived(
 		getWeaponImage(weapon.weapon?.granblueId, 'grid', displayElement, transformation)
 	)
 
+	// Get awakening image URL
+	const awakeningImage = $derived(getAwakeningImage(weapon.awakening ?? undefined))
+
 	const displayName = $derived.by(() => {
 		const name = weapon.weapon?.name
 		if (!name) return '—'
diff --git a/src/lib/components/collection/CollectionWeaponRow.svelte b/src/lib/components/collection/CollectionWeaponRow.svelte
index 6362f9dd..801c16c4 100644
--- a/src/lib/components/collection/CollectionWeaponRow.svelte
+++ b/src/lib/components/collection/CollectionWeaponRow.svelte
@@ -15,8 +15,8 @@
 	// Get transformation suffix for transcendence
 	const transformation = $derived(weapon.transcendenceStep > 0 ? '02' : undefined)
 
-	// Use instance element for element-changeable weapons
-	const displayElement = $derived(weapon.weapon?.element === 0 ? weapon.element : undefined)
+	// Use instance element for element-changeable weapons, default to 0 (no element image) if not set
+	const displayElement = $derived(weapon.weapon?.element === 0 ? (weapon.element ?? 0) : undefined)
 
 	const imageUrl = $derived(
 		getWeaponImage(weapon.weapon?.granblueId, 'grid', displayElement, transformation)
diff --git a/src/lib/components/units/WeaponUnit.svelte b/src/lib/components/units/WeaponUnit.svelte
index f2ade218..2bb5c861 100644
--- a/src/lib/components/units/WeaponUnit.svelte
+++ b/src/lib/components/units/WeaponUnit.svelte
@@ -46,8 +46,8 @@
 		const isMain = position === -1 || item?.mainhand
 		const variant = isMain ? 'main' : 'grid'
 
-		// For weapons with null element that have an instance element, use it
-		const element = item?.weapon?.element === 0 && item?.element ? item.element : undefined
+		// For element-changeable weapons (element === 0), use instance element or default to 0 (no element image)
+		const element = item?.weapon?.element === 0 ? (item?.element ?? 0) : undefined
 
 		return getWeaponImage(item?.weapon?.granblueId, variant, element)
 	})
diff --git a/src/lib/utils/images.ts b/src/lib/utils/images.ts
index f90614b5..18086f8b 100644
--- a/src/lib/utils/images.ts
+++ b/src/lib/utils/images.ts
@@ -93,8 +93,8 @@ export function getImageUrl(
 		return `${basePath}/${id}_${pose}${extension}`
 	}
 
-	// Handle weapon grid element variants
-	if (type === 'weapon' && variant === 'grid' && options?.element && options.element > 0) {
+	// Handle weapon grid element variants (including element 0 for null-element weapons)
+	if (type === 'weapon' && variant === 'grid' && options?.element !== undefined && options.element >= 0) {
 		return `${basePath}/${id}_${options.element}${extension}`
 	}
 
@@ -143,8 +143,8 @@ export function getWeaponImage(
 	const extension = getFileExtension('weapon', variant)
 	const basePath = `${getBasePath()}/${directory}`
 
-	// Handle element-specific weapon grids
-	if (variant === 'grid' && element && element > 0) {
+	// Handle element-specific weapon grids (including element 0 for null-element weapons)
+	if (variant === 'grid' && element !== undefined && element >= 0) {
 		return `${basePath}/${id}_${element}${extension}`
 	}
 
@@ -238,15 +238,17 @@ export function getCharacterImageWithPose(
 
 /**
  * Get weapon grid image with element support
+ * For element-changeable weapons (element === 0), uses instanceElement or defaults to 0 (no element image)
  */
 export function getWeaponGridImage(
 	id: string | number | null | undefined,
 	element?: number,
 	instanceElement?: number
 ): string {
-	// Handle element-specific weapons (primal weapons)
-	if (id && element === 0 && instanceElement) {
-		return getImageUrl('weapon', id, 'grid', { element: instanceElement })
+	// Handle element-changeable weapons (element 0 means null/changeable)
+	// Use instance element if set, otherwise default to 0 (no element selected image)
+	if (id && element === 0) {
+		return getImageUrl('weapon', id, 'grid', { element: instanceElement ?? 0 })
 	}
 	return getImageUrl('weapon', id, 'grid')
 }