102 lines
2.6 KiB
Svelte
102 lines
2.6 KiB
Svelte
<svelte:options runes={true} />
|
|
|
|
<script lang="ts">
|
|
import MasteryRow from './MasteryRow.svelte'
|
|
import { aetherialMastery, type ItemSkill } from '$lib/data/overMastery'
|
|
import { getElementalizedEarringStat } from '$lib/utils/masteryUtils'
|
|
|
|
interface ExtendedMastery {
|
|
modifier: number
|
|
strength: number
|
|
}
|
|
|
|
interface Props {
|
|
/** Current earring value */
|
|
value?: ExtendedMastery
|
|
/** Character's element for filtering/labeling options */
|
|
element?: number
|
|
/** Called when earring changes */
|
|
onChange?: (earring: ExtendedMastery | undefined) => void
|
|
}
|
|
|
|
let { value, element, onChange }: Props = $props()
|
|
|
|
// Local state
|
|
let modifier = $state(value?.modifier ?? 0)
|
|
let strength = $state(value?.strength ?? 0)
|
|
|
|
// Get the ItemSkill data for a modifier, with element substitution
|
|
function getSkillData(mod: number): ItemSkill | undefined {
|
|
if (mod <= 0) return undefined
|
|
return getElementalizedEarringStat(mod, element, 'en')
|
|
}
|
|
|
|
// Build modifier options
|
|
const modifierOptions = $derived.by(() => {
|
|
const options: Array<{ value: number; label: string }> = [{ value: 0, label: 'None' }]
|
|
|
|
for (const skill of aetherialMastery) {
|
|
// Use elementalized name for display
|
|
const elementalizedSkill = getElementalizedEarringStat(skill.id, element, 'en')
|
|
options.push({
|
|
value: skill.id,
|
|
label: elementalizedSkill?.name.en ?? skill.name.en
|
|
})
|
|
}
|
|
|
|
return options
|
|
})
|
|
|
|
// Build strength options based on selected modifier
|
|
const strengthOptions = $derived.by(() => {
|
|
if (modifier <= 0) return []
|
|
const skill = getSkillData(modifier)
|
|
if (!skill) return []
|
|
|
|
const options: Array<{ value: number; label: string }> = []
|
|
for (let v = skill.minValue; v <= skill.maxValue; v++) {
|
|
options.push({
|
|
value: v,
|
|
label: `${v}${skill.suffix || ''}`
|
|
})
|
|
}
|
|
return options
|
|
})
|
|
|
|
// Emit changes
|
|
function emitChange() {
|
|
if (modifier <= 0) {
|
|
onChange?.(undefined)
|
|
} else {
|
|
onChange?.({ modifier, strength })
|
|
}
|
|
}
|
|
|
|
function handleModifierChange(value: number | string | undefined) {
|
|
modifier = typeof value === 'number' ? value : parseInt(String(value), 10) || 0
|
|
|
|
// Reset strength to minimum when modifier changes
|
|
if (modifier > 0) {
|
|
const skill = getSkillData(modifier)
|
|
strength = skill?.minValue ?? 0
|
|
} else {
|
|
strength = 0
|
|
}
|
|
emitChange()
|
|
}
|
|
|
|
function handleStrengthChange(value: number | string | undefined) {
|
|
strength = typeof value === 'number' ? value : parseInt(String(value), 10) || 0
|
|
emitChange()
|
|
}
|
|
</script>
|
|
|
|
<MasteryRow
|
|
{modifierOptions}
|
|
{strengthOptions}
|
|
{modifier}
|
|
{strength}
|
|
onModifierChange={handleModifierChange}
|
|
onStrengthChange={handleStrengthChange}
|
|
modifierPlaceholder="Select earring"
|
|
/>
|