feat: add FriendsTodaySection component for displaying friends' results

src/lib/components/FriendsTodaySection.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { t } from '$lib/i18n';
+
+	type TriedCharacter = {
+		id: string;
+		name: string;
+		pictureUrl: string | null;
+	};
+
+	type FriendTodayResult = {
+		userId: string;
+		name: string;
+		image: string | null;
+		tryCount: number;
+		triedCharacters: TriedCharacter[];
+	};
+
+	export let friendsTodayResults: FriendTodayResult[] = [];
+</script>
+
+{#if friendsTodayResults.length > 0}
+	<section class="mt-6 rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
+		<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100 text-center">{$t.game.daily.friendsToday}</p>
+		<div class="mt-4 space-y-2">
+			{#each friendsTodayResults as friendResult (friendResult.userId)}
+				<div class="rounded-lg border border-white/10 bg-slate-950/50 px-4 py-3">
+					<div class="flex items-center justify-between gap-4">
+						<div class="flex items-center gap-3">
+							{#if friendResult.image}
+								<img
+									src={friendResult.image}
+									alt={friendResult.name}
+									class="h-8 w-8 rounded-full border border-white/20 object-cover"
+								/>
+							{:else}
+								<div class="flex h-8 w-8 items-center justify-center rounded-full bg-amber-300/20 text-xs font-semibold text-amber-100">
+									{friendResult.name?.charAt(0).toUpperCase() || 'U'}
+								</div>
+							{/if}
+							<p class="text-sm font-semibold text-slate-100">{friendResult.name}</p>
+						</div>
+						<p class="text-sm text-amber-300">
+							{friendResult.tryCount} {friendResult.tryCount > 1 ? $t.game.daily.friendTryPlural : $t.game.daily.friendTrySingular}
+						</p>
+					</div>
+					<div class="mt-3 border-t border-white/10 pt-2">
+						<p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-amber-100">
+							{$t.game.daily.friendsTriedCharacters}
+						</p>
+						{#if friendResult.triedCharacters && friendResult.triedCharacters.length > 0}
+							<div class="mt-2 flex flex-wrap gap-2">
+								{#each friendResult.triedCharacters as triedCharacter (triedCharacter.id)}
+									<span class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-2.5 py-1 text-xs text-slate-200">
+										{#if triedCharacter.pictureUrl}
+											<img
+												src={triedCharacter.pictureUrl}
+												alt={triedCharacter.name}
+												class="h-4 w-4 rounded-full object-cover"
+											/>
+										{/if}
+										{triedCharacter.name}
+									</span>
+								{/each}
+							</div>
+						{:else}
+							<p class="mt-1 text-xs text-slate-500">{$t.game.daily.friendsNoTriedCharacters}</p>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</section>
+{/if}

src/routes/(game)/daily/+page.svelte

@@ -5,6 +5,7 @@
 	import CharacterSearchInput from '$lib/components/CharacterSearchInput.svelte';
 	import GuessHistoryTable from '$lib/components/GuessHistoryTable.svelte';
 	import WinPanel from '$lib/components/WinPanel.svelte';
+	import FriendsTodaySection from '$lib/components/FriendsTodaySection.svelte';
 	import type { CharacterWithRelations } from '$lib/server/daily-character.js';
 	import { t } from '$lib/i18n';
 	
@@ -316,57 +317,7 @@
 
 
 		{#if hasWon && data.friendsTodayResults && data.friendsTodayResults.length > 0}
-			<section class="mt-6 rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
+			<FriendsTodaySection friendsTodayResults={data.friendsTodayResults} />
-				<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100 text-center">{$t.game.daily.friendsToday}</p>
-				<div class="mt-4 space-y-2">
-					{#each data.friendsTodayResults as friendResult (friendResult.userId)}
-						<div class="rounded-lg border border-white/10 bg-slate-950/50 px-4 py-3">
-							<div class="flex items-center justify-between gap-4">
-								<div class="flex items-center gap-3">
-								{#if friendResult.image}
-									<img
-										src={friendResult.image}
-										alt={friendResult.name}
-										class="h-8 w-8 rounded-full border border-white/20 object-cover"
-									/>
-								{:else}
-									<div class="flex h-8 w-8 items-center justify-center rounded-full bg-amber-300/20 text-xs font-semibold text-amber-100">
-										{friendResult.name?.charAt(0).toUpperCase() || 'U'}
-									</div>
-								{/if}
-								<p class="text-sm font-semibold text-slate-100">{friendResult.name}</p>
-								</div>
-								<p class="text-sm text-amber-300">
-									{friendResult.tryCount} {friendResult.tryCount > 1 ? $t.game.daily.friendTryPlural : $t.game.daily.friendTrySingular}
-								</p>
-							</div>
-							<div class="mt-3 border-t border-white/10 pt-2">
-								<p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-amber-100">
-									{$t.game.daily.friendsTriedCharacters}
-								</p>
-								{#if friendResult.triedCharacters && friendResult.triedCharacters.length > 0}
-									<div class="mt-2 flex flex-wrap gap-2">
-										{#each friendResult.triedCharacters as triedCharacter (triedCharacter.id)}
-											<span class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-2.5 py-1 text-xs text-slate-200">
-												{#if triedCharacter.pictureUrl}
-													<img
-														src={triedCharacter.pictureUrl}
-														alt={triedCharacter.name}
-														class="h-4 w-4 rounded-full object-cover"
-													/>
-												{/if}
-												{triedCharacter.name}
-											</span>
-										{/each}
-									</div>
-								{:else}
-									<p class="mt-1 text-xs text-slate-500">{$t.game.daily.friendsNoTriedCharacters}</p>
-								{/if}
-							</div>
-						</div>
-					{/each}
-				</div>
-			</section>
 		{/if}
 
 		<GuessHistoryTable