mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-02-04 10:54:44 -05:00
Revamped middle statline (ranking instead of arbitrary percentage)
This commit is contained in:
George Powell
@@ -1,222 +1,233 @@
|
||||
<script lang="ts">
|
||||
import { fade } from "svelte/transition";
|
||||
import { getBookById, toOrdinal, getNextGradeMessage } from "$lib/utils/game";
|
||||
import { onMount } from "svelte";
|
||||
import Container from "./Container.svelte";
|
||||
import CountdownTimer from "./CountdownTimer.svelte";
|
||||
import ChapterGuess from "./ChapterGuess.svelte";
|
||||
import { fade } from "svelte/transition";
|
||||
import {
|
||||
getBookById,
|
||||
toOrdinal,
|
||||
getNextGradeMessage,
|
||||
} from "$lib/utils/game";
|
||||
import { onMount } from "svelte";
|
||||
import Container from "./Container.svelte";
|
||||
import CountdownTimer from "./CountdownTimer.svelte";
|
||||
import ChapterGuess from "./ChapterGuess.svelte";
|
||||
|
||||
interface StatsData {
|
||||
solveRank: number;
|
||||
guessRank: number;
|
||||
totalSolves: number;
|
||||
averageGuesses: number;
|
||||
}
|
||||
interface StatsData {
|
||||
solveRank: number;
|
||||
guessRank: number;
|
||||
totalSolves: number;
|
||||
averageGuesses: number;
|
||||
tiedCount: number;
|
||||
}
|
||||
|
||||
interface WeightedMessage {
|
||||
text: string;
|
||||
weight: number;
|
||||
}
|
||||
interface WeightedMessage {
|
||||
text: string;
|
||||
weight: number;
|
||||
}
|
||||
|
||||
let {
|
||||
grade,
|
||||
statsData,
|
||||
correctBookId,
|
||||
handleShare,
|
||||
copyToClipboard,
|
||||
copied = $bindable(false),
|
||||
statsSubmitted,
|
||||
guessCount,
|
||||
reference,
|
||||
onChapterGuessCompleted,
|
||||
} = $props();
|
||||
let {
|
||||
grade,
|
||||
statsData,
|
||||
correctBookId,
|
||||
handleShare,
|
||||
copyToClipboard,
|
||||
copied = $bindable(false),
|
||||
statsSubmitted,
|
||||
guessCount,
|
||||
reference,
|
||||
onChapterGuessCompleted,
|
||||
} = $props();
|
||||
|
||||
let bookName = $derived(getBookById(correctBookId)?.name ?? "");
|
||||
let hasWebShare = $derived(
|
||||
typeof navigator !== "undefined" && "share" in navigator
|
||||
);
|
||||
let copySuccess = $state(false);
|
||||
let bookName = $derived(getBookById(correctBookId)?.name ?? "");
|
||||
let hasWebShare = $derived(
|
||||
typeof navigator !== "undefined" && "share" in navigator,
|
||||
);
|
||||
let copySuccess = $state(false);
|
||||
|
||||
// List of congratulations messages with weights
|
||||
const congratulationsMessages: WeightedMessage[] = [
|
||||
{ text: "Congratulations!", weight: 10 },
|
||||
{ text: "You got it!", weight: 1000 },
|
||||
{ text: "Yup.", weight: 100 },
|
||||
{ text: "Very nice!", weight: 1 },
|
||||
];
|
||||
// List of congratulations messages with weights
|
||||
const congratulationsMessages: WeightedMessage[] = [
|
||||
{ text: "Congratulations!", weight: 10 },
|
||||
{ text: "You got it!", weight: 1000 },
|
||||
{ text: "Yup.", weight: 100 },
|
||||
{ text: "Very nice!", weight: 1 },
|
||||
];
|
||||
|
||||
// Function to select a random message based on weights
|
||||
function getRandomCongratulationsMessage(): string {
|
||||
// Special case for first try success
|
||||
if (guessCount === 1) {
|
||||
const n = Math.random();
|
||||
if (n < 0.99) {
|
||||
return "🌟 First try! 🌟";
|
||||
} else {
|
||||
return "🗣️ Axios! 🗣️";
|
||||
}
|
||||
}
|
||||
// Function to select a random message based on weights
|
||||
function getRandomCongratulationsMessage(): string {
|
||||
// Special case for first try success
|
||||
if (guessCount === 1) {
|
||||
const n = Math.random();
|
||||
if (n < 0.99) {
|
||||
return "🌟 First try! 🌟";
|
||||
} else {
|
||||
return "🗣️ Axios! 🗣️";
|
||||
}
|
||||
}
|
||||
|
||||
const totalWeight = congratulationsMessages.reduce(
|
||||
(sum, msg) => sum + msg.weight,
|
||||
0
|
||||
);
|
||||
let random = Math.random() * totalWeight;
|
||||
const totalWeight = congratulationsMessages.reduce(
|
||||
(sum, msg) => sum + msg.weight,
|
||||
0,
|
||||
);
|
||||
let random = Math.random() * totalWeight;
|
||||
|
||||
for (const message of congratulationsMessages) {
|
||||
random -= message.weight;
|
||||
if (random <= 0) {
|
||||
return message.text;
|
||||
}
|
||||
}
|
||||
for (const message of congratulationsMessages) {
|
||||
random -= message.weight;
|
||||
if (random <= 0) {
|
||||
return message.text;
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback to first message if something goes wrong
|
||||
return congratulationsMessages[0].text;
|
||||
}
|
||||
// Fallback to first message if something goes wrong
|
||||
return congratulationsMessages[0].text;
|
||||
}
|
||||
|
||||
// Generate the congratulations message
|
||||
let congratulationsMessage = $derived(getRandomCongratulationsMessage());
|
||||
// Generate the congratulations message
|
||||
let congratulationsMessage = $derived(getRandomCongratulationsMessage());
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<Container
|
||||
class="w-full p-8 sm:p-12 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 shadow-2xl text-center fade-in"
|
||||
>
|
||||
<p class="text-2xl sm:text-3xl md:text-4xl leading-relaxed">
|
||||
{congratulationsMessage} The verse is from
|
||||
<span class="font-black text-3xl md:text-4xl">{bookName}</span>.
|
||||
</p>
|
||||
<p class="text-lg sm:text-xl md:text-2xl mt-4">
|
||||
You guessed correctly after {guessCount}
|
||||
{guessCount === 1 ? "guess" : "guesses"}.
|
||||
<span class="font-bold bg-white/40 rounded px-1.5 py-0.75">{grade}</span>
|
||||
</p>
|
||||
<Container
|
||||
class="w-full p-8 sm:p-12 bg-linear-to-r from-green-400/10 to-green-600/30 text-gray-800 shadow-2xl text-center fade-in"
|
||||
>
|
||||
<p class="text-2xl sm:text-3xl md:text-4xl leading-relaxed">
|
||||
{congratulationsMessage} The verse is from
|
||||
<span class="font-black text-3xl md:text-4xl">{bookName}</span>.
|
||||
</p>
|
||||
<p class="text-lg sm:text-xl md:text-2xl mt-4">
|
||||
You guessed correctly after {guessCount}
|
||||
{guessCount === 1 ? "guess" : "guesses"}.
|
||||
<span class="font-bold bg-white/40 rounded px-1.5 py-0.75"
|
||||
>{grade}</span
|
||||
>
|
||||
</p>
|
||||
|
||||
<div class="flex justify-center mt-6">
|
||||
{#if hasWebShare}
|
||||
<!-- mobile and arc in production -->
|
||||
<button
|
||||
onclick={handleShare}
|
||||
data-umami-event="Share"
|
||||
class="text-2xl font-bold p-4 bg-white/70 hover:bg-white/80 rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
|
||||
>
|
||||
📤 Share
|
||||
</button>
|
||||
<button
|
||||
onclick={() => {
|
||||
copyToClipboard();
|
||||
copySuccess = true;
|
||||
setTimeout(() => {
|
||||
copySuccess = false;
|
||||
}, 3000);
|
||||
}}
|
||||
data-umami-event="Copy to Clipboard"
|
||||
class={`text-2xl font-bold p-4 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
|
||||
copySuccess ? "bg-white/30" : "bg-white/70 hover:bg-white/80"
|
||||
}`}
|
||||
>
|
||||
{copySuccess ? "✅ Copied!" : "📋 Copy"}
|
||||
</button>
|
||||
{:else}
|
||||
<!-- dev mode and desktop browsers -->
|
||||
<button
|
||||
onclick={handleShare}
|
||||
data-umami-event="Copy to Clipboard"
|
||||
class={`text-2xl font-bold p-4 ${
|
||||
copied ? "bg-white/30" : "bg-white/70 hover:bg-white/80"
|
||||
} rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
|
||||
>
|
||||
{copied ? "✅ Copied!" : "📋 Share"}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex justify-center mt-6">
|
||||
{#if hasWebShare}
|
||||
<!-- mobile and arc in production -->
|
||||
<button
|
||||
onclick={handleShare}
|
||||
data-umami-event="Share"
|
||||
class="text-2xl font-bold p-4 bg-white/70 hover:bg-white/80 rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
|
||||
>
|
||||
📤 Share
|
||||
</button>
|
||||
<button
|
||||
onclick={() => {
|
||||
copyToClipboard();
|
||||
copySuccess = true;
|
||||
setTimeout(() => {
|
||||
copySuccess = false;
|
||||
}, 3000);
|
||||
}}
|
||||
data-umami-event="Copy to Clipboard"
|
||||
class={`text-2xl font-bold p-4 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
|
||||
copySuccess
|
||||
? "bg-white/30"
|
||||
: "bg-white/70 hover:bg-white/80"
|
||||
}`}
|
||||
>
|
||||
{copySuccess ? "✅ Copied!" : "📋 Copy"}
|
||||
</button>
|
||||
{:else}
|
||||
<!-- dev mode and desktop browsers -->
|
||||
<button
|
||||
onclick={handleShare}
|
||||
data-umami-event="Copy to Clipboard"
|
||||
class={`text-2xl font-bold p-4 ${
|
||||
copied ? "bg-white/30" : "bg-white/70 hover:bg-white/80"
|
||||
} rounded-xl inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
|
||||
>
|
||||
{copied ? "✅ Copied!" : "📋 Share"}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if guessCount !== 1}
|
||||
<p class="pt-6 big-text text-gray-700!">
|
||||
{getNextGradeMessage(guessCount)}
|
||||
</p>
|
||||
{/if}
|
||||
</Container>
|
||||
{#if guessCount !== 1}
|
||||
<p class="pt-6 big-text text-gray-700!">
|
||||
{getNextGradeMessage(guessCount)}
|
||||
</p>
|
||||
{/if}
|
||||
</Container>
|
||||
|
||||
<!-- S++ Bonus Challenge for first try -->
|
||||
{#if guessCount === 1}
|
||||
<ChapterGuess
|
||||
{reference}
|
||||
bookId={correctBookId}
|
||||
onCompleted={onChapterGuessCompleted}
|
||||
/>
|
||||
{/if}
|
||||
<!-- S++ Bonus Challenge for first try -->
|
||||
{#if guessCount === 1}
|
||||
<ChapterGuess
|
||||
{reference}
|
||||
bookId={correctBookId}
|
||||
onCompleted={onChapterGuessCompleted}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<CountdownTimer />
|
||||
<CountdownTimer />
|
||||
|
||||
<!-- Statistics Display -->
|
||||
{#if statsData}
|
||||
<Container
|
||||
class="w-full p-4 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
|
||||
>
|
||||
<div
|
||||
class="grid grid-cols-3 gap-4 gap-x-8 text-center"
|
||||
in:fade={{ delay: 800 }}
|
||||
>
|
||||
<!-- Solve Rank Column -->
|
||||
<div class="flex flex-col">
|
||||
<div class="text-3xl sm:text-4xl font-black">
|
||||
#{statsData.solveRank}
|
||||
</div>
|
||||
<div class="text-sm sm:text-sm opacity-90 mt-1">
|
||||
You were the {toOrdinal(statsData.solveRank)} person to solve today
|
||||
</div>
|
||||
</div>
|
||||
<!-- Statistics Display -->
|
||||
{#if statsData}
|
||||
<Container
|
||||
class="w-full p-4 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
|
||||
>
|
||||
<div
|
||||
class="grid grid-cols-3 gap-4 gap-x-8 text-center"
|
||||
in:fade={{ delay: 800 }}
|
||||
>
|
||||
<!-- Solve Rank Column -->
|
||||
<div class="flex flex-col">
|
||||
<div class="text-3xl sm:text-4xl font-black">
|
||||
#{statsData.solveRank}
|
||||
</div>
|
||||
<div class="text-sm sm:text-sm opacity-90 mt-1">
|
||||
You were the {toOrdinal(statsData.solveRank)} person to solve
|
||||
today
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Guess Rank Column -->
|
||||
<div class="flex flex-col">
|
||||
<div class="text-3xl sm:text-4xl font-black">
|
||||
{Math.round(
|
||||
((statsData.totalSolves - statsData.guessRank + 1) /
|
||||
statsData.totalSolves) *
|
||||
100
|
||||
)}%
|
||||
</div>
|
||||
<div class="text-sm sm:text-sm opacity-90 mt-1">
|
||||
You ranked {toOrdinal(statsData.guessRank)} of {statsData.totalSolves}
|
||||
total solves
|
||||
</div>
|
||||
</div>
|
||||
<!-- Guess Rank Column -->
|
||||
<div class="flex flex-col">
|
||||
<div class="text-3xl sm:text-4xl font-black">
|
||||
{toOrdinal(statsData.guessRank)}
|
||||
</div>
|
||||
<div class="text-sm sm:text-sm opacity-90 mt-1">
|
||||
You ranked {toOrdinal(statsData.guessRank)} of {statsData.totalSolves}
|
||||
{statsData.totalSolves === 1
|
||||
? "solve"
|
||||
: "solves"}{statsData.tiedCount > 0
|
||||
? `, tied with ${statsData.tiedCount} ${statsData.tiedCount === 1 ? "other" : "others"}`
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Average Column -->
|
||||
<div class="flex flex-col">
|
||||
<div class="text-3xl sm:text-4xl font-black">
|
||||
{statsData.averageGuesses}
|
||||
</div>
|
||||
<div class="text-sm sm:text-sm opacity-90 mt-1">
|
||||
People guessed correctly after {statsData.averageGuesses}
|
||||
{statsData.averageGuesses === 1 ? "guess" : "guesses"} on average
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
{:else if !statsSubmitted}
|
||||
<Container
|
||||
class="w-full p-6 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
|
||||
>
|
||||
<div class="text-sm opacity-80">Submitting stats...</div>
|
||||
</Container>
|
||||
{/if}
|
||||
<!-- Average Column -->
|
||||
<div class="flex flex-col">
|
||||
<div class="text-3xl sm:text-4xl font-black">
|
||||
{statsData.averageGuesses}
|
||||
</div>
|
||||
<div class="text-sm sm:text-sm opacity-90 mt-1">
|
||||
People guessed correctly after {statsData.averageGuesses}
|
||||
{statsData.averageGuesses === 1 ? "guess" : "guesses"} on
|
||||
average
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
{:else if !statsSubmitted}
|
||||
<Container
|
||||
class="w-full p-6 bg-white/50 backdrop-blur-sm text-gray-800 shadow-lg text-center"
|
||||
>
|
||||
<div class="text-sm opacity-80">Submitting stats...</div>
|
||||
</Container>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,494 +1,510 @@
|
||||
<script lang="ts">
|
||||
import { bibleBooks, type BibleBook } from "$lib/types/bible";
|
||||
import { bibleBooks, type BibleBook } from "$lib/types/bible";
|
||||
|
||||
import type { PageProps } from "./$types";
|
||||
import { browser } from "$app/environment";
|
||||
import type { PageProps } from "./$types";
|
||||
import { browser } from "$app/environment";
|
||||
|
||||
import VerseDisplay from "$lib/components/VerseDisplay.svelte";
|
||||
import SearchInput from "$lib/components/SearchInput.svelte";
|
||||
import GuessesTable from "$lib/components/GuessesTable.svelte";
|
||||
import WinScreen from "$lib/components/WinScreen.svelte";
|
||||
import Feedback from "$lib/components/Feedback.svelte";
|
||||
import TitleAnimation from "$lib/components/TitleAnimation.svelte";
|
||||
import { getGrade } from "$lib/utils/game";
|
||||
import VerseDisplay from "$lib/components/VerseDisplay.svelte";
|
||||
import SearchInput from "$lib/components/SearchInput.svelte";
|
||||
import GuessesTable from "$lib/components/GuessesTable.svelte";
|
||||
import WinScreen from "$lib/components/WinScreen.svelte";
|
||||
import Feedback from "$lib/components/Feedback.svelte";
|
||||
import TitleAnimation from "$lib/components/TitleAnimation.svelte";
|
||||
import { getGrade } from "$lib/utils/game";
|
||||
|
||||
interface Guess {
|
||||
book: BibleBook;
|
||||
testamentMatch: boolean;
|
||||
sectionMatch: boolean;
|
||||
adjacent: boolean;
|
||||
firstLetterMatch: boolean;
|
||||
}
|
||||
interface Guess {
|
||||
book: BibleBook;
|
||||
testamentMatch: boolean;
|
||||
sectionMatch: boolean;
|
||||
adjacent: boolean;
|
||||
firstLetterMatch: boolean;
|
||||
}
|
||||
|
||||
let { data }: PageProps = $props();
|
||||
let { data }: PageProps = $props();
|
||||
|
||||
let dailyVerse = $derived(data.dailyVerse);
|
||||
let correctBookId = $derived(data.correctBookId);
|
||||
let dailyVerse = $derived(data.dailyVerse);
|
||||
let correctBookId = $derived(data.correctBookId);
|
||||
|
||||
let guesses = $state<Guess[]>([]);
|
||||
let guesses = $state<Guess[]>([]);
|
||||
|
||||
let searchQuery = $state("");
|
||||
let searchQuery = $state("");
|
||||
|
||||
let copied = $state(false);
|
||||
let isDev = $state(false);
|
||||
let chapterGuessCompleted = $state(false);
|
||||
let chapterCorrect = $state(false);
|
||||
let copied = $state(false);
|
||||
let isDev = $state(false);
|
||||
let chapterGuessCompleted = $state(false);
|
||||
let chapterCorrect = $state(false);
|
||||
|
||||
let anonymousId = $state("");
|
||||
let statsSubmitted = $state(false);
|
||||
let statsData = $state<{
|
||||
solveRank: number;
|
||||
guessRank: number;
|
||||
totalSolves: number;
|
||||
averageGuesses: number;
|
||||
} | null>(null);
|
||||
let anonymousId = $state("");
|
||||
let statsSubmitted = $state(false);
|
||||
let statsData = $state<{
|
||||
solveRank: number;
|
||||
guessRank: number;
|
||||
totalSolves: number;
|
||||
averageGuesses: number;
|
||||
tiedCount: number;
|
||||
} | null>(null);
|
||||
|
||||
let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
|
||||
let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
|
||||
|
||||
const currentDate = $derived(
|
||||
new Date().toLocaleDateString("en-US", {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})
|
||||
);
|
||||
const currentDate = $derived(
|
||||
new Date().toLocaleDateString("en-US", {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
}),
|
||||
);
|
||||
|
||||
let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
|
||||
let grade = $derived(
|
||||
isWon
|
||||
? guesses.length === 1 && chapterCorrect
|
||||
? "S++"
|
||||
: getGrade(guesses.length, getBookById(correctBookId)?.popularity ?? 0)
|
||||
: ""
|
||||
);
|
||||
let blurChapter = $derived(
|
||||
isWon && guesses.length === 1 && !chapterGuessCompleted
|
||||
);
|
||||
let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
|
||||
let grade = $derived(
|
||||
isWon
|
||||
? guesses.length === 1 && chapterCorrect
|
||||
? "S++"
|
||||
: getGrade(
|
||||
guesses.length,
|
||||
getBookById(correctBookId)?.popularity ?? 0,
|
||||
)
|
||||
: "",
|
||||
);
|
||||
let blurChapter = $derived(
|
||||
isWon && guesses.length === 1 && !chapterGuessCompleted,
|
||||
);
|
||||
|
||||
function getBookById(id: string): BibleBook | undefined {
|
||||
return bibleBooks.find((b) => b.id === id);
|
||||
}
|
||||
function getBookById(id: string): BibleBook | undefined {
|
||||
return bibleBooks.find((b) => b.id === id);
|
||||
}
|
||||
|
||||
function isAdjacent(id1: string, id2: string): boolean {
|
||||
const b1 = getBookById(id1);
|
||||
const b2 = getBookById(id2);
|
||||
return !!(b1 && b2 && Math.abs(b1.order - b2.order) === 1);
|
||||
}
|
||||
function isAdjacent(id1: string, id2: string): boolean {
|
||||
const b1 = getBookById(id1);
|
||||
const b2 = getBookById(id2);
|
||||
return !!(b1 && b2 && Math.abs(b1.order - b2.order) === 1);
|
||||
}
|
||||
|
||||
function submitGuess(bookId: string) {
|
||||
if (guesses.some((g) => g.book.id === bookId)) return;
|
||||
function submitGuess(bookId: string) {
|
||||
if (guesses.some((g) => g.book.id === bookId)) return;
|
||||
|
||||
const book = getBookById(bookId);
|
||||
if (!book) return;
|
||||
const book = getBookById(bookId);
|
||||
if (!book) return;
|
||||
|
||||
const correctBook = getBookById(correctBookId);
|
||||
if (!correctBook) return;
|
||||
const correctBook = getBookById(correctBookId);
|
||||
if (!correctBook) return;
|
||||
|
||||
const testamentMatch = book.testament === correctBook.testament;
|
||||
const sectionMatch = book.section === correctBook.section;
|
||||
const adjacent = isAdjacent(bookId, correctBookId);
|
||||
const testamentMatch = book.testament === correctBook.testament;
|
||||
const sectionMatch = book.section === correctBook.section;
|
||||
const adjacent = isAdjacent(bookId, correctBookId);
|
||||
|
||||
// Special case: if correct book is Epistles + starts with "1",
|
||||
// any guess starting with "1" counts as first letter match
|
||||
const correctIsEpistlesWithNumber = correctBook.section === "Epistles" && correctBook.name[0] === "1";
|
||||
const guessStartsWithNumber = book.name[0] === "1";
|
||||
// Special case: if correct book is Epistles + starts with "1",
|
||||
// any guess starting with "1" counts as first letter match
|
||||
const correctIsEpistlesWithNumber =
|
||||
correctBook.section === "Epistles" && correctBook.name[0] === "1";
|
||||
const guessStartsWithNumber = book.name[0] === "1";
|
||||
|
||||
const firstLetterMatch = correctIsEpistlesWithNumber && guessStartsWithNumber
|
||||
? true
|
||||
: book.name[0].toUpperCase() === correctBook.name[0].toUpperCase();
|
||||
const firstLetterMatch =
|
||||
correctIsEpistlesWithNumber && guessStartsWithNumber
|
||||
? true
|
||||
: book.name[0].toUpperCase() ===
|
||||
correctBook.name[0].toUpperCase();
|
||||
|
||||
console.log(
|
||||
`Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`
|
||||
);
|
||||
console.log(
|
||||
`Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`,
|
||||
);
|
||||
|
||||
if (guesses.length === 0) {
|
||||
const key = `bibdle-first-guess-${dailyVerse.date}`;
|
||||
if (
|
||||
localStorage.getItem(key) !== "true" &&
|
||||
browser &&
|
||||
(window as any).umami
|
||||
) {
|
||||
(window as any).umami.track("First guess");
|
||||
localStorage.setItem(key, "true");
|
||||
}
|
||||
}
|
||||
if (guesses.length === 0) {
|
||||
const key = `bibdle-first-guess-${dailyVerse.date}`;
|
||||
if (
|
||||
localStorage.getItem(key) !== "true" &&
|
||||
browser &&
|
||||
(window as any).umami
|
||||
) {
|
||||
(window as any).umami.track("First guess");
|
||||
localStorage.setItem(key, "true");
|
||||
}
|
||||
}
|
||||
|
||||
guesses = [
|
||||
{
|
||||
book,
|
||||
testamentMatch,
|
||||
sectionMatch,
|
||||
adjacent,
|
||||
firstLetterMatch,
|
||||
},
|
||||
...guesses,
|
||||
];
|
||||
guesses = [
|
||||
{
|
||||
book,
|
||||
testamentMatch,
|
||||
sectionMatch,
|
||||
adjacent,
|
||||
firstLetterMatch,
|
||||
},
|
||||
...guesses,
|
||||
];
|
||||
|
||||
searchQuery = "";
|
||||
}
|
||||
searchQuery = "";
|
||||
}
|
||||
|
||||
function generateUUID(): string {
|
||||
// Try native randomUUID if available
|
||||
if (typeof window.crypto.randomUUID === "function") {
|
||||
return window.crypto.randomUUID();
|
||||
}
|
||||
function generateUUID(): string {
|
||||
// Try native randomUUID if available
|
||||
if (typeof window.crypto.randomUUID === "function") {
|
||||
return window.crypto.randomUUID();
|
||||
}
|
||||
|
||||
// Fallback UUID v4 generator for older browsers
|
||||
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
|
||||
const r = window.crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0;
|
||||
const v = c === "x" ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
// Fallback UUID v4 generator for older browsers
|
||||
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
|
||||
const r =
|
||||
window.crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0;
|
||||
const v = c === "x" ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
}
|
||||
|
||||
function getOrCreateAnonymousId(): string {
|
||||
if (!browser) return "";
|
||||
const key = "bibdle-anonymous-id";
|
||||
let id = localStorage.getItem(key);
|
||||
if (!id) {
|
||||
id = generateUUID();
|
||||
localStorage.setItem(key, id);
|
||||
}
|
||||
return id;
|
||||
}
|
||||
function getOrCreateAnonymousId(): string {
|
||||
if (!browser) return "";
|
||||
const key = "bibdle-anonymous-id";
|
||||
let id = localStorage.getItem(key);
|
||||
if (!id) {
|
||||
id = generateUUID();
|
||||
localStorage.setItem(key, id);
|
||||
}
|
||||
return id;
|
||||
}
|
||||
|
||||
// Initialize anonymous ID
|
||||
$effect(() => {
|
||||
if (!browser) return;
|
||||
anonymousId = getOrCreateAnonymousId();
|
||||
const statsKey = `bibdle-stats-submitted-${dailyVerse.date}`;
|
||||
statsSubmitted = localStorage.getItem(statsKey) === "true";
|
||||
const chapterGuessKey = `bibdle-chapter-guess-${dailyVerse.reference}`;
|
||||
chapterGuessCompleted = localStorage.getItem(chapterGuessKey) !== null;
|
||||
if (chapterGuessCompleted) {
|
||||
const saved = localStorage.getItem(chapterGuessKey);
|
||||
if (saved) {
|
||||
const data = JSON.parse(saved);
|
||||
const match = dailyVerse.reference.match(/\s(\d+):/);
|
||||
const correctChapter = match ? parseInt(match[1], 10) : 1;
|
||||
chapterCorrect = data.selectedChapter === correctChapter;
|
||||
}
|
||||
}
|
||||
});
|
||||
// Initialize anonymous ID
|
||||
$effect(() => {
|
||||
if (!browser) return;
|
||||
anonymousId = getOrCreateAnonymousId();
|
||||
const statsKey = `bibdle-stats-submitted-${dailyVerse.date}`;
|
||||
statsSubmitted = localStorage.getItem(statsKey) === "true";
|
||||
const chapterGuessKey = `bibdle-chapter-guess-${dailyVerse.reference}`;
|
||||
chapterGuessCompleted = localStorage.getItem(chapterGuessKey) !== null;
|
||||
if (chapterGuessCompleted) {
|
||||
const saved = localStorage.getItem(chapterGuessKey);
|
||||
if (saved) {
|
||||
const data = JSON.parse(saved);
|
||||
const match = dailyVerse.reference.match(/\s(\d+):/);
|
||||
const correctChapter = match ? parseInt(match[1], 10) : 1;
|
||||
chapterCorrect = data.selectedChapter === correctChapter;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (!browser) return;
|
||||
isDev = window.location.host === "localhost:5173";
|
||||
});
|
||||
$effect(() => {
|
||||
if (!browser) return;
|
||||
isDev = window.location.host === "localhost:5173";
|
||||
});
|
||||
|
||||
// Load saved guesses
|
||||
$effect(() => {
|
||||
if (!browser) return;
|
||||
// Load saved guesses
|
||||
$effect(() => {
|
||||
if (!browser) return;
|
||||
|
||||
const key = `bibdle-guesses-${dailyVerse.date}`;
|
||||
const saved = localStorage.getItem(key);
|
||||
if (saved) {
|
||||
let savedIds: string[] = JSON.parse(saved);
|
||||
savedIds = Array.from(new Set(savedIds));
|
||||
guesses = savedIds.map((bookId: string) => {
|
||||
const book = getBookById(bookId)!;
|
||||
const correctBook = getBookById(correctBookId)!;
|
||||
const testamentMatch = book.testament === correctBook.testament;
|
||||
const sectionMatch = book.section === correctBook.section;
|
||||
const adjacent = isAdjacent(bookId, correctBookId);
|
||||
const key = `bibdle-guesses-${dailyVerse.date}`;
|
||||
const saved = localStorage.getItem(key);
|
||||
if (saved) {
|
||||
let savedIds: string[] = JSON.parse(saved);
|
||||
savedIds = Array.from(new Set(savedIds));
|
||||
guesses = savedIds.map((bookId: string) => {
|
||||
const book = getBookById(bookId)!;
|
||||
const correctBook = getBookById(correctBookId)!;
|
||||
const testamentMatch = book.testament === correctBook.testament;
|
||||
const sectionMatch = book.section === correctBook.section;
|
||||
const adjacent = isAdjacent(bookId, correctBookId);
|
||||
|
||||
// Apply same first letter logic as in submitGuess
|
||||
const correctIsEpistlesWithNumber = correctBook.section === "Epistles" && correctBook.name[0] === "1";
|
||||
const guessStartsWithNumber = book.name[0] === "1";
|
||||
// Apply same first letter logic as in submitGuess
|
||||
const correctIsEpistlesWithNumber =
|
||||
correctBook.section === "Epistles" &&
|
||||
correctBook.name[0] === "1";
|
||||
const guessStartsWithNumber = book.name[0] === "1";
|
||||
|
||||
const firstLetterMatch = correctIsEpistlesWithNumber && guessStartsWithNumber
|
||||
? true
|
||||
: book.name[0].toUpperCase() === correctBook.name[0].toUpperCase();
|
||||
const firstLetterMatch =
|
||||
correctIsEpistlesWithNumber && guessStartsWithNumber
|
||||
? true
|
||||
: book.name[0].toUpperCase() ===
|
||||
correctBook.name[0].toUpperCase();
|
||||
|
||||
return {
|
||||
book,
|
||||
testamentMatch,
|
||||
sectionMatch,
|
||||
adjacent,
|
||||
firstLetterMatch,
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
return {
|
||||
book,
|
||||
testamentMatch,
|
||||
sectionMatch,
|
||||
adjacent,
|
||||
firstLetterMatch,
|
||||
};
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (!browser) return;
|
||||
localStorage.setItem(
|
||||
`bibdle-guesses-${dailyVerse.date}`,
|
||||
JSON.stringify(guesses.map((g) => g.book.id))
|
||||
);
|
||||
});
|
||||
$effect(() => {
|
||||
if (!browser) return;
|
||||
localStorage.setItem(
|
||||
`bibdle-guesses-${dailyVerse.date}`,
|
||||
JSON.stringify(guesses.map((g) => g.book.id)),
|
||||
);
|
||||
});
|
||||
|
||||
// Auto-submit stats when user wins
|
||||
$effect(() => {
|
||||
console.log("Stats effect triggered:", {
|
||||
browser,
|
||||
isWon,
|
||||
anonymousId,
|
||||
statsSubmitted,
|
||||
statsData,
|
||||
});
|
||||
// Auto-submit stats when user wins
|
||||
$effect(() => {
|
||||
console.log("Stats effect triggered:", {
|
||||
browser,
|
||||
isWon,
|
||||
anonymousId,
|
||||
statsSubmitted,
|
||||
statsData,
|
||||
});
|
||||
|
||||
if (!browser || !isWon || !anonymousId) {
|
||||
console.log("Basic conditions not met");
|
||||
return;
|
||||
}
|
||||
if (!browser || !isWon || !anonymousId) {
|
||||
console.log("Basic conditions not met");
|
||||
return;
|
||||
}
|
||||
|
||||
if (statsSubmitted && !statsData) {
|
||||
console.log("Fetching existing stats...");
|
||||
if (statsSubmitted && !statsData) {
|
||||
console.log("Fetching existing stats...");
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/submit-completion?anonymousId=${anonymousId}&date=${dailyVerse.date}`
|
||||
);
|
||||
const result = await response.json();
|
||||
console.log("Stats response:", result);
|
||||
(async () => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/submit-completion?anonymousId=${anonymousId}&date=${dailyVerse.date}`,
|
||||
);
|
||||
const result = await response.json();
|
||||
console.log("Stats response:", result);
|
||||
|
||||
if (result.success && result.stats) {
|
||||
console.log("Setting stats data:", result.stats);
|
||||
statsData = result.stats;
|
||||
localStorage.setItem(
|
||||
`bibdle-stats-submitted-${dailyVerse.date}`,
|
||||
"true"
|
||||
);
|
||||
} else if (result.error) {
|
||||
console.error("Server error:", result.error);
|
||||
} else {
|
||||
console.error("Unexpected response format:", result);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Stats fetch failed:", err);
|
||||
}
|
||||
})();
|
||||
if (result.success && result.stats) {
|
||||
console.log("Setting stats data:", result.stats);
|
||||
statsData = result.stats;
|
||||
localStorage.setItem(
|
||||
`bibdle-stats-submitted-${dailyVerse.date}`,
|
||||
"true",
|
||||
);
|
||||
} else if (result.error) {
|
||||
console.error("Server error:", result.error);
|
||||
} else {
|
||||
console.error("Unexpected response format:", result);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Stats fetch failed:", err);
|
||||
}
|
||||
})();
|
||||
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Submitting stats...");
|
||||
console.log("Submitting stats...");
|
||||
|
||||
async function submitStats() {
|
||||
try {
|
||||
const payload = {
|
||||
anonymousId,
|
||||
date: dailyVerse.date,
|
||||
guessCount: guesses.length,
|
||||
};
|
||||
async function submitStats() {
|
||||
try {
|
||||
const payload = {
|
||||
anonymousId,
|
||||
date: dailyVerse.date,
|
||||
guessCount: guesses.length,
|
||||
};
|
||||
|
||||
console.log("Sending POST request with:", payload);
|
||||
console.log("Sending POST request with:", payload);
|
||||
|
||||
const response = await fetch("/api/submit-completion", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
const response = await fetch("/api/submit-completion", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
console.log("Stats response:", result);
|
||||
const result = await response.json();
|
||||
console.log("Stats response:", result);
|
||||
|
||||
if (result.success && result.stats) {
|
||||
console.log("Setting stats data:", result.stats);
|
||||
statsData = result.stats;
|
||||
statsSubmitted = true;
|
||||
localStorage.setItem(
|
||||
`bibdle-stats-submitted-${dailyVerse.date}`,
|
||||
"true"
|
||||
);
|
||||
} else if (result.error) {
|
||||
console.error("Server error:", result.error);
|
||||
} else {
|
||||
console.error("Unexpected response format:", result);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Stats submission failed:", err);
|
||||
}
|
||||
}
|
||||
if (result.success && result.stats) {
|
||||
console.log("Setting stats data:", result.stats);
|
||||
statsData = result.stats;
|
||||
statsSubmitted = true;
|
||||
localStorage.setItem(
|
||||
`bibdle-stats-submitted-${dailyVerse.date}`,
|
||||
"true",
|
||||
);
|
||||
} else if (result.error) {
|
||||
console.error("Server error:", result.error);
|
||||
} else {
|
||||
console.error("Unexpected response format:", result);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Stats submission failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
submitStats();
|
||||
});
|
||||
submitStats();
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (!browser || !isWon) return;
|
||||
const key = `bibdle-win-tracked-${dailyVerse.date}`;
|
||||
if (localStorage.getItem(key) === "true") return;
|
||||
if ((window as any).umami) {
|
||||
(window as any).umami.track("Guessed correctly", {
|
||||
totalGuesses: guesses.length,
|
||||
});
|
||||
}
|
||||
localStorage.setItem(key, "true");
|
||||
});
|
||||
$effect(() => {
|
||||
if (!browser || !isWon) return;
|
||||
const key = `bibdle-win-tracked-${dailyVerse.date}`;
|
||||
if (localStorage.getItem(key) === "true") return;
|
||||
if ((window as any).umami) {
|
||||
(window as any).umami.track("Guessed correctly", {
|
||||
totalGuesses: guesses.length,
|
||||
});
|
||||
}
|
||||
localStorage.setItem(key, "true");
|
||||
});
|
||||
|
||||
function generateShareText(): string {
|
||||
const emojis = guesses
|
||||
.slice()
|
||||
.reverse()
|
||||
.map((guess) => {
|
||||
if (guess.book.id === correctBookId) return "✅";
|
||||
if (guess.adjacent) return "‼️";
|
||||
if (guess.sectionMatch) return "🟩";
|
||||
if (guess.testamentMatch) return "🟧";
|
||||
return "🟥";
|
||||
})
|
||||
.join("");
|
||||
function generateShareText(): string {
|
||||
const emojis = guesses
|
||||
.slice()
|
||||
.reverse()
|
||||
.map((guess) => {
|
||||
if (guess.book.id === correctBookId) return "✅";
|
||||
if (guess.adjacent) return "‼️";
|
||||
if (guess.sectionMatch) return "🟩";
|
||||
if (guess.testamentMatch) return "🟧";
|
||||
return "🟥";
|
||||
})
|
||||
.join("");
|
||||
|
||||
const dateFormatter = new Intl.DateTimeFormat("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
const formattedDate = dateFormatter.format(
|
||||
new Date(`${dailyVerse.date}T00:00:00`)
|
||||
);
|
||||
const siteUrl = window.location.origin;
|
||||
return [
|
||||
`📖 Bibdle | ${formattedDate} 📖`,
|
||||
`${grade} (${guesses.length} ${guesses.length === 1 ? "guess" : "guesses"})`,
|
||||
`${emojis}${guesses.length === 1 && chapterCorrect ? " ⭐" : ""}`,
|
||||
siteUrl,
|
||||
].join("\n");
|
||||
}
|
||||
const dateFormatter = new Intl.DateTimeFormat("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
});
|
||||
const formattedDate = dateFormatter.format(
|
||||
new Date(`${dailyVerse.date}T00:00:00`),
|
||||
);
|
||||
const siteUrl = window.location.origin;
|
||||
return [
|
||||
`📖 Bibdle | ${formattedDate} 📖`,
|
||||
`${grade} (${guesses.length} ${guesses.length === 1 ? "guess" : "guesses"})`,
|
||||
`${emojis}${guesses.length === 1 && chapterCorrect ? " ⭐" : ""}`,
|
||||
siteUrl,
|
||||
].join("\n");
|
||||
}
|
||||
|
||||
async function share() {
|
||||
if (!browser) return;
|
||||
async function share() {
|
||||
if (!browser) return;
|
||||
|
||||
const shareText = generateShareText();
|
||||
const shareText = generateShareText();
|
||||
|
||||
try {
|
||||
if ("share" in navigator) {
|
||||
await (navigator as any).share({ text: shareText });
|
||||
} else {
|
||||
await (navigator as any).clipboard.writeText(shareText);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Share failed:", err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
try {
|
||||
if ("share" in navigator) {
|
||||
await (navigator as any).share({ text: shareText });
|
||||
} else {
|
||||
await (navigator as any).clipboard.writeText(shareText);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Share failed:", err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
async function copyToClipboard() {
|
||||
if (!browser) return;
|
||||
async function copyToClipboard() {
|
||||
if (!browser) return;
|
||||
|
||||
const shareText = generateShareText();
|
||||
const shareText = generateShareText();
|
||||
|
||||
try {
|
||||
await (navigator as any).clipboard.writeText(shareText);
|
||||
copied = true;
|
||||
setTimeout(() => {
|
||||
copied = false;
|
||||
}, 5000);
|
||||
} catch (err) {
|
||||
console.error("Copy to clipboard failed:", err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
try {
|
||||
await (navigator as any).clipboard.writeText(shareText);
|
||||
copied = true;
|
||||
setTimeout(() => {
|
||||
copied = false;
|
||||
}, 5000);
|
||||
} catch (err) {
|
||||
console.error("Copy to clipboard failed:", err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
function handleShare() {
|
||||
if (copied || !browser) return;
|
||||
const useClipboard = !("share" in navigator);
|
||||
if (useClipboard) {
|
||||
copied = true;
|
||||
}
|
||||
share()
|
||||
.then(() => {
|
||||
if (useClipboard) {
|
||||
setTimeout(() => {
|
||||
copied = false;
|
||||
}, 5000);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
if (useClipboard) {
|
||||
copied = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
function handleShare() {
|
||||
if (copied || !browser) return;
|
||||
const useClipboard = !("share" in navigator);
|
||||
if (useClipboard) {
|
||||
copied = true;
|
||||
}
|
||||
share()
|
||||
.then(() => {
|
||||
if (useClipboard) {
|
||||
setTimeout(() => {
|
||||
copied = false;
|
||||
}, 5000);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
if (useClipboard) {
|
||||
copied = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function clearLocalStorage() {
|
||||
if (!browser) return;
|
||||
// Clear all bibdle-related localStorage items
|
||||
const keysToRemove: string[] = [];
|
||||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const key = localStorage.key(i);
|
||||
if (key && key.startsWith("bibdle-")) {
|
||||
keysToRemove.push(key);
|
||||
}
|
||||
}
|
||||
keysToRemove.forEach((key) => localStorage.removeItem(key));
|
||||
// Reload the page to reset state
|
||||
window.location.reload();
|
||||
}
|
||||
function clearLocalStorage() {
|
||||
if (!browser) return;
|
||||
// Clear all bibdle-related localStorage items
|
||||
const keysToRemove: string[] = [];
|
||||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const key = localStorage.key(i);
|
||||
if (key && key.startsWith("bibdle-")) {
|
||||
keysToRemove.push(key);
|
||||
}
|
||||
}
|
||||
keysToRemove.forEach((key) => localStorage.removeItem(key));
|
||||
// Reload the page to reset state
|
||||
window.location.reload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<!-- <title>Bibdle — A daily bible game{isDev ? " (dev)" : ""}</title> -->
|
||||
<title>A daily bible game{isDev ? " (dev)" : ""}</title>
|
||||
<!-- <meta
|
||||
<!-- <title>Bibdle — A daily bible game{isDev ? " (dev)" : ""}</title> -->
|
||||
<title>A daily bible game{isDev ? " (dev)" : ""}</title>
|
||||
<!-- <meta
|
||||
name="description"
|
||||
content="Guess which book of the Bible a verse comes from."
|
||||
/> -->
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 py-8">
|
||||
<div class="w-full max-w-3xl mx-auto px-4">
|
||||
<h1
|
||||
class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-4"
|
||||
>
|
||||
<TitleAnimation />
|
||||
<div class="font-normal"></div>
|
||||
</h1>
|
||||
<div class="text-center mb-8">
|
||||
<span class="big-text"
|
||||
>{isDev ? "Dev Edition | " : ""}{currentDate}</span
|
||||
>
|
||||
</div>
|
||||
<div class="w-full max-w-3xl mx-auto px-4">
|
||||
<h1
|
||||
class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-4"
|
||||
>
|
||||
<TitleAnimation />
|
||||
<div class="font-normal"></div>
|
||||
</h1>
|
||||
<div class="text-center mb-8">
|
||||
<span class="big-text"
|
||||
>{isDev ? "Dev Edition | " : ""}{currentDate}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<VerseDisplay {data} {isWon} {blurChapter} />
|
||||
<div class="flex flex-col gap-6">
|
||||
<VerseDisplay {data} {isWon} {blurChapter} />
|
||||
|
||||
{#if !isWon}
|
||||
<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
|
||||
{:else}
|
||||
<WinScreen
|
||||
{grade}
|
||||
{statsData}
|
||||
{correctBookId}
|
||||
{handleShare}
|
||||
{copyToClipboard}
|
||||
bind:copied
|
||||
{statsSubmitted}
|
||||
guessCount={guesses.length}
|
||||
reference={dailyVerse.reference}
|
||||
onChapterGuessCompleted={() => {
|
||||
chapterGuessCompleted = true;
|
||||
const key = `bibdle-chapter-guess-${dailyVerse.reference}`;
|
||||
const saved = localStorage.getItem(key);
|
||||
if (saved) {
|
||||
const data = JSON.parse(saved);
|
||||
const match = dailyVerse.reference.match(/\s(\d+):/);
|
||||
const correctChapter = match ? parseInt(match[1], 10) : 1;
|
||||
chapterCorrect = data.selectedChapter === correctChapter;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
{#if !isWon}
|
||||
<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
|
||||
{:else}
|
||||
<WinScreen
|
||||
{grade}
|
||||
{statsData}
|
||||
{correctBookId}
|
||||
{handleShare}
|
||||
{copyToClipboard}
|
||||
bind:copied
|
||||
{statsSubmitted}
|
||||
guessCount={guesses.length}
|
||||
reference={dailyVerse.reference}
|
||||
onChapterGuessCompleted={() => {
|
||||
chapterGuessCompleted = true;
|
||||
const key = `bibdle-chapter-guess-${dailyVerse.reference}`;
|
||||
const saved = localStorage.getItem(key);
|
||||
if (saved) {
|
||||
const data = JSON.parse(saved);
|
||||
const match =
|
||||
dailyVerse.reference.match(/\s(\d+):/);
|
||||
const correctChapter = match
|
||||
? parseInt(match[1], 10)
|
||||
: 1;
|
||||
chapterCorrect =
|
||||
data.selectedChapter === correctChapter;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<GuessesTable {guesses} {correctBookId} />
|
||||
<GuessesTable {guesses} {correctBookId} />
|
||||
|
||||
{#if isWon}
|
||||
<Feedback />
|
||||
{/if}
|
||||
</div>
|
||||
{#if isDev}
|
||||
<button
|
||||
onclick={clearLocalStorage}
|
||||
class="mt-4 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg text-sm font-bold transition-colors"
|
||||
>
|
||||
Clear LocalStorage
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if isWon}
|
||||
<Feedback />
|
||||
{/if}
|
||||
</div>
|
||||
{#if isDev}
|
||||
<button
|
||||
onclick={clearLocalStorage}
|
||||
class="mt-4 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg text-sm font-bold transition-colors"
|
||||
>
|
||||
Clear LocalStorage
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -48,13 +48,16 @@ export const POST: RequestHandler = async ({ request }) => {
|
||||
const betterGuesses = allCompletions.filter(c => c.guessCount < guessCount).length;
|
||||
const guessRank = betterGuesses + 1;
|
||||
|
||||
// Count ties: how many have the SAME guessCount (excluding self)
|
||||
const tiedCount = allCompletions.filter(c => c.guessCount === guessCount && c.anonymousId !== anonymousId).length;
|
||||
|
||||
// Average guesses
|
||||
const totalGuesses = allCompletions.reduce((sum, c) => sum + c.guessCount, 0);
|
||||
const averageGuesses = Math.round((totalGuesses / totalSolves) * 10) / 10;
|
||||
|
||||
return json({
|
||||
success: true,
|
||||
stats: { solveRank, guessRank, totalSolves, averageGuesses }
|
||||
stats: { solveRank, guessRank, totalSolves, averageGuesses, tiedCount }
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error submitting completion:', err);
|
||||
@@ -105,13 +108,16 @@ export const GET: RequestHandler = async ({ url }) => {
|
||||
const betterGuesses = allCompletions.filter(c => c.guessCount < guessCount).length;
|
||||
const guessRank = betterGuesses + 1;
|
||||
|
||||
// Count ties: how many have the SAME guessCount (excluding self)
|
||||
const tiedCount = allCompletions.filter(c => c.guessCount === guessCount && c.anonymousId !== anonymousId).length;
|
||||
|
||||
// Average guesses
|
||||
const totalGuesses = allCompletions.reduce((sum, c) => sum + c.guessCount, 0);
|
||||
const averageGuesses = Math.round((totalGuesses / totalSolves) * 10) / 10;
|
||||
|
||||
return json({
|
||||
success: true,
|
||||
stats: { solveRank, guessRank, totalSolves, averageGuesses }
|
||||
stats: { solveRank, guessRank, totalSolves, averageGuesses, tiedCount }
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('Error fetching stats:', err);
|
||||
|
||||
Reference in New Issue
Block a user