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