granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update grid components for editing support

Browse source
This commit is contained in:
Justin Edmund 2025-09-15 04:09:18 -07:00
parent c9bd155ed6
commit 7e862ed56a
3 changed files with 42 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/lib/components/grids/CharacterGrid.svelte
View file

@ -1,39 +1,23 @@
<svelte:options runes={true} />
<script lang="ts">
import type { GridCharacterItemView } from '$lib/api/schemas/party'
import type { GridCharacter } from '$lib/types/api/party'
export let characters: GridCharacterItemView[] = []
export let mainWeaponElement: number | null | undefined = undefined
export let partyElement: number | null | undefined = undefined
function displayName(input: any): string {
if (!input) return '—'
const maybe = input.name ?? input
if (typeof maybe === 'string') return maybe
if (maybe && typeof maybe === 'object') return maybe.en || maybe.ja || '—'
return '—'
interface Props {
characters?: GridCharacter[]
mainWeaponElement?: number | null | undefined
partyElement?: number | null | undefined
}
function characterImageUrl(c?: GridCharacterItemView): string {
const id = (c as any)?.object?.granblueId
if (!id) return '/images/placeholders/placeholder-weapon-grid.png'
const uncap = (c as any)?.uncapLevel ?? 0
const transStep = (c as any)?.transcendenceStep ?? 0
let suffix = '01'
if (transStep > 0) suffix = '04'
else if (uncap >= 5) suffix = '03'
else if (uncap > 2) suffix = '02'
// Lyria special case (3030182000): append element
if (String(id) === '3030182000') {
let element = mainWeaponElement || partyElement || 1
suffix = `${suffix}_0${element}`
}
return `/images/character-main/${id}_${suffix}.jpg`
}
let {
characters = [],
mainWeaponElement = undefined,
partyElement = undefined
}: Props = $props()
import CharacterUnit from '$lib/components/units/CharacterUnit.svelte'
const grid = Array.from({ length: 5 }, (_, i) => characters.find((c) => c.position === i))
let grid = $derived(Array.from({ length: 5 }, (_, i) => characters.find((c) => c.position === i)))
</script>
<div class="wrapper">

30
src/lib/components/grids/SummonGrid.svelte
View file

@ -1,28 +1,20 @@
<svelte:options runes={true} />
<script lang="ts">
import type { GridSummonItemView } from '$lib/api/schemas/party'
import type { GridSummon } from '$lib/types/api/party'
export let summons: GridSummonItemView[] = []
interface Props {
summons?: GridSummon[]
}
function displayName(input: any): string {
if (!input) return '—'
const maybe = input.name ?? input
if (typeof maybe === 'string') return maybe
if (maybe && typeof maybe === 'object') return maybe.en || maybe.ja || '—'
return '—'
}
function summonImageUrl(s?: GridSummonItemView): string {
const id = (s as any)?.object?.granblueId
const isMain = s?.main || s?.position === -1 || s?.friend || s?.position === 6
if (!id) return isMain ? '/images/placeholders/placeholder-summon-main.png' : '/images/placeholders/placeholder-summon-grid.png'
const folder = isMain ? 'summon-main' : 'summon-grid'
return `/images/${folder}/${id}.jpg`
}
let { summons = [] }: Props = $props()
import SummonUnit from '$lib/components/units/SummonUnit.svelte'
import ExtraSummons from '$lib/components/extra/ExtraSummonsGrid.svelte'
const main = summons.find((s) => s.main || s.position === -1)
const friend = summons.find((s) => s.friend || s.position === 6)
const grid = Array.from({ length: 4 }, (_, i) => summons.find((s) => s.position === i))
let main = $derived(summons.find((s) => s.main || s.position === -1))
let friend = $derived(summons.find((s) => s.friend || s.position === 6))
let grid = $derived(Array.from({ length: 4 }, (_, i) => summons.find((s) => s.position === i)))
</script>
<div class="wrapper">

50
src/lib/components/grids/WeaponGrid.svelte
View file

@ -1,44 +1,28 @@
<svelte:options runes={true} />
<script lang="ts">
import type { GridWeaponItemView } from '$lib/api/schemas/party'
import type { GridWeapon } from '$lib/types/api/party'
export let weapons: GridWeaponItemView[] = []
export let raidExtra: boolean | undefined = undefined
export let showGuidebooks: boolean | undefined = undefined
export let guidebooks: Record<string, any> | undefined = undefined
function displayName(input: any): string {
if (!input) return '—'
const maybe = input.name ?? input
if (typeof maybe === 'string') return maybe
if (maybe && typeof maybe === 'object') return maybe.en || maybe.ja || '—'
return '—'
interface Props {
weapons?: GridWeapon[]
raidExtra?: boolean
showGuidebooks?: boolean
guidebooks?: Record<string, any>
}
function weaponImageUrl(w?: GridWeaponItemView): string {
const id = (w as any)?.object?.granblueId
const isMain = !!(w && ((w as any).mainhand || (w as any).position === -1))
if (!id) return isMain
? '/images/placeholders/placeholder-weapon-main.png'
: '/images/placeholders/placeholder-weapon-grid.png'
const folder = isMain ? 'weapon-main' : 'weapon-grid'
// Neutral element override: if object.element == 0 and instance element present, append _<element>
const objElement = (w as any)?.object?.element
const instElement = (w as any)?.element
if (objElement === 0 && instElement) {
return `/images/${folder}/${id}_${instElement}.jpg`
}
// For local static images, transcendence variants are not split by suffix; use base
return `/images/${folder}/${id}.jpg`
}
let {
weapons = [],
raidExtra = undefined,
showGuidebooks = undefined,
guidebooks = undefined
}: Props = $props()
import WeaponUnit from '$lib/components/units/WeaponUnit.svelte'
import ExtraWeapons from '$lib/components/extra/ExtraWeaponsGrid.svelte'
import Guidebooks from '$lib/components/extra/GuidebooksGrid.svelte'
const mainhand = weapons.find((w) => (w as any).mainhand || w.position === -1)
const grid = Array.from({ length: 9 }, (_, i) => weapons.find((w) => w.position === i))
let mainhand = $derived(weapons.find((w) => (w as any).mainhand || w.position === -1))
let grid = $derived(Array.from({ length: 9 }, (_, i) => weapons.find((w) => w.position === i)))
</script>
<div class="wrapper">