use ElementLabel/ProficiencyLabel, show all fields in detail pages
This commit is contained in:
parent
371cb7d102
commit
7a57680ec1
3 changed files with 46 additions and 32 deletions
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue