simplify skill display to value-only, highlight max rolls in element color

src/lib/components/artifact/ArtifactSkillDisplay.svelte

@@ -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">
+<span
-	<div class="skill-header">
+	class="skill-value"
-		<span class="slot">Skill {slot}</span>
+	class:negative={isNegative}
-		<span class="level">Lv.{skill.level}</span>
+	class:max-value={isMaxBaseValue}
-	</div>
+	class:element-wind={isMaxBaseValue && element === 'wind'}
-	<div class="skill-info">
+	class:element-fire={isMaxBaseValue && element === 'fire'}
-		<span class="modifier-name">{modifierName}</span>
+	class:element-water={isMaxBaseValue && element === 'water'}
-		<span class="strength" class:negative={isNegative}>
+	class:element-earth={isMaxBaseValue && element === 'earth'}
-			{isNegative ? '−' : '+'}{skill.strength}{suffix}
+	class:element-dark={isMaxBaseValue && element === 'dark'}
-		</span>
+	class:element-light={isMaxBaseValue && element === 'light'}
-	</div>
+>
-</div>
+	{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 {
+	.skill-value {
-		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;
 		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>