zenno: link up doc/spark

zenno/src/lib/data/spark.ts

@@ -66,8 +66,8 @@ export const TYPE_NAMES: Readonly<Record<Type, string>> = {
 	[Type.CarnivalBonus]: 'Carnival Bonus (Scarlet)',
 	[Type.Distance]: 'Distance (White)',
 	[Type.Hidden]: 'Hidden (White)',
-	[Type.Surface] : 'Surface (White)',
+	[Type.Surface]: 'Surface (White)',
-	[Type.Style] : 'Style (White)',
+	[Type.Style]: 'Style (White)',
 };
 
 /**
@@ -129,7 +129,7 @@ export const TARGET_NAMES: Readonly<Record<Target, string>> = {
 	[Target.PowerCap]: 'Power cap',
 	[Target.GutsCap]: 'Guts cap',
 	[Target.WitCap]: 'Wit cap',
-}
+};
 
 /**
  * Effects that a spark can apply.

zenno/src/routes/+page.svelte

@@ -49,6 +49,9 @@
 			rel="noopener noreferrer">KuromiAK's race mechanics documentation</a
 		> for easier visualization of how mechanics scale.
 	</li>
+	<li>
+		<a href={resolve('/doc/spark')}>Spark Explorer</a> &mdash; View all possible inheritance effects of any spark.
+	</li>
 </ul>
 
 <h2 class="my-4 text-4xl">&amp;c.</h2>

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

@@ -22,4 +22,7 @@
 			rel="noopener noreferrer">KuromiAK's race mechanics documentation</a
 		> for easier visualization of how mechanics scale.
 	</li>
+	<li>
+		<a href={resolve('/doc/spark')}>Spark Explorer</a> &mdash; View all possible inheritance effects of any spark.
+	</li>
 </ul>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import * as skill from '$lib/data/skill';
-    import * as spark from '$lib/data/spark';
+	import * as spark from '$lib/data/spark';
 	import { onMount } from 'svelte';
 	import { SvelteMap } from 'svelte/reactivity';
 
@@ -14,10 +14,10 @@
 		}
 	});
 
-    let group = $state(1);
+	let group = $state(1);
 
 	const groups = $derived.by(() => {
-		const m = new Map<number, spark.Spark[]>();
+		const m = new SvelteMap<number, spark.Spark[]>();
 		for (const s of sparks) {
 			const l = m.get(s.spark_group) ?? [];
 			l.push(s);
@@ -38,7 +38,7 @@
 </script>
 
 <h1 class="text-4xl">Spark Explorer</h1>
-<form class="mx-auto mt-8 p-4 rounded-md text-center shadow-md ring md:max-w-2xl">
+<form class="mx-auto mt-8 rounded-md p-4 text-center shadow-md ring md:max-w-2xl">
 	<select class="w-full" bind:value={group}>
 		{#each groups as [id, s] (id)}
 			<option value={id}>{s[0].name}</option>
@@ -46,11 +46,13 @@
 	</select>
 </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">
+	<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"
+	>
 		<span class="block text-xl">{cur?.name}</span>
 		<span class="block">{cur?.description}</span>
 	</div>
-	<table class="mx-auto w-full max-w-xl mt-8 table-fixed">
+	<table class="mx-auto mt-8 w-full max-w-xl table-fixed">
 		<caption class="text-xl">Possible Effects</caption>
 		<tbody>
 			{#each curDescriptions as s (s)}
@@ -68,4 +70,4 @@
 	{#snippet pending()}
 		<div>Loading data...</div>
 	{/snippet}
-</svelte:boundary>
+</svelte:boundary>