george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-02-04 10:54:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added instructions

Browse Source
This commit is contained in:
George Powell
2026-01-28 14:57:22 -05:00
parent 8c488d27df
commit 6365cfb363
1 changed files with 181 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/lib/components/GuessesTable.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { bibleBooks } from "$lib/types/bible";
import Container from "./Container.svelte";
interface Guess {
book: {
@@ -14,8 +15,10 @@
firstLetterMatch: boolean;
}
let { guesses, correctBookId }: { guesses: Guess[]; correctBookId: string } =
$props();
let {
guesses,
correctBookId,
}: { guesses: Guess[]; correctBookId: string } = $props();
let hasGuesses = $derived(guesses.length > 0);
@@ -34,7 +37,9 @@
return guess.book.name;
case "firstLetter":
// Check if this is the special Epistles + "1" case
const correctBook = bibleBooks.find((b) => b.id === correctBookId);
const correctBook = bibleBooks.find(
(b) => b.id === correctBookId,
);
const correctIsEpistlesWithNumber =
(correctBook?.section === "Pauline Epistles" ||
correctBook?.section === "General Epistles") &&
@@ -60,10 +65,23 @@
}
</script>
{#if hasGuesses}
{#if !hasGuesses}
<Container class="p-6 text-center">
<h2 class="font-triodion text-xl italic mb-3 text-gray-800">
Instructions
</h2>
<p class="text-gray-700 leading-relaxed italic">
Guess what book of the bible you think the verse is from. You will
get clues to tell you if your guess is close or not. Green means the
category is correct; red means wrong.
</p>
</Container>
{:else}
<div class="space-y-3">
<!-- Column Headers -->
<div class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400">
<div
class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400"
>
<div
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
>
@@ -90,14 +108,12 @@
<div class="flex gap-2 justify-center">
<!-- Book Column -->
<div
class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in {getBoxColor(
guess.book.id === correctBookId,
)}"
style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
>
<span
class="text-center leading-tight px-1"
style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
<span class="text-center leading-tight px-1 text-shadow-lg"
>{getBoxContent(guess, "book")}</span
>
</div>
@@ -109,9 +125,7 @@
)}"
style="animation-delay: {rowIndex * 1000 + 1 * 500}ms"
>
<span
class="text-center leading-tight px-1"
style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
<span class="text-center leading-tight px-1 text-shadow-sm"
>{getBoxContent(guess, "testament")}</span
>
</div>
@@ -124,9 +138,7 @@
)}"
style="animation-delay: {rowIndex * 1000 + 2 * 500}ms"
>
<span
class="text-center leading-tight px-1"
style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
<span class="text-center leading-tight px-1 text-shadow-sm"
>{getBoxContent(guess, "section")}
{#if guess.adjacent}
‼️
@@ -141,9 +153,7 @@
)}"
style="animation-delay: {rowIndex * 1000 + 3 * 500}ms"
>
<span
class="text-center leading-tight px-1"
style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
<span class="text-center leading-tight px-1 text-shadow-sm"
>{getBoxContent(guess, "firstLetter")}</span
>
</div>