Files
bibdle/static/how-to-play.md
George Powell 884bbe65c7 feat: add about page, sitemap, social links component, Apple sign-in
prompt on win screen, and layout/theme improvements

  ## New features

  - **About page** (`src/routes/about/`): New static about page rendered
    from `static/about.md` using the `marked` library (added as a
    dependency). Includes the project backstory content.

  - **XML sitemap** (`src/routes/sitemap.xml/`): Dynamic sitemap
    endpoint for SEO, registered in `static/robots.txt` via `Sitemap:`
    directive.

  - **Apple Sign In prompt on win screen** (`WinScreen.svelte`): When
    the game is won and the user is not logged in, a "Sign in to save
    your streak & see your stats" prompt with an Apple Sign In button is
    shown below the share card. Passes `anonymousId` so stats migrate on
    sign-up. Driven by new `isLoggedIn` and `anonymousId` props, passed
    from `+page.svelte`.

  ## Refactoring

  - **`SocialLinks` component**
    (`src/lib/components/SocialLinks.svelte`): Extracted the Bluesky,
    Twitter/X, and email social link icons from `Credits.svelte` into a
    reusable component. `Credits.svelte` now imports and renders
    `<SocialLinks />`.

  - **`ThemeToggle` component**
    (`src/lib/components/ThemeToggle.svelte`): New component for
    toggling light/dark mode, persisted to `localStorage`. Currently
    rendered but hidden (`hidden` class) in `+page.svelte` —
    infrastructure is in place for future use.

  ## Layout changes

  - **`+layout.svelte`**: Moved the page title/header (`<h1>` with
    `TitleAnimation`) and the gradient background wrapper from
    `+page.svelte` into the root layout, so it applies across all
    routes. Also removed the `browser` guard around the analytics script
    injection (it's
    already inside `onMount` which is client-only). Added `<meta
    name="description">`.

  - **`+page.svelte`**: Removed the title/header and gradient wrapper
    (now in layout). Minor formatting cleanup (reformatted `SearchInput`
    props, moved `currentDate` derived state earlier). `ThemeToggle`
    import swapped in place of `TitleAnimation` (which moved to layout).

  ## Styling

  - **`layout.css`**: Added `@custom-variant dark` for class-based dark
    mode toggling (supports `.dark` class on `<html>`). Added explicit
    `html.dark` / `html.light` rules alongside the existing
    `prefers-color-scheme` media query, so the `ThemeToggle` component
    can
    override the system preference. Added background transition
    animation.
2026-03-12 18:22:59 -04:00

48 lines
1.4 KiB
Markdown

# How to Play
Each day, Bibdle gives you a verse from the Bible. Your job is to guess which book it comes from. (Genesis, John, Corinthians, etc.)
You have unlimited guesses.
---
## The Basics
1. **Read the verse.** It appears at the top of the page.
2. **Make a guess.** Type or select a book of the Bible from the list.
3. **Read the feedback.** After each guess, you'll get clues telling you how close you were.
4. **Keep guessing** until you get it right.
---
## Feedback Hints
After each wrong guess, you'll see the following hints:
| Hint | What it means |
|---|---|
| **Testament** | If your guess was in the correct Testament (Old or New) |
| **Section** | If your guess was in the correct section of the Bible (e.g. Gospels, Epistles, Major Prophets) |
| **First Letter** | If your guess has the same first letter as the correct guess |
Use the hints to narrow down your search.
---
## A Few Things to Know
- **Everyone plays the same verse each day.** The daily verse resets at midnight.
- **Your progress is saved automatically.** You can close the tab and come back later.
---
## Tips
- Pay attention to writing style: the voice of Psalms is very different from Paul's letters.
- Historical narrative (battles, kings, genealogies) tends to be Old Testament.
- Short, poetic, or wisdom-focused verses could be Proverbs, Ecclesiastes, or Psalms.
- If a verse mentions Jesus by name, it's in the New Testament.
Good luck!