Visual fixes, typo fixes, and updated todo + metadata

This commit is contained in:
George Powell
2025-12-27 00:48:06 -05:00
parent d8cff2ff7a
commit 54c7e3cdbb
6 changed files with 396 additions and 364 deletions

3
.gitignore vendored
View File

@@ -27,3 +27,6 @@ vite.config.ts.timestamp-*
llms-*
engwebu_usfx.xml
embeddings-cache-L12.json
embeddings-cache-L6.json

View File

@@ -20271,7 +20271,7 @@
<chapter number="56">
<verse number="1">Thus says the Lord: “Keep justice, and do righteousness, For My salvation is about to come, And My righteousness to be revealed.</verse>
<verse number="2">Blessed is the man who does this, And the son of man who lays hold on it; Who keeps from defiling the Sabbath, And keeps his hand from doing any evil.”</verse>
<verse number="3">Do not let the son of the foreigner Who has joined himself to the LordSpeak, saying, “The Lord has utterly separated me from His people”; Nor let the eunuch say, “Here I am, a dry tree.”</verse>
<verse number="3">Do not let the son of the foreigner Who has joined himself to the Lord speak, saying, “The Lord has utterly separated me from His people”; Nor let the eunuch say, “Here I am, a dry tree.”</verse>
<verse number="4">For thus says the Lord: “To the eunuchs who keep My Sabbaths, And choose what pleases Me, And hold fast My covenant,</verse>
<verse number="5">Even to them I will give in My house And within My walls a place and a name Better than that of sons and daughters; I will give them an everlasting name That shall not be cut off.</verse>
<verse number="6">“Also the sons of the foreigner Who join themselves to the Lord, to serve Him, And to love the name of the Lord, to be His servants— Everyone who keeps from defiling the Sabbath, And holds fast My covenant—</verse>

View File

@@ -6,13 +6,16 @@
let displayReference = $derived(
dailyVerse.reference.replace(/^Psalms /, "Psalm ")
);
let displayVerseText = $derived(
dailyVerse.verseText.replace(/^([a-z])/, (c) => c.toUpperCase())
);
</script>
<div class="bg-gray-50 rounded-2xl shadow-xl p-8 sm:p-12 mb-4 sm:mb-12 w-full">
<blockquote
class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
>
{dailyVerse.verseText}
{displayVerseText}
</blockquote>
{#if isWon}
<p class="text-center text-lg! big-text text-green-600! font-bold mt-8">

View File

@@ -167,8 +167,8 @@
{statsData.averageGuesses}
</div>
<div class="text-xs sm:text-sm opacity-90 mt-1">
People guessed correctly after {statsData.averageGuesses} guesses on
average
People guessed correctly after {statsData.averageGuesses}
{statsData.averageGuesses === 1 ? "guess" : "guesses"} on average
</div>
</div>
</div>

View File

@@ -1,417 +1,421 @@
<script lang="ts">
import { bibleBooks, type BibleBook } from "$lib/types/bible";
import { bibleBooks, type BibleBook } from "$lib/types/bible";
import type { PageProps } from "./$types";
import { browser } from "$app/environment";
import type { PageProps } from "./$types";
import { browser } from "$app/environment";
import VerseDisplay from "$lib/components/VerseDisplay.svelte";
import SearchInput from "$lib/components/SearchInput.svelte";
import GuessesTable from "$lib/components/GuessesTable.svelte";
import CountdownTimer from "$lib/components/CountdownTimer.svelte";
import WinScreen from "$lib/components/WinScreen.svelte";
import Feedback from "$lib/components/Feedback.svelte";
import TitleAnimation from "$lib/components/TitleAnimation.svelte";
import { getGrade } from "$lib/utils/game";
import VerseDisplay from "$lib/components/VerseDisplay.svelte";
import SearchInput from "$lib/components/SearchInput.svelte";
import GuessesTable from "$lib/components/GuessesTable.svelte";
import CountdownTimer from "$lib/components/CountdownTimer.svelte";
import WinScreen from "$lib/components/WinScreen.svelte";
import Feedback from "$lib/components/Feedback.svelte";
import TitleAnimation from "$lib/components/TitleAnimation.svelte";
import { getGrade } from "$lib/utils/game";
interface Guess {
book: BibleBook;
testamentMatch: boolean;
sectionMatch: boolean;
adjacent: boolean;
}
interface Guess {
book: BibleBook;
testamentMatch: boolean;
sectionMatch: boolean;
adjacent: boolean;
}
let { data }: PageProps = $props();
let { data }: PageProps = $props();
let dailyVerse = $derived(data.dailyVerse);
let correctBookId = $derived(data.correctBookId);
let dailyVerse = $derived(data.dailyVerse);
let correctBookId = $derived(data.correctBookId);
let guesses = $state<Guess[]>([]);
let guesses = $state<Guess[]>([]);
let searchQuery = $state("");
let searchQuery = $state("");
let copied = $state(false);
let isDev = $state(false);
let copied = $state(false);
let isDev = $state(false);
let anonymousId = $state("");
let statsSubmitted = $state(false);
let statsData = $state<{
solveRank: number;
guessRank: number;
totalSolves: number;
averageGuesses: number;
} | null>(null);
let anonymousId = $state("");
let statsSubmitted = $state(false);
let statsData = $state<{
solveRank: number;
guessRank: number;
totalSolves: number;
averageGuesses: number;
} | null>(null);
let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
const currentDate = $derived(
new Date().toLocaleDateString("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
})
);
const currentDate = $derived(
new Date().toLocaleDateString("en-US", {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
}),
);
let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
let grade = $derived(
isWon
? getGrade(guesses.length, getBookById(correctBookId)?.popularity ?? 0)
: ""
);
let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
let grade = $derived(
isWon
? getGrade(
guesses.length,
getBookById(correctBookId)?.popularity ?? 0,
)
: "",
);
function getBookById(id: string): BibleBook | undefined {
return bibleBooks.find((b) => b.id === id);
}
function getBookById(id: string): BibleBook | undefined {
return bibleBooks.find((b) => b.id === id);
}
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);
}
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);
}
function submitGuess(bookId: string) {
if (guesses.some((g) => g.book.id === bookId)) return;
function submitGuess(bookId: string) {
if (guesses.some((g) => g.book.id === bookId)) return;
const book = getBookById(bookId);
if (!book) return;
const book = getBookById(bookId);
if (!book) return;
const correctBook = getBookById(correctBookId);
if (!correctBook) return;
const correctBook = getBookById(correctBookId);
if (!correctBook) return;
const testamentMatch = book.testament === correctBook.testament;
const sectionMatch = book.section === correctBook.section;
const adjacent = isAdjacent(book.id, correctBookId);
const testamentMatch = book.testament === correctBook.testament;
const sectionMatch = book.section === correctBook.section;
const adjacent = isAdjacent(book.id, correctBookId);
console.log(
`Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`
);
console.log(
`Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`,
);
guesses = [
{
book,
testamentMatch,
sectionMatch,
adjacent,
},
...guesses,
];
guesses = [
{
book,
testamentMatch,
sectionMatch,
adjacent,
},
...guesses,
];
searchQuery = "";
}
searchQuery = "";
}
function generateUUID(): string {
// Try native randomUUID if available
if (typeof window.crypto.randomUUID === "function") {
return window.crypto.randomUUID();
}
function generateUUID(): string {
// Try native randomUUID if available
if (typeof window.crypto.randomUUID === "function") {
return window.crypto.randomUUID();
}
// 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);
});
}
// 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;
}
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;
}
// Initialize anonymous ID
$effect(() => {
if (!browser) return;
anonymousId = getOrCreateAnonymousId();
const statsKey = `bibdle-stats-submitted-${dailyVerse.date}`;
statsSubmitted = localStorage.getItem(statsKey) === "true";
});
// Initialize anonymous ID
$effect(() => {
if (!browser) return;
anonymousId = getOrCreateAnonymousId();
const statsKey = `bibdle-stats-submitted-${dailyVerse.date}`;
statsSubmitted = localStorage.getItem(statsKey) === "true";
});
$effect(() => {
if (!browser) return;
isDev = window.location.host === "localhost:5173";
});
$effect(() => {
if (!browser) return;
isDev = window.location.host === "localhost:5173";
});
// Load saved guesses
$effect(() => {
if (!browser) return;
// Load saved guesses
$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);
return {
book,
testamentMatch,
sectionMatch,
adjacent,
};
});
}
});
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);
return {
book,
testamentMatch,
sectionMatch,
adjacent,
};
});
}
});
$effect(() => {
if (!browser) return;
localStorage.setItem(
`bibdle-guesses-${dailyVerse.date}`,
JSON.stringify(guesses.map((g) => g.book.id))
);
});
$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,
});
// Auto-submit stats when user wins
$effect(() => {
console.log("Stats effect triggered:", {
browser,
isWon,
anonymousId,
statsSubmitted,
statsData,
});
if (!browser || !isWon || !anonymousId) {
console.log("Basic conditions not met");
return;
}
if (!browser || !isWon || !anonymousId) {
console.log("Basic conditions not met");
return;
}
if (statsSubmitted && !statsData) {
console.log("Fetching existing stats...");
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);
(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);
}
})();
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;
}
return;
}
console.log("Submitting stats...");
console.log("Submitting stats...");
async function submitStats() {
try {
const payload = {
anonymousId,
date: dailyVerse.date,
guessCount: guesses.length,
};
async function submitStats() {
try {
const payload = {
anonymousId,
date: dailyVerse.date,
guessCount: guesses.length,
};
console.log("Sending POST request with:", payload);
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 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);
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);
}
}
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);
}
}
submitStats();
});
submitStats();
});
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("");
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",
});
const formattedDate = dateFormatter.format(
new Date(`${dailyVerse.date}T00:00:00`)
);
const siteUrl = window.location.origin;
return [
`📖 Bibdle | ${formattedDate} 📖`,
`${grade} (${guesses.length} ${guesses.length == 1 ? "guess" : "guesses"})`,
`${emojis}`,
siteUrl,
].join("\n");
}
const dateFormatter = new Intl.DateTimeFormat("en-US", {
month: "short",
day: "numeric",
year: "numeric",
});
const formattedDate = dateFormatter.format(
new Date(`${dailyVerse.date}T00:00:00`),
);
const siteUrl = window.location.origin;
return [
`📖 Bibdle | ${formattedDate} 📖`,
`${grade} (${guesses.length} ${guesses.length == 1 ? "guess" : "guesses"})`,
`${emojis}`,
siteUrl,
].join("\n");
}
async function share() {
if (!browser) return;
async function share() {
if (!browser) return;
const shareText = generateShareText();
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;
}
}
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;
async function copyToClipboard() {
if (!browser) return;
const shareText = generateShareText();
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;
}
}
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() {
if (copied || !browser) return;
const useClipboard = !("share" in navigator);
if (useClipboard) {
copied = true;
}
share()
.then(() => {
if (useClipboard) {
setTimeout(() => {
copied = false;
}, 5000);
}
})
.catch(() => {
if (useClipboard) {
copied = false;
}
});
}
function handleShare() {
if (copied || !browser) return;
const useClipboard = !("share" in navigator);
if (useClipboard) {
copied = true;
}
share()
.then(() => {
if (useClipboard) {
setTimeout(() => {
copied = false;
}, 5000);
}
})
.catch(() => {
if (useClipboard) {
copied = false;
}
});
}
function clearLocalStorage() {
if (!browser) return;
// Clear all bibdle-related localStorage items
const keysToRemove: string[] = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key && key.startsWith("bibdle-")) {
keysToRemove.push(key);
}
}
keysToRemove.forEach((key) => localStorage.removeItem(key));
// Reload the page to reset state
window.location.reload();
}
function clearLocalStorage() {
if (!browser) return;
// Clear all bibdle-related localStorage items
const keysToRemove: string[] = [];
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key && key.startsWith("bibdle-")) {
keysToRemove.push(key);
}
}
keysToRemove.forEach((key) => localStorage.removeItem(key));
// Reload the page to reset state
window.location.reload();
}
</script>
<svelte:head>
<title>Bibdle &mdash; A daily bible game{isDev ? " (dev)" : ""}</title>
<meta
name="description"
content="A Wordle-inspired Bible game (short for Bible Daily)"
/>
<title>Bibdle &mdash; 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">
<div class="w-full max-w-3xl mx-auto px-4">
<h1
class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-4"
>
<TitleAnimation />
<div class="font-normal"></div>
</h1>
<div class="text-center mb-8">
<span class="big-text"
>{isDev ? "Dev Edition | " : ""}{currentDate}</span
>
</div>
<div class="w-full max-w-3xl mx-auto px-4">
<h1
class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-4"
>
<TitleAnimation />
<div class="font-normal"></div>
</h1>
<div class="text-center mb-8">
<span class="big-text"
>{isDev ? "Dev Edition | " : ""}{currentDate}</span
>
</div>
<VerseDisplay {data} {isWon} />
<VerseDisplay {data} {isWon} />
{#if !isWon}
<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
{:else}
<WinScreen
{grade}
{statsData}
{correctBookId}
{handleShare}
{copyToClipboard}
bind:copied
{statsSubmitted}
guessCount={guesses.length}
/>
<CountdownTimer />
{/if}
{#if !isWon}
<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
{:else}
<WinScreen
{grade}
{statsData}
{correctBookId}
{handleShare}
{copyToClipboard}
bind:copied
{statsSubmitted}
guessCount={guesses.length}
/>
<CountdownTimer />
{/if}
<GuessesTable {guesses} {correctBookId} />
{#if isWon}
<Feedback />
{/if}
{#if isDev}
<button
onclick={clearLocalStorage}
class="mt-4 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg text-sm font-bold transition-colors"
>
Clear LocalStorage
</button>
{/if}
</div>
<GuessesTable {guesses} {correctBookId} />
{#if isWon}
<Feedback />
{/if}
{#if isDev}
<button
onclick={clearLocalStorage}
class="mt-4 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg text-sm font-bold transition-colors"
>
Clear LocalStorage
</button>
{/if}
</div>
</div>

34
todo.md
View File

@@ -1,20 +1,36 @@
# in progress
- root menu: classic / imposter mode / impossible mode (complete today's classic and imposter modes to unlock)
# todo
- Difficulty levels
- difficult mode (guess old or new testament, first try _only_)
- impossible mode (1894 scrivener koine greek NT or some hebrew version for OT) three guesses only
- impossible mode (1904 greek bible) three guesses only.
- share both classic and impossible mode with both buttons
- "login to see your stats, unlock practice mode, and more"
- add imposter mode
- instructions
- classic mode: identify what book the verse is from (e.g. Genesis, John, Revelations...) in as few guesses as possible.
- imposter mode: out of four options, identify the verse that is not in the Bible
- impossible mode: identify which book of the bible the verse is from in less than three guesses.
- add login + saved stats + streak etc.
- add deuterocanonical books
<!-- Login features -->
- Practice mode: Unlimited verses
- Create public or private leaderboards
- Passport book with badges:
- Guess each Gospel first try
- "Guessed all Gospels", "Perfect week", "Old Testament expert"
- Theologian: Guess each book first try
- instructions
- difficult mode (guess old or new testament, first try _only_) (???)
# places to send
@@ -36,6 +52,12 @@ I created Bibdle from a combination of two things. The first is my lifelong desi
# done
## december 26th
- created embeddings for every bible verse (verse similarity finder)
- failed at having AI write a USFX format parser
- found a npm library for parsing USFX
## december 23rd
- switched to local copy of NKJV