george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-04-05 17:33:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

new share button design

Browse Source
This commit is contained in:
George Powell
2026-02-22 19:26:40 -05:00
parent bd36f29419
commit 3d78353a90
1 changed files with 187 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -53,6 +53,7 @@
typeof navigator !== "undefined" && "share" in navigator,
);
let copySuccess = $state(false);
let bubbleCopied = $state(false);
// List of congratulations messages with weights
const congratulationsMessages: WeightedMessage[] = [
@@ -109,19 +110,24 @@
</p>
{#if streak > 1}
<p class="big-text text-orange-500! text-lg! my-4">
🔥 {streak} days in a row!
</p>
{#if streak >= 7}
<p class="font-black text-lg font-triodion">
Thank you for making Bibdle part of your daily routine!
<div class="flex flex-col gap-4 my-4">
<p class="big-text text-orange-500! text-lg!">
🔥 {streak} days in a row!
</p>
{/if}
{#if streakPercentile !== null}
<p class="text-sm mt-4 text-gray-700 font-triodion">
{streakPercentile <= 50 ? "Only " : ""}{streakPercentile}% of players have a streak of {streak} or greater.
</p>
{/if}
{#if streak >= 7}
<p class="font-black text-lg font-triodion">
Thank you for making Bibdle part of your daily routine!
</p>
{/if}
{#if streakPercentile !== null}
<p class="text-sm text-gray-700 font-triodion">
{streakPercentile <= 50
? "Only "
: ""}{streakPercentile}% of players have a streak of {streak}
or greater.
</p>
{/if}
</div>
{/if}
</Container>
@@ -205,34 +211,63 @@
<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}
<button
onclick={() => { (window as any).rybbit?.event("Share"); handleShare(); }}
data-umami-event="Share"
class="share-btn primary"
>
📤 Click to share
</button>
{:else}
<button
onclick={() => {
(window as any).rybbit?.event("Copy to Clipboard");
copyToClipboard();
copySuccess = true;
setTimeout(() => {
copySuccess = false;
}, 3000);
}}
data-umami-event="Copy to Clipboard"
class={`share-btn primary ${copySuccess ? "success" : ""}`}
>
{copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
</button>
{/if}
</div>
<div class="chat-window">
<p class="bubble">{shareText}</p>
<!-- Received bubble: primary action (share / copy) -->
<div class="bubble-wrapper received-wrapper">
<button
class="bubble bubble-received"
class:success={copySuccess}
aria-label={hasWebShare ? "Share" : "Copy to clipboard"}
data-umami-event={hasWebShare
? "Share"
: "Copy to Clipboard"}
onclick={() => {
if (hasWebShare) {
(window as any).rybbit?.event("Share");
handleShare();
} else {
(window as any).rybbit?.event("Copy to Clipboard");
copyToClipboard();
copySuccess = true;
setTimeout(() => {
copySuccess = false;
}, 3000);
}
}}
>
{#if hasWebShare}
📤 Click to share
{:else if copySuccess}
✅ Copied!
{:else}
📋 Copy to clipboard
{/if}
</button>
</div>
<!-- Sent bubble: share text preview -->
<div class="bubble-wrapper">
<button
class="bubble bubble-sent"
aria-label="Copy to clipboard"
onclick={() => {
copyToClipboard();
bubbleCopied = true;
setTimeout(() => {
bubbleCopied = false;
}, 2000);
}}>{shareText}</button
>
{#if hasWebShare}
<span class="copy-hint"
>{bubbleCopied ? "copied!" : "(tap to copy)"}</span
>
{:else}
<span class="copy-hint"
>{bubbleCopied ? "copied!" : ""}</span
>
{/if}
</div>
</div>
</div>
</div>
@@ -249,14 +284,13 @@
}
}
.fade-in {
:global(.fade-in) {
animation: fadeIn 0.5s ease-out;
}
/* ── Share card ── */
.share-card {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(8px);
background: oklch(94% 0.028 298.626);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 1.25rem;
padding: 1.25rem;
@@ -278,115 +312,156 @@
pointer-events: none;
}
.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: oklch(93.996% 0.03041 300.209);
--received-color: #3a3a3c;
--bg: oklch(94% 0.028 298.626);
display: flex;
justify-content: center;
padding: 0 1.5rem 0;
flex-direction: column;
padding: 0 0.5rem 0;
gap: 0.6rem;
}
/* ── Bubble (from article technique) ── */
/* ── Bubble wrappers ── */
.bubble-wrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.received-wrapper {
align-items: flex-start;
}
/* ── Shared bubble base ── */
.bubble {
position: relative;
max-width: 255px;
margin-bottom: 8px;
margin-bottom: 0;
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);
font-size: 1rem;
cursor: pointer;
transition:
filter 80ms ease,
transform 80ms ease;
user-select: none;
}
.bubble::before,
.bubble::after {
/* ── Sent bubble (share text preview) ── */
.bubble-sent {
color: white;
background: var(--sent-color);
transform: rotate(-2deg);
}
.bubble-sent:hover {
filter: brightness(1.08);
transform: rotate(-2deg) translateY(-2px);
}
.bubble-sent:active {
transform: rotate(-2deg) scale(0.97);
filter: brightness(0.95);
}
/* Sent tail: bottom-right */
.bubble-sent::before,
.bubble-sent::after {
position: absolute;
bottom: 0;
height: 25px;
content: "";
}
.bubble::before {
.bubble-sent::before {
width: 20px;
right: -7px;
background-color: var(--sent-color);
border-bottom-left-radius: 16px 14px;
}
.bubble::after {
.bubble-sent::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;
/* ── Received bubble (action button) ── */
.bubble-received {
color: #f5f5f7;
background: var(--received-color);
transform: rotate(2deg);
padding: 14px 24px;
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;
min-width: 14rem;
}
.bubble-received:hover {
filter: brightness(0.96);
transform: rotate(2deg) translateY(-2px);
}
.bubble-received:active {
transform: rotate(2deg) scale(0.97);
filter: brightness(0.92);
}
.bubble-received.success {
background: #c7f7d4;
color: #155724;
}
/* Received tail: bottom-left (mirror of sent) */
.bubble-received::before,
.bubble-received::after {
position: absolute;
bottom: 0;
height: 25px;
content: "";
}
.bubble-received::before {
width: 20px;
left: -7px;
background-color: var(--received-color);
border-bottom-right-radius: 16px 14px;
}
.bubble-received::after {
width: 26px;
left: -26px;
border-bottom-right-radius: 10px;
background-color: var(--bg);
}
.bubble-received.success::before {
background-color: #c7f7d4;
}
/* ── Copy hints ── */
.copy-hint {
font-size: 0.68rem;
color: #444;
font-weight: 400;
letter-spacing: 0.01em;
padding-right: 32px;
transform: rotate(-2deg);
transform-origin: right center;
}
.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;
.received-hint {
padding-right: 0;
padding-left: 32px;
transform: rotate(2deg);
transform-origin: left center;
}
</style>