zenno: lobby conversation page

zenno/src/lib/data/convo.ts

@@ -1,3 +1,4 @@
+import type { RegionalName } from '$lib/regional-name';
 import globalJSON from '../../../../global/conversation.json'
 
 /**
@@ -46,3 +47,18 @@ export const conversation = {
 export const byChara = {
 	global: globalJSON.reduce((m, c) => m.set(c.chara_id, (m.get(c.chara_id) ?? []).concat(c as Conversation)), new Map<Conversation['chara_id'], Conversation[]>()),
 }
+
+export const locations: Record<Conversation['location'], {name: RegionalName, group: 1 | 2 | 3 | 4 | 5}> = {
+	110: {name: {en: 'right side front'}, group: 1},
+	120: {name: {en: 'right side front'}, group: 1},
+	130: {name: {en: 'right side front'}, group: 1},
+	210: {name: {en: 'left side table'}, group: 2},
+	220: {name: {en: 'left side table'}, group: 2},
+	310: {name: {en: 'center back seat'}, group: 3},
+	410: {name: {en: 'center posters'}, group: 4},
+	420: {name: {en: 'center posters'}, group: 4},
+	430: {name: {en: 'center posters'}, group: 4},
+	510: {name: {en: 'left side school map'}, group: 5},
+	520: {name: {en: 'left side school map'}, group: 5},
+	530: {name: {en: 'left side school map'}, group: 5},
+}

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}