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

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(() => {