mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-04-05 17:33:31 -04:00
321fac9aa8
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>
98 lines
2.5 KiB
Svelte
98 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import { onMount, onDestroy } from "svelte";
|
|
|
|
let timeUntilNext = $state("");
|
|
let newVerseReady = $state(false);
|
|
let showEncouragement = $state(false);
|
|
let intervalId: number | null = null;
|
|
let targetTime = 0;
|
|
|
|
function initTarget() {
|
|
const target = new Date();
|
|
target.setHours(0, 0, 0, 0);
|
|
if (Date.now() >= target.getTime()) {
|
|
target.setDate(target.getDate() + 1);
|
|
}
|
|
targetTime = target.getTime();
|
|
}
|
|
|
|
function updateTimer() {
|
|
const diff = targetTime - Date.now();
|
|
|
|
if (diff <= 0) {
|
|
newVerseReady = true;
|
|
timeUntilNext = "";
|
|
if (intervalId) {
|
|
clearInterval(intervalId);
|
|
intervalId = null;
|
|
}
|
|
return;
|
|
}
|
|
|
|
const hours = Math.floor(diff / (1000 * 60 * 60));
|
|
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
|
|
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
|
|
|
|
timeUntilNext = `${hours.toString().padStart(2, "0")}h ${minutes
|
|
.toString()
|
|
.padStart(2, "0")}m ${seconds.toString().padStart(2, "0")}s`;
|
|
}
|
|
|
|
onMount(() => {
|
|
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(() => {
|
|
if (intervalId) {
|
|
clearInterval(intervalId);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="w-full flex flex-col flex-1">
|
|
<div
|
|
class="flex flex-col items-center justify-center bg-white/50 dark:bg-black/30 backdrop-blur-sm px-8 py-4 rounded-2xl border border-white/50 dark:border-white/10 shadow-sm w-full flex-1"
|
|
>
|
|
{#if newVerseReady}
|
|
<p
|
|
class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold mb-2"
|
|
>
|
|
Next Verse In
|
|
</p>
|
|
<p class="text-4xl font-triodion font-black text-gray-800">Now</p>
|
|
<p
|
|
class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold mt-2"
|
|
>
|
|
(refresh page to see the new verse)
|
|
</p>
|
|
{:else}
|
|
<p
|
|
class="text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400 font-bold mb-2"
|
|
>
|
|
Next Verse In
|
|
</p>
|
|
<p
|
|
class="text-4xl font-triodion font-black text-gray-800 dark:text-gray-100 tabular-nums whitespace-nowrap"
|
|
>
|
|
{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>
|