74 lines
2.8 KiB
Svelte
74 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { character, charaNames } from '$lib/data/character';
|
|
import { byChara, locations, groupPopulars } from '$lib/data/convo';
|
|
import CharaPick from '$lib/CharaPick.svelte';
|
|
|
|
const characters = character.global.filter((c) => byChara.global.has(c.chara_id));
|
|
const minSuggest = 8;
|
|
|
|
let charaID = $state(1001);
|
|
let convo = $state(1);
|
|
|
|
const options = $derived(byChara.global.get(charaID) ?? []);
|
|
const cur = $derived(options.find((c) => c.number === convo));
|
|
const cur1Name = $derived(cur?.chara_1 && charaNames.get(cur.chara_1)?.en);
|
|
const cur2Name = $derived(cur?.chara_2 && charaNames.get(cur.chara_2)?.en);
|
|
const cur3Name = $derived(cur?.chara_3 && charaNames.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(() => {
|
|
if (cur == null) {
|
|
return [];
|
|
}
|
|
const u = groupPopulars.global[locations[cur.location].group].filter(
|
|
(s) => charaNames.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, count }));
|
|
});
|
|
</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>
|
|
{#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 {locations[cur.location].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>{charaNames.get(s.chara_id)?.en}: {s.count}×</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}
|