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

add First Letter column with special epistle handling

Browse Source
This commit is contained in:
George Powell
2026-01-26 23:31:24 -05:00
parent 77d6254a2c
commit 8c488d27df
2 changed files with 68 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,6 @@
<script lang="ts">
import { bibleBooks } from "$lib/types/bible";
interface Guess {
book: {
id: string;
@@ -9,6 +11,7 @@
testamentMatch: boolean;
sectionMatch: boolean;
adjacent: boolean;
firstLetterMatch: boolean;
}
let { guesses, correctBookId }: { guesses: Guess[]; correctBookId: string } =
@@ -24,11 +27,28 @@
function getBoxContent(
guess: Guess,
column: "book" | "testament" | "section",
column: "book" | "firstLetter" | "testament" | "section",
): string {
switch (column) {
case "book":
return guess.book.name;
case "firstLetter":
// Check if this is the special Epistles + "1" case
const correctBook = bibleBooks.find((b) => b.id === correctBookId);
const correctIsEpistlesWithNumber =
(correctBook?.section === "Pauline Epistles" ||
correctBook?.section === "General Epistles") &&
correctBook.name[0] === "1";
const guessStartsWithNumber = guess.book.name[0] === "1";
if (
correctIsEpistlesWithNumber &&
guessStartsWithNumber &&
guess.firstLetterMatch
) {
return "Yes"; // Special wordplay case
}
return guess.book.name[0]; // Normal case: just show the first letter
case "testament":
return (
guess.book.testament.charAt(0).toUpperCase() +
@@ -43,29 +63,34 @@
{#if hasGuesses}
<div class="space-y-3">
<!-- Column Headers -->
<div class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-800">
<div class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400">
<div
class="flex-1 text-center text-sm font-semibold text-gray-700"
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
>
Book
</div>
<div
class="flex-1 text-center text-sm font-semibold text-gray-700"
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
>
Testament
</div>
<div
class="flex-1 text-center text-sm font-semibold text-gray-700"
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
>
Section
</div>
<div
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
>
First Letter
</div>
</div>
{#each guesses as guess, rowIndex (guess.book.id)}
<div class="flex gap-2 justify-center">
<!-- Book Column -->
<div
class="flex-1 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-xs sm:text-sm md:text-base 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-md animate-flip-in {getBoxColor(
guess.book.id === correctBookId,
)}"
style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
@@ -79,7 +104,7 @@
<!-- Testament Column -->
<div
class="flex-1 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-xs sm:text-sm md:text-base 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-md animate-flip-in {getBoxColor(
guess.testamentMatch,
)}"
style="animation-delay: {rowIndex * 1000 + 1 * 500}ms"
@@ -93,7 +118,7 @@
<!-- Section Column -->
<div
class="relative flex-1 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-xs sm:text-sm md:text-base shadow-md animate-flip-in {getBoxColor(
class="relative 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(
guess.sectionMatch,
guess.adjacent,
)}"
@@ -108,6 +133,20 @@
{/if}
</span>
</div>
<!-- First Letter 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(
guess.firstLetterMatch,
)}"
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);"
>{getBoxContent(guess, "firstLetter")}</span
>
</div>
</div>
{/each}
</div>