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

feat: improve guesses collapse timing, win screen CTA, and progress page polish

Browse Source 
- GuessesTable now accepts a `minimized` prop instead of deriving collapse from `isWon`, giving the parent control over timing
- Delay collapsing guesses grid until win animations complete (1800ms), skipped for already-completed puzzles
- Replace plain progress link on win screen with a styled green button matching other CTAs
- Progress page: remove redundant subtitle and nav button from header, add book status legend, add axis labels to guess history chart

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
George Powell
2026-03-22 00:47:02 -04:00
parent 3eb3a968dc
commit 45d33b6bad
4 changed files with 104 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/routes/+page.svelte
View File

@@ -53,6 +53,7 @@
let statsData = $state<StatsData | null>(null);
let streak = $state(0);
let streakPercentile = $state<number | null>(null);
let guessesMinimized = $state(false);
const persistence = createGamePersistence(
() => dailyVerse.date,
@@ -204,6 +205,23 @@
}
});
// Delay collapsing the guesses grid until animations complete (mirrors showWinScreen delay)
$effect(() => {
if (!isWon || persistence.guesses.length <= 3) {
guessesMinimized = false;
return;
}
if (persistence.isWinAlreadyTracked()) {
guessesMinimized = true;
} else {
const animationDelay = 1800;
const timeoutId = setTimeout(() => {
guessesMinimized = true;
}, animationDelay);
return () => clearTimeout(timeoutId);
}
});
// Track win analytics
$effect(() => {
if (!browser || !isWon) return;
@@ -333,7 +351,7 @@
<GuessesTable
guesses={persistence.guesses}
{correctBookId}
{isWon}
minimized={guessesMinimized}
/>
</div>

45
src/routes/progress/+page.svelte
View File

@@ -186,16 +186,11 @@
<div class="max-w-3xl mx-auto">
<!-- Header -->
<div class="text-center mb-6 md:mb-8">
<h1 class="text-3xl md:text-4xl font-bold text-gray-100 mb-2">
<h1 class="text-3xl md:text-4xl font-bold text-gray-100 mb-4">
Your Progress
</h1>
<p class="text-sm md:text-base text-gray-300 mb-4">
Your Bible knowledge journey
</p>
<a
href="/"
class="inline-flex items-center px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors text-sm font-medium shadow-md"
>
<a href="/" class="p-2 px-20 w-full items-center text-gray-300">
&larr; Back to Game
</a>
</div>
@@ -360,6 +355,16 @@
</div>
{/each}
</div>
<p class="text-xs text-gray-500 mt-3 leading-relaxed">
<span class="text-blue-400 font-medium">Explored</span>
— played at least once<br />
<span class="text-emerald-400 font-medium"
>Mastered</span
>
— avg &le; 3 guesses over 2+ plays<br />
<span class="text-amber-400 font-medium">Perfect</span> —
mastered and guessed in 1 at least once
</p>
</Container>
</div>
@@ -382,7 +387,7 @@
</span>
</div>
<svg
viewBox="0 0 400 120"
viewBox="0 0 400 135"
class="w-full"
aria-hidden="true"
>
@@ -406,6 +411,13 @@
/>
</linearGradient>
</defs>
<!-- Y-axis label -->
<text
transform="translate(8, 60) rotate(-90)"
text-anchor="middle"
font-size="8"
fill="#9ca3af"
>Guesses</text>
<!-- Fill polygon -->
<polygon
points="{polylinePoints} {svgX(
@@ -454,12 +466,27 @@
>
{chartPoints[chartPoints.length - 1].label}
</text>
<!-- X-axis title -->
<text
x="200"
y="132"
font-size="8"
fill="#9ca3af"
text-anchor="middle"
>Date</text>
</svg>
{#if chartImproving}
<p class="text-xs text-emerald-400 mt-1">
You're getting better!
</p>
{/if}
<p
class="text-xs text-gray-500 mt-2 leading-relaxed"
>
Each point is your average guesses over a
rolling window of games. A downward trend means
you're improving.
</p>
</div>
</Container>
</div>