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

Create element and proficiency label components

Browse source
This commit is contained in:
Justin Edmund 2025-09-17 06:42:45 -07:00
parent 2cf3c2067e
commit d262eba8b2
2 changed files with 120 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/lib/components/labels/ElementLabel.svelte Normal file
View file

@ -0,0 +1,56 @@
<svelte:options runes={true} />
<script lang="ts">
import { getElementLabel, getElementIcon } from '$lib/utils/element'
interface Props {
element?: number
size?: 'small' | 'medium' | 'large' | 'xlarge' | 'natural'
}
let { element, size = 'natural' }: Props = $props()
const label = $derived(getElementLabel(element))
const imagePath = $derived(getElementIcon(element))
</script>
{#if imagePath}
<img src={imagePath} alt={label} aria-label={`${label} element`} class="element-label {size}" />
{/if}
<style lang="scss">
@use '$src/themes/spacing' as spacing;
.element-label {
display: inline-block;
vertical-align: middle;
object-fit: contain;
&.natural {
// Display at natural size (34px height)
height: 34px;
width: auto;
}
&.small {
height: 20px;
width: auto;
}
&.medium {
height: 25px;
width: auto;
}
&.large {
// Natural size
height: 34px;
width: auto;
}
&.xlarge {
height: 51px;
width: auto;
}
}
</style>

64
src/lib/components/labels/ProficiencyLabel.svelte Normal file
View file

@ -0,0 +1,64 @@
<svelte:options runes={true} />
<script lang="ts">
import { getProficiencyLabel, getProficiencyIcon } from '$lib/utils/proficiency'
interface Props {
proficiency?: number
size?: 'small' | 'medium' | 'large' | 'xlarge' | 'natural'
}
let { proficiency, size = 'natural' }: Props = $props()
const label = $derived(getProficiencyLabel(proficiency ?? 0))
const imagePath = $derived(getProficiencyIcon(proficiency ?? 0))
</script>
{#if imagePath}
<img
src={imagePath}
alt={label}
aria-label={`${label} proficiency`}
class="proficiency-label {size}"
/>
{/if}
<style lang="scss">
@use '$src/themes/spacing' as spacing;
.proficiency-label {
display: inline-block;
vertical-align: middle;
object-fit: contain;
&.natural {
// Display at natural size (34px height)
height: 34px;
width: auto;
}
&.small {
// Half of natural size
height: 17px;
width: auto;
}
&.medium {
// ~75% of natural size
height: 25px;
width: auto;
}
&.large {
// Natural size
height: 34px;
width: auto;
}
&.xlarge {
// 1.5x natural size
height: 51px;
width: auto;
}
}
</style>