Refactor game logic into utility modules and add cross-device sync

Extracted game state management, share logic, and stats API calls into dedicated modules (game-persistence.svelte.ts, share.ts, stats-client.ts), and moved daily verse loading to client-side to fix timezone issues. Added a guesses column to daily_completions for cross-device state restoration for logged-in users, a new GET /api/stats endpoint, and a staging deploy script.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
George Powell
2026-02-18 13:25:40 -05:00
parent 2de4e9e2a7
commit e6081c28f1
17 changed files with 640 additions and 543 deletions

22
deploy-staging.sh Executable file
View File

@@ -0,0 +1,22 @@
#!/bin/bash
set -e
cd "$(dirname "$0")"
echo "Pulling latest changes..."
git pull
echo "Installing dependencies..."
bun i
echo "Pushing database changes..."
bun run db:generate
bun run db:migrate
echo "Building..."
bun --bun run build
echo "Restarting service..."
sudo systemctl restart bibdle-test
echo "Done!"

View File

@@ -0,0 +1,41 @@
import { Database } from 'bun:sqlite';
import path from 'path';
const dbUrl = process.env.DATABASE_URL;
if (!dbUrl) throw new Error('DATABASE_URL is not set');
const dbPath = dbUrl.startsWith('file:') ? dbUrl.slice(5) : dbUrl;
const db = new Database(path.resolve(dbPath));
const duplicates = db.query(`
SELECT anonymous_id, date, COUNT(*) as count
FROM daily_completions
GROUP BY anonymous_id, date
HAVING count > 1
`).all() as { anonymous_id: string; date: string; count: number }[];
if (duplicates.length === 0) {
console.log('No duplicates found.');
process.exit(0);
}
console.log(`Found ${duplicates.length} duplicate group(s):`);
const deleteStmt = db.query(`
DELETE FROM daily_completions
WHERE anonymous_id = $anonymous_id AND date = $date
AND id NOT IN (
SELECT id FROM daily_completions
WHERE anonymous_id = $anonymous_id AND date = $date
ORDER BY completed_at ASC
LIMIT 1
)
`);
for (const { anonymous_id, date, count } of duplicates) {
deleteStmt.run({ $anonymous_id: anonymous_id, $date: date });
console.log(` ${anonymous_id} / ${date}: kept earliest, deleted ${count - 1} row(s) (had ${count})`);
}
console.log('Done.');
db.close();

View File

@@ -1,20 +1,8 @@
<script lang="ts">
import { bibleBooks } from "$lib/types/bible";
import { getFirstLetter, type Guess } from "$lib/utils/game";
import Container from "./Container.svelte";
interface Guess {
book: {
id: string;
name: string;
testament: string;
section: string;
};
testamentMatch: boolean;
sectionMatch: boolean;
adjacent: boolean;
firstLetterMatch: boolean;
}
let {
guesses,
correctBookId,
@@ -28,11 +16,6 @@
return "bg-red-500 border-red-600";
}
function getFirstLetter(bookName: string): string {
const match = bookName.match(/[a-zA-Z]/);
return match ? match[0] : bookName[0];
}
function getBoxContent(
guess: Guess,
column: "book" | "firstLetter" | "testament" | "section",

View File

@@ -7,11 +7,11 @@
imposterIndex: number;
}
let data: ImposterData | null = null;
let clicked: boolean[] = [];
let gameOver = false;
let loading = true;
let error: string | null = null;
let data: ImposterData | null = $state(null);
let clicked: boolean[] = $state([]);
let gameOver = $state(false);
let loading = $state(true);
let error: string | null = $state(null);
async function loadGame() {
try {
@@ -92,7 +92,7 @@
{:else if error}
<div class="error">
<p>Error: {error}</p>
<button on:click={newGame}>Retry</button>
<button onclick={newGame}>Retry</button>
</div>
{:else if data}
<!-- <div class="instructions">
@@ -106,7 +106,7 @@
class:clicked={clicked[i]}
class:correct={clicked[i] && i === data.imposterIndex}
class:wrong={clicked[i] && i !== data.imposterIndex}
on:click={() => handleClick(i)}
onclick={() => handleClick(i)}
disabled={gameOver}
>
{formatVerse(verse)}
@@ -119,7 +119,7 @@
</div>
{#if gameOver}
<div class="result">
<button on:click={newGame}>New Game</button>
<button onclick={newGame}>New Game</button>
</div>
{/if}
{/if}

View File

@@ -1,8 +1,3 @@
// place files you want to import through the `$lib` alias in this folder.
export * from './utils/game';
export { default as VerseDisplay } from './components/VerseDisplay.svelte';
export { default as SearchInput } from './components/SearchInput.svelte';
export { default as GuessesTable } from './components/GuessesTable.svelte';
export { default as WinScreen } from './components/WinScreen.svelte';
export { default as Feedback } from './components/Feedback.svelte';

View File

@@ -37,13 +37,14 @@ export const dailyCompletions = sqliteTable('daily_completions', {
anonymousId: text('anonymous_id').notNull(),
date: text('date').notNull(),
guessCount: integer('guess_count').notNull(),
guesses: text('guesses'), // nullable; only stored for logged-in users
completedAt: integer('completed_at', { mode: 'timestamp' }).notNull(),
}, (table) => ({
anonymousIdDateIndex: index('anonymous_id_date_idx').on(table.anonymousId, table.date),
dateIndex: index('date_idx').on(table.date),
dateGuessIndex: index('date_guess_idx').on(table.date, table.guessCount),
}, (table) => [
index('anonymous_id_date_idx').on(table.anonymousId, table.date),
index('date_idx').on(table.date),
index('date_guess_idx').on(table.date, table.guessCount),
// Ensures schema matches the database migration and prevents duplicate submissions
uniqueAnonymousIdDate: unique('daily_completions_anonymous_id_date_unique').on(table.anonymousId, table.date),
}));
unique('daily_completions_anonymous_id_date_unique').on(table.anonymousId, table.date),
]);
export type DailyCompletion = typeof dailyCompletions.$inferSelect;

View File

@@ -0,0 +1,148 @@
import { browser } from "$app/environment";
import { evaluateGuess, generateUUID, type Guess } from "$lib/utils/game";
function getOrCreateAnonymousId(): string {
if (!browser) return "";
const key = "bibdle-anonymous-id";
let id = localStorage.getItem(key);
if (!id) {
id = generateUUID();
localStorage.setItem(key, id);
}
return id;
}
export function createGamePersistence(
getDate: () => string,
getReference: () => string,
getCorrectBookId: () => string,
getUserId: () => string | undefined,
) {
let guesses = $state<Guess[]>([]);
let anonymousId = $state("");
let statsSubmitted = $state(false);
let chapterGuessCompleted = $state(false);
let chapterCorrect = $state(false);
// Initialize anonymous ID and load persisted flags
$effect(() => {
if (!browser) return;
const userId = getUserId();
// CRITICAL: If user is logged in, ALWAYS use their user ID
if (userId) {
anonymousId = userId;
} else {
anonymousId = getOrCreateAnonymousId();
}
if ((window as any).umami) {
(window as any).umami.identify(anonymousId);
}
const date = getDate();
const reference = getReference();
statsSubmitted = localStorage.getItem(`bibdle-stats-submitted-${date}`) === "true";
const chapterGuessKey = `bibdle-chapter-guess-${reference}`;
chapterGuessCompleted = localStorage.getItem(chapterGuessKey) !== null;
if (chapterGuessCompleted) {
const saved = localStorage.getItem(chapterGuessKey);
if (saved) {
const data = JSON.parse(saved);
const match = reference.match(/\s(\d+):/);
const correctChapter = match ? parseInt(match[1], 10) : 1;
chapterCorrect = data.selectedChapter === correctChapter;
}
}
});
// Load saved guesses from localStorage
$effect(() => {
if (!browser) return;
const date = getDate();
const correctBookId = getCorrectBookId();
const key = `bibdle-guesses-${date}`;
const saved = localStorage.getItem(key);
if (!saved) {
guesses = [];
return;
}
let savedIds: string[] = JSON.parse(saved);
savedIds = Array.from(new Set(savedIds));
guesses = savedIds
.map((bookId) => evaluateGuess(bookId, correctBookId))
.filter((g): g is Guess => g !== null);
});
// Save guesses to localStorage whenever they change
$effect(() => {
if (!browser) return;
const date = getDate();
localStorage.setItem(
`bibdle-guesses-${date}`,
JSON.stringify(guesses.map((g) => g.book.id)),
);
});
function markStatsSubmitted() {
if (!browser) return;
statsSubmitted = true;
localStorage.setItem(`bibdle-stats-submitted-${getDate()}`, "true");
}
function markWinTracked() {
if (!browser) return;
const key = `bibdle-win-tracked-${getDate()}`;
if (localStorage.getItem(key) === "true") return false;
localStorage.setItem(key, "true");
return true;
}
function isWinAlreadyTracked(): boolean {
if (!browser) return false;
return localStorage.getItem(`bibdle-win-tracked-${getDate()}`) === "true";
}
function hydrateFromServer(guessIds: string[]) {
if (!browser) return;
const correctBookId = getCorrectBookId();
const date = getDate();
guesses = guessIds
.map((bookId) => evaluateGuess(bookId, correctBookId))
.filter((g): g is Guess => g !== null);
// Persist to localStorage so subsequent loads on this device skip the server check
localStorage.setItem(`bibdle-guesses-${date}`, JSON.stringify(guessIds));
}
function onChapterGuessCompleted() {
if (!browser) return;
chapterGuessCompleted = true;
const reference = getReference();
const chapterGuessKey = `bibdle-chapter-guess-${reference}`;
const saved = localStorage.getItem(chapterGuessKey);
if (saved) {
const data = JSON.parse(saved);
const match = reference.match(/\s(\d+):/);
const correctChapter = match ? parseInt(match[1], 10) : 1;
chapterCorrect = data.selectedChapter === correctChapter;
}
}
return {
get guesses() { return guesses; },
set guesses(v: Guess[]) { guesses = v; },
get anonymousId() { return anonymousId; },
get statsSubmitted() { return statsSubmitted; },
get chapterGuessCompleted() { return chapterGuessCompleted; },
get chapterCorrect() { return chapterCorrect; },
markStatsSubmitted,
markWinTracked,
isWinAlreadyTracked,
onChapterGuessCompleted,
hydrateFromServer,
};
}

View File

@@ -1,5 +1,13 @@
import { bibleBooks, type BibleBook } from '$lib/types/bible';
export interface Guess {
book: BibleBook;
testamentMatch: boolean;
sectionMatch: boolean;
adjacent: boolean;
firstLetterMatch: boolean;
}
export function getBookById(id: string): BibleBook | undefined {
return bibleBooks.find((b) => b.id === id);
}
@@ -10,7 +18,47 @@ export function isAdjacent(id1: string, id2: string): boolean {
return !!(b1 && b2 && Math.abs(b1.order - b2.order) === 1);
}
export function getGrade(numGuesses: number, popularity: number): string {
export function getFirstLetter(bookName: string): string {
const match = bookName.match(/[a-zA-Z]/);
return match ? match[0] : bookName[0];
}
export function evaluateGuess(guessBookId: string, correctBookId: string): Guess | null {
const book = getBookById(guessBookId);
const correctBook = getBookById(correctBookId);
if (!book || !correctBook) return null;
const testamentMatch = book.testament === correctBook.testament;
const sectionMatch = book.section === correctBook.section;
const adjacent = isAdjacent(guessBookId, correctBookId);
// Special case: if correct book is in the Epistles + starts with "1",
// any guess starting with "1" counts as first letter match
const correctIsEpistlesWithNumber =
(correctBook.section === "Pauline Epistles" ||
correctBook.section === "General Epistles") &&
correctBook.name[0] === "1";
const guessIsEpistlesWithNumber =
(book.section === "Pauline Epistles" ||
book.section === "General Epistles") &&
book.name[0] === "1";
const firstLetterMatch =
correctIsEpistlesWithNumber && guessIsEpistlesWithNumber
? true
: getFirstLetter(book.name).toUpperCase() ===
getFirstLetter(correctBook.name).toUpperCase();
return {
book,
testamentMatch,
sectionMatch,
adjacent,
firstLetterMatch,
};
}
export function getGrade(numGuesses: number): string {
if (numGuesses === 1) return "S+";
if (numGuesses === 2) return "A+";
if (numGuesses === 3) return "A";
@@ -49,4 +97,4 @@ export function generateUUID(): string {
const v = c === "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
}
}

65
src/lib/utils/share.ts Normal file
View File

@@ -0,0 +1,65 @@
import type { Guess } from './game';
export function generateShareText(params: {
guesses: Guess[];
correctBookId: string;
dailyVerseDate: string;
grade: string;
chapterCorrect: boolean;
isLoggedIn: boolean;
userStreak?: number;
origin: string;
}): string {
const { guesses, correctBookId, dailyVerseDate, grade, chapterCorrect, isLoggedIn, userStreak, origin } = params;
const emojis = guesses
.slice()
.reverse()
.map((guess) => {
if (guess.book.id === correctBookId) return "✅";
if (guess.adjacent) return "‼️";
if (guess.sectionMatch) return "🟩";
if (guess.testamentMatch) return "🟧";
return "🟥";
})
.join("");
const dateFormatter = new Intl.DateTimeFormat("en-US", {
month: "short",
day: "numeric",
year: "numeric",
});
const formattedDate = dateFormatter.format(
new Date(`${dailyVerseDate}T00:00:00`),
);
const bookEmoji = isLoggedIn ? "📜" : "📖";
const lines = [
`${bookEmoji} Bibdle | ${formattedDate} ${bookEmoji}`,
`${grade} (${guesses.length} ${guesses.length === 1 ? "guess" : "guesses"})`,
];
if (isLoggedIn && userStreak !== undefined) {
lines.push(`🔥 ${userStreak} day streak`);
}
lines.push(
`${emojis}${guesses.length === 1 && chapterCorrect ? " ⭐" : ""}`,
origin,
);
return lines.join("\n");
}
export async function shareResult(shareText: string): Promise<void> {
if ("share" in navigator) {
await (navigator as any).share({ text: shareText });
} else {
await (navigator as any).clipboard.writeText(shareText);
}
}
export async function copyToClipboard(shareText: string): Promise<void> {
await (navigator as any).clipboard.writeText(shareText);
}

View File

@@ -0,0 +1,68 @@
export interface StatsData {
solveRank: number;
guessRank: number;
totalSolves: number;
averageGuesses: number;
tiedCount: number;
percentile: number;
guesses?: string[]; // Present when fetching an existing completion (cross-device sync)
}
export async function submitCompletion(params: {
anonymousId: string;
date: string;
guessCount: number;
guesses: string[];
}): Promise<StatsData | null> {
try {
const response = await fetch("/api/submit-completion", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(params),
});
const result = await response.json();
if (result.success && result.stats) {
return result.stats;
}
if (response.status === 409) {
// Already submitted from another device — fetch existing stats
return fetchExistingStats({ anonymousId: params.anonymousId, date: params.date });
}
if (result.error) {
console.error("Stats server error:", result.error);
}
return null;
} catch (err) {
console.error("Stats submission failed:", err);
return null;
}
}
export async function fetchExistingStats(params: {
anonymousId: string;
date: string;
}): Promise<StatsData | null> {
try {
const response = await fetch(
`/api/stats?anonymousId=${params.anonymousId}&date=${params.date}`,
);
const result = await response.json();
if (result.success && result.stats) {
return result.stats;
}
if (result.error) {
console.error("Stats server error:", result.error);
}
return null;
} catch (err) {
console.error("Stats fetch failed:", err);
return null;
}
}

View File

@@ -3,21 +3,10 @@ import { db } from '$lib/server/db';
import { dailyCompletions } from '$lib/server/db/schema';
import { eq, asc } from 'drizzle-orm';
import { fail } from '@sveltejs/kit';
import { getBookById } from '$lib/server/bible';
import { getVerseForDate } from '$lib/server/daily-verse';
import crypto from 'node:crypto';
export const load: PageServerLoad = async ({ locals }) => {
// Use UTC date for initial SSR; client will fetch timezone-correct verse if needed
const dateStr = new Date().toISOString().split('T')[0];
const dailyVerse = await getVerseForDate(dateStr);
const correctBook = getBookById(dailyVerse.bookId) ?? null;
return {
dailyVerse,
correctBookId: dailyVerse.bookId,
correctBook,
user: locals.user,
session: locals.session
};

View File

@@ -1,8 +1,7 @@
<script lang="ts">
import { bibleBooks, type BibleBook } from "$lib/types/bible";
import type { PageProps } from "./$types";
import { browser } from "$app/environment";
import { enhance } from "$app/forms";
import VerseDisplay from "$lib/components/VerseDisplay.svelte";
import SearchInput from "$lib/components/SearchInput.svelte";
@@ -12,47 +11,45 @@
import TitleAnimation from "$lib/components/TitleAnimation.svelte";
import DevButtons from "$lib/components/DevButtons.svelte";
import AuthModal from "$lib/components/AuthModal.svelte";
import { getGrade } from "$lib/utils/game";
import { enhance } from "$app/forms";
interface Guess {
book: BibleBook;
testamentMatch: boolean;
sectionMatch: boolean;
adjacent: boolean;
firstLetterMatch: boolean;
}
import { evaluateGuess, getGrade } from "$lib/utils/game";
import {
generateShareText,
shareResult,
copyToClipboard as clipboardCopy,
} from "$lib/utils/share";
import {
submitCompletion,
fetchExistingStats,
type StatsData,
} from "$lib/utils/stats-client";
import { createGamePersistence } from "$lib/stores/game-persistence.svelte";
let { data }: PageProps = $props();
let dailyVerse = $state(data.dailyVerse);
let correctBookId = $state(data.correctBookId);
let correctBook = $state(data.correctBook);
let dailyVerse = $derived(data.dailyVerse);
let correctBookId = $derived(data.correctBookId);
let correctBook = $derived(data.correctBook);
let user = $derived(data.user);
let session = $derived(data.session);
let guesses = $state<Guess[]>([]);
let searchQuery = $state("");
let copied = $state(false);
let isDev = $state(false);
let chapterGuessCompleted = $state(false);
let chapterCorrect = $state(false);
let anonymousId = $state("");
let statsSubmitted = $state(false);
let authModalOpen = $state(false);
let statsData = $state<{
solveRank: number;
guessRank: number;
totalSolves: number;
averageGuesses: number;
tiedCount: number;
percentile: number;
} | null>(null);
let showWinScreen = $state(false);
let statsData = $state<StatsData | null>(null);
let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
const persistence = createGamePersistence(
() => dailyVerse.date,
() => dailyVerse.reference,
() => correctBookId,
() => user?.id,
);
let guessedIds = $derived(
new Set(persistence.guesses.map((g) => g.book.id)),
);
const currentDate = $derived(
new Date().toLocaleDateString("en-US", {
@@ -63,76 +60,33 @@
}),
);
let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
let showWinScreen = $state(false);
let isWon = $derived(
persistence.guesses.some((g) => g.book.id === correctBookId),
);
let grade = $derived(
isWon
? guesses.length === 1 && chapterCorrect
? persistence.guesses.length === 1 && persistence.chapterCorrect
? "S++"
: getGrade(
guesses.length,
getBookById(correctBookId)?.popularity ?? 0,
)
: getGrade(persistence.guesses.length)
: "",
);
let blurChapter = $derived(
isWon && guesses.length === 1 && !chapterGuessCompleted,
isWon &&
persistence.guesses.length === 1 &&
!persistence.chapterGuessCompleted,
);
function getBookById(id: string): BibleBook | undefined {
return bibleBooks.find((b) => b.id === id);
}
async function submitGuess(bookId: string) {
if (persistence.guesses.some((g) => g.book.id === bookId)) return;
function isAdjacent(id1: string, id2: string): boolean {
const b1 = getBookById(id1);
const b2 = getBookById(id2);
return !!(b1 && b2 && Math.abs(b1.order - b2.order) === 1);
}
const guess = evaluateGuess(bookId, correctBookId);
if (!guess) return;
function getFirstLetter(bookName: string): string {
const match = bookName.match(/[a-zA-Z]/);
return match ? match[0] : bookName[0];
}
function submitGuess(bookId: string) {
if (guesses.some((g) => g.book.id === bookId)) return;
const book = getBookById(bookId);
if (!book) return;
const correctBook = getBookById(correctBookId);
if (!correctBook) return;
const testamentMatch = book.testament === correctBook.testament;
const sectionMatch = book.section === correctBook.section;
const adjacent = isAdjacent(bookId, correctBookId);
// Special case: if correct book is in the Epistles + starts with "1",
// any guess starting with "1" counts as first letter match
const correctIsEpistlesWithNumber =
(correctBook.section === "Pauline Epistles" ||
correctBook.section === "General Epistles") &&
correctBook.name[0] === "1";
const guessIsEpistlesWithNumber =
(book.section === "Pauline Epistles" ||
book.section === "General Epistles") &&
book.name[0] === "1";
const firstLetterMatch =
correctIsEpistlesWithNumber && guessIsEpistlesWithNumber
? true
: getFirstLetter(book.name).toUpperCase() ===
getFirstLetter(correctBook.name).toUpperCase();
console.log(
`Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`,
);
if (guesses.length === 0) {
if (persistence.guesses.length === 0) {
const key = `bibdle-first-guess-${dailyVerse.date}`;
if (
localStorage.getItem(key) !== "true" &&
browser &&
localStorage.getItem(key) !== "true" &&
(window as any).umami
) {
(window as any).umami.track("First guess");
@@ -140,44 +94,24 @@
}
}
guesses = [
{
book,
testamentMatch,
sectionMatch,
adjacent,
firstLetterMatch,
},
...guesses,
];
persistence.guesses = [guess, ...persistence.guesses];
searchQuery = "";
}
function generateUUID(): string {
// Try native randomUUID if available
if (typeof window.crypto.randomUUID === "function") {
return window.crypto.randomUUID();
if (
guess.book.id === correctBookId &&
browser &&
persistence.anonymousId
) {
statsData = await submitCompletion({
anonymousId: persistence.anonymousId,
date: dailyVerse.date,
guessCount: persistence.guesses.length,
guesses: persistence.guesses.map((g) => g.book.id),
});
if (statsData) {
persistence.markStatsSubmitted();
}
}
// Fallback UUID v4 generator for older browsers
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
const r =
window.crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0;
const v = c === "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
}
function getOrCreateAnonymousId(): string {
if (!browser) return "";
const key = "bibdle-anonymous-id";
let id = localStorage.getItem(key);
if (!id) {
id = generateUUID();
localStorage.setItem(key, id);
}
return id;
}
// If server date doesn't match client's local date, fetch timezone-correct verse
@@ -185,33 +119,17 @@
if (!browser) return;
const localDate = new Date().toLocaleDateString("en-CA");
console.log("Date check:", {
localDate,
verseDate: dailyVerse.date,
match: dailyVerse.date === localDate,
});
if (dailyVerse.date === localDate) return;
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
console.log("Fetching timezone-correct verse:", {
localDate,
timezone,
});
fetch("/api/daily-verse", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
date: localDate,
timezone,
}),
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ date: localDate, timezone }),
})
.then((res) => res.json())
.then((result) => {
console.log("Received verse data:", result);
dailyVerse = result.dailyVerse;
correctBookId = result.correctBookId;
correctBook = result.correctBook;
@@ -243,36 +161,6 @@
);
});
// Initialize anonymous ID
$effect(() => {
if (!browser) return;
// CRITICAL: If user is logged in, ALWAYS use their user ID
// Never use the localStorage anonymous ID for authenticated users
if (user) {
anonymousId = user.id;
} else {
anonymousId = getOrCreateAnonymousId();
}
if ((window as any).umami) {
(window as any).umami.identify(anonymousId);
}
const statsKey = `bibdle-stats-submitted-${dailyVerse.date}`;
statsSubmitted = localStorage.getItem(statsKey) === "true";
const chapterGuessKey = `bibdle-chapter-guess-${dailyVerse.reference}`;
chapterGuessCompleted = localStorage.getItem(chapterGuessKey) !== null;
if (chapterGuessCompleted) {
const saved = localStorage.getItem(chapterGuessKey);
if (saved) {
const data = JSON.parse(saved);
const match = dailyVerse.reference.match(/\s(\d+):/);
const correctChapter = match ? parseInt(match[1], 10) : 1;
chapterCorrect = data.selectedChapter === correctChapter;
}
}
});
$effect(() => {
if (!browser) return;
isDev =
@@ -280,145 +168,47 @@
window.location.host === "test.bibdle.com";
});
// Load saved guesses
// Fetch stats on page load if user already won in a previous session (same device)
$effect(() => {
if (!browser) return;
const key = `bibdle-guesses-${dailyVerse.date}`;
const saved = localStorage.getItem(key);
if (saved) {
let savedIds: string[] = JSON.parse(saved);
savedIds = Array.from(new Set(savedIds));
guesses = savedIds.map((bookId: string) => {
const book = getBookById(bookId)!;
const correctBook = getBookById(correctBookId)!;
const testamentMatch = book.testament === correctBook.testament;
const sectionMatch = book.section === correctBook.section;
const adjacent = isAdjacent(bookId, correctBookId);
// Apply same first letter logic as in submitGuess
const correctIsEpistlesWithNumber =
(correctBook.section === "Pauline Epistles" ||
correctBook.section === "General Epistles") &&
correctBook.name[0] === "1";
const guessIsEpistlesWithNumber =
(book.section === "Pauline Epistles" ||
book.section === "General Epistles") &&
book.name[0] === "1";
const firstLetterMatch =
correctIsEpistlesWithNumber && guessIsEpistlesWithNumber
? true
: getFirstLetter(book.name).toUpperCase() ===
getFirstLetter(correctBook.name).toUpperCase();
return {
book,
testamentMatch,
sectionMatch,
adjacent,
firstLetterMatch,
};
});
}
});
$effect(() => {
if (!browser) return;
localStorage.setItem(
`bibdle-guesses-${dailyVerse.date}`,
JSON.stringify(guesses.map((g) => g.book.id)),
);
});
// Auto-submit stats when user wins
$effect(() => {
console.log("Stats effect triggered:", {
browser,
isWon,
anonymousId,
statsSubmitted,
statsData,
if (
!browser ||
!isWon ||
!persistence.anonymousId ||
statsData ||
!persistence.statsSubmitted
)
return;
fetchExistingStats({
anonymousId: persistence.anonymousId,
date: dailyVerse.date,
}).then((data) => {
statsData = data;
});
});
if (!browser || !isWon || !anonymousId || statsData) {
console.log("Basic conditions not met");
// For logged-in users on a new device: restore today's game state from the server
let crossDeviceCheckDate = $state<string | null>(null);
$effect(() => {
if (
!browser ||
!user ||
!dailyVerse?.date ||
isWon ||
crossDeviceCheckDate === dailyVerse.date ||
!persistence.anonymousId
)
return;
}
if (statsSubmitted && !statsData) {
console.log("Fetching existing stats...");
(async () => {
try {
const response = await fetch(
`/api/submit-completion?anonymousId=${anonymousId}&date=${dailyVerse.date}`,
);
const result = await response.json();
console.log("Stats response:", result);
if (result.success && result.stats) {
console.log("Setting stats data:", result.stats);
statsData = result.stats;
localStorage.setItem(
`bibdle-stats-submitted-${dailyVerse.date}`,
"true",
);
} else if (result.error) {
console.error("Server error:", result.error);
} else {
console.error("Unexpected response format:", result);
}
} catch (err) {
console.error("Stats fetch failed:", err);
}
})();
return;
}
console.log("Submitting stats...");
async function submitStats() {
try {
const payload = {
anonymousId: anonymousId, // Already set correctly in $effect above
date: dailyVerse.date,
guessCount: guesses.length,
};
console.log("Sending POST request with:", payload);
const response = await fetch("/api/submit-completion", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(payload),
});
const result = await response.json();
console.log("Stats response:", result);
if (result.success && result.stats) {
console.log("Setting stats data:", result.stats);
statsData = result.stats;
statsSubmitted = true;
localStorage.setItem(
`bibdle-stats-submitted-${dailyVerse.date}`,
"true",
);
} else if (result.error) {
console.error("Server error:", result.error);
} else {
console.error("Unexpected response format:", result);
}
} catch (err) {
console.error("Stats submission failed:", err);
crossDeviceCheckDate = dailyVerse.date;
fetchExistingStats({
anonymousId: persistence.anonymousId,
date: dailyVerse.date,
}).then((data) => {
if (data?.guesses?.length) {
persistence.hydrateFromServer(data.guesses);
statsData = data;
persistence.markStatsSubmitted();
}
}
submitStats();
});
});
// Delay showing win screen until GuessesTable animation completes
@@ -428,114 +218,39 @@
return;
}
// Check if user already won today (page reload case)
const winTrackedKey = `bibdle-win-tracked-${dailyVerse.date}`;
const alreadyWonToday =
browser && localStorage.getItem(winTrackedKey) === "true";
if (alreadyWonToday) {
// User already won and is refreshing - show immediately
if (persistence.isWinAlreadyTracked()) {
showWinScreen = true;
} else {
// User just won this session - delay for animation
// Animation timing: last column starts at 1500ms, animation takes 600ms
const animationDelay = 1800;
const timeoutId = setTimeout(() => {
showWinScreen = true;
}, animationDelay);
return () => clearTimeout(timeoutId);
}
});
// Track win analytics
$effect(() => {
if (!browser || !isWon) return;
const key = `bibdle-win-tracked-${dailyVerse.date}`;
if (localStorage.getItem(key) === "true") return;
if ((window as any).umami) {
const isNew = persistence.markWinTracked();
if (isNew && (window as any).umami) {
(window as any).umami.track("Guessed correctly", {
totalGuesses: guesses.length,
totalGuesses: persistence.guesses.length,
});
}
localStorage.setItem(key, "true");
});
function generateShareText(): string {
const emojis = guesses
.slice()
.reverse()
.map((guess) => {
if (guess.book.id === correctBookId) return "✅";
if (guess.adjacent) return "‼️";
if (guess.sectionMatch) return "🟩";
if (guess.testamentMatch) return "🟧";
return "🟥";
})
.join("");
const dateFormatter = new Intl.DateTimeFormat("en-US", {
month: "short",
day: "numeric",
year: "numeric",
function getShareText(): string {
return generateShareText({
guesses: persistence.guesses,
correctBookId,
dailyVerseDate: dailyVerse.date,
grade,
chapterCorrect: persistence.chapterCorrect,
isLoggedIn: !!user,
userStreak: user ? (user as any).streak : undefined,
origin: window.location.origin,
});
const formattedDate = dateFormatter.format(
new Date(`${dailyVerse.date}T00:00:00`),
);
const siteUrl = window.location.origin;
// Use scroll emoji for logged-in users, book emoji for anonymous
const bookEmoji = user ? "📜" : "📖";
const lines = [
`${bookEmoji} Bibdle | ${formattedDate} ${bookEmoji}`,
`${grade} (${guesses.length} ${guesses.length === 1 ? "guess" : "guesses"})`,
];
// Add streak for logged-in users (requires streak field in user data)
if (user && (user as any).streak !== undefined) {
lines.push(`🔥 ${(user as any).streak} day streak`);
}
lines.push(
`${emojis}${guesses.length === 1 && chapterCorrect ? " ⭐" : ""}`,
siteUrl,
);
return lines.join("\n");
}
async function share() {
if (!browser) return;
const shareText = generateShareText();
try {
if ("share" in navigator) {
await (navigator as any).share({ text: shareText });
} else {
await (navigator as any).clipboard.writeText(shareText);
}
} catch (err) {
console.error("Share failed:", err);
throw err;
}
}
async function copyToClipboard() {
if (!browser) return;
const shareText = generateShareText();
try {
await (navigator as any).clipboard.writeText(shareText);
copied = true;
setTimeout(() => {
copied = false;
}, 5000);
} catch (err) {
console.error("Copy to clipboard failed:", err);
throw err;
}
}
function handleShare() {
@@ -544,7 +259,7 @@
if (useClipboard) {
copied = true;
}
share()
shareResult(getShareText())
.then(() => {
if (useClipboard) {
setTimeout(() => {
@@ -558,14 +273,23 @@
}
});
}
async function handleCopyToClipboard() {
if (!browser) return;
try {
await clipboardCopy(getShareText());
copied = true;
setTimeout(() => {
copied = false;
}, 5000);
} catch (err) {
console.error("Copy to clipboard failed:", err);
}
}
</script>
<svelte:head>
<title>A daily bible game{isDev ? " (dev)" : ""}</title>
<!-- <meta
name="description"
content="Guess which book of the Bible a verse comes from."
/> -->
</svelte:head>
<div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 py-8">
@@ -598,32 +322,18 @@
{statsData}
{correctBookId}
{handleShare}
{copyToClipboard}
copyToClipboard={handleCopyToClipboard}
bind:copied
{statsSubmitted}
guessCount={guesses.length}
statsSubmitted={persistence.statsSubmitted}
guessCount={persistence.guesses.length}
reference={dailyVerse.reference}
onChapterGuessCompleted={() => {
chapterGuessCompleted = true;
const key = `bibdle-chapter-guess-${dailyVerse.reference}`;
const saved = localStorage.getItem(key);
if (saved) {
const data = JSON.parse(saved);
const match =
dailyVerse.reference.match(/\s(\d+):/);
const correctChapter = match
? parseInt(match[1], 10)
: 1;
chapterCorrect =
data.selectedChapter === correctChapter;
}
}}
onChapterGuessCompleted={persistence.onChapterGuessCompleted}
/>
</div>
{/if}
<div class="animate-fade-in-up animate-delay-600">
<GuessesTable {guesses} {correctBookId} />
<GuessesTable guesses={persistence.guesses} {correctBookId} />
</div>
{#if isWon}
@@ -638,7 +348,7 @@
<a
href="/stats?{user
? `userId=${user.id}`
: `anonymousId=${anonymousId}`}&tz={encodeURIComponent(
: `anonymousId=${persistence.anonymousId}`}&tz={encodeURIComponent(
Intl.DateTimeFormat().resolvedOptions().timeZone,
)}"
class="inline-flex items-center justify-center px-4 py-2 bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors text-sm font-medium shadow-md"
@@ -684,7 +394,9 @@
? `Expires ${session.expiresAt.toLocaleDateString()}`
: "No session"}
</div>
<div>Anonymous ID: {anonymousId || "Not set"}</div>
<div>
Anonymous ID: {persistence.anonymousId || "Not set"}
</div>
<div>
Client Local Time: {new Date().toLocaleString("en-US", {
timeZone:
@@ -706,4 +418,4 @@
</div>
</div>
<AuthModal bind:isOpen={authModalOpen} {anonymousId} />
<AuthModal bind:isOpen={authModalOpen} anonymousId={persistence.anonymousId} />

23
src/routes/+page.ts Normal file
View File

@@ -0,0 +1,23 @@
import type { PageLoad } from './$types';
// Disable SSR so the load function runs on the client with the correct local date
export const ssr = false;
export const load: PageLoad = async ({ fetch, data }) => {
const localDate = new Date().toLocaleDateString("en-CA");
const res = await fetch('/api/daily-verse', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ date: localDate }),
});
const result = await res.json();
return {
...data,
dailyVerse: result.dailyVerse,
correctBookId: result.correctBookId,
correctBook: result.correctBook,
};
};

View File

@@ -7,8 +7,11 @@ export const POST: RequestHandler = async ({ request }) => {
const body = await request.json();
const { date } = body;
// Use the date provided by the client (already calculated in their timezone)
const dateStr = date || new Date().toISOString().split('T')[0];
if (!date || !/^\d{4}-\d{2}-\d{2}$/.test(date)) {
return json({ error: 'A valid date (YYYY-MM-DD) is required' }, { status: 400 });
}
const dateStr = date;
const dailyVerse = await getVerseForDate(dateStr);
const correctBook = getBookById(dailyVerse.bookId) ?? null;

View File

@@ -0,0 +1,63 @@
import type { RequestHandler } from './$types';
import { db } from '$lib/server/db';
import { dailyCompletions } from '$lib/server/db/schema';
import { and, eq, asc } from 'drizzle-orm';
import { json } from '@sveltejs/kit';
export const GET: RequestHandler = async ({ url }) => {
try {
const anonymousId = url.searchParams.get('anonymousId');
const date = url.searchParams.get('date');
if (!anonymousId || !date) {
return json({ error: 'Invalid data' }, { status: 400 });
}
const userCompletions = await db
.select()
.from(dailyCompletions)
.where(and(
eq(dailyCompletions.anonymousId, anonymousId),
eq(dailyCompletions.date, date)
))
.limit(1);
if (userCompletions.length === 0) {
return json({ error: 'No completion found' }, { status: 404 });
}
const userCompletion = userCompletions[0];
const guessCount = userCompletion.guessCount;
const allCompletions = await db
.select()
.from(dailyCompletions)
.where(eq(dailyCompletions.date, date))
.orderBy(asc(dailyCompletions.completedAt));
const totalSolves = allCompletions.length;
const solveRank = allCompletions.findIndex(c => c.anonymousId === anonymousId) + 1;
const betterGuesses = allCompletions.filter(c => c.guessCount < guessCount).length;
const guessRank = betterGuesses + 1;
const tiedCount = allCompletions.filter(c => c.guessCount === guessCount && c.anonymousId !== anonymousId).length;
const totalGuesses = allCompletions.reduce((sum, c) => sum + c.guessCount, 0);
const averageGuesses = Math.round((totalGuesses / totalSolves) * 10) / 10;
const betterOrEqualCount = allCompletions.filter(c => c.guessCount <= guessCount).length;
const percentile = Math.round((betterOrEqualCount / totalSolves) * 100);
const guesses = userCompletion.guesses ? JSON.parse(userCompletion.guesses) : undefined;
return json({
success: true,
stats: { solveRank, guessRank, totalSolves, averageGuesses, tiedCount, percentile, guesses }
});
} catch (err) {
console.error('Error fetching stats:', err);
return json({ error: 'Failed to fetch stats' }, { status: 500 });
}
};

View File

@@ -1,13 +1,13 @@
import type { RequestHandler } from './$types';
import { db } from '$lib/server/db';
import { dailyCompletions } from '$lib/server/db/schema';
import { and, eq, asc } from 'drizzle-orm';
import { eq, asc } from 'drizzle-orm';
import { json } from '@sveltejs/kit';
import crypto from 'node:crypto';
export const POST: RequestHandler = async ({ request }) => {
try {
const { anonymousId, date, guessCount } = await request.json();
const { anonymousId, date, guessCount, guesses } = await request.json();
// Validation
if (!anonymousId || !date || typeof guessCount !== 'number' || guessCount < 1) {
@@ -23,6 +23,7 @@ export const POST: RequestHandler = async ({ request }) => {
anonymousId,
date,
guessCount,
guesses: Array.isArray(guesses) ? JSON.stringify(guesses) : null,
completedAt,
});
} catch (err: any) {
@@ -68,67 +69,3 @@ export const POST: RequestHandler = async ({ request }) => {
return json({ error: 'Failed to submit completion' }, { status: 500 });
}
};
export const GET: RequestHandler = async ({ url }) => {
try {
const anonymousId = url.searchParams.get('anonymousId');
const date = url.searchParams.get('date');
if (!anonymousId || !date) {
return json({ error: 'Invalid data' }, { status: 400 });
}
const userCompletions = await db
.select()
.from(dailyCompletions)
.where(and(
eq(dailyCompletions.anonymousId, anonymousId),
eq(dailyCompletions.date, date)
))
.limit(1);
if (userCompletions.length === 0) {
return json({ error: 'No completion found' }, { status: 404 });
}
const userCompletion = userCompletions[0];
const guessCount = userCompletion.guessCount;
// Calculate statistics
const allCompletions = await db
.select()
.from(dailyCompletions)
.where(eq(dailyCompletions.date, date))
.orderBy(asc(dailyCompletions.completedAt));
const totalSolves = allCompletions.length;
// Solve rank: position in time-ordered list
const solveRank = allCompletions.findIndex(c => c.anonymousId === anonymousId) + 1;
// Guess rank: count how many had FEWER guesses (ties get same rank)
const betterGuesses = allCompletions.filter(c => c.guessCount < guessCount).length;
const guessRank = betterGuesses + 1;
// Count ties: how many have the SAME guessCount (excluding self)
const tiedCount = allCompletions.filter(c => c.guessCount === guessCount && c.anonymousId !== anonymousId).length;
// Average guesses
const totalGuesses = allCompletions.reduce((sum, c) => sum + c.guessCount, 0);
const averageGuesses = Math.round((totalGuesses / totalSolves) * 10) / 10;
// Percentile: what percentage of people you beat (100 - your rank percentage)
const betterOrEqualCount = allCompletions.filter(c => c.guessCount <= guessCount).length;
const percentile = Math.round((betterOrEqualCount / totalSolves) * 100);
return json({
success: true,
stats: { solveRank, guessRank, totalSolves, averageGuesses, tiedCount, percentile }
});
} catch (err) {
console.error('Error fetching stats:', err);
return json({ error: 'Failed to fetch stats' }, { status: 500 });
}
};

View File

@@ -10,9 +10,8 @@ const config = {
kit: {
adapter: adapter(),
csrf: {
// Disabled because Apple Sign In uses cross-origin form_post.
// The Apple callback route has its own CSRF protection via state + cookie.
checkOrigin: false
// Allow Apple Sign In cross-origin form_post callback
trustedOrigins: ['https://appleid.apple.com']
}
}
};