55 lines
968 B
Svelte
55 lines
968 B
Svelte
<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;
|
|
|
|
&.small {
|
|
height: 20px;
|
|
width: auto;
|
|
}
|
|
|
|
&.medium {
|
|
height: 25px;
|
|
width: auto;
|
|
}
|
|
|
|
&.large {
|
|
// Natural size
|
|
height: 34px;
|
|
width: auto;
|
|
}
|
|
|
|
&.xlarge {
|
|
height: 51px;
|
|
width: auto;
|
|
}
|
|
}
|
|
</style>
|