bibdle/src/lib/components/Imposter.svelte

<script lang="ts">
  import { onMount } from "svelte";

  interface ImposterData {
    verses: string[];
    refs: string[];
    imposterIndex: number;
  }

  let data: ImposterData | null = null;
  let clicked: boolean[] = [];
  let gameOver = false;
  let loading = true;
  let error: string | null = null;

  async function loadGame() {
    try {
      const res = await fetch("/api/imposter");
      if (!res.ok) {
        throw new Error(`HTTP ${res.status}: ${res.statusText}`);
      }
      data = (await res.json()) as ImposterData;
      clicked = new Array(data.verses.length).fill(false);
      gameOver = false;
    } catch (e) {
      error = e instanceof Error ? e.message : "Unknown error";
    } finally {
      loading = false;
    }
  }

  function handleClick(index: number) {
    if (gameOver || !data || clicked[index]) return;
    clicked[index] = true;
    if (index !== data.imposterIndex) {
      clicked[data.imposterIndex] = true;
    }
    gameOver = true;
  }

  function newGame() {
    loading = true;
    error = null;
    data = null;
    loadGame();
  }

  onMount(loadGame);

  function formatVerse(verse: string): string {
    let formatted = verse;

    // Handle unbalanced opening/closing punctuation
    const pairs: [string, string][] = [
      ["(", ")"],
      ["[", "]"],
      ["{", "}"],
      ['"', '"'],
      ["'", "'"],
      ["\u201C", "\u201D"], // \u201C
      ["\u2018", "\u2019"], // \u2018
    ];
    for (const [open, close] of pairs) {
      if (formatted.startsWith(open) && !formatted.includes(close)) {
        formatted += "..." + close;
        break;
      }
    }
    for (const [open, close] of pairs) {
      if (formatted.endsWith(close) && !formatted.includes(open)) {
        formatted = open + "..." + formatted;
        break;
      }
    }

    if (/^[a-z]/.test(formatted)) {
      formatted = "..." + formatted;
    }
    formatted = formatted.replace(/[,:;-—]$/, "...");
    return formatted;
  }
</script>

<div class="imposter-game">
  {#if loading}
    <p class="loading">Loading verses...</p>
  {:else if error}
    <div class="error">
      <p>Error: {error}</p>
      <button on:click={newGame}>Retry</button>
    </div>
  {:else if data}
    <!-- <div class="instructions">
      <p>Click the verse that doesn't belong (from a different book).</p>
    </div> -->
    <div class="verses">
      {#each data.verses as verse, i}
        <div class="verse-item">
          <button
            class="verse-button"
            class:clicked={clicked[i]}
            class:correct={clicked[i] && i === data.imposterIndex}
            class:wrong={clicked[i] && i !== data.imposterIndex}
            on:click={() => handleClick(i)}
            disabled={gameOver}
          >
            {formatVerse(verse)}
          </button>
          {#if gameOver}
            <div class="ref">{data.refs[i]}</div>
          {/if}
        </div>
      {/each}
    </div>
    {#if gameOver}
      <div class="result">
        <button on:click={newGame}>New Game</button>
      </div>
    {/if}
  {/if}
</div>

<style>
  .imposter-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto;
  }

  .loading,
  .error {
    text-align: center;
  }

  .instructions {
    text-align: center;
    font-style: italic;
    color: #666;
  }

  .verses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    width: 100%;
  }

  .verse-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .verse-button {
    padding: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.4;
    border: 3px solid #ddd;
    background: #fafafa;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s ease;
    min-height: 100px;
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .verse-button:hover:not(.clicked):not(:disabled) {
    border-color: #007bff;
    background: #f8f9ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
  }

  .verse-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .verse-button.clicked {
    cursor: default;
  }

  .correct {
    background: #d4edda !important;
    border-color: #28a745 !important;
    color: #155724;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.3);
  }

  .wrong {
    background: #f8d7da !important;
    border-color: #dc3545 !important;
    color: #721c24;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
  }

  .ref {
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    color: #555;
    padding-top: 0.25rem;
  }

  .verse-button.correct ~ .ref {
    color: #28a745;
    font-weight: bold;
  }

  .verse-button.wrong ~ .ref {
    color: #dc3545;
  }

  .result {
    display: flex;
    justify-content: center;
  }

  .result button,
  .error button {
    padding: 0.75rem 2rem;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
  }

  .result button:hover,
  .error button:hover {
    background: #0056b3;
  }
</style>