bibdle/src/lib/components/GuessesTable.svelte

<script lang="ts">
	import { bibleBooks } from "$lib/types/bible";
	import { getFirstLetter, type Guess } from "$lib/utils/game";
	import Container from "./Container.svelte";

	let {
		guesses,
		correctBookId,
	}: { guesses: Guess[]; correctBookId: string } = $props();

	let hasGuesses = $derived(guesses.length > 0);

	function getBoxColor(isCorrect: boolean, isAdjacent?: boolean): string {
		if (isCorrect) return "bg-green-500 border-green-600";
		if (isAdjacent) return "bg-yellow-500 border-yellow-600";
		return "bg-red-500 border-red-600";
	}

	function getBoxContent(
		guess: Guess,
		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 guessIsEpistlesWithNumber =
					(guess.book.section === "Pauline Epistles" ||
						guess.book.section === "General Epistles") &&
					guess.book.name[0] === "1";

				if (
					correctIsEpistlesWithNumber &&
					guessIsEpistlesWithNumber &&
					guess.firstLetterMatch
				) {
					const words = [
						"Exactly",
						"Right",
						"Yes",
						"Naturally",
						"Of course",
						"Sure",
					];
					return words[Math.floor(Math.random() * words.length)]; // Special wordplay case
				}
				return getFirstLetter(guess.book.name); // Normal case: show first letter, ignoring numbers
			case "testament":
				return (
					guess.book.testament.charAt(0).toUpperCase() +
					guess.book.testament.slice(1).toLowerCase()
				);
			case "section":
				return guess.book.section;
		}
	}
</script>

{#if !hasGuesses}
	<Container class="p-6 text-center">
		<h2 class="font-triodion text-xl italic mb-3 text-gray-800 dark:text-gray-100">
			Instructions
		</h2>
		<p class="text-gray-700 dark:text-gray-300 leading-relaxed italic">
			Guess what book of the bible you think the verse is from. You will
			get clues to help you after each guess.
		</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 dark:border-gray-600"
		>
			<div
				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
			>
				Testament
			</div>
			<div
				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
			>
				Section
			</div>
			<div
				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
			>
				First Letter
			</div>
			<div
				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
			>
				Book
			</div>
		</div>

		{#each guesses as guess, rowIndex (guess.book.id)}
			<div class="flex gap-2 justify-center">
				<!-- Testament 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.testamentMatch,
					)}"
					style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
				>
					<span class="text-center leading-tight px-1 text-shadow-sm"
						>{getBoxContent(guess, "testament")}</span
					>
				</div>

				<!-- Section Column -->
				<div
					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,
					)}"
					style="animation-delay: {rowIndex * 1000 + 1 * 500}ms"
				>
					<span class="text-center leading-tight px-1 text-shadow-sm"
						>{getBoxContent(guess, "section")}
						{#if guess.adjacent}
							‼️
						{/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 + 2 * 500}ms"
				>
					<span class="text-center leading-tight px-1 text-shadow-sm"
						>{getBoxContent(guess, "firstLetter")}</span
					>
				</div>

				<!-- Book Column -->
				<div
					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-4 border-opacity-100 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 + 3 * 500}ms"
				>
					<span class="text-center leading-tight px-1 text-shadow-lg"
						>{getBoxContent(guess, "book")}</span
					>
				</div>
			</div>
		{/each}
	</div>
	<!-- </div> -->
{/if}

<style>
	@keyframes flipIn {
		0% {
			opacity: 0;
			transform: rotateX(-90deg);
		}
		50% {
			transform: rotateX(0deg);
		}
		100% {
			opacity: 1;
			transform: rotateX(0deg);
		}
	}

	.animate-flip-in {
		opacity: 0;
		transform: rotateX(-90deg);
		animation: flipIn 0.6s ease-out forwards;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.fade-in {
		animation: fadeIn 0.5s ease-out;
	}
</style>