zenno/lib: spark component

zenno/src/lib/Spark.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { sparks } from '$lib/data/spark';
+
+	interface Props {
+		spark: number;
+		region?: keyof typeof sparks;
+	}
+
+	const { spark, region = 'global' }: Props = $props();
+
+	const cur = $derived(sparks[region].find((s) => s.spark_id === spark));
+	const curClass = $derived.by(() => {
+		if (cur == null) {
+			return [];
+		}
+		switch (cur.type) {
+			case 1:
+				return ['stat'];
+			case 2:
+				return ['aptitude'];
+			case 3:
+				return ['unique'];
+			case 5:
+			case 4:
+			case 6:
+			case 10:
+			case 8:
+			case 11:
+			case 9:
+				return ['white-spark'];
+			default:
+				return [];
+		}
+	});
+	const stars = $derived('★'.repeat(cur?.rarity ?? 0));
+</script>
+
+{#if cur != null}
+	<div
+		class={[
+			curClass,
+			'spark mx-1 flex items-center rounded-xl px-2 py-1 transition ease-in hover:shadow-md hover:ease-out motion-safe:duration-75 motion-safe:hover:-translate-y-0.5 dark:shadow-neutral-950',
+		]}
+	>
+		<span>{cur.name}</span>
+		<span class="ml-2 text-xl text-amber-800 text-shadow-md dark:text-amber-300">{stars}</span>
+	</div>
+{/if}
+
+<style>
+	.white-spark {
+		--spark-color: light-dark(var(--color-mist-300), var(--color-mist-600));
+	}
+
+	.stat {
+		--spark-color: light-dark(var(--color-sky-300), var(--color-sky-600));
+	}
+
+	.aptitude {
+		--spark-color: light-dark(var(--color-rose-300), var(--color-rose-700));
+	}
+
+	.unique {
+		--spark-color: light-dark(var(--color-lime-400), var(--color-lime-700));
+	}
+
+	.spark {
+		background-color: var(--spark-color);
+	}
+</style>