zenno: nicer lobby conversation page

zenno/src/lib/data/convo.ts

@@ -62,3 +62,21 @@ export const locations: Record<Conversation['location'], {name: RegionalName, gr
 	520: {name: {en: 'left side school map'}, group: 5},
 	530: {name: {en: 'left side school map'}, group: 5},
 }
+
+function locCharas(convos: Conversation[], locGroup: 1 | 2 | 3 | 4 | 5) {
+	const m = convos
+		.filter((c) => locations[c.location].group === locGroup)
+		.flatMap((c) => [c.chara_1, c.chara_2, c.chara_3].filter((x) => x != null))
+		.reduce((m, id) => m.set(id, 1 + (m.get(id) ?? 0)), new Map<number, number>())
+	return [...m].toSorted((a, b) => b[1] - a[1]) // descending
+}
+
+export const groupPopulars = {
+	global: {
+		1: locCharas(conversation.global, 1),
+		2: locCharas(conversation.global, 2),
+		3: locCharas(conversation.global, 3),
+		4: locCharas(conversation.global, 4),
+		5: locCharas(conversation.global, 5),
+	},
+}

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

@@ -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">
+    <div class="transition-shadow shadow-sm hover:shadow-md">
-        <span class="flex-1">{charaNames.get(cur.chara_1)?.en}</span>
+        <div class="flex mt-8 text-center">
-        {#if cur.chara_2}
+            <span class="flex-1">{charaNames.get(cur.chara_1)?.en ?? 'someone not a trainee'}</span>
-            <span class="flex-1">{charaNames.get(cur.chara_2)?.en}</span>
+            {#if cur.chara_2}
-        {/if}
+                <span class="flex-1">{charaNames.get(cur.chara_2)?.en ?? 'someone not a trainee'}</span>
-        {#if cur.chara_3}
+            {/if}
-            <span class="flex-1">{charaNames.get(cur.chara_3)?.en}</span>
+            {#if cur.chara_3}
-        {/if}
+                <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">
+    <div class="block mt-4 text-center">
-        <span class="flex-1">{locations[cur.location].name.en}</span>
+        <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}