mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-04-06 01:43:32 -04:00
Merge branch 'main' into auth
Brought in latest changes from main including: - RSS feed implementation - First letter edge case fixes - Updated ranking formula Resolved conflicts by: - Combining .env.example variables from both branches - Keeping auth version (3.0.0alpha) - Preserving extended user schema from auth - Keeping onMount umami approach and adding RSS feed link Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
George Powell
@@ -28,6 +28,11 @@
|
||||
return "bg-red-500 border-red-600";
|
||||
}
|
||||
|
||||
function getFirstLetter(bookName: string): string {
|
||||
const match = bookName.match(/[a-zA-Z]/);
|
||||
return match ? match[0] : bookName[0];
|
||||
}
|
||||
|
||||
function getBoxContent(
|
||||
guess: Guess,
|
||||
column: "book" | "firstLetter" | "testament" | "section",
|
||||
@@ -44,16 +49,27 @@
|
||||
(correctBook?.section === "Pauline Epistles" ||
|
||||
correctBook?.section === "General Epistles") &&
|
||||
correctBook.name[0] === "1";
|
||||
const guessStartsWithNumber = guess.book.name[0] === "1";
|
||||
const guessIsEpistlesWithNumber =
|
||||
(guess.book.section === "Pauline Epistles" ||
|
||||
guess.book.section === "General Epistles") &&
|
||||
guess.book.name[0] === "1";
|
||||
|
||||
if (
|
||||
correctIsEpistlesWithNumber &&
|
||||
guessStartsWithNumber &&
|
||||
guessIsEpistlesWithNumber &&
|
||||
guess.firstLetterMatch
|
||||
) {
|
||||
return "Yes"; // Special wordplay case
|
||||
const words = [
|
||||
"Exactly",
|
||||
"Right",
|
||||
"Yes",
|
||||
"Naturally",
|
||||
"Of course",
|
||||
"Sure",
|
||||
];
|
||||
return words[Math.floor(Math.random() * words.length)]; // Special wordplay case
|
||||
}
|
||||
return guess.book.name[0]; // Normal case: just show the first letter
|
||||
return getFirstLetter(guess.book.name); // Normal case: show first letter, ignoring numbers
|
||||
case "testament":
|
||||
return (
|
||||
guess.book.testament.charAt(0).toUpperCase() +
|
||||
|
||||
@@ -1,241 +1,246 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
interface ImposterData {
|
||||
verses: string[];
|
||||
refs: string[];
|
||||
imposterIndex: number;
|
||||
}
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
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 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();
|
||||
}
|
||||
function newGame() {
|
||||
loading = true;
|
||||
error = null;
|
||||
data = null;
|
||||
loadGame();
|
||||
}
|
||||
|
||||
onMount(loadGame);
|
||||
onMount(loadGame);
|
||||
|
||||
function formatVerse(verse: string): string {
|
||||
let formatted = verse;
|
||||
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;
|
||||
}
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
if (/^[a-z]/.test(formatted)) {
|
||||
formatted = "..." + formatted;
|
||||
}
|
||||
// Replace trailing punctuation with ellipsis
|
||||
// Preserve closing quotes/brackets that may have been added
|
||||
formatted = formatted.replace(
|
||||
/[,:;-—]([)\]}\"\'\u201D\u2019]*)$/,
|
||||
"...$1",
|
||||
);
|
||||
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">
|
||||
{#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 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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.loading,
|
||||
.error {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
/*.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%;
|
||||
}
|
||||
.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-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 {
|
||||
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: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:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.verse-button.clicked {
|
||||
cursor: default;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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.correct ~ .ref {
|
||||
color: #28a745;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.verse-button.wrong ~ .ref {
|
||||
color: #dc3545;
|
||||
}
|
||||
.verse-button.wrong ~ .ref {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.result {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.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,
|
||||
.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;
|
||||
}
|
||||
.result button:hover,
|
||||
.error button:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user