add uncap level editing to CharacterEditPane
This commit is contained in:
parent
2a4789c72a
commit
0f46960de6
2 changed files with 41 additions and 0 deletions
|
|
@ -22,8 +22,11 @@
|
||||||
import EarringSelect from './edit/EarringSelect.svelte'
|
import EarringSelect from './edit/EarringSelect.svelte'
|
||||||
import PerpetuityToggle from './edit/PerpetuityToggle.svelte'
|
import PerpetuityToggle from './edit/PerpetuityToggle.svelte'
|
||||||
import Button from '$lib/components/ui/Button.svelte'
|
import Button from '$lib/components/ui/Button.svelte'
|
||||||
|
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
|
||||||
|
|
||||||
export interface CharacterEditValues {
|
export interface CharacterEditValues {
|
||||||
|
uncapLevel: number
|
||||||
|
transcendenceStep: number
|
||||||
awakening?: {
|
awakening?: {
|
||||||
type?: Awakening
|
type?: Awakening
|
||||||
level: number
|
level: number
|
||||||
|
|
@ -34,6 +37,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface CharacterEditUpdates {
|
export interface CharacterEditUpdates {
|
||||||
|
uncapLevel?: number
|
||||||
|
transcendenceStep?: number
|
||||||
awakening?: {
|
awakening?: {
|
||||||
id: string
|
id: string
|
||||||
level: number
|
level: number
|
||||||
|
|
@ -68,6 +73,8 @@
|
||||||
}: Props = $props()
|
}: Props = $props()
|
||||||
|
|
||||||
// Internal state - initialized from currentValues
|
// Internal state - initialized from currentValues
|
||||||
|
let uncapLevel = $state(currentValues.uncapLevel)
|
||||||
|
let transcendenceStep = $state(currentValues.transcendenceStep)
|
||||||
let selectedAwakening = $state<Awakening | undefined>(currentValues.awakening?.type)
|
let selectedAwakening = $state<Awakening | undefined>(currentValues.awakening?.type)
|
||||||
let awakeningLevel = $state(currentValues.awakening?.level ?? 1)
|
let awakeningLevel = $state(currentValues.awakening?.level ?? 1)
|
||||||
let rings = $state<ExtendedMastery[]>(
|
let rings = $state<ExtendedMastery[]>(
|
||||||
|
|
@ -85,6 +92,8 @@
|
||||||
|
|
||||||
// Re-initialize when currentValues changes (e.g., switching between characters)
|
// Re-initialize when currentValues changes (e.g., switching between characters)
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
|
uncapLevel = currentValues.uncapLevel
|
||||||
|
transcendenceStep = currentValues.transcendenceStep
|
||||||
selectedAwakening = currentValues.awakening?.type
|
selectedAwakening = currentValues.awakening?.type
|
||||||
awakeningLevel = currentValues.awakening?.level ?? 1
|
awakeningLevel = currentValues.awakening?.level ?? 1
|
||||||
rings =
|
rings =
|
||||||
|
|
@ -125,8 +134,19 @@
|
||||||
'character-multi': 'e36b0573-79c3-4dd2-9524-c95def4bbb1a'
|
'character-multi': 'e36b0573-79c3-4dd2-9524-c95def4bbb1a'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Handlers for UncapIndicator
|
||||||
|
function handleUncapUpdate(newLevel: number) {
|
||||||
|
uncapLevel = newLevel
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleTranscendenceUpdate(newStage: number) {
|
||||||
|
transcendenceStep = newStage
|
||||||
|
}
|
||||||
|
|
||||||
function handleSave() {
|
function handleSave() {
|
||||||
const updates: CharacterEditUpdates = {
|
const updates: CharacterEditUpdates = {
|
||||||
|
uncapLevel,
|
||||||
|
transcendenceStep,
|
||||||
rings,
|
rings,
|
||||||
perpetuity: showPerpetuity ? perpetuity : undefined
|
perpetuity: showPerpetuity ? perpetuity : undefined
|
||||||
}
|
}
|
||||||
|
|
@ -156,6 +176,8 @@
|
||||||
|
|
||||||
function handleCancel() {
|
function handleCancel() {
|
||||||
// Reset to original values
|
// Reset to original values
|
||||||
|
uncapLevel = currentValues.uncapLevel
|
||||||
|
transcendenceStep = currentValues.transcendenceStep
|
||||||
selectedAwakening = currentValues.awakening?.type
|
selectedAwakening = currentValues.awakening?.type
|
||||||
awakeningLevel = currentValues.awakening?.level ?? 1
|
awakeningLevel = currentValues.awakening?.level ?? 1
|
||||||
rings =
|
rings =
|
||||||
|
|
@ -175,6 +197,23 @@
|
||||||
|
|
||||||
<div class="character-edit-pane">
|
<div class="character-edit-pane">
|
||||||
<div class="edit-sections">
|
<div class="edit-sections">
|
||||||
|
<DetailsSection title="Uncap Level">
|
||||||
|
<div class="section-content uncap-section">
|
||||||
|
<UncapIndicator
|
||||||
|
type="character"
|
||||||
|
{uncapLevel}
|
||||||
|
transcendenceStage={transcendenceStep}
|
||||||
|
special={characterData?.special}
|
||||||
|
flb={characterData?.uncap?.flb}
|
||||||
|
ulb={characterData?.uncap?.ulb}
|
||||||
|
transcendence={characterData?.uncap?.transcendence}
|
||||||
|
editable={true}
|
||||||
|
updateUncap={handleUncapUpdate}
|
||||||
|
updateTranscendence={handleTranscendenceUpdate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</DetailsSection>
|
||||||
|
|
||||||
{#if hasAwakening && availableAwakenings.length > 0}
|
{#if hasAwakening && availableAwakenings.length > 0}
|
||||||
<DetailsSection title="Awakening">
|
<DetailsSection title="Awakening">
|
||||||
<div class="section-content">
|
<div class="section-content">
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,8 @@
|
||||||
|
|
||||||
// Convert GridCharacter data to CharacterEditPane format
|
// Convert GridCharacter data to CharacterEditPane format
|
||||||
const currentValues = $derived<CharacterEditValues>({
|
const currentValues = $derived<CharacterEditValues>({
|
||||||
|
uncapLevel: character.uncapLevel ?? 0,
|
||||||
|
transcendenceStep: character.transcendenceStep ?? 0,
|
||||||
awakening: character.awakening
|
awakening: character.awakening
|
||||||
? {
|
? {
|
||||||
type: character.awakening.type,
|
type: character.awakening.type,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue