zenno: lobby conversation page

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

@@ -1,11 +1,41 @@
 <script lang="ts">
+    import { charaNames } from "$lib/data/character";
+    import { byChara, locations } from "$lib/data/convo";
     import CharaPick from "$lib/CharaPick.svelte";
 
     let charaID = $state(1001)
     let convo = $state(1)
+
+    let options = $derived(byChara.global.get(charaID) ?? [])
+    let cur = $derived(options.find((c) => c.number === convo))
 </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>
-<CharaPick id="chara" label="Select a character" bind:value={charaID} required />
+<div class="flex text-center mt-8">
+    <div class="flex-1">
+        <CharaPick id="chara" bind:value={charaID} required />
+    </div>
+    <div class="flex-1">
+        <select id="convo" bind:value={convo}>
+            {#each options as opt}
+                <option value={opt.number}>Slice of Life {opt.number}</option>
+            {/each}
+        </select>
+    </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>
+    <div class="flex mt-4 w-full text-center">
+        <span class="flex-1">{locations[cur.location].name.en}</span>
+    </div>
+{/if}