From 1de436534c9a82e662a3fa94f63a76d38f7bf259 Mon Sep 17 00:00:00 2001
From: George Powell <geohpowell@gmail.com>
Date: Sun, 22 Feb 2026 22:50:28 -0500
Subject: [PATCH] added copy verse text button

---
 src/lib/components/VerseDisplay.svelte | 154 +++++++++++++++----------
 src/lib/components/WinScreen.svelte    |   9 +-
 2 files changed, 93 insertions(+), 70 deletions(-)

diff --git a/src/lib/components/VerseDisplay.svelte b/src/lib/components/VerseDisplay.svelte
index 5497b24..42ef94c 100644
--- a/src/lib/components/VerseDisplay.svelte
+++ b/src/lib/components/VerseDisplay.svelte
@@ -1,73 +1,103 @@
 <script lang="ts">
-  import { browser } from "$app/environment";
-  import { fade } from "svelte/transition";
-  import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed
-  import Container from "./Container.svelte";
+	import { browser } from "$app/environment";
+	import { fade } from "svelte/transition";
+	import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed
+	import Container from "./Container.svelte";
 
-  let {
-    data,
-    isWon,
-    blurChapter = false,
-  }: { data: PageData; isWon: boolean; blurChapter?: boolean } = $props();
-  let dailyVerse = $derived(data.dailyVerse);
-  let displayReference = $derived(
-    blurChapter
-      ? dailyVerse.reference
-          .replace(/^Psalms /, "Psalm ")
-          .replace(/\s(\d+):/, " ?:")
-      : dailyVerse.reference.replace(/^Psalms /, "Psalm ")
-  );
-  let displayVerseText = $derived(
-    dailyVerse.verseText
-      .replace(/^([a-z])/, (c) => c.toUpperCase())
-      .replace(/[,:;-—]$/, "...")
-  );
+	let {
+		data,
+		isWon,
+		blurChapter = false,
+	}: { data: PageData; isWon: boolean; blurChapter?: boolean } = $props();
+	let dailyVerse = $derived(data.dailyVerse);
+	let displayReference = $derived(
+		blurChapter
+			? dailyVerse.reference
+					.replace(/^Psalms /, "Psalm ")
+					.replace(/\s(\d+):/, " ?:")
+			: dailyVerse.reference.replace(/^Psalms /, "Psalm "),
+	);
+	let displayVerseText = $derived(
+		dailyVerse.verseText
+			.replace(/^([a-z])/, (c) => c.toUpperCase())
+			.replace(/[,:;-—]$/, "..."),
+	);
 
-  let showReference = $state(false);
+	let showReference = $state(false);
+	let copied = $state(false);
 
-  // Delay showing reference until GuessesTable animation completes
-  $effect(() => {
-    if (!isWon) {
-      showReference = false;
-      return;
-    }
+	// Delay showing reference until GuessesTable animation completes
+	$effect(() => {
+		if (!isWon) {
+			showReference = false;
+			return;
+		}
 
-    // Check if user already won today (page reload case)
-    const winTrackedKey = `bibdle-win-tracked-${dailyVerse.date}`;
-    const alreadyWonToday = browser && localStorage.getItem(winTrackedKey) === "true";
+		// Check if user already won today (page reload case)
+		const winTrackedKey = `bibdle-win-tracked-${dailyVerse.date}`;
+		const alreadyWonToday =
+			browser && localStorage.getItem(winTrackedKey) === "true";
 
-    if (alreadyWonToday) {
-      // User already won and is refreshing - show immediately
-      showReference = true;
-    } else {
-      // User just won this session - delay for animation
-      const animationDelay = 1800;
-      const timeoutId = setTimeout(() => {
-        showReference = true;
-      }, animationDelay);
+		if (alreadyWonToday) {
+			// User already won and is refreshing - show immediately
+			showReference = true;
+		} else {
+			// User just won this session - delay for animation
+			const animationDelay = 1800;
+			const timeoutId = setTimeout(() => {
+				showReference = true;
+			}, animationDelay);
 
-      return () => clearTimeout(timeoutId);
-    }
-  });
+			return () => clearTimeout(timeoutId);
+		}
+	});
+
+	function copyVerse() {
+		const fullReference = dailyVerse.reference.replace(
+			/^Psalms /,
+			"Psalm ",
+		);
+		const textToCopy = `"${displayVerseText}" — ${fullReference}`;
+		navigator.clipboard.writeText(textToCopy).then(() => {
+			copied = true;
+			(window as any).rybbit?.event("Copy Verse");
+			setTimeout(() => {
+				copied = false;
+			}, 2000);
+		});
+	}
 </script>
 
 <Container class="w-full p-8 sm:p-12 bg-white/70 overflow-hidden">
-  <blockquote
-    class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
-  >
-    {displayVerseText}
-  </blockquote>
-  <div
-    class="transition-all duration-500 ease-in-out overflow-hidden"
-    style="max-height: {showReference ? '200px' : '0px'};"
-  >
-    {#if showReference}
-      <p
-        transition:fade={{ duration: 400 }}
-        class="text-center text-lg! big-text text-green-600! font-bold mt-8 bg-white/70 rounded-xl px-4 py-2"
-      >
-        {displayReference}
-      </p>
-    {/if}
-  </div>
+	<blockquote
+		class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
+	>
+		{displayVerseText}
+	</blockquote>
+	<div
+		class="transition-all duration-500 ease-in-out overflow-hidden"
+		style="max-height: {showReference ? '200px' : '0px'};"
+	>
+		{#if showReference}
+			<p
+				transition:fade={{ duration: 400 }}
+				class="text-center text-lg! big-text text-green-600! font-bold mt-8 bg-white/70 rounded-xl px-4 py-2"
+			>
+				{displayReference}
+			</p>
+			<div
+				transition:fade={{ duration: 300 }}
+				class="flex justify-center mt-3"
+			>
+				<button
+					onclick={copyVerse}
+					data-umami-event="Copy Verse"
+					class="flex items-center gap-1.5 px-3 py-1.5 text-xs big-text text-gray-600 bg-white/50 hover:bg-white/70 border border-gray-300 rounded-lg transition-colors cursor-pointer"
+				>
+					{copied ? "✅" : "📋"}
+					{copied ? "Copied!" : "Copy verse to clipboard"}
+				</button>
+			</div>
+		{/if}
+	</div>
 </Container>
diff --git a/src/lib/components/WinScreen.svelte b/src/lib/components/WinScreen.svelte
index 4c19c2f..aaa9e63 100644
--- a/src/lib/components/WinScreen.svelte
+++ b/src/lib/components/WinScreen.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { fade, fly } from "svelte/transition";
 	import { getBookById, toOrdinal } from "$lib/utils/game";
-	import { onMount } from "svelte";
 	import Container from "./Container.svelte";
 	import CountdownTimer from "./CountdownTimer.svelte";
 	import ChapterGuess from "./ChapterGuess.svelte";
@@ -475,12 +474,6 @@
 		padding-right: 32px;
 		transform: rotate(-2deg);
 		transform-origin: right center;
-	}
-
-	.received-hint {
-		padding-right: 0;
-		padding-left: 32px;
-		transform: rotate(2deg);
-		transform-origin: left center;
+		margin-top: -6px;
 	}
 </style>