george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-04-06 09:53:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

WIP new share menu

Browse Source
This commit is contained in:
George Powell
2026-02-21 00:38:09 -05:00
parent e592751a1c
commit 19646c72ca
3 changed files with 180 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/lib/components/WinScreen.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { fade } from "svelte/transition";
import { fade, fly } from "svelte/transition";
import {
getBookById,
toOrdinal,
@@ -35,6 +35,7 @@
guessCount,
reference,
onChapterGuessCompleted,
shareText,
} = $props();
let bookName = $derived(getBookById(correctBookId)?.name ?? "");
@@ -86,13 +87,13 @@
<div class="flex flex-col gap-6">
<Container
class="w-full p-8 sm:p-12 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 shadow-2xl text-center fade-in"
class="w-full px-2 sm:px-4 py-6 sm:py-8 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 shadow-2xl text-center fade-in"
>
<p class="text-2xl sm:text-3xl md:text-4xl leading-relaxed">
{congratulationsMessage} The verse is from
<p class="text-2xl sm:text-3xl md:text-4xl leading-tight">
{congratulationsMessage} The verse is from<br />
<span class="font-black text-3xl md:text-4xl">{bookName}</span>.
</p>
<p class="text-lg sm:text-xl md:text-2xl mt-4">
<p class="text-lg sm:text-xl md:text-2xl mt-2">
You guessed correctly after {guessCount}
{guessCount === 1 ? "guess" : "guesses"}.
<span class="font-bold bg-white/40 rounded px-1.5 py-0.75"
@@ -100,16 +101,25 @@
>
</p>
<div class="flex justify-center mt-6">
{#if guessCount !== 1}
<p class="pt-6 big-text text-gray-700!">
{getNextGradeMessage(guessCount)}
</p>
{/if}
</Container>
<div class="share-card" in:fly={{ y: 40, duration: 400, delay: 600 }}>
<div class="big-text font-black! text-center">Share your result</div>
<div class="share-buttons">
{#if hasWebShare}
<!-- mobile and arc in production -->
<button
onclick={handleShare}
data-umami-event="Share"
class="text-2xl font-bold p-4 bg-white/70 hover:bg-white/80 rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
class="share-btn primary"
>
📤 Share
📤 Click to share
</button>
{:else}
<button
onclick={() => {
copyToClipboard();
@@ -119,34 +129,16 @@
}, 3000);
}}
data-umami-event="Copy to Clipboard"
class={`text-2xl font-bold p-4 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
copySuccess
? "bg-white/30"
: "bg-white/70 hover:bg-white/80"
}`}
class={`share-btn primary ${copySuccess ? "success" : ""}`}
>
{copySuccess ? "✅ Copied!" : "📋 Copy"}
</button>
{:else}
<!-- dev mode and desktop browsers -->
<button
onclick={handleShare}
data-umami-event="Copy to Clipboard"
class={`text-2xl font-bold p-4 ${
copied ? "bg-white/30" : "bg-white/70 hover:bg-white/80"
} rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
>
{copied ? "✅ Copied!" : "📋 Share"}
{copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
</button>
{/if}
</div>
{#if guessCount !== 1}
<p class="pt-6 big-text text-gray-700!">
{getNextGradeMessage(guessCount)}
</p>
{/if}
</Container>
<div class="chat-window">
<p class="bubble">{shareText}</p>
</div>
</div>
<!-- S++ Bonus Challenge for first try -->
{#if guessCount === 1}
@@ -242,4 +234,130 @@
.fade-in {
animation: fadeIn 0.5s ease-out;
}
/* ── Share card ── */
.share-card {
background: white;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 1.25rem;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.6rem;
width: 100%;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.share-card-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #8e8e93;
margin: 0;
}
/* ── Chat window ── */
.chat-window {
--sent-color: #0b93f6;
--bg: white;
display: flex;
justify-content: center;
padding: 0 1.5rem 0;
}
/* ── Bubble (from article technique) ── */
.bubble {
position: relative;
max-width: 255px;
margin-bottom: 8px;
padding: 10px 20px;
line-height: 1.3;
word-wrap: break-word;
border-radius: 25px;
text-align: left;
white-space: pre-wrap;
font-size: 0.9rem;
transform: rotate(-2deg);
color: white;
background: var(--sent-color);
}
.bubble::before,
.bubble::after {
position: absolute;
bottom: 0;
height: 25px;
content: "";
}
.bubble::before {
width: 20px;
right: -7px;
background-color: var(--sent-color);
border-bottom-left-radius: 16px 14px;
}
.bubble::after {
width: 26px;
right: -26px;
border-bottom-left-radius: 10px;
background-color: var(--bg);
}
/* ── Share buttons ── */
.share-buttons {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
}
.share-btn {
width: 100%;
padding: 1rem 1.5rem;
font-size: 1.1rem;
font-weight: 700;
border: 3px solid rgba(0, 0, 0, 0.25);
border-radius: 1rem;
cursor: pointer;
transition:
transform 80ms ease,
box-shadow 80ms ease,
opacity 80ms ease;
letter-spacing: 0.01em;
}
.share-btn:active {
transform: scale(0.97);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.share-btn.primary {
background: #7c3aed;
color: white;
box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4);
}
.share-btn.primary:hover {
opacity: 0.92;
}
.share-btn.primary.success {
background: #636363;
color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.share-btn.secondary {
background: #f2f2f7;
color: #1c1c1e;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.share-btn.secondary:hover {
background: #e5e5ea;
}
</style>