From 3eb00135f82cee249f9bbfd9f09a5df70a77af28 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 17 Sep 2025 13:42:48 -0700 Subject: [PATCH] refactor database detail pages with new UI components --- .../database/characters/[id]/+page.svelte | 313 +++++------------- src/routes/database/summons/[id]/+page.svelte | 273 ++++----------- src/routes/database/weapons/[id]/+page.svelte | 278 ++++------------ 3 files changed, 214 insertions(+), 650 deletions(-) diff --git a/src/routes/database/characters/[id]/+page.svelte b/src/routes/database/characters/[id]/+page.svelte index ce84e3b3..0f696b30 100644 --- a/src/routes/database/characters/[id]/+page.svelte +++ b/src/routes/database/characters/[id]/+page.svelte @@ -1,11 +1,24 @@ -
-
- -

Character Details

-
- +
{#if character} -
-
-
- {getCharacterName(character.name)} { e.currentTarget.src = '/images/placeholders/placeholder-character-main.png' }} - /> -
-
-

{getCharacterName(character.name)}

-
-
- Rarity: - {getRarityLabel(character.rarity)} -
-
- Element: -
- {#if character.element} - {getElementLabel(character.element)} - {getElementLabel(character.element)} - {:else} - — - {/if} -
-
-
- Max Level: - {character.max_level || '—'} -
-
- Granblue ID: - {character.granblue_id || '—'} -
-
-
-
+
+ -
-

Details

-
-
- Race: - {getRaceLabel(character.race)} -
-
- Gender: - {getGenderLabel(character.gender)} -
-
- Base HP: - {character.base_hp || '—'} -
-
- Base Attack: - {character.base_attack || '—'} -
-
- Max HP: - {character.max_hp || '—'} -
-
- Max Attack: - {character.max_attack || '—'} -
-
-
+ + + + + + {#if character.uncap} + + + + {/if} + + + + + + + + + + + + {#if flb} + + {/if} + + + + + + {#if flb} + + {/if} +
{:else}
@@ -119,51 +101,15 @@
diff --git a/src/routes/database/summons/[id]/+page.svelte b/src/routes/database/summons/[id]/+page.svelte index c8a09ecd..ee6f6cb7 100644 --- a/src/routes/database/summons/[id]/+page.svelte +++ b/src/routes/database/summons/[id]/+page.svelte @@ -4,6 +4,10 @@ import { goto } from '$app/navigation' import { getRarityLabel } from '$lib/utils/rarity' import { getElementLabel, getElementIcon } from '$lib/utils/element' + import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte' + import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte' + import DetailItem from '$lib/components/ui/DetailItem.svelte' + import DetailsHeader from '$lib/components/ui/DetailsHeader.svelte' import type { PageData } from './$types' let { data }: { data: PageData } = $props() @@ -11,101 +15,78 @@ // Get summon from server data const summon = $derived(data.summon) - // Helper function to get summon name - function getSummonName(nameObj: any): string { - if (!nameObj) return 'Unknown Summon' - if (typeof nameObj === 'string') return nameObj - return nameObj.en || nameObj.ja || 'Unknown Summon' - } - // Helper function to get summon image function getSummonImage(summon: any): string { if (!summon?.granblue_id) return '/images/placeholders/placeholder-summon-main.png' - return `/images/summon-main/${summon.granblue_id}.jpg` + return `/images/summon-grid/${summon.granblue_id}.jpg` } + + // Calculate uncap properties for the indicator + const uncap = $derived(summon?.uncap ?? {}) + const flb = $derived(uncap.flb ?? false) + const ulb = $derived(uncap.ulb ?? false) + const transcendence = $derived(uncap.transcendence ?? false) + + // Calculate maximum uncap level based on available uncaps + // Summons: 3 base + FLB + ULB + transcendence + const getMaxUncapLevel = () => { + return transcendence ? 6 : ulb ? 5 : flb ? 4 : 3 + } + + const uncapLevel = $derived(getMaxUncapLevel()) + // For details view, show maximum transcendence stage when available + const transcendenceStage = $derived(transcendence ? 5 : 0)
-
- -

Summon Details

-
- {#if summon}
-
-
- {getSummonName(summon.name)} { e.currentTarget.src = '/images/placeholders/placeholder-summon-main.png' }} - /> -
-
-

{getSummonName(summon.name)}

-
-
- Rarity: - {getRarityLabel(summon.rarity)} -
-
- Element: -
- {#if summon.element} - {getElementLabel(summon.element)} - {getElementLabel(summon.element)} - {:else} - — - {/if} -
-
-
- Max Level: - {summon.max_level || '—'} -
-
- Granblue ID: - {summon.granblue_id || '—'} -
-
-
-
+ -
-

Stats

-
-
- Base HP: - {summon.base_hp || '—'} -
-
- Base Attack: - {summon.base_attack || '—'} -
-
- Max HP: - {summon.max_hp || '—'} -
-
- Max Attack: - {summon.max_attack || '—'} -
-
- Plus Bonus: - {summon.plus_bonus ? 'Yes' : 'No'} -
-
- Series: - {summon.series || '—'} -
-
-
+ + + + {#if flb} + + {/if} + {#if ulb} + + {/if} + {#if transcendence} + + {/if} + + + + + + {#if flb} + + {/if} + {#if ulb} + + {/if} + {#if transcendence} + + {/if} + + + + + {#if summon.uncap} + + + + {/if} +

Call Effect

@@ -159,22 +140,22 @@
diff --git a/src/routes/database/weapons/[id]/+page.svelte b/src/routes/database/weapons/[id]/+page.svelte index 67804650..db259a84 100644 --- a/src/routes/database/weapons/[id]/+page.svelte +++ b/src/routes/database/weapons/[id]/+page.svelte @@ -5,6 +5,10 @@ import { getRarityLabel } from '$lib/utils/rarity' import { getElementLabel, getElementIcon } from '$lib/utils/element' import { getProficiencyLabel, getProficiencyIcon } from '$lib/utils/proficiency' + import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte' + import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte' + import DetailItem from '$lib/components/ui/DetailItem.svelte' + import DetailsHeader from '$lib/components/ui/DetailsHeader.svelte' import type { PageData } from './$types' let { data }: { data: PageData } = $props() @@ -12,123 +16,78 @@ // Get weapon from server data const weapon = $derived(data.weapon) - // Helper function to get weapon name - function getWeaponName(nameObj: any): string { - if (!nameObj) return 'Unknown Weapon' - if (typeof nameObj === 'string') return nameObj - return nameObj.en || nameObj.ja || 'Unknown Weapon' - } - // Helper function to get weapon image function getWeaponImage(weapon: any): string { if (!weapon?.granblue_id) return '/images/placeholders/placeholder-weapon-main.png' // Handle element-specific weapons (primal weapons) if (weapon.element === 0 && weapon.instance_element) { - return `/images/weapon-main/${weapon.granblue_id}_${weapon.instance_element}.jpg` + return `/images/weapon-grid/${weapon.granblue_id}_${weapon.instance_element}.jpg` } - return `/images/weapon-main/${weapon.granblue_id}.jpg` + return `/images/weapon-grid/${weapon.granblue_id}.jpg` } + + // Calculate uncap properties for the indicator + const uncap = $derived(weapon?.uncap ?? {}) + const flb = $derived(uncap.flb ?? false) + const ulb = $derived(uncap.ulb ?? false) + const transcendence = $derived(uncap.transcendence ?? false) + + // Calculate maximum uncap level based on available uncaps + // Weapons: 3 base + FLB + ULB + transcendence + const getMaxUncapLevel = () => { + return transcendence ? 6 : ulb ? 5 : flb ? 4 : 3 + } + + const uncapLevel = $derived(getMaxUncapLevel()) + // For details view, show maximum transcendence stage when available + const transcendenceStage = $derived(transcendence ? 5 : 0)
-
- -

Weapon Details

-
- {#if weapon}
-
-
- {getWeaponName(weapon.name)} { - e.currentTarget.src = '/images/placeholders/placeholder-weapon-main.png' - }} - /> -
-
-

{getWeaponName(weapon.name)}

-
-
- Rarity: - {getRarityLabel(weapon.rarity)} -
-
- Element: -
- {#if weapon.element} - {getElementLabel(weapon.element)} - {getElementLabel(weapon.element)} - {:else} - — - {/if} -
-
-
- Proficiency: -
- {#if weapon.proficiency} - {getProficiencyLabel(weapon.proficiency)} - {getProficiencyLabel(weapon.proficiency)} - {:else} - — - {/if} -
-
-
- Max Level: - {weapon.max_level || '—'} -
-
- Granblue ID: - {weapon.granblue_id || '—'} -
-
-
-
+ -
-

Stats

-
-
- Base HP: - {weapon.base_hp || '—'} -
-
- Base Attack: - {weapon.base_attack || '—'} -
-
- Max HP: - {weapon.max_hp || '—'} -
-
- Max Attack: - {weapon.max_attack || '—'} -
-
- Skill Level Cap: - {weapon.skill_level_cap || '—'} -
-
- Plus Bonus: - {weapon.plus_bonus ? 'Yes' : 'No'} -
-
-
+ + + + {#if weapon.uncap} + + + + {/if} + + + + + + {#if flb} + + {/if} + {#if ulb} + + {/if} + + + + + + {#if flb} + + {/if} + {#if ulb} + + {/if} +

Skills

@@ -156,17 +115,17 @@