From d262eba8b223634db0c7d8ed9c08a424fda4ade6 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 17 Sep 2025 06:42:45 -0700
Subject: [PATCH] Create element and proficiency label components

---
 src/lib/components/labels/ElementLabel.svelte | 56 ++++++++++++++++
 .../components/labels/ProficiencyLabel.svelte | 64 +++++++++++++++++++
 2 files changed, 120 insertions(+)
 create mode 100644 src/lib/components/labels/ElementLabel.svelte
 create mode 100644 src/lib/components/labels/ProficiencyLabel.svelte

diff --git a/src/lib/components/labels/ElementLabel.svelte b/src/lib/components/labels/ElementLabel.svelte
new file mode 100644
index 00000000..2c4ab9c3
--- /dev/null
+++ b/src/lib/components/labels/ElementLabel.svelte
@@ -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>
diff --git a/src/lib/components/labels/ProficiencyLabel.svelte b/src/lib/components/labels/ProficiencyLabel.svelte
new file mode 100644
index 00000000..5593e292
--- /dev/null
+++ b/src/lib/components/labels/ProficiencyLabel.svelte
@@ -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>
\ No newline at end of file