feat: add achievements system, hint overlay, and progress page polish

Achievements system:
- Add src/lib/server/milestones.ts with full achievement definitions and
  calculation logic (16 achievements: streaks, book set completions,
  community milestones like Overachiever/Procrastinator/Outlier, and fun
  ones like Prodigal Son, Extra Credit, Is This A Joke To You?)
- Wire calculateMilestones() into the progress page server load
- Replace the old ad-hoc milestone cards with a proper achievements grid
  (3/4 col, uniform min-height cards, larger text)
- Change "With God, All Things Are Possible" from "every game solved in 1"
  to "solve in 1 guess for each of the 66 books at least once"

Game page hint overlay:
- After a correct testament/section/first-letter match, display a subtle
  text hint below the verse prompt (e.g. "It is in the Old Testament.")
- Hints fade in 2.8s after a guess (after the row flip animation)
- Hints are only shown to new players (fewer than 3 tracked wins) to
  avoid being patronising to experienced players

Progress page:
- Hide Skill Growth chart with {#if false && showChart} pending rework
- Fix book tier colour scheme: explored=blue, mastered=purple, perfect=emerald
  (was amber/emerald — now consistent across grid, legend, and stat cards)
- Simplify GuessesTable row colour: remove proximity gradient, use flat red
  for wrong guesses
- Add "Come back tomorrow!" encouragement text in CountdownTimer for new
  players (fewer than 3 wins)
- Fix GamePrompt text colour to always be gray-100

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
George Powell
2026-03-24 00:37:15 -04:00
parent 4a5aef5a3d
commit 321fac9aa8
7 changed files with 446 additions and 116 deletions

View File

@@ -3,6 +3,7 @@
let timeUntilNext = $state("");
let newVerseReady = $state(false);
let showEncouragement = $state(false);
let intervalId: number | null = null;
let targetTime = 0;
@@ -41,6 +42,13 @@
initTarget();
updateTimer();
intervalId = window.setInterval(updateTimer, 1000);
const winCount = Object.keys(localStorage).filter(
(k) =>
k.startsWith("bibdle-win-tracked-") &&
localStorage.getItem(k) === "true",
).length;
showEncouragement = winCount < 3;
});
onDestroy(() => {
@@ -77,6 +85,13 @@
>
{timeUntilNext}
</p>
{#if showEncouragement}
<p
class="text-xs text-center uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold px-4 mt-3"
>
Come back tomorrow for a new verse!
</p>
{/if}
{/if}
</div>
</div>