Added streak percentage

src/lib/components/ChapterGuess.svelte

@@ -90,7 +90,7 @@
 		return chapterCounts[bookId] || 1;
 	}
 
-	// Generate 6 random chapter options including the correct one
+	// Generate 4 random chapter options including the correct one
 	function generateChapterOptions(
 		correctChapter: number,
 		totalChapters: number,
@@ -98,14 +98,14 @@
 		const options = new Set<number>();
 		options.add(correctChapter);
 
-		if (totalChapters >= 6) {
-			while (options.size < 6) {
+		if (totalChapters >= 4) {
+			while (options.size < 4) {
 				const randomChapter =
 					Math.floor(Math.random() * totalChapters) + 1;
 				options.add(randomChapter);
 			}
 		} else {
-			while (options.size < 6) {
+			while (options.size < 4) {
 				const randomChapter = Math.floor(Math.random() * 10) + 1;
 				options.add(randomChapter);
 			}
@@ -167,18 +167,18 @@
 </script>
 
 <Container
-	class="w-full p-6 sm:p-8 bg-linear-to-br from-yellow-100/80 to-amber-200/80 text-gray-800 shadow-md"
+	class="w-full p-3 sm:p-4 bg-linear-to-br from-yellow-100/80 to-amber-200/80 text-gray-800 shadow-md"
 >
 	<div class="text-center">
-		<p class="text-xl sm:text-2xl font-bold mb-2">Bonus Challenge</p>
-		<p class="text-sm sm:text-base opacity-80 mb-6">
-			Guess the chapter for an even higher grade
+		<p class="font-bold mb-3 text-lg sm:text-xl">
+			Bonus Challenge
+			<span class="text-base sm:text-lg opacity-60 font-normal"
+				>— guess the chapter for an even higher grade</span
+			>
 		</p>
 
-		<div
-			class="grid grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-4 justify-center mx-auto mb-6"
-		>
-			{#each chapterOptions as chapter}
+		<div class="grid grid-cols-4 gap-2 justify-center mx-auto mb-3">
+			{#each chapterOptions as chapter (chapter)}
 				<button
 					onclick={() => handleChapterSelect(chapter)}
 					disabled={hasAnswered}

src/lib/components/WinScreen.svelte

@@ -32,6 +32,7 @@
 		onChapterGuessCompleted,
 		shareText,
 		streak = 0,
+		streakPercentile = null,
 	}: {
 		statsData: StatsData | null;
 		correctBookId: string;
@@ -44,6 +45,7 @@
 		onChapterGuessCompleted: () => void;
 		shareText: string;
 		streak?: number;
+		streakPercentile?: number | null;
 	} = $props();
 
 	let bookName = $derived(getBookById(correctBookId)?.name ?? "");
@@ -66,9 +68,9 @@
 		if (guessCount === 1) {
 			const n = Math.random();
 			if (n < 0.99) {
-				return "🌟 First try! 🌟";
+				return "First try!";
 			} else {
-				return "🗣️ Axios! 🗣️";
+				return "Axios!";
 			}
 		}
 
@@ -107,9 +109,20 @@
 		</p>
 
 		{#if streak > 1}
-			<p class="big-text text-orange-500! text-sm! mt-4">
-				🔥 {streak} day streak!
+			<p class="big-text text-orange-500! text-lg! my-4">
+				🔥 {streak} days in a row!
 			</p>
+			{#if streak >= 7}
+				<p class="font-black text-lg font-triodion">
+					Thank you for making Bibdle part of your daily routine!
+				</p>
+			{/if}
+			{#if streakPercentile !== null}
+				<p class="text-sm mt-4 text-gray-700 font-triodion">
+					Only {streakPercentile}% of players have a streak of {streak}
+					or greater.
+				</p>
+			{/if}
 		{/if}
 	</Container>