zephyr/horse
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

zenno: nicer lobby conversation page

Browse Source
This commit is contained in:
Branden J Brown
2026-03-31 01:04:27 -04:00
parent 86b769d7ed
commit 08deedea8f
2 changed files with 61 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
zenno/src/routes/convo/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { charaNames } from "$lib/data/character";
import { byChara, locations } from "$lib/data/convo";
import { byChara, locations, groupPopulars } from "$lib/data/convo";
import CharaPick from "$lib/CharaPick.svelte";
let charaID = $state(1001)
@@ -8,17 +8,28 @@
let options = $derived(byChara.global.get(charaID) ?? [])
let cur = $derived(options.find((c) => c.number === convo))
function suggest(n: number, pops: typeof groupPopulars['global']) {
if (cur == null) {
return []
}
const u = pops[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)
if (u.length <= n) {
return u
}
return u.filter((s) => s[1] >= u[n][1])
}
</script>
<h1>Lobby Conversations</h1>
<p>Find which horses are in a given lobby conversation, and get recommendations on which ones to assign to fixed locations to maximize the chance of getting it.</p>
<hr>
<div class="flex text-center mt-8">
<div class="flex-1">
<CharaPick id="chara" bind:value={charaID} required />
<CharaPick id="chara" label="Character" bind:value={charaID} required />
</div>
<div class="flex-1">
<select id="convo" bind:value={convo}>
<label for="convo">Conversation</label>
<select id="convo" bind:value={convo} class="w-full">
{#each options as opt}
<option value={opt.number}>Slice of Life {opt.number}</option>
{/each}
@@ -26,16 +37,33 @@
</div>
</div>
{#if cur}
<div class="flex mt-8 text-center">
<span class="flex-1">{charaNames.get(cur.chara_1)?.en}</span>
{#if cur.chara_2}
<span class="flex-1">{charaNames.get(cur.chara_2)?.en}</span>
{/if}
{#if cur.chara_3}
<span class="flex-1">{charaNames.get(cur.chara_3)?.en}</span>
{/if}
<div class="transition-shadow shadow-sm hover:shadow-md">
<div class="flex mt-8 text-center">
<span class="flex-1">{charaNames.get(cur.chara_1)?.en ?? 'someone not a trainee'}</span>
{#if cur.chara_2}
<span class="flex-1">{charaNames.get(cur.chara_2)?.en ?? 'someone not a trainee'}</span>
{/if}
{#if cur.chara_3}
<span class="flex-1">{charaNames.get(cur.chara_3)?.en ?? 'someone not a trainee'}</span>
{/if}
</div>
<div class="flex mt-4 w-full text-center">
<span class="flex-1">at {locations[cur.location].name.en}</span>
</div>
</div>
<div class="flex mt-4 w-full text-center">
<span class="flex-1">{locations[cur.location].name.en}</span>
<div class="block mt-4 text-center">
<span>Characters who appear here most often:</span>
</div>
<div class="grid md:grid-cols-4 mt-4 text-center transition-shadow ease-in hover:ease-out shadow-sm hover:shadow-md">
{#each suggest(8, groupPopulars.global) as s}
<span>{charaNames.get(s[0])?.en}: {s[1]}&#xd7;</span>
{/each}
</div>
<div class="block mt-4 text-center">
<span>
Set characters that appear more often to fixed positions
(main, upgrades, story, races)
to maximize the chance of getting this conversation.
</span>
</div>
{/if}