mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-02-04 10:54:44 -05:00
v1.2
This commit is contained in:
George Powell
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
||||
@@ -1,316 +1,350 @@
|
||||
<script lang="ts">
|
||||
import { bibleBooks, type BibleBook } from "$lib/types/bible";
|
||||
import { bibleBooks, type BibleBook } from "$lib/types/bible";
|
||||
|
||||
interface Guess {
|
||||
book: BibleBook;
|
||||
testamentMatch: boolean;
|
||||
sectionMatch: boolean;
|
||||
adjacent: boolean;
|
||||
}
|
||||
interface Guess {
|
||||
book: BibleBook;
|
||||
testamentMatch: boolean;
|
||||
sectionMatch: boolean;
|
||||
adjacent: boolean;
|
||||
}
|
||||
|
||||
import type { PageProps } from "./$types";
|
||||
import { browser } from "$app/environment";
|
||||
import { fade } from "svelte/transition";
|
||||
import type { PageProps } from "./$types";
|
||||
import { browser } from "$app/environment";
|
||||
import { fade } from "svelte/transition";
|
||||
|
||||
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 copied = $state(false);
|
||||
|
||||
let filteredBooks = $derived(
|
||||
bibleBooks.filter((book) =>
|
||||
book.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
)
|
||||
);
|
||||
let filteredBooks = $derived(
|
||||
bibleBooks.filter((book) =>
|
||||
book.name.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
),
|
||||
);
|
||||
|
||||
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 getGrade(numGuesses: number, popularity: number): string {
|
||||
const difficulty = 14 - popularity;
|
||||
const performanceScore = Math.max(0, 10 - numGuesses);
|
||||
const totalScore = performanceScore + difficulty * 0.8;
|
||||
if (totalScore >= 14) return "🟢 S";
|
||||
if (totalScore >= 11) return "🟢 A";
|
||||
if (totalScore >= 8) return "🟡 B";
|
||||
if (totalScore >= 5) return "🟠 C";
|
||||
return "🔴 C-";
|
||||
}
|
||||
function getGrade(numGuesses: number, popularity: number): string {
|
||||
const difficulty = 14 - popularity;
|
||||
const performanceScore = Math.max(0, 10 - numGuesses);
|
||||
const totalScore = performanceScore + difficulty * 0.8;
|
||||
if (totalScore >= 14) return "🟢 S";
|
||||
if (totalScore >= 11) return "🟢 A";
|
||||
if (totalScore >= 8) return "🟡 B";
|
||||
if (totalScore >= 5) return "🟠 C";
|
||||
return "🔴 C-";
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (!browser) return;
|
||||
$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)),
|
||||
);
|
||||
});
|
||||
|
||||
async function share() {
|
||||
if (!browser) return;
|
||||
async function share() {
|
||||
if (!browser) return;
|
||||
|
||||
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 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;
|
||||
const shareText = [
|
||||
`📖 Bibdle | ${formattedDate} 📖`,
|
||||
`${grade} (${guesses.length} 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;
|
||||
const shareText = [
|
||||
`📖 Bibdle | ${formattedDate} 📖`,
|
||||
`${grade} (${guesses.length} guesses)`,
|
||||
`${emojis}\n`,
|
||||
siteUrl,
|
||||
].join("\n");
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(shareText);
|
||||
} catch (err) {
|
||||
console.error("Share failed:", 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;
|
||||
}
|
||||
}
|
||||
|
||||
function handleShare() {
|
||||
if (copied || !browser) return;
|
||||
copied = true;
|
||||
share()
|
||||
.then(() => {
|
||||
setTimeout(() => {
|
||||
copied = false;
|
||||
}, 5000);
|
||||
})
|
||||
.catch(() => {
|
||||
copied = false;
|
||||
});
|
||||
}
|
||||
function handleShare() {
|
||||
if (copied || !browser) return;
|
||||
copied = true;
|
||||
share()
|
||||
.then(() => {
|
||||
setTimeout(() => {
|
||||
copied = false;
|
||||
}, 5000);
|
||||
})
|
||||
.catch(() => {
|
||||
copied = false;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Bibdle</title>
|
||||
<title>Bibdle</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen bg-linear-to-br from-blue-50 to-indigo-100 py-8">
|
||||
<div
|
||||
class="max-w-md sm:max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto px-2 sm:px-4"
|
||||
>
|
||||
<h1
|
||||
class="text-3xl md:text-4xl font-bold text-center text-gray-800 mb-8 sm:mb-12 drop-shadow-lg"
|
||||
>
|
||||
Bibdle
|
||||
</h1>
|
||||
<div class="min-h-dvh bg-linear-to-br from-blue-50 to-indigo-100 py-8">
|
||||
<div
|
||||
class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] max-w-md sm:max-w-lg md:max-w-2xl lg:max-w-4xl mx-auto px-2 sm:px-4"
|
||||
>
|
||||
<h1
|
||||
class="text-3xl md:text-4xl font-bold text-center text-gray-800 p-8 sm:p-12 drop-shadow-lg"
|
||||
>
|
||||
Bibdle
|
||||
</h1>
|
||||
|
||||
<!-- Verse Display -->
|
||||
<div
|
||||
class="bg-white rounded-2xl shadow-xl p-8 sm:p-12 mb-8 sm:mb-12 max-w-full sm:max-w-2xl md:max-w-3xl mx-auto"
|
||||
>
|
||||
<blockquote
|
||||
class="text-xl sm:text-2xl leading-relaxed text-gray-700 italic text-center"
|
||||
>
|
||||
“{dailyVerse.verseText}”
|
||||
</blockquote>
|
||||
{#if !isWon}
|
||||
<!-- <p class="text-center text-sm text-gray-500 mt-4 font-medium">
|
||||
Guess the book!
|
||||
</p> -->
|
||||
{:else}
|
||||
<p class="text-center text-lg text-green-600 font-bold mt-4">
|
||||
{dailyVerse.reference}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- Verse Display -->
|
||||
<div
|
||||
class="bg-white rounded-2xl shadow-xl p-8 sm:p-12 mb-8 sm:mb-12 max-w-full sm:max-w-2xl md:max-w-3xl mx-auto"
|
||||
>
|
||||
<blockquote
|
||||
class="text-xl sm:text-2xl leading-relaxed text-gray-700 italic text-center"
|
||||
>
|
||||
{dailyVerse.verseText}
|
||||
</blockquote>
|
||||
{#if isWon}
|
||||
<p class="text-center text-lg text-green-600 font-bold mt-4">
|
||||
{dailyVerse.reference}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if !isWon}
|
||||
<!-- Book Search -->
|
||||
<div class="mb-12">
|
||||
<input
|
||||
bind:value={searchQuery}
|
||||
placeholder="Type to search books (e.g. 'Genesis', 'John')..."
|
||||
class="w-full p-4 sm:p-6 border-2 border-gray-200 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all shadow-lg"
|
||||
/>
|
||||
{#if searchQuery && filteredBooks.length > 0}
|
||||
<ul
|
||||
class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white border border-gray-200 rounded-2xl shadow-lg"
|
||||
>
|
||||
{#each filteredBooks as book}
|
||||
<li>
|
||||
<button
|
||||
class="w-full p-4 sm:p-5 text-left hover:bg-blue-50 hover:text-blue-700 transition-all border-b border-gray-100 last:border-b-0 flex items-center"
|
||||
onclick={() => submitGuess(book.id)}
|
||||
>
|
||||
<span class="font-semibold">{book.name}</span>
|
||||
<span class="ml-auto text-sm opacity-75"
|
||||
>({book.testament.toUpperCase()})</span
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else if searchQuery}
|
||||
<p class="mt-4 text-center text-gray-500 p-8">No books found</p>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="mb-12 p-8 sm:p-12 bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center"
|
||||
in:fade={{ delay: 500 }}
|
||||
>
|
||||
<h2 class="text-4xl font-black mb-4 drop-shadow-lg">
|
||||
🎉 Congratulations! 🎉
|
||||
</h2>
|
||||
<p class="text-lg sm:text-xl md:text-2xl mb-8">
|
||||
The verse is from <span
|
||||
class="font-black text-xl sm:text-2xl md:text-3xl"
|
||||
>{getBookById(correctBookId)?.name}</span
|
||||
>
|
||||
</p>
|
||||
<p class="text-xl opacity-90">{dailyVerse.reference}</p>
|
||||
<p
|
||||
class="text-2xl font-bold mt-6 p-2 bg-black/20 rounded-lg inline-block"
|
||||
>
|
||||
Your grade: {grade}
|
||||
</p>
|
||||
<button
|
||||
onclick={handleShare}
|
||||
class={`mt-4 text-2xl font-bold p-2 ${
|
||||
copied
|
||||
? "bg-green-400/50 hover:bg-green-500/60"
|
||||
: "bg-white/20 hover:bg-white/30"
|
||||
} rounded-lg inline-block transition-all shadow-lg mx-auto cursor-pointer border-none appearance-none`}
|
||||
>
|
||||
{copied ? "Copied! 📋" : "📤 Share"}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{#if !isWon}
|
||||
<!-- Book Search -->
|
||||
<div class="mb-12">
|
||||
<input
|
||||
bind:value={searchQuery}
|
||||
placeholder="Type to guess a book (e.g. 'Genesis', 'John')..."
|
||||
class="w-full p-4 sm:p-6 border-2 border-gray-200 rounded-2xl text-base sm:text-lg md:text-xl focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-100 transition-all shadow-lg"
|
||||
onkeydown={(e) => {
|
||||
if (e.key === "Enter" && filteredBooks.length > 0) {
|
||||
submitGuess(filteredBooks[0].id);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{#if searchQuery && filteredBooks.length > 0}
|
||||
<ul
|
||||
class="mt-4 max-h-60 sm:max-h-80 overflow-y-auto bg-white border border-gray-200 rounded-2xl shadow-lg"
|
||||
>
|
||||
{#each filteredBooks as book}
|
||||
<li>
|
||||
<button
|
||||
class="w-full p-4 sm:p-5 text-left hover:bg-blue-50 hover:text-blue-700 transition-all border-b border-gray-100 last:border-b-0 flex items-center"
|
||||
onclick={() => submitGuess(book.id)}
|
||||
>
|
||||
<span class="font-semibold"
|
||||
>{book.name}</span
|
||||
>
|
||||
<span class="ml-auto text-sm opacity-75"
|
||||
>({book.testament.toUpperCase()})</span
|
||||
>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else if searchQuery}
|
||||
<p class="mt-4 text-center text-gray-500 p-8">
|
||||
No books found
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="mb-12 p-8 sm:p-12 max-w-full sm:max-w-2xl md:max-w-3xl mx-auto bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center"
|
||||
in:fade={{ delay: 500 }}
|
||||
>
|
||||
<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
|
||||
🎉 Congratulations! 🎉
|
||||
</h2>
|
||||
<p class="text-lg sm:text-xl md:text-2xl mb-4">
|
||||
The verse is from <span
|
||||
class="font-black text-xl sm:text-2xl md:text-3xl"
|
||||
>{getBookById(correctBookId)?.name}</span
|
||||
>
|
||||
</p>
|
||||
<p class="text-xl opacity-90">{dailyVerse.reference}</p>
|
||||
<p
|
||||
class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
|
||||
>
|
||||
Your grade: {grade}
|
||||
</p>
|
||||
<button
|
||||
onclick={handleShare}
|
||||
data-umami-event="Share"
|
||||
class={`mt-4 text-2xl font-bold p-2 ${
|
||||
copied
|
||||
? "bg-green-400/50 hover:bg-green-500/60"
|
||||
: "bg-white/20 hover:bg-white/30"
|
||||
} rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
|
||||
>
|
||||
{copied ? "shared!" : "📤 Share"}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Guesses Grid -->
|
||||
<div class="bg-white rounded-2xl shadow-xl overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="bg-linear-to-r from-gray-50 to-gray-100">
|
||||
<th
|
||||
class="p-3 sm:p-4 md:p-6 text-left font-bold text-sm sm:text-base md:text-lg text-gray-700 border-b border-gray-200"
|
||||
>Book</th
|
||||
>
|
||||
<th
|
||||
class="p-3 sm:p-4 md:p-6 text-left font-bold text-sm sm:text-base md:text-lg text-gray-700 border-b border-gray-200"
|
||||
>Testament</th
|
||||
>
|
||||
<th
|
||||
class="p-3 sm:p-4 md:p-6 text-left font-bold text-sm sm:text-base md:text-lg text-gray-700 border-b border-gray-200"
|
||||
>Section</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each guesses as guess (guess.book.id)}
|
||||
<tr
|
||||
class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
|
||||
<!-- {guess.book.id === correctBookId ? "✅" : "❌"} -->
|
||||
{guess.book.name}
|
||||
</td>
|
||||
<td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
|
||||
{guess.testamentMatch ? "✅" : "🟥"}
|
||||
{guess.book.testament.toUpperCase()}
|
||||
</td>
|
||||
<td
|
||||
class="p-3 sm:p-4 md:p-6 font-semibold text-sm sm:text-base md:text-lg"
|
||||
>
|
||||
{guess.sectionMatch ? "✅" : "🟥"}
|
||||
{guess.adjacent ? "‼️ " : ""}{guess.book.section}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Guesses Grid -->
|
||||
<div class="bg-white rounded-2xl shadow-xl overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead>
|
||||
<tr class="bg-linear-to-r from-gray-50 to-gray-300">
|
||||
<th
|
||||
class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
|
||||
>Book</th
|
||||
>
|
||||
<th
|
||||
class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
|
||||
>Testament</th
|
||||
>
|
||||
<th
|
||||
class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
|
||||
>Section</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each guesses as guess (guess.book.id)}
|
||||
<tr
|
||||
class="border-b border-gray-100 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<td
|
||||
class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
|
||||
>
|
||||
{guess.book.id === correctBookId ? "✅" : "❌"}
|
||||
{guess.book.name}
|
||||
</td>
|
||||
<td
|
||||
class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
|
||||
>
|
||||
{guess.testamentMatch ? "✅" : "🟥"}
|
||||
{guess.book.testament.charAt(0).toUpperCase() +
|
||||
guess.book.testament.slice(1).toLowerCase()}
|
||||
</td>
|
||||
<td
|
||||
class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
|
||||
>
|
||||
{guess.sectionMatch ? "✅" : "🟥"}
|
||||
{guess.adjacent ? "‼️ " : ""}{guess.book
|
||||
.section}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{#if isWon}
|
||||
<div
|
||||
class="mt-12 p-4 bg-linear-to-r from-blue-50 to-indigo-50 rounded-2xl shadow-md text-center text-sm md:text-base text-gray-600"
|
||||
in:fade={{ delay: 1500, duration: 1000 }}
|
||||
>
|
||||
Thank you so much for playing! Feel free to email me directly
|
||||
with feedback:
|
||||
<a
|
||||
href="mailto:george@snail.city"
|
||||
class="font-semibold text-blue-600 hover:text-blue-800 underline"
|
||||
>george@snail.city</a
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user