fixed share, added crossed out options

src/routes/+page.svelte

@@ -38,6 +38,8 @@
 		),
 	);
 
+	let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
+
 	let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
 	let grade = $derived(
 		isWon
@@ -311,15 +313,22 @@
 
 	function handleShare() {
 		if (copied || !browser) return;
-		copied = true;
+		const useClipboard = !("share" in navigator);
+		if (useClipboard) {
+			copied = true;
+		}
 		share()
 			.then(() => {
-				setTimeout(() => {
-					copied = false;
-				}, 5000);
+				if (useClipboard) {
+					setTimeout(() => {
+						copied = false;
+					}, 5000);
+				}
 			})
 			.catch(() => {
-				copied = false;
+				if (useClipboard) {
+					copied = false;
+				}
 			});
 	}
 </script>
@@ -374,11 +383,19 @@
 						{#each filteredBooks as book}
 							<li>
 								<button
-									class="w-full p-4 sm:p-5 text-left hover:bg-blue-50 hover:text-blue-700 transition-all border-b border-gray-100 last:border-b-0 flex items-center"
+									class="w-full p-4 sm:p-5 text-left {guessedIds.has(
+										book.id,
+									)
+										? 'opacity-60 cursor-not-allowed pointer-events-none hover:bg-gray-100 hover:text-gray-600'
+										: 'hover:bg-blue-50 hover:text-blue-700'} transition-all border-b border-gray-100 last:border-b-0 flex items-center"
 									onclick={() => submitGuess(book.id)}
 								>
-									<span class="font-semibold"
-										>{book.name}</span
+									<span
+										class="font-semibold {guessedIds.has(
+											book.id,
+										)
+											? 'line-through text-gray-500'
+											: ''}">{book.name}</span
 									>
 									<span class="ml-auto text-sm opacity-75"
 										>({book.testament.toUpperCase()})</span
@@ -433,12 +450,11 @@
 						in:fade={{ delay: 800 }}
 					>
 						<p class="font-semibold">
-							You were the <span class="text-2xl font-black"
-								>{toOrdinal(statsData.solveRank)}</span
-							> person to solve today.
+							You were the {toOrdinal(statsData.solveRank)} person
+							to solve today.
 						</p>
 						<p class="font-semibold">
-							You are <span class="text-2xl font-black"
+							You rank <span class="text-2xl font-black"
 								>{toOrdinal(statsData.guessRank)}</span
 							> in guesses.
 						</p>