mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-02-04 10:54:44 -05:00
silly little BIBDLE title animation
This commit is contained in:
George Powell
83
src/lib/components/TitleAnimation.svelte
Normal file
83
src/lib/components/TitleAnimation.svelte
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
let hovered = $state(false);
|
||||||
|
let isTapped = $state(false);
|
||||||
|
let tapMode = $state(false);
|
||||||
|
|
||||||
|
function handleMouseEnter() {
|
||||||
|
if (!tapMode) {
|
||||||
|
hovered = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleMouseLeave() {
|
||||||
|
hovered = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleTap() {
|
||||||
|
tapMode = true;
|
||||||
|
isTapped = !isTapped;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleKeydown(event: KeyboardEvent) {
|
||||||
|
if (event.key === "Enter" || event.key === " ") {
|
||||||
|
event.preventDefault();
|
||||||
|
handleTap();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let showExpanded = $derived(tapMode ? isTapped : hovered);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="title-container relative inline-block cursor-pointer"
|
||||||
|
onmouseenter={handleMouseEnter}
|
||||||
|
onmouseleave={handleMouseLeave}
|
||||||
|
onclick={handleTap}
|
||||||
|
onkeydown={handleKeydown}
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<!-- BIBDLE (collapsed state) -->
|
||||||
|
<span
|
||||||
|
class="title-word absolute inset-0 text-center transition-all duration-500 ease-in-out"
|
||||||
|
class:opacity-0={showExpanded}
|
||||||
|
class:opacity-100={!showExpanded}
|
||||||
|
>
|
||||||
|
BIBDLE
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- BIBLE DAILY (expanded state) -->
|
||||||
|
<div
|
||||||
|
class="title-expanded flex flex-row items-center justify-center transition-all duration-500 ease-in-out"
|
||||||
|
class:opacity-0={!showExpanded}
|
||||||
|
class:opacity-100={showExpanded}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="transition-all duration-500 ease-in-out"
|
||||||
|
class:translate-x-0={!showExpanded}
|
||||||
|
class:-translate-x-4={showExpanded}>BIBLE</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="transition-all duration-500 ease-in-out"
|
||||||
|
class:translate-x-0={!showExpanded}
|
||||||
|
class:translate-x-4={showExpanded}>DAILY</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.title-container {
|
||||||
|
min-height: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-word,
|
||||||
|
.title-expanded {
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-expanded span {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,150 +1,149 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { fade } from "svelte/transition";
|
import { fade } from "svelte/transition";
|
||||||
import { getBookById, toOrdinal } from "$lib/utils/game";
|
import { getBookById, toOrdinal } from "$lib/utils/game";
|
||||||
|
|
||||||
interface StatsData {
|
interface StatsData {
|
||||||
solveRank: number;
|
solveRank: number;
|
||||||
guessRank: number;
|
guessRank: number;
|
||||||
totalSolves: number;
|
totalSolves: number;
|
||||||
averageGuesses: number;
|
averageGuesses: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface WeightedMessage {
|
interface WeightedMessage {
|
||||||
text: string;
|
text: string;
|
||||||
weight: number;
|
weight: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
let {
|
let {
|
||||||
grade,
|
grade,
|
||||||
statsData,
|
statsData,
|
||||||
correctBookId,
|
correctBookId,
|
||||||
handleShare,
|
handleShare,
|
||||||
copyToClipboard,
|
copyToClipboard,
|
||||||
copied = $bindable(false),
|
copied = $bindable(false),
|
||||||
statsSubmitted,
|
statsSubmitted,
|
||||||
guessCount,
|
guessCount,
|
||||||
} = $props();
|
} = $props();
|
||||||
|
|
||||||
let bookName = $derived(getBookById(correctBookId)?.name ?? "");
|
let bookName = $derived(getBookById(correctBookId)?.name ?? "");
|
||||||
let hasWebShare = $derived(
|
let hasWebShare = $derived(
|
||||||
typeof navigator !== "undefined" && "share" in navigator,
|
typeof navigator !== "undefined" && "share" in navigator
|
||||||
);
|
);
|
||||||
let copySuccess = $state(false);
|
let copySuccess = $state(false);
|
||||||
|
|
||||||
// List of congratulations messages with weights
|
// List of congratulations messages with weights
|
||||||
const congratulationsMessages: WeightedMessage[] = [
|
const congratulationsMessages: WeightedMessage[] = [
|
||||||
{ text: "🎉 Congratulations! 🎉", weight: 1000 },
|
{ text: "🎉 Congratulations! 🎉", weight: 1000 },
|
||||||
{ text: "⭐ You got it! ⭐", weight: 10 },
|
{ text: "⭐ You got it! ⭐", weight: 10 },
|
||||||
{ text: "🎉 Yup 🎉", weight: 5 },
|
{ text: "🎉 Yup 🎉", weight: 5 },
|
||||||
{ text: "👍🏻 Very nice! 👍🏻", weight: 1 },
|
{ text: "👍🏻 Very nice! 👍🏻", weight: 1 },
|
||||||
];
|
];
|
||||||
|
|
||||||
// Function to select a random message based on weights
|
// Function to select a random message based on weights
|
||||||
function getRandomCongratulationsMessage(): string {
|
function getRandomCongratulationsMessage(): string {
|
||||||
// Special case for first try success
|
// Special case for first try success
|
||||||
if (guessCount === 1) {
|
if (guessCount === 1) {
|
||||||
const n = Math.random();
|
const n = Math.random();
|
||||||
if (n < 0.95) {
|
if (n < 0.99) {
|
||||||
return "🤯 First try! 🤯";
|
return "🤯 First try! 🤯";
|
||||||
} else {
|
} else {
|
||||||
return "‼️ Axios ‼️";
|
return "‼️ Axios ‼️";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const totalWeight = congratulationsMessages.reduce(
|
const totalWeight = congratulationsMessages.reduce(
|
||||||
(sum, msg) => sum + msg.weight,
|
(sum, msg) => sum + msg.weight,
|
||||||
0,
|
0
|
||||||
);
|
);
|
||||||
let random = Math.random() * totalWeight;
|
let random = Math.random() * totalWeight;
|
||||||
|
|
||||||
for (const message of congratulationsMessages) {
|
for (const message of congratulationsMessages) {
|
||||||
random -= message.weight;
|
random -= message.weight;
|
||||||
if (random <= 0) {
|
if (random <= 0) {
|
||||||
return message.text;
|
return message.text;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fallback to first message if something goes wrong
|
// Fallback to first message if something goes wrong
|
||||||
return congratulationsMessages[0].text;
|
return congratulationsMessages[0].text;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate the congratulations message
|
// Generate the congratulations message
|
||||||
let congratulationsMessage = $derived(getRandomCongratulationsMessage());
|
let congratulationsMessage = $derived(getRandomCongratulationsMessage());
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="p-8 sm:p-12 w-full bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center"
|
class="p-8 sm:p-12 w-full bg-linear-to-r from-green-400 to-green-600 text-white rounded-2xl shadow-2xl text-center"
|
||||||
>
|
>
|
||||||
<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
|
<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
|
||||||
{congratulationsMessage}
|
{congratulationsMessage}
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-lg sm:text-xl md:text-2xl">
|
<p class="text-lg sm:text-xl md:text-2xl">
|
||||||
The verse is from <span
|
The verse is from <span class="font-black text-xl sm:text-2xl md:text-3xl"
|
||||||
class="font-black text-xl sm:text-2xl md:text-3xl">{bookName}</span
|
>{bookName}</span
|
||||||
>
|
>
|
||||||
</p>
|
</p>
|
||||||
<p
|
<p
|
||||||
class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
|
class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
|
||||||
>
|
>
|
||||||
Your grade: {grade}
|
Your grade: {grade}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{#if hasWebShare}
|
{#if hasWebShare}
|
||||||
<button
|
<button
|
||||||
onclick={handleShare}
|
onclick={handleShare}
|
||||||
data-umami-event="Share"
|
data-umami-event="Share"
|
||||||
class="mt-4 text-2xl font-bold p-2 bg-white/20 hover:bg-white/30 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
|
class="mt-4 text-2xl font-bold p-2 bg-white/20 hover:bg-white/30 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none"
|
||||||
>
|
>
|
||||||
📤 Share
|
📤 Share
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onclick={() => {
|
onclick={() => {
|
||||||
copyToClipboard();
|
copyToClipboard();
|
||||||
copySuccess = true;
|
copySuccess = true;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
copySuccess = false;
|
copySuccess = false;
|
||||||
}, 3000);
|
}, 3000);
|
||||||
}}
|
}}
|
||||||
data-umami-event="Copy to Clipboard"
|
data-umami-event="Copy to Clipboard"
|
||||||
class={`mt-4 text-2xl font-bold p-2 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
|
class={`mt-4 text-2xl font-bold p-2 rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none ${
|
||||||
copySuccess
|
copySuccess
|
||||||
? "bg-green-400/50 hover:bg-green-500/60"
|
? "bg-green-400/50 hover:bg-green-500/60"
|
||||||
: "bg-white/20 hover:bg-white/30"
|
: "bg-white/20 hover:bg-white/30"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
|
{copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
|
||||||
</button>
|
</button>
|
||||||
{:else}
|
{:else}
|
||||||
<button
|
<button
|
||||||
onclick={handleShare}
|
onclick={handleShare}
|
||||||
data-umami-event="Share"
|
data-umami-event="Share"
|
||||||
class={`mt-4 text-2xl font-bold p-2 ${
|
class={`mt-4 text-2xl font-bold p-2 ${
|
||||||
copied
|
copied
|
||||||
? "bg-green-400/50 hover:bg-green-500/60"
|
? "bg-green-400/50 hover:bg-green-500/60"
|
||||||
: "bg-white/20 hover:bg-white/30"
|
: "bg-white/20 hover:bg-white/30"
|
||||||
} rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
|
} rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
|
||||||
>
|
>
|
||||||
{copied ? "Copied to clipboard!" : "📤 Share"}
|
{copied ? "Copied to clipboard!" : "📤 Share"}
|
||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Statistics Display -->
|
<!-- Statistics Display -->
|
||||||
{#if statsData}
|
{#if statsData}
|
||||||
<div class="mt-6 space-y-2 text-lg" in:fade={{ delay: 800 }}>
|
<div class="mt-6 space-y-2 text-lg" in:fade={{ delay: 800 }}>
|
||||||
<p class="font-regular">
|
<p class="font-regular">
|
||||||
You were the {toOrdinal(statsData.solveRank)} person to solve today.
|
You were the {toOrdinal(statsData.solveRank)} person to solve today.
|
||||||
</p>
|
</p>
|
||||||
<p class="font-regular">
|
<p class="font-regular">
|
||||||
You rank <span class="">{toOrdinal(statsData.guessRank)}</span> in
|
You rank <span class="">{toOrdinal(statsData.guessRank)}</span> in guesses.
|
||||||
guesses.
|
</p>
|
||||||
</p>
|
<p class="opacity-90">
|
||||||
<p class="opacity-90">
|
Average: <span class="font-semibold"
|
||||||
Average: <span class="font-semibold"
|
>{Math.ceil(statsData.averageGuesses)}</span
|
||||||
>{Math.ceil(statsData.averageGuesses)}</span
|
> guesses
|
||||||
> guesses
|
</p>
|
||||||
</p>
|
</div>
|
||||||
</div>
|
{:else if !statsSubmitted}
|
||||||
{:else if !statsSubmitted}
|
<div class="mt-6 text-sm opacity-80">Submitting stats...</div>
|
||||||
<div class="mt-6 text-sm opacity-80">Submitting stats...</div>
|
{/if}
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,384 +1,382 @@
|
|||||||
<script lang="ts">
|
<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 type { PageProps } from "./$types";
|
||||||
import { browser } from "$app/environment";
|
import { browser } from "$app/environment";
|
||||||
|
|
||||||
import VerseDisplay from "$lib/components/VerseDisplay.svelte";
|
import VerseDisplay from "$lib/components/VerseDisplay.svelte";
|
||||||
import SearchInput from "$lib/components/SearchInput.svelte";
|
import SearchInput from "$lib/components/SearchInput.svelte";
|
||||||
import GuessesTable from "$lib/components/GuessesTable.svelte";
|
import GuessesTable from "$lib/components/GuessesTable.svelte";
|
||||||
import CountdownTimer from "$lib/components/CountdownTimer.svelte";
|
import CountdownTimer from "$lib/components/CountdownTimer.svelte";
|
||||||
import WinScreen from "$lib/components/WinScreen.svelte";
|
import WinScreen from "$lib/components/WinScreen.svelte";
|
||||||
import Feedback from "$lib/components/Feedback.svelte";
|
import Feedback from "$lib/components/Feedback.svelte";
|
||||||
import { getGrade } from "$lib/utils/game";
|
import TitleAnimation from "$lib/components/TitleAnimation.svelte";
|
||||||
|
import { getGrade } from "$lib/utils/game";
|
||||||
|
|
||||||
interface Guess {
|
interface Guess {
|
||||||
book: BibleBook;
|
book: BibleBook;
|
||||||
testamentMatch: boolean;
|
testamentMatch: boolean;
|
||||||
sectionMatch: boolean;
|
sectionMatch: boolean;
|
||||||
adjacent: boolean;
|
adjacent: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { data }: PageProps = $props();
|
let { data }: PageProps = $props();
|
||||||
|
|
||||||
let dailyVerse = $derived(data.dailyVerse);
|
let dailyVerse = $derived(data.dailyVerse);
|
||||||
let correctBookId = $derived(data.correctBookId);
|
let correctBookId = $derived(data.correctBookId);
|
||||||
|
|
||||||
let guesses = $state<Guess[]>([]);
|
let guesses = $state<Guess[]>([]);
|
||||||
|
|
||||||
let searchQuery = $state("");
|
let searchQuery = $state("");
|
||||||
|
|
||||||
let copied = $state(false);
|
let copied = $state(false);
|
||||||
let isDev = $state(false);
|
let isDev = $state(false);
|
||||||
|
|
||||||
let anonymousId = $state("");
|
let anonymousId = $state("");
|
||||||
let statsSubmitted = $state(false);
|
let statsSubmitted = $state(false);
|
||||||
let statsData = $state<{
|
let statsData = $state<{
|
||||||
solveRank: number;
|
solveRank: number;
|
||||||
guessRank: number;
|
guessRank: number;
|
||||||
totalSolves: number;
|
totalSolves: number;
|
||||||
averageGuesses: number;
|
averageGuesses: number;
|
||||||
} | null>(null);
|
} | null>(null);
|
||||||
|
|
||||||
let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
|
let guessedIds = $derived(new Set(guesses.map((g) => g.book.id)));
|
||||||
|
|
||||||
let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
|
let isWon = $derived(guesses.some((g) => g.book.id === correctBookId));
|
||||||
let grade = $derived(
|
let grade = $derived(
|
||||||
isWon
|
isWon
|
||||||
? getGrade(
|
? getGrade(guesses.length, getBookById(correctBookId)?.popularity ?? 0)
|
||||||
guesses.length,
|
: ""
|
||||||
getBookById(correctBookId)?.popularity ?? 0,
|
);
|
||||||
)
|
|
||||||
: "",
|
|
||||||
);
|
|
||||||
|
|
||||||
function getBookById(id: string): BibleBook | undefined {
|
function getBookById(id: string): BibleBook | undefined {
|
||||||
return bibleBooks.find((b) => b.id === id);
|
return bibleBooks.find((b) => b.id === id);
|
||||||
}
|
}
|
||||||
|
|
||||||
function isAdjacent(id1: string, id2: string): boolean {
|
function isAdjacent(id1: string, id2: string): boolean {
|
||||||
const b1 = getBookById(id1);
|
const b1 = getBookById(id1);
|
||||||
const b2 = getBookById(id2);
|
const b2 = getBookById(id2);
|
||||||
return !!(b1 && b2 && Math.abs(b1.order - b2.order) === 1);
|
return !!(b1 && b2 && Math.abs(b1.order - b2.order) === 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
function submitGuess(bookId: string) {
|
function submitGuess(bookId: string) {
|
||||||
if (guesses.some((g) => g.book.id === bookId)) return;
|
if (guesses.some((g) => g.book.id === bookId)) return;
|
||||||
|
|
||||||
const book = getBookById(bookId);
|
const book = getBookById(bookId);
|
||||||
if (!book) return;
|
if (!book) return;
|
||||||
|
|
||||||
const correctBook = getBookById(correctBookId);
|
const correctBook = getBookById(correctBookId);
|
||||||
if (!correctBook) return;
|
if (!correctBook) return;
|
||||||
|
|
||||||
const testamentMatch = book.testament === correctBook.testament;
|
const testamentMatch = book.testament === correctBook.testament;
|
||||||
const sectionMatch = book.section === correctBook.section;
|
const sectionMatch = book.section === correctBook.section;
|
||||||
const adjacent = isAdjacent(book.id, correctBookId);
|
const adjacent = isAdjacent(book.id, correctBookId);
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
`Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`,
|
`Guess: ${book.name} (order ${book.order}), Correct: ${correctBook.name} (order ${correctBook.order}), Adjacent: ${adjacent}`
|
||||||
);
|
);
|
||||||
|
|
||||||
guesses = [
|
guesses = [
|
||||||
{
|
{
|
||||||
book,
|
book,
|
||||||
testamentMatch,
|
testamentMatch,
|
||||||
sectionMatch,
|
sectionMatch,
|
||||||
adjacent,
|
adjacent,
|
||||||
},
|
},
|
||||||
...guesses,
|
...guesses,
|
||||||
];
|
];
|
||||||
|
|
||||||
searchQuery = "";
|
searchQuery = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
function generateUUID(): string {
|
function generateUUID(): string {
|
||||||
// Try native randomUUID if available
|
// Try native randomUUID if available
|
||||||
if (typeof window.crypto.randomUUID === "function") {
|
if (typeof window.crypto.randomUUID === "function") {
|
||||||
return window.crypto.randomUUID();
|
return window.crypto.randomUUID();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fallback UUID v4 generator for older browsers
|
// Fallback UUID v4 generator for older browsers
|
||||||
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
|
||||||
const r =
|
const r = window.crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0;
|
||||||
window.crypto.getRandomValues(new Uint8Array(1))[0] % 16 | 0;
|
const v = c === "x" ? r : (r & 0x3) | 0x8;
|
||||||
const v = c === "x" ? r : (r & 0x3) | 0x8;
|
return v.toString(16);
|
||||||
return v.toString(16);
|
});
|
||||||
});
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function getOrCreateAnonymousId(): string {
|
function getOrCreateAnonymousId(): string {
|
||||||
if (!browser) return "";
|
if (!browser) return "";
|
||||||
const key = "bibdle-anonymous-id";
|
const key = "bibdle-anonymous-id";
|
||||||
let id = localStorage.getItem(key);
|
let id = localStorage.getItem(key);
|
||||||
if (!id) {
|
if (!id) {
|
||||||
id = generateUUID();
|
id = generateUUID();
|
||||||
localStorage.setItem(key, id);
|
localStorage.setItem(key, id);
|
||||||
}
|
}
|
||||||
return id;
|
return id;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Initialize anonymous ID
|
// Initialize anonymous ID
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (!browser) return;
|
if (!browser) return;
|
||||||
anonymousId = getOrCreateAnonymousId();
|
anonymousId = getOrCreateAnonymousId();
|
||||||
const statsKey = `bibdle-stats-submitted-${dailyVerse.date}`;
|
const statsKey = `bibdle-stats-submitted-${dailyVerse.date}`;
|
||||||
statsSubmitted = localStorage.getItem(statsKey) === "true";
|
statsSubmitted = localStorage.getItem(statsKey) === "true";
|
||||||
});
|
});
|
||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (!browser) return;
|
if (!browser) return;
|
||||||
isDev = window.location.host === "192.168.0.42:5174";
|
isDev = window.location.host === "192.168.0.42:5174";
|
||||||
});
|
});
|
||||||
|
|
||||||
// Load saved guesses
|
// Load saved guesses
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (!browser) return;
|
if (!browser) return;
|
||||||
|
|
||||||
const key = `bibdle-guesses-${dailyVerse.date}`;
|
const key = `bibdle-guesses-${dailyVerse.date}`;
|
||||||
const saved = localStorage.getItem(key);
|
const saved = localStorage.getItem(key);
|
||||||
if (saved) {
|
if (saved) {
|
||||||
let savedIds: string[] = JSON.parse(saved);
|
let savedIds: string[] = JSON.parse(saved);
|
||||||
savedIds = Array.from(new Set(savedIds));
|
savedIds = Array.from(new Set(savedIds));
|
||||||
guesses = savedIds.map((bookId: string) => {
|
guesses = savedIds.map((bookId: string) => {
|
||||||
const book = getBookById(bookId)!;
|
const book = getBookById(bookId)!;
|
||||||
const correctBook = getBookById(correctBookId)!;
|
const correctBook = getBookById(correctBookId)!;
|
||||||
const testamentMatch = book.testament === correctBook.testament;
|
const testamentMatch = book.testament === correctBook.testament;
|
||||||
const sectionMatch = book.section === correctBook.section;
|
const sectionMatch = book.section === correctBook.section;
|
||||||
const adjacent = isAdjacent(bookId, correctBookId);
|
const adjacent = isAdjacent(bookId, correctBookId);
|
||||||
return {
|
return {
|
||||||
book,
|
book,
|
||||||
testamentMatch,
|
testamentMatch,
|
||||||
sectionMatch,
|
sectionMatch,
|
||||||
adjacent,
|
adjacent,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
if (!browser) return;
|
if (!browser) return;
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
`bibdle-guesses-${dailyVerse.date}`,
|
`bibdle-guesses-${dailyVerse.date}`,
|
||||||
JSON.stringify(guesses.map((g) => g.book.id)),
|
JSON.stringify(guesses.map((g) => g.book.id))
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Auto-submit stats when user wins
|
// Auto-submit stats when user wins
|
||||||
$effect(() => {
|
$effect(() => {
|
||||||
console.log("Stats effect triggered:", {
|
console.log("Stats effect triggered:", {
|
||||||
browser,
|
browser,
|
||||||
isWon,
|
isWon,
|
||||||
anonymousId,
|
anonymousId,
|
||||||
statsSubmitted,
|
statsSubmitted,
|
||||||
statsData,
|
statsData,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!browser || !isWon || !anonymousId) {
|
if (!browser || !isWon || !anonymousId) {
|
||||||
console.log("Basic conditions not met");
|
console.log("Basic conditions not met");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (statsSubmitted && !statsData) {
|
if (statsSubmitted && !statsData) {
|
||||||
console.log("Fetching existing stats...");
|
console.log("Fetching existing stats...");
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(
|
const response = await fetch(
|
||||||
`/api/submit-completion?anonymousId=${anonymousId}&date=${dailyVerse.date}`,
|
`/api/submit-completion?anonymousId=${anonymousId}&date=${dailyVerse.date}`
|
||||||
);
|
);
|
||||||
const result = await response.json();
|
const result = await response.json();
|
||||||
console.log("Stats response:", result);
|
console.log("Stats response:", result);
|
||||||
|
|
||||||
if (result.success && result.stats) {
|
if (result.success && result.stats) {
|
||||||
console.log("Setting stats data:", result.stats);
|
console.log("Setting stats data:", result.stats);
|
||||||
statsData = result.stats;
|
statsData = result.stats;
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
`bibdle-stats-submitted-${dailyVerse.date}`,
|
`bibdle-stats-submitted-${dailyVerse.date}`,
|
||||||
"true",
|
"true"
|
||||||
);
|
);
|
||||||
} else if (result.error) {
|
} else if (result.error) {
|
||||||
console.error("Server error:", result.error);
|
console.error("Server error:", result.error);
|
||||||
} else {
|
} else {
|
||||||
console.error("Unexpected response format:", result);
|
console.error("Unexpected response format:", result);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("Stats fetch failed:", err);
|
console.error("Stats fetch failed:", err);
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("Submitting stats...");
|
console.log("Submitting stats...");
|
||||||
|
|
||||||
async function submitStats() {
|
async function submitStats() {
|
||||||
try {
|
try {
|
||||||
const payload = {
|
const payload = {
|
||||||
anonymousId,
|
anonymousId,
|
||||||
date: dailyVerse.date,
|
date: dailyVerse.date,
|
||||||
guessCount: guesses.length,
|
guessCount: guesses.length,
|
||||||
};
|
};
|
||||||
|
|
||||||
console.log("Sending POST request with:", payload);
|
console.log("Sending POST request with:", payload);
|
||||||
|
|
||||||
const response = await fetch("/api/submit-completion", {
|
const response = await fetch("/api/submit-completion", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: {
|
||||||
"Content-Type": "application/json",
|
"Content-Type": "application/json",
|
||||||
},
|
},
|
||||||
body: JSON.stringify(payload),
|
body: JSON.stringify(payload),
|
||||||
});
|
});
|
||||||
|
|
||||||
const result = await response.json();
|
const result = await response.json();
|
||||||
console.log("Stats response:", result);
|
console.log("Stats response:", result);
|
||||||
|
|
||||||
if (result.success && result.stats) {
|
if (result.success && result.stats) {
|
||||||
console.log("Setting stats data:", result.stats);
|
console.log("Setting stats data:", result.stats);
|
||||||
statsData = result.stats;
|
statsData = result.stats;
|
||||||
statsSubmitted = true;
|
statsSubmitted = true;
|
||||||
localStorage.setItem(
|
localStorage.setItem(
|
||||||
`bibdle-stats-submitted-${dailyVerse.date}`,
|
`bibdle-stats-submitted-${dailyVerse.date}`,
|
||||||
"true",
|
"true"
|
||||||
);
|
);
|
||||||
} else if (result.error) {
|
} else if (result.error) {
|
||||||
console.error("Server error:", result.error);
|
console.error("Server error:", result.error);
|
||||||
} else {
|
} else {
|
||||||
console.error("Unexpected response format:", result);
|
console.error("Unexpected response format:", result);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("Stats submission failed:", err);
|
console.error("Stats submission failed:", err);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
submitStats();
|
submitStats();
|
||||||
});
|
});
|
||||||
|
|
||||||
function generateShareText(): string {
|
function generateShareText(): string {
|
||||||
const emojis = guesses
|
const emojis = guesses
|
||||||
.slice()
|
.slice()
|
||||||
.reverse()
|
.reverse()
|
||||||
.map((guess) => {
|
.map((guess) => {
|
||||||
if (guess.book.id === correctBookId) return "✅";
|
if (guess.book.id === correctBookId) return "✅";
|
||||||
if (guess.adjacent) return "‼️";
|
if (guess.adjacent) return "‼️";
|
||||||
if (guess.sectionMatch) return "🟩";
|
if (guess.sectionMatch) return "🟩";
|
||||||
if (guess.testamentMatch) return "🟧";
|
if (guess.testamentMatch) return "🟧";
|
||||||
return "🟥";
|
return "🟥";
|
||||||
})
|
})
|
||||||
.join("");
|
.join("");
|
||||||
|
|
||||||
const dateFormatter = new Intl.DateTimeFormat("en-US", {
|
const dateFormatter = new Intl.DateTimeFormat("en-US", {
|
||||||
month: "short",
|
month: "short",
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
});
|
});
|
||||||
const formattedDate = dateFormatter.format(
|
const formattedDate = dateFormatter.format(
|
||||||
new Date(`${dailyVerse.date}T00:00:00`),
|
new Date(`${dailyVerse.date}T00:00:00`)
|
||||||
);
|
);
|
||||||
const siteUrl = window.location.origin;
|
const siteUrl = window.location.origin;
|
||||||
return [
|
return [
|
||||||
`📖 Bibdle | ${formattedDate} 📖`,
|
`📖 Bibdle | ${formattedDate} 📖`,
|
||||||
`${grade} (${guesses.length} guesses)`,
|
`${grade} (${guesses.length} guesses)`,
|
||||||
`${emojis}\n`,
|
`${emojis}\n`,
|
||||||
siteUrl,
|
siteUrl,
|
||||||
].join("\n");
|
].join("\n");
|
||||||
}
|
}
|
||||||
|
|
||||||
async function share() {
|
async function share() {
|
||||||
if (!browser) return;
|
if (!browser) return;
|
||||||
|
|
||||||
const shareText = generateShareText();
|
const shareText = generateShareText();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if ("share" in navigator) {
|
if ("share" in navigator) {
|
||||||
await (navigator as any).share({ text: shareText });
|
await (navigator as any).share({ text: shareText });
|
||||||
} else {
|
} else {
|
||||||
await (navigator as any).clipboard.writeText(shareText);
|
await (navigator as any).clipboard.writeText(shareText);
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("Share failed:", err);
|
console.error("Share failed:", err);
|
||||||
throw err;
|
throw err;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function copyToClipboard() {
|
async function copyToClipboard() {
|
||||||
if (!browser) return;
|
if (!browser) return;
|
||||||
|
|
||||||
const shareText = generateShareText();
|
const shareText = generateShareText();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
await (navigator as any).clipboard.writeText(shareText);
|
await (navigator as any).clipboard.writeText(shareText);
|
||||||
copied = true;
|
copied = true;
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
copied = false;
|
copied = false;
|
||||||
}, 5000);
|
}, 5000);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error("Copy to clipboard failed:", err);
|
console.error("Copy to clipboard failed:", err);
|
||||||
throw err;
|
throw err;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleShare() {
|
function handleShare() {
|
||||||
if (copied || !browser) return;
|
if (copied || !browser) return;
|
||||||
const useClipboard = !("share" in navigator);
|
const useClipboard = !("share" in navigator);
|
||||||
if (useClipboard) {
|
if (useClipboard) {
|
||||||
copied = true;
|
copied = true;
|
||||||
}
|
}
|
||||||
share()
|
share()
|
||||||
.then(() => {
|
.then(() => {
|
||||||
if (useClipboard) {
|
if (useClipboard) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
copied = false;
|
copied = false;
|
||||||
}, 5000);
|
}, 5000);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
if (useClipboard) {
|
if (useClipboard) {
|
||||||
copied = false;
|
copied = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>Bibdle – A daily bible game{isDev ? " (dev)" : ""}</title>
|
<title>Bibdle – A daily bible game{isDev ? " (dev)" : ""}</title>
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Guess which book of the Bible a daily verse comes from. A Wordle-inspired Bible game!"
|
content="Guess which book of the Bible a daily verse comes from. A Wordle-inspired Bible game!"
|
||||||
/>
|
/>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div class="min-h-dvh bg-linear-to-br from-blue-50 to-indigo-100 py-8">
|
<div class="min-h-dvh bg-linear-to-br from-blue-50 to-indigo-100 py-8">
|
||||||
<div
|
<div
|
||||||
class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] w-full max-w-3xl mx-auto px-4"
|
class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] w-full max-w-3xl mx-auto px-4"
|
||||||
>
|
>
|
||||||
<h1
|
<h1
|
||||||
class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-8 sm:p-12"
|
class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-8 sm:p-12"
|
||||||
>
|
>
|
||||||
Bibdle <span class="font-normal">{isDev ? "dev" : ""}</span>
|
<TitleAnimation />
|
||||||
</h1>
|
<span class="font-normal">{isDev ? "dev" : ""}</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
<VerseDisplay {data} {isWon} />
|
<VerseDisplay {data} {isWon} />
|
||||||
|
|
||||||
{#if !isWon}
|
{#if !isWon}
|
||||||
<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
|
<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
|
||||||
{:else}
|
{:else}
|
||||||
<WinScreen
|
<WinScreen
|
||||||
{grade}
|
{grade}
|
||||||
{statsData}
|
{statsData}
|
||||||
{correctBookId}
|
{correctBookId}
|
||||||
{handleShare}
|
{handleShare}
|
||||||
{copyToClipboard}
|
{copyToClipboard}
|
||||||
bind:copied
|
bind:copied
|
||||||
{statsSubmitted}
|
{statsSubmitted}
|
||||||
guessCount={guesses.length}
|
guessCount={guesses.length}
|
||||||
/>
|
/>
|
||||||
<CountdownTimer />
|
<CountdownTimer />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<GuessesTable {guesses} {correctBookId} />
|
<GuessesTable {guesses} {correctBookId} />
|
||||||
{#if isWon}
|
{#if isWon}
|
||||||
<Feedback />
|
<Feedback />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
20
todo.md
20
todo.md
@@ -8,20 +8,20 @@
|
|||||||
- maybe remove rank and average guesses
|
- maybe remove rank and average guesses
|
||||||
- only show "top 10 / 5 / 1%" if there are more than 10/20/100 guesses?
|
- only show "top 10 / 5 / 1%" if there are more than 10/20/100 guesses?
|
||||||
|
|
||||||
- hovering or tapping BIBDLE fades in and out to BIBLE DAILY
|
|
||||||
|
|
||||||
- Difficulty levels
|
- Difficulty levels
|
||||||
- difficult mode (guess old or new testament, first try *only*)
|
- difficult mode (guess old or new testament, first try _only_)
|
||||||
- impossible mode (1894 scrivener koine greek NT or some hebrew version for OT) three guesses only
|
- impossible mode (1894 scrivener koine greek NT or some hebrew version for OT) three guesses only
|
||||||
|
|
||||||
|
- "login to see your stats, unlock practice mode, and more"
|
||||||
|
|
||||||
# bibdle unlimited
|
# bibdle unlimited
|
||||||
|
|
||||||
- Practice mode: Unlimited verses
|
- Practice mode: Unlimited verses
|
||||||
- Create public or private leaderboards
|
- Create public or private leaderboards
|
||||||
- Passport book with badges:
|
- Passport book with badges:
|
||||||
- Guess each Gospel first try
|
- Guess each Gospel first try
|
||||||
- "Guessed all Gospels", "Perfect week", "Old Testament expert"
|
- "Guessed all Gospels", "Perfect week", "Old Testament expert"
|
||||||
- Theologian: Guess each book first try
|
- Theologian: Guess each book first try
|
||||||
|
|
||||||
# places to send
|
# places to send
|
||||||
|
|
||||||
@@ -39,10 +39,13 @@ I never really followed through with what he asked. The Metropolis of Boston Cam
|
|||||||
|
|
||||||
I created Bibdle from a combination of two things. The first is my lifelong desire to create experiences that people love; to create experiences that bring people together. The second is my guilt for never reading the Bible at home like Metropolitan Methodios asked. I hope it helps you with this challenge as much as it's helped me!
|
I created Bibdle from a combination of two things. The first is my lifelong desire to create experiences that people love; to create experiences that bring people together. The second is my guilt for never reading the Bible at home like Metropolitan Methodios asked. I hope it helps you with this challenge as much as it's helped me!
|
||||||
|
|
||||||
------------------------------
|
---
|
||||||
|
|
||||||
# done
|
# done
|
||||||
|
|
||||||
|
## december 22nd
|
||||||
|
|
||||||
|
- hovering or tapping BIBDLE fades in and out to BIBLE DAILY
|
||||||
|
|
||||||
## december 21st
|
## december 21st
|
||||||
|
|
||||||
@@ -52,6 +55,7 @@ I created Bibdle from a combination of two things. The first is my lifelong desi
|
|||||||
- custom verses for Christmas Eve and Christmas
|
- custom verses for Christmas Eve and Christmas
|
||||||
|
|
||||||
## before december 19th
|
## before december 19th
|
||||||
|
|
||||||
- improve design (uniform column widths on desktop)
|
- improve design (uniform column widths on desktop)
|
||||||
- moved to bibdle.com
|
- moved to bibdle.com
|
||||||
- v2: avg guesses per bible verse updating daily (on completion: avg. guesses: 6)
|
- v2: avg guesses per bible verse updating daily (on completion: avg. guesses: 6)
|
||||||
@@ -61,4 +65,4 @@ I created Bibdle from a combination of two things. The first is my lifelong desi
|
|||||||
- site title
|
- site title
|
||||||
- deploy
|
- deploy
|
||||||
|
|
||||||
------------------------------
|
---
|
||||||
|
|||||||
Reference in New Issue
Block a user