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

add job type support to detail scaffold/header

Browse source
This commit is contained in:
Justin Edmund 2025-12-15 14:21:30 -08:00
parent 695f76a3be
commit 18b60f2c9b
2 changed files with 39 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/lib/components/ui/DetailsHeader.svelte
View file

@ -5,11 +5,12 @@
import ProficiencyLabel from '$lib/components/labels/ProficiencyLabel.svelte' import ProficiencyLabel from '$lib/components/labels/ProficiencyLabel.svelte'
import ElementLabel from '$lib/components/labels/ElementLabel.svelte' import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
import Button from './Button.svelte' import Button from './Button.svelte'
import { getJobTierName } from '$lib/utils/jobUtils'
// Props // Props
interface Props { interface Props {
type: 'character' | 'summon' | 'weapon' type: 'character' | 'summon' | 'weapon' | 'job'
item: any // The character/summon/weapon object item: any // The character/summon/weapon/job object
image: string image: string
editUrl?: string // URL to navigate to for editing (view mode) editUrl?: string // URL to navigate to for editing (view mode)
showEdit?: boolean // Whether to show the edit button showEdit?: boolean // Whether to show the edit button
@ -64,18 +65,18 @@
<header class="container"> <header class="container">
<div class="left"> <div class="left">
<div class="image"> <div class="image" class:job={type === 'job'}>
<img <img
src={image} src={image}
alt={getDisplayName(name)} alt={getDisplayName(name)}
onerror={(e) => { onerror={(e) => {
const placeholder = const placeholders = {
type === 'character' character: '/images/placeholders/placeholder-character-main.png',
? '/images/placeholders/placeholder-character-main.png' summon: '/images/placeholders/placeholder-summon-main.png',
: type === 'summon' weapon: '/images/placeholders/placeholder-weapon-main.png',
? '/images/placeholders/placeholder-summon-main.png' job: '/images/placeholders/placeholder-job.png'
: '/images/placeholders/placeholder-weapon-main.png' } as const
;(e.currentTarget as HTMLImageElement).src = placeholder ;(e.currentTarget as HTMLImageElement).src = placeholders[type]
}} }}
/> />
</div> </div>
@ -83,19 +84,23 @@
<div class="info"> <div class="info">
<h2>{getDisplayName(name)}</h2> <h2>{getDisplayName(name)}</h2>
<div class="meta"> <div class="meta">
{#if element !== undefined} {#if type === 'job'}
<ElementLabel {element} size="medium" /> <span class="job-tier">{getJobTierName(item?.row)}</span>
{/if} {:else}
{#if (type === 'character' || type === 'weapon') && proficiency} {#if element !== undefined}
{#if Array.isArray(proficiency)} <ElementLabel {element} size="medium" />
{#if proficiency[0] !== undefined} {/if}
<ProficiencyLabel proficiency={proficiency[0]} size="medium" /> {#if (type === 'character' || type === 'weapon') && proficiency}
{#if Array.isArray(proficiency)}
{#if proficiency[0] !== undefined}
<ProficiencyLabel proficiency={proficiency[0]} size="medium" />
{/if}
{#if proficiency[1] !== undefined}
<ProficiencyLabel proficiency={proficiency[1]} size="medium" />
{/if}
{:else if proficiency !== undefined}
<ProficiencyLabel {proficiency} size="medium" />
{/if} {/if}
{#if proficiency[1] !== undefined}
<ProficiencyLabel proficiency={proficiency[1]} size="medium" />
{/if}
{:else if proficiency !== undefined}
<ProficiencyLabel {proficiency} size="medium" />
{/if} {/if}
{/if} {/if}
</div> </div>
@ -170,6 +175,11 @@
height: auto; height: auto;
border-radius: layout.$item-corner; border-radius: layout.$item-corner;
} }
&.job img {
width: 32px;
height: auto;
}
} }
.info { .info {
@ -186,6 +196,12 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: spacing.$unit; gap: spacing.$unit;
align-items: center;
}
.job-tier {
font-size: typography.$font-small;
color: colors.$grey-50;
} }
} }
} }

2
src/lib/features/database/detail/DetailScaffold.svelte
View file

@ -11,7 +11,7 @@
export type DetailTab = 'info' | 'images' | 'raw' export type DetailTab = 'info' | 'images' | 'raw'
interface Props { interface Props {
type: 'character' | 'summon' | 'weapon' type: 'character' | 'summon' | 'weapon' | 'job'
item: any item: any
image: string image: string
showEdit?: boolean showEdit?: boolean