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}