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">
|
||||
import { fade } from "svelte/transition";
|
||||
import { getBookById, toOrdinal } from "$lib/utils/game";
|
||||
import { fade } from "svelte/transition";
|
||||
import { getBookById, toOrdinal } from "$lib/utils/game";
|
||||
|
||||
interface StatsData {
|
||||
solveRank: number;
|
||||
guessRank: number;
|
||||
totalSolves: number;
|
||||
averageGuesses: number;
|
||||
}
|
||||
interface StatsData {
|
||||
solveRank: number;
|
||||
guessRank: number;
|
||||
totalSolves: number;
|
||||
averageGuesses: number;
|
||||
}
|
||||
|
||||
interface WeightedMessage {
|
||||
text: string;
|
||||
weight: number;
|
||||
}
|
||||
interface WeightedMessage {
|
||||
text: string;
|
||||
weight: number;
|
||||
}
|
||||
|
||||
let {
|
||||
grade,
|
||||
statsData,
|
||||
correctBookId,
|
||||
handleShare,
|
||||
copyToClipboard,
|
||||
copied = $bindable(false),
|
||||
statsSubmitted,
|
||||
guessCount,
|
||||
} = $props();
|
||||
let {
|
||||
grade,
|
||||
statsData,
|
||||
correctBookId,
|
||||
handleShare,
|
||||
copyToClipboard,
|
||||
copied = $bindable(false),
|
||||
statsSubmitted,
|
||||
guessCount,
|
||||
} = $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: 1000 },
|
||||
{ text: "⭐ You got it! ⭐", weight: 10 },
|
||||
{ text: "🎉 Yup 🎉", weight: 5 },
|
||||
{ text: "👍🏻 Very nice! 👍🏻", weight: 1 },
|
||||
];
|
||||
// List of congratulations messages with weights
|
||||
const congratulationsMessages: WeightedMessage[] = [
|
||||
{ text: "🎉 Congratulations! 🎉", weight: 1000 },
|
||||
{ text: "⭐ You got it! ⭐", weight: 10 },
|
||||
{ text: "🎉 Yup 🎉", weight: 5 },
|
||||
{ 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.95) {
|
||||
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="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">
|
||||
{congratulationsMessage}
|
||||
</h2>
|
||||
<p class="text-lg sm:text-xl md:text-2xl">
|
||||
The verse is from <span
|
||||
class="font-black text-xl sm:text-2xl md:text-3xl">{bookName}</span
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
|
||||
>
|
||||
Your grade: {grade}
|
||||
</p>
|
||||
<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
|
||||
{congratulationsMessage}
|
||||
</h2>
|
||||
<p class="text-lg sm:text-xl md:text-2xl">
|
||||
The verse is from <span class="font-black text-xl sm:text-2xl md:text-3xl"
|
||||
>{bookName}</span
|
||||
>
|
||||
</p>
|
||||
<p
|
||||
class="text-2xl font-bold mt-6 p-2 mx-2 bg-black/20 rounded-lg inline-block"
|
||||
>
|
||||
Your grade: {grade}
|
||||
</p>
|
||||
|
||||
{#if hasWebShare}
|
||||
<button
|
||||
onclick={handleShare}
|
||||
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"
|
||||
>
|
||||
📤 Share
|
||||
</button>
|
||||
<button
|
||||
onclick={() => {
|
||||
copyToClipboard();
|
||||
copySuccess = true;
|
||||
setTimeout(() => {
|
||||
copySuccess = false;
|
||||
}, 3000);
|
||||
}}
|
||||
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 ${
|
||||
copySuccess
|
||||
? "bg-green-400/50 hover:bg-green-500/60"
|
||||
: "bg-white/20 hover:bg-white/30"
|
||||
}`}
|
||||
>
|
||||
{copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
onclick={handleShare}
|
||||
data-umami-event="Share"
|
||||
class={`mt-4 text-2xl font-bold p-2 ${
|
||||
copied
|
||||
? "bg-green-400/50 hover:bg-green-500/60"
|
||||
: "bg-white/20 hover:bg-white/30"
|
||||
} rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
|
||||
>
|
||||
{copied ? "Copied to clipboard!" : "📤 Share"}
|
||||
</button>
|
||||
{/if}
|
||||
{#if hasWebShare}
|
||||
<button
|
||||
onclick={handleShare}
|
||||
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"
|
||||
>
|
||||
📤 Share
|
||||
</button>
|
||||
<button
|
||||
onclick={() => {
|
||||
copyToClipboard();
|
||||
copySuccess = true;
|
||||
setTimeout(() => {
|
||||
copySuccess = false;
|
||||
}, 3000);
|
||||
}}
|
||||
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 ${
|
||||
copySuccess
|
||||
? "bg-green-400/50 hover:bg-green-500/60"
|
||||
: "bg-white/20 hover:bg-white/30"
|
||||
}`}
|
||||
>
|
||||
{copySuccess ? "✅ Copied!" : "📋 Copy to clipboard"}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
onclick={handleShare}
|
||||
data-umami-event="Share"
|
||||
class={`mt-4 text-2xl font-bold p-2 ${
|
||||
copied
|
||||
? "bg-green-400/50 hover:bg-green-500/60"
|
||||
: "bg-white/20 hover:bg-white/30"
|
||||
} rounded-lg inline-block transition-all shadow-lg mx-2 cursor-pointer border-none appearance-none`}
|
||||
>
|
||||
{copied ? "Copied to clipboard!" : "📤 Share"}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<!-- Statistics Display -->
|
||||
{#if statsData}
|
||||
<div class="mt-6 space-y-2 text-lg" in:fade={{ delay: 800 }}>
|
||||
<p class="font-regular">
|
||||
You were the {toOrdinal(statsData.solveRank)} person to solve today.
|
||||
</p>
|
||||
<p class="font-regular">
|
||||
You rank <span class="">{toOrdinal(statsData.guessRank)}</span> in
|
||||
guesses.
|
||||
</p>
|
||||
<p class="opacity-90">
|
||||
Average: <span class="font-semibold"
|
||||
>{Math.ceil(statsData.averageGuesses)}</span
|
||||
> guesses
|
||||
</p>
|
||||
</div>
|
||||
{:else if !statsSubmitted}
|
||||
<div class="mt-6 text-sm opacity-80">Submitting stats...</div>
|
||||
{/if}
|
||||
<!-- Statistics Display -->
|
||||
{#if statsData}
|
||||
<div class="mt-6 space-y-2 text-lg" in:fade={{ delay: 800 }}>
|
||||
<p class="font-regular">
|
||||
You were the {toOrdinal(statsData.solveRank)} person to solve today.
|
||||
</p>
|
||||
<p class="font-regular">
|
||||
You rank <span class="">{toOrdinal(statsData.guessRank)}</span> in guesses.
|
||||
</p>
|
||||
<p class="opacity-90">
|
||||
Average: <span class="font-semibold"
|
||||
>{Math.ceil(statsData.averageGuesses)}</span
|
||||
> guesses
|
||||
</p>
|
||||
</div>
|
||||
{:else if !statsSubmitted}
|
||||
<div class="mt-6 text-sm opacity-80">Submitting stats...</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user