71 lines
1.5 KiB
Svelte
71 lines
1.5 KiB
Svelte
<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>
|