use ElementLabel/ProficiencyLabel, show all fields in detail pages

This commit is contained in:
Justin Edmund 2025-12-01 08:35:34 -08:00
parent 371cb7d102
commit 7a57680ec1
3 changed files with 46 additions and 32 deletions

View file

@ -3,10 +3,12 @@
<script lang="ts">
import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
import DetailItem from '$lib/components/ui/DetailItem.svelte'
import { getElementLabel, getElementOptions } from '$lib/utils/element'
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 { getProficiencyLabel, getProficiencyOptions } from '$lib/utils/proficiency'
import { getProficiencyOptions } from '$lib/utils/proficiency'
interface Props {
character: any
@ -31,14 +33,18 @@
<DetailItem label="Proficiency 1" bind:value={editData.proficiency1} editable={true} type="select" options={proficiencyOptions} />
<DetailItem label="Proficiency 2" bind:value={editData.proficiency2} editable={true} type="select" options={proficiencyOptions} />
{:else}
<DetailItem label="Element" value={getElementLabel(character.element)} />
<DetailItem label="Element">
<ElementLabel element={character.element} size="medium" />
</DetailItem>
<DetailItem label="Race 1" value={getRaceLabel(character.race?.[0])} />
{#if character.race?.[1]}
<DetailItem label="Race 2" value={getRaceLabel(character.race?.[1])} />
{/if}
<DetailItem label="Race 2" value={getRaceLabel(character.race?.[1])} />
<DetailItem label="Gender" value={getGenderLabel(character.gender)} />
<DetailItem label="Proficiency 1" value={getProficiencyLabel(character.proficiency?.[0] ?? 0)} />
<DetailItem label="Proficiency 2" value={getProficiencyLabel(character.proficiency?.[1] ?? 0)} />
<DetailItem label="Proficiency 1">
<ProficiencyLabel proficiency={character.proficiency?.[0] ?? 0} size="medium" />
</DetailItem>
<DetailItem label="Proficiency 2">
<ProficiencyLabel proficiency={character.proficiency?.[1] ?? 0} size="medium" />
</DetailItem>
{/if}
</DetailsContainer>

View file

@ -3,7 +3,8 @@
<script lang="ts">
import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
import DetailItem from '$lib/components/ui/DetailItem.svelte'
import { getElementLabel, getElementOptions } from '$lib/utils/element'
import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
import { getElementOptions } from '$lib/utils/element'
interface Props {
summon: any
@ -33,9 +34,9 @@
placeholder="Series name"
/>
{:else}
<DetailItem label="Element" value={getElementLabel(summon.element)} />
{#if summon.series}
<DetailItem label="Series" value={summon.series} />
{/if}
<DetailItem label="Element">
<ElementLabel element={summon.element} size="medium" />
</DetailItem>
<DetailItem label="Series" value={summon.series || '—'} />
{/if}
</DetailsContainer>

View file

@ -3,8 +3,10 @@
<script lang="ts">
import DetailsContainer from '$lib/components/ui/DetailsContainer.svelte'
import DetailItem from '$lib/components/ui/DetailItem.svelte'
import ElementLabel from '$lib/components/labels/ElementLabel.svelte'
import ProficiencyLabel from '$lib/components/labels/ProficiencyLabel.svelte'
import { getElementLabel, getElementOptions } from '$lib/utils/element'
import { getProficiencyLabel, getProficiencyOptions } from '$lib/utils/proficiency'
import { getProficiencyOptions } from '$lib/utils/proficiency'
import { getWeaponSeriesOptions, getWeaponSeriesSlug } from '$lib/utils/weaponSeries'
type ElementName = 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
@ -27,6 +29,17 @@
const label = getElementLabel(el)
return label !== '—' && label !== 'Null' ? (label.toLowerCase() as ElementName) : undefined
})
// Format series label
function formatSeriesLabel(series: number | undefined): string {
if (!series) return '—'
const seriesSlug = getWeaponSeriesSlug(series)
if (!seriesSlug) return String(series)
return seriesSlug
.split('_')
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
.join(' ')
}
</script>
<DetailsContainer title="Details">
@ -77,24 +90,18 @@
element={elementName}
/>
{:else}
<DetailItem label="Element" value={getElementLabel(weapon.element)} />
<DetailItem
label="Proficiency"
value={getProficiencyLabel(
Array.isArray(weapon.proficiency) ? weapon.proficiency[0] : weapon.proficiency
)}
/>
{#if weapon.series}
{@const seriesLabel = getWeaponSeriesSlug(weapon.series)}
<DetailItem
label="Series"
value={seriesLabel
? seriesLabel
.split('_')
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
.join(' ')
: String(weapon.series)}
<DetailItem label="Element">
<ElementLabel element={weapon.element} size="medium" />
</DetailItem>
<DetailItem label="Proficiency">
<ProficiencyLabel
proficiency={Array.isArray(weapon.proficiency) ? weapon.proficiency[0] : weapon.proficiency}
size="medium"
/>
{/if}
</DetailItem>
<DetailItem label="Series" value={formatSeriesLabel(weapon.series)} />
<DetailItem label="Extra" sublabel="Can be placed in Additional Weapons" value={weapon.extra ? 'Yes' : 'No'} />
<DetailItem label="Limit" sublabel="Only one copy can be placed in a team" value={weapon.limit ? 'Yes' : 'No'} />
<DetailItem label="AX Skills" sublabel="Can have AX Skills" value={weapon.ax ? 'Yes' : 'No'} />
{/if}
</DetailsContainer>