zenno/chara/convo: include character icons

zenno/src/lib/data/convo.ts

@@ -43,10 +43,14 @@ export enum Required {
 	Chara3 = 4,
 }
 
+export function convoCharas(c: Conversation): number[] {
+	return [c.chara_1, c.chara_2, c.chara_3].filter((id) => id != null);
+}
+
 export function requiredCharas(c: Conversation): number[] {
 	switch (c.condition_type) {
 		case Required.None: return []
-		case Required.All: return [c.chara_1, c.chara_2, c.chara_3].filter((id) => id != null);
+		case Required.All: return convoCharas(c);
 		case Required.Chara1: return [c.chara_1];
 		case Required.Chara2: return [c.chara_2!];
 		case Required.Chara3: return [c.chara_3!];

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

@@ -1,15 +1,24 @@
 <script lang="ts">
 	import { character, charaNames, type Character } from '$lib/data/character';
-	import { byChara, locations, groupPopulars, conversation, type Conversation, requiredCharas } from '$lib/data/convo';
+	import {
+		byChara,
+		locations,
+		groupPopulars,
+		conversation,
+		type Conversation,
+		requiredCharas,
+		convoCharas,
+	} from '$lib/data/convo';
 	import CharaPick from '$lib/CharaPick.svelte';
 	import { onMount } from 'svelte';
+	import CharaIcon from '$lib/CharaIcon.svelte';
 
 	let conversations: Conversation[] = $state([]);
 	const convoMap = $derived(byChara(conversations));
 	const popular = $derived(groupPopulars(conversations));
 	let characters: Character[] = $state([]);
 	const selCharas = $derived(characters.filter((c) => convoMap.has(c.chara_id)));
-	const names = $derived(charaNames(characters ?? []));
+	const names = $derived(charaNames(characters));
 	const minSuggest = 8;
 
 	onMount(async () => {
@@ -21,9 +30,8 @@
 
 	const options = $derived(convoMap.get(chara?.chara_id ?? 0) ?? []);
 	const cur = $derived(options.find((c) => c.number === convo));
-	const cur1Name = $derived(cur?.chara_1 && names.get(cur.chara_1)?.en);
+	const charaIDs = $derived(cur != null ? convoCharas(cur) : []);
-	const cur2Name = $derived(cur?.chara_2 && names.get(cur.chara_2)?.en);
+	const charas = $derived(charaIDs.map((id) => names.get(id)!));
-	const cur3Name = $derived(cur?.chara_3 && names.get(cur.chara_3)?.en);
 	const suggested = $derived.by(() => {
 		if (cur == null) {
 			return [];
@@ -55,24 +63,22 @@
 </div>
 {#if cur}
 	<div class="shadow-sm transition-shadow hover:shadow-md">
-		<div class="mt-8 flex text-center text-lg">
+		<div class="mt-8 flex flex-col text-center text-lg md:flex-row">
-			<span class={{ 'flex-1': true, 'font-bold italic': req.includes(cur.chara_1) }}>{cur1Name}</span>
+			{#each charaIDs as id, i (id)}
-			{#if cur2Name}
+				<span class={{ 'flex-1': true, 'font-bold italic': req.includes(id) }}>
-				<span class={{ 'flex-1': true, 'font-bold italic': cur.chara_2 != null && req.includes(cur.chara_2) }}>{cur2Name}</span>
+					<CharaIcon chara_id={id} size={64} />
-			{/if}
+					{charas[i].en}
-			{#if cur3Name}
+				</span>
-				<span class={{ 'flex-1': true, 'font-bold italic': cur.chara_3 != null && req.includes(cur.chara_3) }}>{cur3Name}</span>
+			{/each}
-			{/if}
 		</div>
-		<div class="flex w-full text-center text-lg">
+		<div class="block w-full text-center text-lg">
-			<span class="flex-1">at {curLoc?.name.en}</span>
+			at the {curLoc?.name.en}
 		</div>
 		{#if req.length > 0}
-			<div class="mt-2 flex w-full text-center text-sm italic">
+			<span class="mx-auto mt-4 block text-center text-sm">
-				<span class="flex-1">
+				The conversation will not appear unless you own a trainee or support card of all characters with names in
-					The conversation will not appear unless you own a trainee or support card of all characters with names in italics.
+				<span class="font-bold italic">bold italics</span>.
-				</span>
+			</span>
-			</div>
 		{/if}
 	</div>
 	<div class="mt-4 block text-center">
@@ -85,7 +91,8 @@
 	</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.
+			Setting these characters to fixed positions (main, upgrades, story, races) may maximize the chance of getting this
+			conversation.
 		</span>
 	</div>
 {/if}