zenno/doc/spark: spark explorer

2026-07-07 15:51:28 -04:00
parent 5cbb6d7b1d
commit 0c518a9ce2
2 changed files with 171 additions and 6 deletions
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import * as skill from '$lib/data/skill';
+    import * as spark from '$lib/data/spark';
+	import { onMount } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+
+	let sparks: spark.Spark[] = $state([]);
+	let skills: SvelteMap<number, skill.Skill> = new SvelteMap();
+	onMount(async () => {
+		const [sp, sk] = await Promise.all([spark.sparks(), skill.skills()]);
+		sparks = sp;
+		for (const s of sk) {
+			skills.set(s.skill_id, s);
+		}
+	});
+
+    let group = $state(1);
+
+	const groups = $derived.by(() => {
+		const m = new Map<number, spark.Spark[]>();
+		for (const s of sparks) {
+			const l = m.get(s.spark_group) ?? [];
+			l.push(s);
+			m.set(s.spark_group, l);
+		}
+		return [...m.entries()];
+	});
+	function describe(eff: spark.Effect) {
+		if (eff.target === spark.Target.Skill) {
+			const sk = skills.get(eff.value1);
+			return `${sk?.name} ${spark.TARGET_NAMES[eff.target]} +${eff.value2}`;
+		}
+		return `${spark.TARGET_NAMES[eff.target]} +${eff.value1}`;
+	}
+	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))));
+</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">
+	<select class="w-full" bind:value={group}>
+		{#each groups as [id, s] (id)}
+			<option value={id}>{s[0].name}</option>
+		{/each}
+	</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">
+		<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">
+		<caption class="text-xl">Possible Effects</caption>
+		<tbody>
+			{#each curDescriptions as s (s)}
+				<tr class="text-center even:bg-mist-300 dark:even:bg-mist-900">
+					<td>
+						{#each s as n (n)}
+							<span class="block">{n}</span>
+						{/each}
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+
+	{#snippet pending()}
+		<div>Loading data...</div>
+	{/snippet}
+</svelte:boundary>