mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-04-05 17:33:31 -04:00
added copy verse text button
This commit is contained in:
@@ -15,15 +15,16 @@
|
||||
? dailyVerse.reference
|
||||
.replace(/^Psalms /, "Psalm ")
|
||||
.replace(/\s(\d+):/, " ?:")
|
||||
: dailyVerse.reference.replace(/^Psalms /, "Psalm ")
|
||||
: dailyVerse.reference.replace(/^Psalms /, "Psalm "),
|
||||
);
|
||||
let displayVerseText = $derived(
|
||||
dailyVerse.verseText
|
||||
.replace(/^([a-z])/, (c) => c.toUpperCase())
|
||||
.replace(/[,:;-—]$/, "...")
|
||||
.replace(/[,:;-—]$/, "..."),
|
||||
);
|
||||
|
||||
let showReference = $state(false);
|
||||
let copied = $state(false);
|
||||
|
||||
// Delay showing reference until GuessesTable animation completes
|
||||
$effect(() => {
|
||||
@@ -34,7 +35,8 @@
|
||||
|
||||
// Check if user already won today (page reload case)
|
||||
const winTrackedKey = `bibdle-win-tracked-${dailyVerse.date}`;
|
||||
const alreadyWonToday = browser && localStorage.getItem(winTrackedKey) === "true";
|
||||
const alreadyWonToday =
|
||||
browser && localStorage.getItem(winTrackedKey) === "true";
|
||||
|
||||
if (alreadyWonToday) {
|
||||
// User already won and is refreshing - show immediately
|
||||
@@ -49,6 +51,21 @@
|
||||
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">
|
||||
@@ -68,6 +85,19 @@
|
||||
>
|
||||
{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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user