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

add character tags and proficiency labels to list view

Browse source
This commit is contained in:
Justin Edmund 2025-12-19 12:27:07 -08:00
parent 7608b189fa
commit 5ab48f5d97
1 changed files with 34 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
src/lib/components/collection/CollectionCharacterRow.svelte
View file

@ -3,6 +3,8 @@
import { getCharacterImageWithPose } from '$lib/utils/images' import { getCharacterImageWithPose } from '$lib/utils/images'
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte' import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
import ElementLabel from '$lib/components/labels/ElementLabel.svelte' import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
import ProficiencyLabel from '$lib/components/labels/ProficiencyLabel.svelte'
import CharacterTags from '$lib/components/tags/CharacterTags.svelte'
import perpetuityFilled from '$src/assets/icons/perpetuity/filled.svg' import perpetuityFilled from '$src/assets/icons/perpetuity/filled.svg'
interface Props { interface Props {
@ -29,24 +31,7 @@
}) })
const element = $derived(character.character?.element) const element = $derived(character.character?.element)
const proficiencies = $derived(character.character?.proficiency ?? [])
const awakeningDisplay = $derived.by(() => {
if (!character.awakening) return null
const type = character.awakening.type?.name?.en || 'Balanced'
const level = character.awakening.level || 1
// Abbreviate type names
const abbrev =
type === 'Balanced'
? 'BAL'
: type === 'Attack'
? 'ATK'
: type === 'Defense'
? 'DEF'
: type === 'Multiattack'
? 'DA/TA'
: type.slice(0, 3).toUpperCase()
return `${abbrev} ${level}`
})
</script> </script>
<button type="button" class="character-row" onclick={onClick}> <button type="button" class="character-row" onclick={onClick}>
@ -55,14 +40,19 @@
<img src={imageUrl} alt={displayName} loading="lazy" /> <img src={imageUrl} alt={displayName} loading="lazy" />
</div> </div>
<div class="name-cell"> <div class="name-cell">
<span class="name">{displayName}</span> <div class="name-row">
{#if character.perpetuity} <span class="name">{displayName}</span>
<img {#if character.perpetuity}
class="perpetuity-badge" <img
src={perpetuityFilled} class="perpetuity-badge"
alt="Perpetuity Ring" src={perpetuityFilled}
title="Perpetuity Ring" alt="Perpetuity Ring"
/> title="Perpetuity Ring"
/>
{/if}
</div>
{#if character.character}
<CharacterTags character={character.character} />
{/if} {/if}
</div> </div>
</div> </div>
@ -83,12 +73,10 @@
/> />
</div> </div>
<div class="awakening-cell"> <div class="proficiency-cell">
{#if awakeningDisplay} {#each proficiencies as proficiency}
<span class="awakening">{awakeningDisplay}</span> <ProficiencyLabel {proficiency} size="small" />
{:else} {/each}
<span class="awakening-placeholder">—</span>
{/if}
</div> </div>
</button> </button>
@ -147,6 +135,12 @@
.name-cell { .name-cell {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
display: flex;
flex-direction: column;
gap: $unit-half;
}
.name-row {
display: flex; display: flex;
align-items: center; align-items: center;
gap: $unit; gap: $unit;
@ -159,13 +153,13 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
}
}
.perpetuity-badge { .perpetuity-badge {
width: 16px; width: 16px;
height: 16px; height: 16px;
flex-shrink: 0; flex-shrink: 0;
}
}
} }
.uncap-cell { .uncap-cell {
@ -175,20 +169,9 @@
flex-shrink: 0; flex-shrink: 0;
} }
.awakening-cell { .proficiency-cell {
width: 64px;
display: flex; display: flex;
justify-content: flex-end; gap: $unit-half;
flex-shrink: 0; flex-shrink: 0;
} }
.awakening {
font-size: $font-small;
color: var(--text-secondary);
font-weight: $medium;
}
.awakening-placeholder {
color: var(--text-secondary);
}
</style> </style>