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

added streak container

Browse Source
This commit is contained in:
George Powell
2026-02-26 00:51:48 -05:00
parent f9f3f3de12
commit a5cf248e29
9 changed files with 167 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/CountdownTimer.svelte
View File

@@ -50,9 +50,9 @@
});
</script>
<div class="w-full">
<div class="w-full flex flex-col flex-1">
<div
class="flex flex-col items-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm w-full"
class="flex flex-col items-center justify-center bg-white/50 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 shadow-sm w-full flex-1"
>
{#if newVerseReady}
<p

29
src/lib/components/StreakCounter.svelte Normal file
View File

@@ -0,0 +1,29 @@
<script lang="ts">
let {
streak,
streakPercentile = null,
}: {
streak: number;
streakPercentile?: number | null;
} = $props();
</script>
<div
class="flex flex-col items-center justify-center bg-white/50 backdrop-blur-sm px-4 py-4 rounded-2xl border border-white/50 shadow-sm flex-1 text-center"
>
<p
class="text-4xl font-triodion font-black text-orange-500 leading-none tabular-nums"
>
{streak}
</p>
<p
class="text-xs uppercase tracking-[0.2em] text-gray-500 font-bold mt-1 leading-tight"
>
day{streak === 1 ? "" : "s"}<br />in a row
</p>
{#if streakPercentile !== null && streakPercentile <= 50}
<p class="text-xs text-gray-700 font-semibold mt-2">
Top {streakPercentile}%
</p>
{/if}
</div>

13
src/lib/components/VerseDisplay.svelte
View File

@@ -80,19 +80,6 @@
>
{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>

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

@@ -3,6 +3,7 @@
import { getBookById, toOrdinal } from "$lib/utils/game";
import Container from "./Container.svelte";
import CountdownTimer from "./CountdownTimer.svelte";
import StreakCounter from "./StreakCounter.svelte";
import ChapterGuess from "./ChapterGuess.svelte";
interface StatsData {
@@ -53,6 +54,7 @@
);
let copySuccess = $state(false);
let bubbleCopied = $state(false);
let copyTracked = $state(false);
// List of congratulations messages with weights
const congratulationsMessages: WeightedMessage[] = [
@@ -97,37 +99,25 @@
<div class="flex flex-col gap-6">
<Container
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"
class="w-full px-4 sm:px-6 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-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-2">
You guessed correctly after {guessCount}
{guessCount === 1 ? "guess" : "guesses"}.
</p>
{#if streak > 1}
<div class="flex flex-col gap-4 my-4">
<p class="big-text text-orange-500! text-lg!">
🔥 {streak} days in a row!
<div class="flex flex-col gap-3">
<p class="text-2xl sm:text-3xl md:text-4xl leading-tight">
{congratulationsMessage} The verse is from<br />
<span class="font-black font-triodion text-3xl md:text-4xl"
>{bookName}</span
>.
</p>
<p class="text-lg sm:text-xl md:text-2xl">
You guessed correctly after {guessCount}
{guessCount === 1 ? "guess" : "guesses"}.
</p>
{#if streak >= 7}
<p class="text-gray-700! big-text">
Thank you for making Bibdle part of your daily routine!
</p>
{#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}
{/if}
</div>
</Container>
<!-- S++ Bonus Challenge for first try -->
@@ -139,7 +129,16 @@
/>
{/if}
<CountdownTimer />
<div class="flex flex-row gap-3 items-stretch w-full">
<div class="flex-[2] min-w-0 flex flex-col">
<CountdownTimer />
</div>
{#if streak > 0}
<div class="flex-[1] min-w-0 flex flex-col">
<StreakCounter {streak} {streakPercentile} />
</div>
{/if}
</div>
<!-- Statistics Display -->
{#if statsData}
@@ -225,7 +224,12 @@
(window as any).rybbit?.event("Share");
handleShare();
} else {
(window as any).rybbit?.event("Copy to Clipboard");
if (!copyTracked) {
(window as any).rybbit?.event(
"Copy to Clipboard",
);
copyTracked = true;
}
copyToClipboard();
copySuccess = true;
setTimeout(() => {
@@ -251,7 +255,10 @@
aria-label="Copy to clipboard"
data-umami-event="Copy to Clipboard"
onclick={() => {
(window as any).rybbit?.event("Copy to Clipboard");
if (!copyTracked) {
(window as any).rybbit?.event("Copy to Clipboard");
copyTracked = true;
}
copyToClipboard();
bubbleCopied = true;
setTimeout(() => {