simplify skill display to value-only, highlight max rolls in element color
This commit is contained in:
parent
f55303039c
commit
91b2a61ac9
1 changed files with 61 additions and 62 deletions
|
|
@ -2,18 +2,27 @@
|
|||
|
||||
<script lang="ts">
|
||||
/**
|
||||
* ArtifactSkillDisplay - Read-only display of an artifact skill
|
||||
* ArtifactSkillDisplay - Read-only display of an artifact skill value
|
||||
*
|
||||
* Displays the calculated skill value with polarity sign.
|
||||
* Highlights in element color when the base value is the maximum possible.
|
||||
*/
|
||||
import type { ArtifactSkillInstance } from '$lib/types/api/artifact'
|
||||
import {
|
||||
calculateSkillDisplayValue,
|
||||
type ArtifactSkillInstance
|
||||
} from '$lib/types/api/artifact'
|
||||
import { createQuery } from '@tanstack/svelte-query'
|
||||
import { artifactQueries } from '$lib/api/queries/artifact.queries'
|
||||
|
||||
type ElementType = 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
|
||||
|
||||
interface Props {
|
||||
slot: number
|
||||
skill: ArtifactSkillInstance
|
||||
/** Element for max value highlighting */
|
||||
element?: ElementType
|
||||
}
|
||||
|
||||
const { slot, skill }: Props = $props()
|
||||
const { skill, element }: Props = $props()
|
||||
|
||||
// Query skills to get the full skill definition
|
||||
const skillsQuery = createQuery(() => artifactQueries.skills())
|
||||
|
|
@ -23,76 +32,66 @@
|
|||
skillsQuery.data?.find((s) => s.modifier === skill.modifier)
|
||||
)
|
||||
|
||||
const modifierName = $derived(skillDef?.name?.en ?? `Skill ${slot}`)
|
||||
const suffix = $derived(skillDef?.suffix?.en ?? '')
|
||||
const isNegative = $derived(skillDef?.polarity === 'negative')
|
||||
|
||||
// Calculate displayed strength based on level (matches in-game display)
|
||||
const displayedStrength = $derived(
|
||||
calculateSkillDisplayValue(skill.strength, skillDef?.growth, skill.level)
|
||||
)
|
||||
|
||||
// Check if this skill has the maximum base value
|
||||
const isMaxBaseValue = $derived.by(() => {
|
||||
if (!skillDef?.baseValues) return false
|
||||
// Filter out null/0 values and get the highest
|
||||
const validValues = skillDef.baseValues.filter((v): v is number => v !== null && v !== 0)
|
||||
if (validValues.length === 0) return false
|
||||
const maxValue = Math.max(...validValues)
|
||||
return skill.strength === maxValue
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="skill-display">
|
||||
<div class="skill-header">
|
||||
<span class="slot">Skill {slot}</span>
|
||||
<span class="level">Lv.{skill.level}</span>
|
||||
</div>
|
||||
<div class="skill-info">
|
||||
<span class="modifier-name">{modifierName}</span>
|
||||
<span class="strength" class:negative={isNegative}>
|
||||
{isNegative ? '−' : '+'}{skill.strength}{suffix}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
class="skill-value"
|
||||
class:negative={isNegative}
|
||||
class:max-value={isMaxBaseValue}
|
||||
class:element-wind={isMaxBaseValue && element === 'wind'}
|
||||
class:element-fire={isMaxBaseValue && element === 'fire'}
|
||||
class:element-water={isMaxBaseValue && element === 'water'}
|
||||
class:element-earth={isMaxBaseValue && element === 'earth'}
|
||||
class:element-dark={isMaxBaseValue && element === 'dark'}
|
||||
class:element-light={isMaxBaseValue && element === 'light'}
|
||||
>
|
||||
{isNegative ? '−' : '+'}{displayedStrength}{suffix}
|
||||
</span>
|
||||
|
||||
<style lang="scss">
|
||||
@use '$src/themes/spacing' as *;
|
||||
@use '$src/themes/typography' as *;
|
||||
@use '$src/themes/layout' as *;
|
||||
@use '$src/themes/colors' as *;
|
||||
|
||||
.skill-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $unit-fourth;
|
||||
padding: $unit;
|
||||
background: var(--input-bg);
|
||||
border-radius: $item-corner;
|
||||
}
|
||||
|
||||
.skill-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.slot {
|
||||
font-size: $font-tiny;
|
||||
color: var(--text-tertiary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.level {
|
||||
font-size: $font-tiny;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.skill-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modifier-name {
|
||||
font-size: $font-small;
|
||||
font-weight: $medium;
|
||||
.skill-value {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.strength {
|
||||
font-size: $font-small;
|
||||
font-weight: $bold;
|
||||
color: $wind-text-20;
|
||||
|
||||
&.negative {
|
||||
color: $error;
|
||||
}
|
||||
|
||||
&.element-wind {
|
||||
color: $wind-text-30;
|
||||
}
|
||||
&.element-fire {
|
||||
color: $fire-text-30;
|
||||
}
|
||||
&.element-water {
|
||||
color: $water-text-30;
|
||||
}
|
||||
&.element-earth {
|
||||
color: $earth-text-30;
|
||||
}
|
||||
&.element-dark {
|
||||
color: $dark-text-30;
|
||||
}
|
||||
&.element-light {
|
||||
color: $light-text-30;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue