granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add element-based styling to modifier selection

Browse source
This commit is contained in:
Justin Edmund 2025-12-03 20:51:52 -08:00
parent dc4c2c3117
commit 5bac8a0b53
1 changed files with 43 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
src/lib/components/artifact/ArtifactModifierList.svelte
View file

@ -5,16 +5,20 @@
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 (1-4) to get skills for */
slot: number
/** Currently selected modifier (for highlighting) */
selectedModifier?: number
/** Element for styling the selected state */
element?: ElementType
/** Handler when a modifier is selected */
onSelect: (skill: ArtifactSkill) => void
}
const { slot, selectedModifier, onSelect }: Props = $props()
const { slot, selectedModifier, element, onSelect }: Props = $props()
// Query skills for this slot (filtered by group on the server)
const skillsQuery = createQuery(() => artifactQueries.skillsForSlot(slot))
@ -37,6 +41,12 @@
type="button"
class="modifier-option"
class:selected={selectedModifier === skill.modifier}
class:element-wind={element === 'wind'}
class:element-fire={element === 'fire'}
class:element-water={element === 'water'}
class:element-earth={element === 'earth'}
class:element-dark={element === 'dark'}
class:element-light={element === 'light'}
onclick={() => onSelect(skill)}
>
<span class="name">{skill.name.en}</span>
@ -81,13 +91,11 @@
width: 100%;
padding: spacing.$unit;
background: transparent;
border: 1px solid transparent;
border: none;
border-radius: layout.$item-corner;
cursor: pointer;
text-align: left;
transition:
background-color effects.$duration-quick ease,
border-color effects.$duration-quick ease;
transition: background-color effects.$duration-quick ease;
&:hover {
background: colors.$grey-90;
@ -98,8 +106,36 @@
}
&.selected {
background: colors.$water-bg-20;
border-color: colors.$blue;
background: colors.$grey-85;
.name {
color: colors.$grey-20;
}
&.element-wind {
background: colors.$wind-bg-20;
.name { color: colors.$wind-text-20; }
}
&.element-fire {
background: colors.$fire-bg-20;
.name { color: colors.$fire-text-20; }
}
&.element-water {
background: colors.$water-bg-20;
.name { color: colors.$water-text-20; }
}
&.element-earth {
background: colors.$earth-bg-20;
.name { color: colors.$earth-text-20; }
}
&.element-dark {
background: colors.$dark-bg-20;
.name { color: colors.$dark-text-20; }
}
&.element-light {
background: colors.$light-bg-20;
.name { color: colors.$light-text-20; }
}
}
.name {