mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-02-04 10:54:44 -05:00
Added instructions
This commit is contained in:
George Powell
@@ -1,191 +1,201 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { bibleBooks } from "$lib/types/bible";
|
import { bibleBooks } from "$lib/types/bible";
|
||||||
|
import Container from "./Container.svelte";
|
||||||
|
|
||||||
interface Guess {
|
interface Guess {
|
||||||
book: {
|
book: {
|
||||||
id: string;
|
id: string;
|
||||||
name: string;
|
name: string;
|
||||||
testament: string;
|
testament: string;
|
||||||
section: string;
|
section: string;
|
||||||
};
|
};
|
||||||
testamentMatch: boolean;
|
testamentMatch: boolean;
|
||||||
sectionMatch: boolean;
|
sectionMatch: boolean;
|
||||||
adjacent: boolean;
|
adjacent: boolean;
|
||||||
firstLetterMatch: boolean;
|
firstLetterMatch: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { guesses, correctBookId }: { guesses: Guess[]; correctBookId: string } =
|
let {
|
||||||
$props();
|
guesses,
|
||||||
|
correctBookId,
|
||||||
|
}: { guesses: Guess[]; correctBookId: string } = $props();
|
||||||
|
|
||||||
let hasGuesses = $derived(guesses.length > 0);
|
let hasGuesses = $derived(guesses.length > 0);
|
||||||
|
|
||||||
function getBoxColor(isCorrect: boolean, isAdjacent?: boolean): string {
|
function getBoxColor(isCorrect: boolean, isAdjacent?: boolean): string {
|
||||||
if (isCorrect) return "bg-green-500 border-green-600";
|
if (isCorrect) return "bg-green-500 border-green-600";
|
||||||
if (isAdjacent) return "bg-yellow-500 border-yellow-600";
|
if (isAdjacent) return "bg-yellow-500 border-yellow-600";
|
||||||
return "bg-red-500 border-red-600";
|
return "bg-red-500 border-red-600";
|
||||||
}
|
}
|
||||||
|
|
||||||
function getBoxContent(
|
function getBoxContent(
|
||||||
guess: Guess,
|
guess: Guess,
|
||||||
column: "book" | "firstLetter" | "testament" | "section",
|
column: "book" | "firstLetter" | "testament" | "section",
|
||||||
): string {
|
): string {
|
||||||
switch (column) {
|
switch (column) {
|
||||||
case "book":
|
case "book":
|
||||||
return guess.book.name;
|
return guess.book.name;
|
||||||
case "firstLetter":
|
case "firstLetter":
|
||||||
// Check if this is the special Epistles + "1" case
|
// Check if this is the special Epistles + "1" case
|
||||||
const correctBook = bibleBooks.find((b) => b.id === correctBookId);
|
const correctBook = bibleBooks.find(
|
||||||
const correctIsEpistlesWithNumber =
|
(b) => b.id === correctBookId,
|
||||||
(correctBook?.section === "Pauline Epistles" ||
|
);
|
||||||
correctBook?.section === "General Epistles") &&
|
const correctIsEpistlesWithNumber =
|
||||||
correctBook.name[0] === "1";
|
(correctBook?.section === "Pauline Epistles" ||
|
||||||
const guessStartsWithNumber = guess.book.name[0] === "1";
|
correctBook?.section === "General Epistles") &&
|
||||||
|
correctBook.name[0] === "1";
|
||||||
|
const guessStartsWithNumber = guess.book.name[0] === "1";
|
||||||
|
|
||||||
if (
|
if (
|
||||||
correctIsEpistlesWithNumber &&
|
correctIsEpistlesWithNumber &&
|
||||||
guessStartsWithNumber &&
|
guessStartsWithNumber &&
|
||||||
guess.firstLetterMatch
|
guess.firstLetterMatch
|
||||||
) {
|
) {
|
||||||
return "Yes"; // Special wordplay case
|
return "Yes"; // Special wordplay case
|
||||||
}
|
}
|
||||||
return guess.book.name[0]; // Normal case: just show the first letter
|
return guess.book.name[0]; // Normal case: just show the first letter
|
||||||
case "testament":
|
case "testament":
|
||||||
return (
|
return (
|
||||||
guess.book.testament.charAt(0).toUpperCase() +
|
guess.book.testament.charAt(0).toUpperCase() +
|
||||||
guess.book.testament.slice(1).toLowerCase()
|
guess.book.testament.slice(1).toLowerCase()
|
||||||
);
|
);
|
||||||
case "section":
|
case "section":
|
||||||
return guess.book.section;
|
return guess.book.section;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if hasGuesses}
|
{#if !hasGuesses}
|
||||||
<div class="space-y-3">
|
<Container class="p-6 text-center">
|
||||||
<!-- Column Headers -->
|
<h2 class="font-triodion text-xl italic mb-3 text-gray-800">
|
||||||
<div class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400">
|
Instructions
|
||||||
<div
|
</h2>
|
||||||
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
|
<p class="text-gray-700 leading-relaxed italic">
|
||||||
>
|
Guess what book of the bible you think the verse is from. You will
|
||||||
Book
|
get clues to tell you if your guess is close or not. Green means the
|
||||||
</div>
|
category is correct; red means wrong.
|
||||||
<div
|
</p>
|
||||||
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
|
</Container>
|
||||||
>
|
{:else}
|
||||||
Testament
|
<div class="space-y-3">
|
||||||
</div>
|
<!-- Column Headers -->
|
||||||
<div
|
<div
|
||||||
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
|
class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400"
|
||||||
>
|
>
|
||||||
Section
|
<div
|
||||||
</div>
|
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
|
||||||
<div
|
>
|
||||||
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
|
Book
|
||||||
>
|
</div>
|
||||||
First Letter
|
<div
|
||||||
</div>
|
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
|
||||||
</div>
|
>
|
||||||
|
Testament
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
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)}
|
{#each guesses as guess, rowIndex (guess.book.id)}
|
||||||
<div class="flex gap-2 justify-center">
|
<div class="flex gap-2 justify-center">
|
||||||
<!-- Book Column -->
|
<!-- Book Column -->
|
||||||
<div
|
<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,
|
guess.book.id === correctBookId,
|
||||||
)}"
|
)}"
|
||||||
style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
|
style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
|
||||||
>
|
>
|
||||||
<span
|
<span class="text-center leading-tight px-1 text-shadow-lg"
|
||||||
class="text-center leading-tight px-1"
|
>{getBoxContent(guess, "book")}</span
|
||||||
style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
|
>
|
||||||
>{getBoxContent(guess, "book")}</span
|
</div>
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Testament Column -->
|
<!-- Testament Column -->
|
||||||
<div
|
<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-md animate-flip-in {getBoxColor(
|
||||||
guess.testamentMatch,
|
guess.testamentMatch,
|
||||||
)}"
|
)}"
|
||||||
style="animation-delay: {rowIndex * 1000 + 1 * 500}ms"
|
style="animation-delay: {rowIndex * 1000 + 1 * 500}ms"
|
||||||
>
|
>
|
||||||
<span
|
<span class="text-center leading-tight px-1 text-shadow-sm"
|
||||||
class="text-center leading-tight px-1"
|
>{getBoxContent(guess, "testament")}</span
|
||||||
style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
|
>
|
||||||
>{getBoxContent(guess, "testament")}</span
|
</div>
|
||||||
>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Section Column -->
|
<!-- Section Column -->
|
||||||
<div
|
<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(
|
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.sectionMatch,
|
||||||
guess.adjacent,
|
guess.adjacent,
|
||||||
)}"
|
)}"
|
||||||
style="animation-delay: {rowIndex * 1000 + 2 * 500}ms"
|
style="animation-delay: {rowIndex * 1000 + 2 * 500}ms"
|
||||||
>
|
>
|
||||||
<span
|
<span class="text-center leading-tight px-1 text-shadow-sm"
|
||||||
class="text-center leading-tight px-1"
|
>{getBoxContent(guess, "section")}
|
||||||
style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
|
{#if guess.adjacent}
|
||||||
>{getBoxContent(guess, "section")}
|
‼️
|
||||||
{#if guess.adjacent}
|
{/if}
|
||||||
‼️
|
</span>
|
||||||
{/if}
|
</div>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- First Letter Column -->
|
<!-- First Letter Column -->
|
||||||
<div
|
<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-md animate-flip-in {getBoxColor(
|
||||||
guess.firstLetterMatch,
|
guess.firstLetterMatch,
|
||||||
)}"
|
)}"
|
||||||
style="animation-delay: {rowIndex * 1000 + 3 * 500}ms"
|
style="animation-delay: {rowIndex * 1000 + 3 * 500}ms"
|
||||||
>
|
>
|
||||||
<span
|
<span class="text-center leading-tight px-1 text-shadow-sm"
|
||||||
class="text-center leading-tight px-1"
|
>{getBoxContent(guess, "firstLetter")}</span
|
||||||
style="text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);"
|
>
|
||||||
>{getBoxContent(guess, "firstLetter")}</span
|
</div>
|
||||||
>
|
</div>
|
||||||
</div>
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
<!-- </div> -->
|
||||||
</div>
|
|
||||||
<!-- </div> -->
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@keyframes flipIn {
|
@keyframes flipIn {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: rotateX(-90deg);
|
transform: rotateX(-90deg);
|
||||||
}
|
}
|
||||||
50% {
|
50% {
|
||||||
transform: rotateX(0deg);
|
transform: rotateX(0deg);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: rotateX(0deg);
|
transform: rotateX(0deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.animate-flip-in {
|
.animate-flip-in {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: rotateX(-90deg);
|
transform: rotateX(-90deg);
|
||||||
animation: flipIn 0.6s ease-out forwards;
|
animation: flipIn 0.6s ease-out forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(-10px);
|
transform: translateY(-10px);
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-in {
|
.fade-in {
|
||||||
animation: fadeIn 0.5s ease-out;
|
animation: fadeIn 0.5s ease-out;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user