zenno/doc/tagged-skills: new page

2026-07-19 22:29:15 -04:00
parent 70ad09a13e
commit ffb700545f
4 changed files with 164 additions and 0 deletions
@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import * as skill from '$lib/data/skill';
+
+	let rare = $state(false);
+	let unique = $state(false);
+
+	let allSkillsList: skill.Skill[] = $state([]);
+	onMount(async () => {
+		allSkillsList = await skill.skills();
+	});
+
+	const tagTypes = $state([
+		{
+			name: 'Running Style',
+			includes: skill.TAGS.filter((t) => 101 <= t.tag && t.tag <= 199).map((t) => ({ ...t, on: false })),
+		},
+		{
+			name: 'Distance',
+			includes: skill.TAGS.filter((t) => 201 <= t.tag && t.tag <= 299).map((t) => ({ ...t, on: false })),
+		},
+		{
+			name: 'Surface',
+			includes: skill.TAGS.filter((t) => 501 <= t.tag && t.tag <= 599).map((t) => ({ ...t, on: false })),
+		},
+		{
+			name: 'Timing',
+			includes: skill.TAGS.filter((t) => 301 <= t.tag && t.tag <= 399).map((t) => ({ ...t, on: false })),
+		},
+		{
+			name: 'Effects',
+			includes: skill.TAGS.filter((t) => 401 <= t.tag && t.tag <= 499).map((t) => ({ ...t, on: false })),
+		},
+		{
+			name: 'Passive Types',
+			includes: skill.TAGS.filter((t) => 601 <= t.tag && t.tag <= 699).map((t) => ({ ...t, on: false })),
+		},
+		{
+			name: 'Scenario Skills',
+			includes: skill.TAGS.filter((t) => 801 <= t.tag && t.tag <= 899).map((t) => ({ ...t, on: false })),
+		},
+	]);
+	const tags = $derived(tagTypes.flatMap((v) => v.includes.filter((t) => t.on).map((t) => t.tag)));
+	const skills = $derived(
+		allSkillsList.filter(
+			(s) =>
+				(rare || s.group_rate === 1) &&
+				(unique || (s.rarity < 3 && s.unique_owner == null)) &&
+				tags.some((t) => s.tags.includes(t)),
+		),
+	);
+</script>
+
+<h1 class="text-4xl">Tagged Skills Explorer</h1>
+<form class="mx-auto my-8 rounded-md p-4 text-center shadow-md ring md:max-w-4xl">
+	<div class="flex w-full gap-4">
+		<div class="my-auto inline-block flex-1">
+			<input id="rare" type="checkbox" role="switch" class="min-h-6 min-w-6 align-middle" bind:checked={rare} />
+			<label for="rare">Include All Levels and Rarities</label>
+		</div>
+		<div class="my-auto inline-block flex-1">
+			<input id="unique" type="checkbox" role="switch" class="min-h-6 min-w-6 align-middle" bind:checked={unique} />
+			<label for="unique">Include Uniques</label>
+		</div>
+	</div>
+	{#each tagTypes as { name, includes } (name)}
+		<div class="mt-1 flex flex-row">
+			<span class="my-auto h-0 flex-1 border"></span>
+			<span class="m-2 flex-none text-sm italic">{name}</span>
+			<span class="my-auto h-0 flex-1 border"></span>
+		</div>
+		<div class="flex w-full flex-wrap place-content-center-safe gap-6 md:grid-cols-4">
+			{#each includes as t (t.tag)}
+				<div class="inline-block">
+					<input id={t.name} type="checkbox" class="min-h-6 min-w-6 align-middle" bind:checked={t.on} />
+					<label for={t.name} class="align-middle">{t.name}</label>
+				</div>
+			{/each}
+		</div>
+	{/each}
+</form>
+
+<span class="mb-4 block text-center text-2xl">{skills.length} skills selected</span>
+<div class="grid max-w-7xl grid-cols-1 gap-2 md:grid-cols-3">
+	{#each skills as s (s.skill_id)}
+		<div class="rounded-md border px-2 pt-1 pb-2 text-center shadow-sm transition-shadow hover:shadow-md">
+			<span class="block text-xl">{s.name}</span>
+			<span class="block italic">{s.description}</span>
+		</div>
+	{/each}
+</div>
+
+<div class="mx-auto mt-12 w-full max-w-4xl border-t pt-4 md:mt-8">
+	<ul class="ml-4 list-disc">
+		<li>
+			To see skills that can be received from MANT/Trackblazer rivals, select the running style used and the distance and surface
+			of the race.
+		</li>
+		<li>Skills for each tag are auto-generated from the game's local database.</li>
+		<li>Tag names are inferred from the skills that have them.</li>
+	</ul>
+</div>