diff --git a/src/lib/components/artifact/ArtifactSkillDisplay.svelte b/src/lib/components/artifact/ArtifactSkillDisplay.svelte index 4c568812..57b79ecd 100644 --- a/src/lib/components/artifact/ArtifactSkillDisplay.svelte +++ b/src/lib/components/artifact/ArtifactSkillDisplay.svelte @@ -9,6 +9,7 @@ */ import { calculateSkillDisplayValue, + getSkillGroupForSlot, type ArtifactSkillInstance } from '$lib/types/api/artifact' import { createQuery } from '@tanstack/svelte-query' @@ -18,19 +19,24 @@ interface Props { skill: ArtifactSkillInstance + /** Skill slot number (1-4) for skill group lookup */ + skillSlot: number /** Element for max value highlighting */ element?: ElementType } - const { skill, element }: Props = $props() + const { skill, skillSlot, element }: Props = $props() // Query skills to get the full skill definition const skillsQuery = createQuery(() => artifactQueries.skills()) - // Find the skill definition - const skillDef = $derived( - skillsQuery.data?.find((s) => s.modifier === skill.modifier) - ) + // Find the skill definition (must match both modifier and skill group) + const skillDef = $derived.by(() => { + const group = getSkillGroupForSlot(skillSlot) + return skillsQuery.data?.find( + (s) => s.modifier === skill.modifier && s.skillGroup === group + ) + }) const suffix = $derived(skillDef?.suffix?.en ?? '') const isNegative = $derived(skillDef?.polarity === 'negative') diff --git a/src/lib/components/collection/CollectionArtifactDetailPane.svelte b/src/lib/components/collection/CollectionArtifactDetailPane.svelte index 90f80373..cbe6923b 100644 --- a/src/lib/components/collection/CollectionArtifactDetailPane.svelte +++ b/src/lib/components/collection/CollectionArtifactDetailPane.svelte @@ -9,7 +9,7 @@ */ import { onMount } from 'svelte' import type { CollectionArtifact, ArtifactSkillInstance } from '$lib/types/api/artifact' - import { isQuirkArtifact } from '$lib/types/api/artifact' + import { isQuirkArtifact, getSkillGroupForSlot } from '$lib/types/api/artifact' import { createQuery } from '@tanstack/svelte-query' import { artifactQueries } from '$lib/api/queries/artifact.queries' import { useDeleteCollectionArtifact } from '$lib/api/mutations/artifact.mutations' @@ -59,9 +59,12 @@ // Query skill definitions to get names const skillsQuery = createQuery(() => artifactQueries.skills()) - // Get skill name by modifier - function getSkillName(skill: ArtifactSkillInstance): string { - const skillDef = skillsQuery.data?.find((s) => s.modifier === skill.modifier) + // Get skill name by modifier and slot (different slots use different skill groups) + function getSkillName(skill: ArtifactSkillInstance, slot: number): string { + const group = getSkillGroupForSlot(slot) + const skillDef = skillsQuery.data?.find( + (s) => s.modifier === skill.modifier && s.skillGroup === group + ) return skillDef?.name?.en ?? 'Unknown Skill' } @@ -149,10 +152,11 @@ {#if hasSkills} - {#each skills as skill} + {#each skills as skill, index} + {@const skillSlot = index + 1} {#if skill} - - + + {/if} {/each}