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

remove polarity indicator from skill list

Browse source
This commit is contained in:
Justin Edmund 2025-12-03 17:14:01 -08:00
parent a29cdbb454
commit 9bdcc7818b
1 changed files with 19 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -16,16 +16,11 @@
const { slot, selectedModifier, onSelect }: Props = $props() const { slot, selectedModifier, onSelect }: Props = $props()
// Query skills for this slot // Query skills for this slot (filtered by group on the server)
const skillsQuery = createQuery(() => artifactQueries.skillsForSlot(slot)) const skillsQuery = createQuery(() => artifactQueries.skillsForSlot(slot))
// Separate positive and negative skills // All skills for this slot
const positiveSkills = $derived( const skills = $derived(skillsQuery.data ?? [])
skillsQuery.data?.filter((s) => s.polarity === 'positive') ?? []
)
const negativeSkills = $derived(
skillsQuery.data?.filter((s) => s.polarity === 'negative') ?? []
)
</script> </script>
<div class="modifier-list"> <div class="modifier-list">
@ -33,44 +28,21 @@
<div class="loading-state">Loading skills...</div> <div class="loading-state">Loading skills...</div>
{:else if skillsQuery.isError} {:else if skillsQuery.isError}
<div class="error-state">Failed to load skills</div> <div class="error-state">Failed to load skills</div>
{:else if skills.length === 0}
<div class="empty-state">No skills available</div>
{:else} {:else}
{#if positiveSkills.length > 0} <div class="skill-options">
<div class="skill-group"> {#each skills as skill (skill.id)}
<h4 class="group-header positive">Positive Effects</h4> <button
<div class="skill-options"> type="button"
{#each positiveSkills as skill (skill.id)} class="modifier-option"
<button class:selected={selectedModifier === skill.modifier}
type="button" onclick={() => onSelect(skill)}
class="modifier-option" >
class:selected={selectedModifier === skill.modifier} <span class="name">{skill.name.en}</span>
onclick={() => onSelect(skill)} </button>
> {/each}
<span class="name">{skill.name.en}</span> </div>
<span class="polarity positive">+</span>
</button>
{/each}
</div>
</div>
{/if}
{#if negativeSkills.length > 0}
<div class="skill-group">
<h4 class="group-header negative">Negative Effects</h4>
<div class="skill-options">
{#each negativeSkills as skill (skill.id)}
<button
type="button"
class="modifier-option"
class:selected={selectedModifier === skill.modifier}
onclick={() => onSelect(skill)}
>
<span class="name">{skill.name.en}</span>
<span class="polarity negative">−</span>
</button>
{/each}
</div>
</div>
{/if}
{/if} {/if}
</div> </div>
@ -89,35 +61,13 @@
} }
.loading-state, .loading-state,
.error-state { .error-state,
.empty-state {
padding: spacing.$unit-4x; padding: spacing.$unit-4x;
text-align: center; text-align: center;
color: colors.$grey-50; color: colors.$grey-50;
} }
.skill-group {
display: flex;
flex-direction: column;
gap: spacing.$unit;
}
.group-header {
font-size: typography.$font-small;
font-weight: typography.$medium;
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
padding: 0 spacing.$unit-half;
&.positive {
color: colors.$wind-text-20;
}
&.negative {
color: colors.$error;
}
}
.skill-options { .skill-options {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -157,22 +107,5 @@
font-weight: typography.$normal; font-weight: typography.$normal;
color: colors.$grey-20; color: colors.$grey-20;
} }
.polarity {
font-size: typography.$font-small;
font-weight: typography.$bold;
padding: 2px 6px;
border-radius: 4px;
&.positive {
background: colors.$wind-bg-20;
color: colors.$wind-text-20;
}
&.negative {
background: colors.$error--bg--light;
color: colors.$error;
}
}
} }
</style> </style>