horse/zenno/src/routes/chara/convo/+page.svelte

<script lang="ts">
	import { character, charaNames, type Character } from '$lib/data/character';
	import {
		byChara,
		locations,
		groupPopulars,
		conversation,
		type Conversation,
		requiredCharas,
		convoCharas,
	} from '$lib/data/convo';
	import * as talk from '$lib/umadump/talk';
	import CharaPick from '$lib/CharaPick.svelte';
	import { onMount } from 'svelte';
	import CharaIcon from '$lib/CharaIcon.svelte';
	import { SvelteSet } from 'svelte/reactivity';

	let allConvos: Conversation[] = $state([]);
	const popular = $derived(groupPopulars(allConvos));
	let characters: Character[] = $state([]);
	const names = $derived(charaNames(characters));
	const minSuggest = 8;

	onMount(async () => {
		[allConvos, characters] = await Promise.all([conversation(), character()]);
	});

	let chara: Character | undefined = $state();
	let convo = $state(1);

	let talkFiles: FileList | undefined = $state();
	let readIDs = new SvelteSet<number>();
	let talkFileInvalid = $state(false);
	async function setRead(f: FileList) {
		talkFiles = f;
		readIDs.clear();
		talkFileInvalid = false;
		if (talkFiles == null || talkFiles.length === 0) {
			return;
		}
		const t = await talkFiles[0].text();
		const d = JSON.parse(t);
		const g = talk.Gallery.safeDecode(d);
		if (!g.success) {
			talkFileInvalid = true;
			console.warn(g.error);
			return;
		}
		for (const e of g.data.talk_gallery_list) {
			readIDs.add(e.home_story_trigger_id);
		}
	}
	const conversations = $derived(allConvos.filter((c) => !readIDs.has(c.id)));
	const convoMap = $derived(byChara(conversations));
	const selCharas = $derived(characters.filter((c) => convoMap.has(c.chara_id)));

	const options = $derived(convoMap.get(chara?.chara_id ?? 0) ?? []);
	const cur = $derived(options.find((c) => c.number === convo));
	const charaIDs = $derived(cur != null ? convoCharas(cur) : []);
	const charas = $derived(charaIDs.map((id) => names.get(id)!));
	const suggested = $derived.by(() => {
		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);
	const req = $derived(cur != null ? requiredCharas(cur) : []);
</script>

<h1 class="text-4xl">Lobby Conversations</h1>
<div class="mx-auto mt-8 grid grid-cols-1 gap-4 rounded-md p-4 text-center shadow-md ring md:max-w-xl md:grid-cols-6">
	<div class="md:col-span-3">
		<label for="chara" class="hidden md:inline">Character</label>
		<CharaPick id="chara" characters={selCharas} class="w-full" bind:value={chara} required />
	</div>
	<div class="md:col-span-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 class="col-span-full">
		<label for="talkgallery" class="block">
			Select
			<a href="https://werseter.github.io/umadump/" target="_blank" rel="noopener noreferrer">
				<span class="inline-block font-mono">talk_gallery_data.json</span>
			</a>
			to hide read conversations.
		</label>
		<input
			type="file"
			class="rounded-full p-4"
			accept="application/json"
			id="talkgallery"
			bind:files={() => talkFiles ?? new DataTransfer().files, setRead}
		/>
		<button
			class="ml-4 rounded-full bg-mist-300 p-2 hover:cursor-pointer dark:bg-mist-900"
			onclick={() => setRead(new DataTransfer().files)}>Reset</button
		>
	</div>
	{#if talkFileInvalid}
		<div class="col-span-full">Invalid File</div>
	{/if}
</div>
{#if cur}
	<div class="shadow-sm transition-shadow hover:shadow-md">
		<div class="mt-8 flex flex-col text-center text-lg md:flex-row">
			{#each charaIDs as id, i (id)}
				<span class={{ 'flex-1': true, 'font-bold italic': req.includes(id) }}>
					<CharaIcon chara_id={id} size={64} />
					{charas[i].en}
				</span>
			{/each}
		</div>
		<div class="block w-full text-center text-lg">
			at the {curLoc?.name.en}
		</div>
		{#if req.length > 0}
			<span class="mx-auto mt-4 block text-center text-sm">
				The conversation will not appear unless you own a trainee or support card of all characters with names in
				<span class="font-bold italic">bold italics</span>.
			</span>
		{/if}
	</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>
			Setting these characters to fixed positions (main, upgrades, story, races) may maximize the chance of getting this
			conversation.
		</span>
	</div>
{/if}