diff --git a/src/lib/components/GamePrompt.svelte b/src/lib/components/GamePrompt.svelte new file mode 100644 index 0000000..eb2e9a6 --- /dev/null +++ b/src/lib/components/GamePrompt.svelte @@ -0,0 +1,41 @@ + + +

+ {promptText} +

diff --git a/src/lib/components/GuessesTable.svelte b/src/lib/components/GuessesTable.svelte index 16665df..d5a88b9 100644 --- a/src/lib/components/GuessesTable.svelte +++ b/src/lib/components/GuessesTable.svelte @@ -1,7 +1,6 @@ -{#if !hasGuesses} - -

- Instructions -

-

- Guess what book of the bible you think the verse is from. You will - get clues to help you after each guess. -

- -{:else} +{#if hasGuesses}
{getBoxContent(guess, "book")} - import { bibleBooks, type BibleBook, type BibleSection, type Testament } from "$lib/types/bible"; - import { SvelteSet } from "svelte/reactivity"; + import { + bibleBooks, + type BibleBook, + type BibleSection, + type Testament, + } from "$lib/types/bible"; + import { SvelteSet } from "svelte/reactivity"; - let { - searchQuery = $bindable(""), - guessedIds, - submitGuess, - guessCount = 0, - }: { - searchQuery: string; - guessedIds: SvelteSet; - submitGuess: (id: string) => void; - guessCount: number; - } = $props(); + let { + searchQuery = $bindable(""), + guessedIds, + submitGuess, + guessCount = 0, + }: { + searchQuery: string; + guessedIds: SvelteSet; + submitGuess: (id: string) => void; + guessCount: number; + } = $props(); - type DisplayMode = "simple" | "testament" | "sections"; + type DisplayMode = "simple" | "testament" | "sections"; - const displayMode = $derived( - guessCount >= 9 ? "sections" : guessCount >= 3 ? "testament" : "simple" - ); + const displayMode = $derived( + guessCount >= 9 ? "sections" : guessCount >= 3 ? "testament" : "simple", + ); - const filteredBooks = $derived( - bibleBooks.filter((book) => - book.name.toLowerCase().includes(searchQuery.toLowerCase()) - ) - ); + const filteredBooks = $derived( + bibleBooks.filter((book) => + book.name.toLowerCase().includes(searchQuery.toLowerCase()), + ), + ); - type SimpleGroup = { books: BibleBook[] }; + type SimpleGroup = { books: BibleBook[] }; - type TestamentGroup = { - testament: Testament; - label: string; - books: BibleBook[]; - }; + type TestamentGroup = { + testament: Testament; + label: string; + books: BibleBook[]; + }; - type SectionGroup = { - testament: Testament; - testamentLabel: string; - showTestamentHeader: boolean; - section: BibleSection; - books: BibleBook[]; - }; + type SectionGroup = { + testament: Testament; + testamentLabel: string; + showTestamentHeader: boolean; + section: BibleSection; + books: BibleBook[]; + }; - const simpleGroup = $derived.by(() => { - const sorted = [...filteredBooks].sort((a, b) => - a.name.localeCompare(b.name) - ); - return { books: sorted }; - }); + const simpleGroup = $derived.by(() => { + const sorted = [...filteredBooks].sort((a, b) => + a.name.localeCompare(b.name), + ); + return { books: sorted }; + }); - const testamentGroups = $derived.by(() => { - const old = filteredBooks - .filter((b) => b.testament === "old") - .sort((a, b) => a.name.localeCompare(b.name)); - const newT = filteredBooks - .filter((b) => b.testament === "new") - .sort((a, b) => a.name.localeCompare(b.name)); - const groups: TestamentGroup[] = []; - if (old.length > 0) { - groups.push({ testament: "old", label: "Old Testament", books: old }); - } - if (newT.length > 0) { - groups.push({ testament: "new", label: "New Testament", books: newT }); - } - return groups; - }); + const testamentGroups = $derived.by(() => { + const old = filteredBooks + .filter((b) => b.testament === "old") + .sort((a, b) => a.name.localeCompare(b.name)); + const newT = filteredBooks + .filter((b) => b.testament === "new") + .sort((a, b) => a.name.localeCompare(b.name)); + const groups: TestamentGroup[] = []; + if (old.length > 0) { + groups.push({ + testament: "old", + label: "Old Testament", + books: old, + }); + } + if (newT.length > 0) { + groups.push({ + testament: "new", + label: "New Testament", + books: newT, + }); + } + return groups; + }); - const sectionGroups = $derived.by(() => { - // Build an ordered list of (testament, section) pairs by iterating bibleBooks once - const seenKeys: Record = {}; - const orderedPairs: { testament: Testament; section: BibleSection }[] = []; + const sectionGroups = $derived.by(() => { + // Build an ordered list of (testament, section) pairs by iterating bibleBooks once + const seenKeys: Record = {}; + const orderedPairs: { testament: Testament; section: BibleSection }[] = + []; - for (const book of bibleBooks) { - const key = `${book.testament}:${book.section}`; - if (!seenKeys[key]) { - seenKeys[key] = true; - orderedPairs.push({ testament: book.testament, section: book.section }); - } - } + for (const book of bibleBooks) { + const key = `${book.testament}:${book.section}`; + if (!seenKeys[key]) { + seenKeys[key] = true; + orderedPairs.push({ + testament: book.testament, + section: book.section, + }); + } + } - const groups: SectionGroup[] = []; - let lastTestament: Testament | null = null; + const groups: SectionGroup[] = []; + let lastTestament: Testament | null = null; - for (const pair of orderedPairs) { - const books = filteredBooks.filter( - (b) => b.testament === pair.testament && b.section === pair.section - ); - if (books.length === 0) continue; + for (const pair of orderedPairs) { + const books = filteredBooks.filter( + (b) => + b.testament === pair.testament && + b.section === pair.section, + ); + if (books.length === 0) continue; - const showTestamentHeader = pair.testament !== lastTestament; - lastTestament = pair.testament; + const showTestamentHeader = pair.testament !== lastTestament; + lastTestament = pair.testament; - groups.push({ - testament: pair.testament, - testamentLabel: - pair.testament === "old" ? "Old Testament" : "New Testament", - showTestamentHeader, - section: pair.section, - books, - }); - } + groups.push({ + testament: pair.testament, + testamentLabel: + pair.testament === "old" + ? "Old Testament" + : "New Testament", + showTestamentHeader, + section: pair.section, + books, + }); + } - return groups; - }); + return groups; + }); - // First book in display order for Enter key submission - const firstBookId = $derived.by(() => { - if (filteredBooks.length === 0) return null; - if (displayMode === "simple") { - return simpleGroup.books[0]?.id ?? null; - } - if (displayMode === "testament") { - return testamentGroups[0]?.books[0]?.id ?? null; - } - return sectionGroups[0]?.books[0]?.id ?? null; - }); + // First book in display order for Enter key submission + const firstBookId = $derived.by(() => { + if (filteredBooks.length === 0) return null; + if (displayMode === "simple") { + return simpleGroup.books[0]?.id ?? null; + } + if (displayMode === "testament") { + return testamentGroups[0]?.books[0]?.id ?? null; + } + return sectionGroups[0]?.books[0]?.id ?? null; + }); - function handleKeydown(e: KeyboardEvent) { - if (e.key === "Enter" && firstBookId) { - submitGuess(firstBookId); - } - } + function handleKeydown(e: KeyboardEvent) { + if (e.key === "Enter" && firstBookId) { + submitGuess(firstBookId); + } + } - const showBanner = $derived(guessCount >= 3); - const bannerIsIndigo = $derived(guessCount >= 9); + // const showBanner = $derived(guessCount >= 3); + const showBanner = false; + const bannerIsIndigo = $derived(guessCount >= 9); {#if showBanner} -

- {#if bannerIsIndigo} - Testament & section groups now visible - {:else} - Old & New Testament groups now visible - {/if} -

+

+ {#if bannerIsIndigo} + Testament & section groups now visible + {:else} + Old & New Testament groups now visible + {/if} +

{/if}
-
- - - {#if searchQuery} - - {/if} -
+
+ + + {#if searchQuery} + + {/if} +
- {#if searchQuery && filteredBooks.length > 0} -
    - {#if displayMode === "simple"} - {#each simpleGroup.books as book (book.id)} -
  • - -
    • - {/each} - {:else if displayMode === "testament"} - {#each testamentGroups as group (group.testament)} -
  • -
    - - {group.label} - -
    -
    -
      - {#each group.books as book (book.id)} -
    • - +
      • + {/each} + {:else if displayMode === "testament"} + {#each testamentGroups as group (group.testament)} +
    • +
      + + {group.label} + +
      +
      +
        + {#each group.books as book (book.id)} +
      • + -
        • - {/each} -
      -
      • - {/each} - {:else} - {#each sectionGroups as group (`${group.testament}:${group.section}`)} -
    • - {#if group.showTestamentHeader} -
      - - {group.testamentLabel} - -
      -
      - {/if} -
      - - {group.section} - -
      -
      -
        - {#each group.books as book (book.id)} -
      • - +
        • + {/each} +
      +
      • + {/each} + {:else} + {#each sectionGroups as group (`${group.testament}:${group.section}`)} +
    • + {#if group.showTestamentHeader} +
      + + {group.testamentLabel} + +
      +
      + {/if} +
      + + {group.section} + +
      +
      +
        + {#each group.books as book (book.id)} +
      • + -
        • - {/each} -
      -
      • - {/each} - {/if} -
    - {:else if searchQuery} -

    No books found

    - {/if} + ? 'opacity-50 cursor-not-allowed pointer-events-none' + : 'hover:bg-blue-50 dark:hover:bg-blue-900/40 hover:text-blue-700 dark:hover:text-blue-300'}" + onclick={() => submitGuess(book.id)} + tabindex={guessedIds.has(book.id) + ? -1 + : 0} + > + + {book.name} + + +
    • + {/each} +
+ + {/each} + {/if} + + {:else if searchQuery} +

+ No books found +

+ {/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 2ae7f6f..0f20f8a 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -9,6 +9,7 @@ import WinScreen from "$lib/components/WinScreen.svelte"; import Credits from "$lib/components/Credits.svelte"; + import GamePrompt from "$lib/components/GamePrompt.svelte"; import DevButtons from "$lib/components/DevButtons.svelte"; import AuthModal from "$lib/components/AuthModal.svelte"; @@ -297,6 +298,8 @@ {#if !isWon}
+ +
{/if} - -
{#if isDev}
@@ -373,7 +374,11 @@
Daily Verse Date: {dailyVerse.date}
Streak: {streak}
- (authModalOpen = true)} /> + (authModalOpen = true)} + />
{/if}