zenno: categorize tools

2026-06-10 14:03:42 -04:00
parent dc78d51def
commit 75024c7c11
18 changed files with 119 additions and 42 deletions
@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { character, charaNames, type Character } from '$lib/data/character';
+	import { byChara, locations, groupPopulars, conversation, type Conversation } from '$lib/data/convo';
+	import CharaPick from '$lib/CharaPick.svelte';
+	import { onMount } from 'svelte';
+
+	let conversations: Conversation[] = $state([]);
+	const convoMap = $derived(byChara(conversations));
+	const popular = $derived(groupPopulars(conversations));
+	let characters: Character[] = $state([]);
+	const names = $derived(charaNames(characters ?? []));
+	const minSuggest = 8;
+
+	onMount(async () => {
+		const [convos, charas] = await Promise.all([conversation(), character()]);
+		conversations = convos;
+		characters = charas.filter((c) => convoMap.has(c.chara_id));
+	});
+
+	let charaID = $state(1001);
+	let convo = $state(1);
+
+	const options = $derived(convoMap.get(charaID) ?? []);
+	const cur = $derived(options.find((c) => c.number === convo));
+	const cur1Name = $derived(cur?.chara_1 && names.get(cur.chara_1)?.en);
+	const cur2Name = $derived(cur?.chara_2 && names.get(cur.chara_2)?.en);
+	const cur3Name = $derived(cur?.chara_3 && names.get(cur.chara_3)?.en);
+	const alone = $derived([cur?.chara_1, cur?.chara_2, cur?.chara_3].filter((x) => x != null).length == 1 ? ' alone' : '');
+	const suggested = $derived.by(async () => {
+		if (cur == null) {
+			return [];
+		}
+		const u = popular[locations[cur.location].group].filter(
+			(s) => names.get(s[0]) != null && s[0] !== cur.chara_1 && s[0] !== cur.chara_2 && s[0] !== cur.chara_3,
+		);
+		const r = u.length <= minSuggest ? u : u.filter((s) => s[1] >= u[minSuggest][1]);
+		return r.map(([chara_id, count]) => ({ chara_id, chara_name: names.get(chara_id), count }));
+	});
+	const curLoc = $derived(cur != null ? locations[cur.location] : null);
+</script>
+
+<h1 class="text-4xl">Lobby Conversations</h1>
+<div class="mx-auto mt-8 flex flex-col rounded-md text-center shadow-md ring md:max-w-xl md:flex-row">
+	<div class="m-4 flex-1 md:mt-3">
+		<label for="chara" class="hidden md:inline">Character</label>
+		<CharaPick id="chara" {characters} class="w-full" bind:value={charaID} required />
+	</div>
+	<div class="m-4 flex-1 md:mt-3">
+		<label for="convo" class="hidden md:inline">Conversation</label>
+		<select id="convo" bind:value={convo} class="w-full">
+			{#each options as opt (opt.number)}
+				<option value={opt.number}>Slice of Life {opt.number}</option>
+			{/each}
+		</select>
+	</div>
+</div>
+{#await suggested}
+	<div class="mt-4 w-full text-center text-3xl">Loading...</div>
+{:then suggested}
+	{#if cur}
+		<div class="shadow-sm transition-shadow hover:shadow-md">
+			<div class="mt-8 flex text-center text-lg">
+				<span class="flex-1">{cur1Name}{alone}</span>
+				{#if cur2Name}
+					<span class="flex-1">{cur2Name}</span>
+				{/if}
+				{#if cur3Name}
+					<span class="flex-1">{cur3Name}</span>
+				{/if}
+			</div>
+			<div class="flex w-full text-center text-lg">
+				<span class="flex-1">at {curLoc?.name.en}</span>
+			</div>
+		</div>
+		<div class="mt-4 block text-center">
+			<span>Other characters who appear here most often:</span>
+		</div>
+		<div class="mt-4 grid text-center shadow-sm transition-shadow ease-in hover:shadow-md hover:ease-out md:grid-cols-4">
+			{#each suggested as s (s.chara_id)}
+				<span>{s.chara_name?.en}: {s.count}&#xd7;</span>
+			{/each}
+		</div>
+		<div class="mt-4 block text-center">
+			<span>
+				Set these characters to fixed positions (main, upgrades, story, races) to maximize the chance of getting this
+				conversation.
+			</span>
+		</div>
+	{/if}
+{/await}