i forhor

src/lib/components/Feedback.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div
-	class="mt-12 p-4 bg-linear-to-r from-blue-50 to-indigo-50 rounded-2xl shadow-md text-center text-sm md:text-base text-gray-600"
+	class="my-12 p-4 bg-linear-to-r from-blue-50 to-indigo-50 rounded-2xl shadow-md text-center text-sm md:text-base text-gray-600"
 	in:fade={{ delay: 1500, duration: 1000 }}
 >
 	Thank you so much for playing! Feel free to email me directly with feedback:

src/lib/components/WinScreen.svelte

@@ -9,16 +9,66 @@
 		averageGuesses: number;
 	}
 
+	interface WeightedMessage {
+		text: string;
+		weight: number;
+	}
+
 	let {
 		grade,
 		statsData,
 		correctBookId,
 		handleShare,
+		copyToClipboard,
 		copied = $bindable(false),
 		statsSubmitted,
+		guessCount,
 	} = $props();
 
 	let bookName = $derived(getBookById(correctBookId)?.name ?? "");
+	let hasWebShare = $derived(
+		typeof navigator !== "undefined" && "share" in navigator,
+	);
+
+	// List of congratulations messages with weights
+	const congratulationsMessages: WeightedMessage[] = [
+		{ text: "🎉 Congratulations! 🎉", weight: 1000 },
+		{ text: "⭐ You got it! ⭐", weight: 10 },
+		{ text: "🎉 Yup 🎉", weight: 5 },
+		{ text: "👍🏻 Very nice! 👍🏻", weight: 1 },
+	];
+
+	// Function to select a random message based on weights
+	function getRandomCongratulationsMessage(): string {
+		// Special case for first try success
+		if (guessCount === 1) {
+			const n = Math.random();
+			if (n < 0.95) {
+				return "🤯 First try! 🤯";
+			} else {
+				return "‼️ Axios ‼️";
+			}
+		}
+
+		const totalWeight = congratulationsMessages.reduce(
+			(sum, msg) => sum + msg.weight,
+			0,
+		);
+		let random = Math.random() * totalWeight;
+
+		for (const message of congratulationsMessages) {
+			random -= message.weight;
+			if (random <= 0) {
+				return message.text;
+			}
+		}
+
+		// Fallback to first message if something goes wrong
+		return congratulationsMessages[0].text;
+	}
+
+	// Generate the congratulations message
+	let congratulationsMessage = $derived(getRandomCongratulationsMessage());
 </script>
 
 <div
@@ -26,7 +76,7 @@
 	in:fade={{ delay: 500 }}
 >
 	<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
-		🎉 Congratulations! 🎉
+		{congratulationsMessage}
 	</h2>
 	<p class="text-lg sm:text-xl md:text-2xl">
 		The verse is from <span
@@ -39,32 +89,48 @@
 		Your grade: {grade}
 	</p>
 
-	<button
-		onclick={handleShare}
-		data-umami-event="Share"
-		class={`mt-4 text-2xl font-bold p-2 ${
-			copied
-				? "bg-green-400/50 hover:bg-green-500/60"
-				: "bg-white/20 hover:bg-white/30"
-		} rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
-	>
-		{copied ? "Copied to clipboard!" : "📤 Share"}
-	</button>
+	{#if hasWebShare}
+		<button
+			onclick={handleShare}
+			data-umami-event="Share"
+			class="mt-4 text-2xl font-bold p-2 bg-white/20 hover:bg-white/30 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
+		>
+			📤 Share
+		</button>
+		<button
+			onclick={copyToClipboard}
+			data-umami-event="Copy to Clipboard"
+			class="mt-4 text-2xl font-bold p-2 bg-white/20 hover:bg-white/30 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
+		>
+			📋 Copy to clipboard
+		</button>
+	{:else}
+		<button
+			onclick={handleShare}
+			data-umami-event="Share"
+			class={`mt-4 text-2xl font-bold p-2 ${
+				copied
+					? "bg-green-400/50 hover:bg-green-500/60"
+					: "bg-white/20 hover:bg-white/30"
+			} rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
+		>
+			{copied ? "Copied to clipboard!" : "📤 Share"}
+		</button>
+	{/if}
 
 	<!-- Statistics Display -->
 	{#if statsData}
 		<div class="mt-6 space-y-2 text-lg" in:fade={{ delay: 800 }}>
-			<p class="font-semibold">
+			<p class="font-regular">
 				You were the {toOrdinal(statsData.solveRank)} person to solve today.
 			</p>
-			<p class="font-semibold">
-				You rank <span class="text-2xl font-black"
-					>{toOrdinal(statsData.guessRank)}</span
-				> in guesses.
+			<p class="font-regular">
+				You rank <span class="">{toOrdinal(statsData.guessRank)}</span> in
+				guesses.
 			</p>
 			<p class="opacity-90">
 				Average: <span class="font-semibold"
-					>{statsData.averageGuesses.toFixed(1)}</span
+					>{Math.ceil(statsData.averageGuesses)}</span
 				> guesses
 			</p>
 		</div>