refactor character section components
- move series from taxonomy to metadata section - rename uncap label to "Uncap Level" - show all uncap flags in view mode
This commit is contained in:
parent
34c3dd6aa6
commit
32c4880180
3 changed files with 231 additions and 183 deletions
|
|
@ -7,9 +7,10 @@
|
|||
import SuggestionDetailItem from '$lib/components/ui/SuggestionDetailItem.svelte'
|
||||
import CopyableText from '$lib/components/ui/CopyableText.svelte'
|
||||
import Select from '$lib/components/ui/Select.svelte'
|
||||
import MultiSelect from '$lib/components/ui/MultiSelect.svelte'
|
||||
import { getRarityLabel, getRarityOptions } from '$lib/utils/rarity'
|
||||
import { getWeaponImage } from '$lib/utils/images'
|
||||
import { CHARACTER_SEASON_NAMES, getSeasonName } from '$lib/types/enums'
|
||||
import { CHARACTER_SEASON_NAMES, CHARACTER_SERIES_NAMES, getSeasonName, getSeriesNames } from '$lib/types/enums'
|
||||
|
||||
interface Props {
|
||||
character: any
|
||||
|
|
@ -43,10 +44,36 @@
|
|||
}))
|
||||
]
|
||||
|
||||
// Series options for multiselect
|
||||
const seriesOptions = Object.entries(CHARACTER_SERIES_NAMES).map(([value, label]) => ({
|
||||
value: Number(value),
|
||||
label
|
||||
}))
|
||||
|
||||
function formatPromotions(promotionNames: string[] | undefined): string {
|
||||
if (!promotionNames || promotionNames.length === 0) return '—'
|
||||
return promotionNames.join(', ')
|
||||
}
|
||||
|
||||
// Format series for display - use API-provided seriesNames if available
|
||||
function formatSeriesDisplay(): string {
|
||||
// Use pre-computed seriesNames from API if available
|
||||
if (character.seriesNames && character.seriesNames.length > 0) {
|
||||
return character.seriesNames.join(', ')
|
||||
}
|
||||
// Fallback for legacy integer array
|
||||
if (Array.isArray(character.series) && character.series.length > 0) {
|
||||
const first = character.series[0]
|
||||
if (typeof first === 'number') {
|
||||
return getSeriesNames(character.series as number[]).join(', ')
|
||||
}
|
||||
// CharacterSeriesRef[] - extract names
|
||||
return (character.series as Array<{ name: { en?: string } }>)
|
||||
.map((s) => s.name?.en || 'Unknown')
|
||||
.join(', ')
|
||||
}
|
||||
return '—'
|
||||
}
|
||||
</script>
|
||||
|
||||
<DetailsContainer title="Metadata">
|
||||
|
|
@ -62,6 +89,47 @@
|
|||
onAcceptSuggestion={() => onAcceptSuggestion?.('rarity', suggestions?.rarity)}
|
||||
onDismissSuggestion={() => onDismissSuggestion?.('rarity')}
|
||||
/>
|
||||
<DetailItem
|
||||
label="Granblue ID"
|
||||
bind:value={editData.granblueId}
|
||||
editable={true}
|
||||
type="text"
|
||||
placeholder="Granblue ID"
|
||||
/>
|
||||
<DetailItem
|
||||
label="Character ID"
|
||||
sublabel="Separate multiple IDs with commas"
|
||||
bind:value={editData.characterId}
|
||||
editable={true}
|
||||
type="text"
|
||||
placeholder="Character IDs"
|
||||
/>
|
||||
{#if character.recruitedBy}
|
||||
<DetailItem label="Recruited By">
|
||||
<a href="/database/weapons/{character.recruitedBy.granblueId}" class="recruited-by-link">
|
||||
<img
|
||||
src={getWeaponImage(character.recruitedBy.granblueId, 'square')}
|
||||
alt={character.recruitedBy.name.en || 'Recruiting weapon'}
|
||||
class="recruited-by-image"
|
||||
/>
|
||||
<span class="recruited-by-name">{character.recruitedBy.name.en}</span>
|
||||
</a>
|
||||
</DetailItem>
|
||||
<DetailItem
|
||||
label="Promotions"
|
||||
sublabel="Gacha pools from recruiting weapon"
|
||||
value={formatPromotions(character.recruitedBy.promotionNames)}
|
||||
/>
|
||||
{/if}
|
||||
<DetailItem label="Series" editable={true}>
|
||||
<MultiSelect
|
||||
size="medium"
|
||||
options={seriesOptions}
|
||||
bind:value={editData.series}
|
||||
placeholder="Select series"
|
||||
contained
|
||||
/>
|
||||
</DetailItem>
|
||||
<DetailItem
|
||||
label="Season"
|
||||
sublabel="Used to disambiguate characters with the same name"
|
||||
|
|
@ -74,19 +142,8 @@
|
|||
contained
|
||||
/>
|
||||
</DetailItem>
|
||||
<DetailItem
|
||||
label="Character ID"
|
||||
sublabel="Separate multiple IDs with commas"
|
||||
bind:value={editData.characterId}
|
||||
editable={true}
|
||||
type="text"
|
||||
placeholder="Character IDs"
|
||||
/>
|
||||
{:else}
|
||||
<DetailItem label="Rarity" value={getRarityLabel(character.rarity)} />
|
||||
{#if character.season}
|
||||
<DetailItem label="Season" value={getSeasonName(character.season) || '—'} />
|
||||
{/if}
|
||||
<DetailItem label="Granblue ID">
|
||||
{#if character.granblueId}
|
||||
<CopyableText value={character.granblueId} />
|
||||
|
|
@ -116,6 +173,8 @@
|
|||
value={formatPromotions(character.recruitedBy.promotionNames)}
|
||||
/>
|
||||
{/if}
|
||||
<DetailItem label="Series" value={formatSeriesDisplay()} />
|
||||
<DetailItem label="Season" value={getSeasonName(character.season) || '—'} />
|
||||
{/if}
|
||||
</DetailsContainer>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,14 +5,12 @@
|
|||
import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
|
||||
import DetailItem from '$lib/components/ui/DetailItem.svelte'
|
||||
import SuggestionDetailItem from '$lib/components/ui/SuggestionDetailItem.svelte'
|
||||
import MultiSelect from '$lib/components/ui/MultiSelect.svelte'
|
||||
import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
|
||||
import ProficiencyLabel from '$lib/components/labels/ProficiencyLabel.svelte'
|
||||
import { getElementOptions } from '$lib/utils/element'
|
||||
import { getRaceLabel, getRaceOptions } from '$lib/utils/race'
|
||||
import { getGenderLabel, getGenderOptions } from '$lib/utils/gender'
|
||||
import { getProficiencyOptions } from '$lib/utils/proficiency'
|
||||
import { CHARACTER_SERIES_NAMES, getSeriesNames } from '$lib/types/enums'
|
||||
|
||||
interface Props {
|
||||
character: any
|
||||
|
|
@ -39,18 +37,6 @@
|
|||
const raceOptions = getRaceOptions()
|
||||
const genderOptions = getGenderOptions()
|
||||
const proficiencyOptions = getProficiencyOptions()
|
||||
|
||||
// Series options for multiselect
|
||||
const seriesOptions = Object.entries(CHARACTER_SERIES_NAMES).map(([value, label]) => ({
|
||||
value: Number(value),
|
||||
label
|
||||
}))
|
||||
|
||||
// Format series for display
|
||||
function formatSeriesDisplay(series: number[]): string {
|
||||
if (!series || series.length === 0) return '—'
|
||||
return getSeriesNames(series).join(', ')
|
||||
}
|
||||
</script>
|
||||
|
||||
<DetailsContainer title="Details">
|
||||
|
|
@ -121,18 +107,6 @@
|
|||
onAcceptSuggestion={() => onAcceptSuggestion?.('proficiency2', suggestions?.proficiency2)}
|
||||
onDismissSuggestion={() => onDismissSuggestion?.('proficiency2')}
|
||||
/>
|
||||
<DetailItem
|
||||
label="Series"
|
||||
editable={true}
|
||||
>
|
||||
<MultiSelect
|
||||
size="medium"
|
||||
options={seriesOptions}
|
||||
bind:value={editData.series}
|
||||
placeholder="Select series"
|
||||
contained
|
||||
/>
|
||||
</DetailItem>
|
||||
{:else}
|
||||
<DetailItem label="Element">
|
||||
<ElementLabel element={character.element} size="medium" />
|
||||
|
|
@ -146,6 +120,5 @@
|
|||
<DetailItem label="Proficiency 2">
|
||||
<ProficiencyLabel proficiency={character.proficiency?.[1] ?? 0} size="medium" />
|
||||
</DetailItem>
|
||||
<DetailItem label="Series" value={formatSeriesDisplay(character.series)} />
|
||||
{/if}
|
||||
</DetailsContainer>
|
||||
|
|
|
|||
|
|
@ -1,166 +1,182 @@
|
|||
<svelte:options runes={true} />
|
||||
|
||||
<script lang="ts">
|
||||
import type { CharacterSuggestions } from '$lib/api/adapters/entity.adapter'
|
||||
import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
|
||||
import DetailItem from '$lib/components/ui/DetailItem.svelte'
|
||||
import SuggestionDetailItem from '$lib/components/ui/SuggestionDetailItem.svelte'
|
||||
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
|
||||
import { getCharacterMaxUncapLevel } from '$lib/utils/uncap'
|
||||
import { getElementLabel } from '$lib/utils/element'
|
||||
import type { CharacterSuggestions } from '$lib/api/adapters/entity.adapter'
|
||||
import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
|
||||
import DetailItem from '$lib/components/ui/DetailItem.svelte'
|
||||
import SuggestionDetailItem from '$lib/components/ui/SuggestionDetailItem.svelte'
|
||||
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
|
||||
import { getCharacterMaxUncapLevel } from '$lib/utils/uncap'
|
||||
import { getElementLabel } from '$lib/utils/element'
|
||||
|
||||
type ElementName = 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
|
||||
type ElementName = 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
|
||||
|
||||
interface Props {
|
||||
character: any
|
||||
editMode?: boolean
|
||||
editData?: any
|
||||
// Suggestion support for batch import
|
||||
suggestions?: CharacterSuggestions
|
||||
dismissedSuggestions?: Set<string>
|
||||
onAcceptSuggestion?: (field: string, value: any) => void
|
||||
onDismissSuggestion?: (field: string) => void
|
||||
// Callback when editData is modified (for triggering reactivity in parent)
|
||||
onDataChange?: () => void
|
||||
}
|
||||
interface Props {
|
||||
character: any
|
||||
editMode?: boolean
|
||||
editData?: any
|
||||
// Suggestion support for batch import
|
||||
suggestions?: CharacterSuggestions
|
||||
dismissedSuggestions?: Set<string>
|
||||
onAcceptSuggestion?: (field: string, value: any) => void
|
||||
onDismissSuggestion?: (field: string) => void
|
||||
// Callback when editData is modified (for triggering reactivity in parent)
|
||||
onDataChange?: () => void
|
||||
}
|
||||
|
||||
let {
|
||||
character,
|
||||
editMode = false,
|
||||
editData = $bindable(),
|
||||
suggestions,
|
||||
dismissedSuggestions,
|
||||
onAcceptSuggestion,
|
||||
onDismissSuggestion,
|
||||
onDataChange
|
||||
}: Props = $props()
|
||||
let {
|
||||
character,
|
||||
editMode = false,
|
||||
editData = $bindable(),
|
||||
suggestions,
|
||||
dismissedSuggestions,
|
||||
onAcceptSuggestion,
|
||||
onDismissSuggestion,
|
||||
onDataChange
|
||||
}: Props = $props()
|
||||
|
||||
const uncap = $derived(
|
||||
editMode
|
||||
? { flb: editData.flb, ulb: editData.ulb, transcendence: editData.transcendence }
|
||||
: (character?.uncap ?? {})
|
||||
)
|
||||
const flb = $derived(uncap.flb ?? false)
|
||||
const ulb = $derived(uncap.ulb ?? false)
|
||||
const transcendence = $derived(uncap.transcendence ?? false)
|
||||
const special = $derived(editMode ? editData.special : (character?.special ?? false))
|
||||
const uncapLevel = $derived(getCharacterMaxUncapLevel({ special, uncap }))
|
||||
const transcendenceStage = $derived(transcendence ? 5 : 0)
|
||||
const uncap = $derived(
|
||||
editMode
|
||||
? { flb: editData.flb, ulb: editData.ulb, transcendence: editData.transcendence }
|
||||
: (character?.uncap ?? {})
|
||||
)
|
||||
const flb = $derived(uncap.flb ?? false)
|
||||
const ulb = $derived(uncap.ulb ?? false)
|
||||
const transcendence = $derived(uncap.transcendence ?? false)
|
||||
const special = $derived(editMode ? editData.special : (character?.special ?? false))
|
||||
const uncapLevel = $derived(getCharacterMaxUncapLevel({ special, uncap }))
|
||||
const transcendenceStage = $derived(transcendence ? 5 : 0)
|
||||
|
||||
// Get element name for checkbox theming
|
||||
const elementName = $derived.by((): ElementName | undefined => {
|
||||
const el = editMode ? editData.element : character?.element
|
||||
const label = getElementLabel(el)
|
||||
return label !== '—' && label !== 'Null'
|
||||
? (label.toLowerCase() as ElementName)
|
||||
: undefined
|
||||
})
|
||||
// Get element name for checkbox theming
|
||||
const elementName = $derived.by((): ElementName | undefined => {
|
||||
const el = editMode ? editData.element : character?.element
|
||||
const label = getElementLabel(el)
|
||||
return label !== '—' && label !== 'Null' ? (label.toLowerCase() as ElementName) : undefined
|
||||
})
|
||||
|
||||
// Auto-check/uncheck uncap levels in hierarchy: Transcendence > ULB > FLB
|
||||
function handleFlbChange(checked: boolean) {
|
||||
if (!checked) {
|
||||
// Unchecking FLB should also uncheck ULB and Transcendence
|
||||
editData.ulb = false
|
||||
editData.transcendence = false
|
||||
}
|
||||
onDataChange?.()
|
||||
}
|
||||
// Auto-check/uncheck uncap levels in hierarchy: Transcendence > ULB > FLB
|
||||
function handleFlbChange(checked: boolean) {
|
||||
if (!checked) {
|
||||
// Unchecking FLB should also uncheck ULB and Transcendence
|
||||
editData.ulb = false
|
||||
editData.transcendence = false
|
||||
}
|
||||
onDataChange?.()
|
||||
}
|
||||
|
||||
function handleUlbChange(checked: boolean) {
|
||||
if (checked && !editData.flb) {
|
||||
// Checking ULB should also check FLB
|
||||
editData.flb = true
|
||||
} else if (!checked) {
|
||||
// Unchecking ULB should also uncheck Transcendence
|
||||
editData.transcendence = false
|
||||
}
|
||||
onDataChange?.()
|
||||
}
|
||||
function handleUlbChange(checked: boolean) {
|
||||
if (checked && !editData.flb) {
|
||||
// Checking ULB should also check FLB
|
||||
editData.flb = true
|
||||
} else if (!checked) {
|
||||
// Unchecking ULB should also uncheck Transcendence
|
||||
editData.transcendence = false
|
||||
}
|
||||
onDataChange?.()
|
||||
}
|
||||
|
||||
function handleTranscendenceChange(checked: boolean) {
|
||||
if (checked) {
|
||||
// Checking Transcendence should also check ULB and FLB
|
||||
if (!editData.ulb) editData.ulb = true
|
||||
if (!editData.flb) editData.flb = true
|
||||
}
|
||||
onDataChange?.()
|
||||
}
|
||||
function handleTranscendenceChange(checked: boolean) {
|
||||
if (checked) {
|
||||
// Checking Transcendence should also check ULB and FLB
|
||||
if (!editData.ulb) editData.ulb = true
|
||||
if (!editData.flb) editData.flb = true
|
||||
}
|
||||
onDataChange?.()
|
||||
}
|
||||
|
||||
function handleSpecialChange(checked: boolean) {
|
||||
if (checked) {
|
||||
// Special characters (Story SRs) don't have standard uncap levels
|
||||
editData.flb = false
|
||||
editData.ulb = false
|
||||
editData.transcendence = false
|
||||
}
|
||||
onDataChange?.()
|
||||
}
|
||||
function handleSpecialChange(checked: boolean) {
|
||||
if (checked) {
|
||||
// Special characters (Story SRs) don't have standard uncap levels
|
||||
editData.flb = false
|
||||
editData.ulb = false
|
||||
editData.transcendence = false
|
||||
}
|
||||
onDataChange?.()
|
||||
}
|
||||
</script>
|
||||
|
||||
<DetailsContainer title="Uncap">
|
||||
{#if character?.uncap || editMode}
|
||||
<DetailItem label="Uncap">
|
||||
<UncapIndicator
|
||||
type="character"
|
||||
{uncapLevel}
|
||||
{transcendenceStage}
|
||||
{flb}
|
||||
{ulb}
|
||||
{transcendence}
|
||||
{special}
|
||||
editable={false}
|
||||
/>
|
||||
</DetailItem>
|
||||
{/if}
|
||||
<DetailItem label="Uncap Level">
|
||||
<UncapIndicator
|
||||
type="character"
|
||||
{uncapLevel}
|
||||
{transcendenceStage}
|
||||
{flb}
|
||||
{ulb}
|
||||
{transcendence}
|
||||
{special}
|
||||
editable={false}
|
||||
/>
|
||||
</DetailItem>
|
||||
|
||||
{#if editMode}
|
||||
<SuggestionDetailItem
|
||||
label="FLB"
|
||||
bind:value={editData.flb}
|
||||
editable={true}
|
||||
type="checkbox"
|
||||
element={elementName}
|
||||
onchange={handleFlbChange}
|
||||
suggestion={suggestions?.flb}
|
||||
dismissedSuggestion={dismissedSuggestions?.has('flb')}
|
||||
onAcceptSuggestion={() => onAcceptSuggestion?.('flb', suggestions?.flb)}
|
||||
onDismissSuggestion={() => onDismissSuggestion?.('flb')}
|
||||
/>
|
||||
<SuggestionDetailItem
|
||||
label="ULB"
|
||||
bind:value={editData.ulb}
|
||||
editable={true}
|
||||
type="checkbox"
|
||||
element={elementName}
|
||||
onchange={handleUlbChange}
|
||||
suggestion={suggestions?.ulb}
|
||||
dismissedSuggestion={dismissedSuggestions?.has('ulb')}
|
||||
onAcceptSuggestion={() => onAcceptSuggestion?.('ulb', suggestions?.ulb)}
|
||||
onDismissSuggestion={() => onDismissSuggestion?.('ulb')}
|
||||
/>
|
||||
<DetailItem label="Transcendence" bind:value={editData.transcendence} editable={true} type="checkbox" element={elementName} onchange={handleTranscendenceChange} />
|
||||
<div class="special-field">
|
||||
<DetailItem label="Special" bind:value={editData.special} editable={true} type="checkbox" element={elementName} onchange={handleSpecialChange} />
|
||||
<p class="special-note">This is for Story SRs. Don't check this unless something really weird happens.</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if !editMode}
|
||||
<DetailItem label="FLB" value={flb ? 'Yes' : 'No'} />
|
||||
<DetailItem label="ULB" value={ulb ? 'Yes' : 'No'} />
|
||||
<DetailItem label="Transcendence" value={transcendence ? 'Yes' : 'No'} />
|
||||
<DetailItem label="Special" value={special ? 'Yes' : 'No'} />
|
||||
{:else}
|
||||
<SuggestionDetailItem
|
||||
label="FLB"
|
||||
bind:value={editData.flb}
|
||||
editable={true}
|
||||
type="checkbox"
|
||||
element={elementName}
|
||||
onchange={handleFlbChange}
|
||||
suggestion={suggestions?.flb}
|
||||
dismissedSuggestion={dismissedSuggestions?.has('flb')}
|
||||
onAcceptSuggestion={() => onAcceptSuggestion?.('flb', suggestions?.flb)}
|
||||
onDismissSuggestion={() => onDismissSuggestion?.('flb')}
|
||||
/>
|
||||
<SuggestionDetailItem
|
||||
label="ULB"
|
||||
bind:value={editData.ulb}
|
||||
editable={true}
|
||||
type="checkbox"
|
||||
element={elementName}
|
||||
onchange={handleUlbChange}
|
||||
suggestion={suggestions?.ulb}
|
||||
dismissedSuggestion={dismissedSuggestions?.has('ulb')}
|
||||
onAcceptSuggestion={() => onAcceptSuggestion?.('ulb', suggestions?.ulb)}
|
||||
onDismissSuggestion={() => onDismissSuggestion?.('ulb')}
|
||||
/>
|
||||
<DetailItem
|
||||
label="Transcendence"
|
||||
bind:value={editData.transcendence}
|
||||
editable={true}
|
||||
type="checkbox"
|
||||
element={elementName}
|
||||
onchange={handleTranscendenceChange}
|
||||
/>
|
||||
<div class="special-field">
|
||||
<DetailItem
|
||||
label="Special"
|
||||
bind:value={editData.special}
|
||||
editable={true}
|
||||
type="checkbox"
|
||||
element={elementName}
|
||||
onchange={handleSpecialChange}
|
||||
/>
|
||||
<p class="special-note">
|
||||
This is for Story SRs. Don't check this unless something really weird happens.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</DetailsContainer>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/colors' as colors;
|
||||
@use '$src/themes/spacing' as spacing;
|
||||
@use '$src/themes/typography' as typography;
|
||||
@use '$src/themes/colors' as colors;
|
||||
@use '$src/themes/spacing' as spacing;
|
||||
@use '$src/themes/typography' as typography;
|
||||
|
||||
.special-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.special-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.special-note {
|
||||
font-size: typography.$font-small;
|
||||
color: colors.$grey-50;
|
||||
margin: 0;
|
||||
padding: 0 spacing.$unit spacing.$unit;
|
||||
}
|
||||
.special-note {
|
||||
font-size: typography.$font-small;
|
||||
color: colors.$grey-50;
|
||||
margin: 0;
|
||||
padding-bottom: spacing.$unit;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue