zenno/doc/spark: decribe & clarify

zenno/src/routes/doc/spark/+page.svelte

@@ -35,6 +35,29 @@
 	const cur = $derived(sparks.find((s) => s.spark_group === group));
 	const curEffectGroups = $derived(cur?.effects ?? []);
 	const curDescriptions = $derived(curEffectGroups.map((g) => g.map((e) => describe(e))));
+	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 [];
+		}
+	});
 </script>
 
 <h1 class="text-4xl">Spark Explorer</h1>
@@ -47,9 +70,17 @@
 </form>
 <svelte:boundary>
 	<div
-		class="mx-auto mt-8 max-w-md flex-1 flex-col rounded-md border p-2 text-center shadow-sm transition-shadow hover:shadow-md"
+		class={[
+			'spark mx-auto mt-8 max-w-md flex-1 flex-col rounded-md border p-2 text-center shadow-sm transition-shadow hover:shadow-md',
+			curClass,
+		]}
 	>
 		<span class="block text-xl">{cur?.name}</span>
+		{#if cur != null}
+			<span class="block">
+				{spark.TYPE_NAMES[cur.type]} Spark
+			</span>
+		{/if}
 		<span class="block">{cur?.description}</span>
 	</div>
 	<table class="mx-auto mt-8 w-full max-w-xl table-fixed">
@@ -71,3 +102,31 @@
 		<div>Loading data...</div>
 	{/snippet}
 </svelte:boundary>
+<div class="mx-auto mt-12 w-full max-w-4xl border-t pt-4 md:mt-8">
+	<p>
+		When a spark activates during inspiration, it has an additional random roll for one of the effects listed in the table here.
+		All star levels of each spark have the same possible effects. Higher star levels are more likely to give better rewards.
+	</p>
+</div>
+
+<style>
+	.white-spark {
+		--spark-color: light-dark(var(--color-mist-200), var(--color-mist-800));
+	}
+
+	.stat {
+		--spark-color: light-dark(var(--color-sky-200), var(--color-sky-800));
+	}
+
+	.aptitude {
+		--spark-color: light-dark(var(--color-rose-300), var(--color-rose-800));
+	}
+
+	.unique {
+		--spark-color: light-dark(var(--color-lime-400), var(--color-lime-800));
+	}
+
+	.spark {
+		background-color: var(--spark-color);
+	}
+</style>