george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-02-04 10:54:44 -05:00
Code Issues Packages Projects Releases Wiki Activity

add fade-in animations and conditional rendering to GuessesTable

Browse Source
This commit is contained in:
George Powell
2025-12-23 01:10:33 -05:00
parent 2e7cc1fa54
commit 93acafc232
5 changed files with 117 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/lib/components/GuessesTable.svelte
View File

@@ -1,91 +1,99 @@
<script lang="ts">
interface Guess {
book: {
id: string;
name: string;
testament: string;
section: string;
};
testamentMatch: boolean;
sectionMatch: boolean;
adjacent: boolean;
}
interface Guess {
book: {
id: string;
name: string;
testament: string;
section: string;
};
testamentMatch: boolean;
sectionMatch: boolean;
adjacent: boolean;
}
let {
guesses,
correctBookId,
}: { guesses: Guess[]; correctBookId: string } = $props();
let { guesses, correctBookId }: { guesses: Guess[]; correctBookId: string } =
$props();
let hasGuesses = $derived(guesses.length > 0);
</script>
<div class="bg-white rounded-2xl shadow-xl overflow-x-auto">
<table class="w-full">
<thead>
<tr class="bg-linear-to-r from-gray-50 to-gray-300">
<th
class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
>Book</th
>
<th
class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
>Testament</th
>
<th
class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
>Section</th
>
</tr>
</thead>
<tbody>
{#each guesses as guess (guess.book.id)}
<tr
class="border-b border-gray-100 transition-colors {guess
.book.id === correctBookId
? 'bg-green-200 animate-shine'
: 'hover:bg-gray-50'}"
>
<td
class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
>
{guess.book.id === correctBookId ? "✅" : "❌"}
{guess.book.name}
</td>
<td
class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
>
{guess.testamentMatch ? "✅" : "❌"}
{guess.book.testament.charAt(0).toUpperCase() +
guess.book.testament.slice(1).toLowerCase()}
</td>
<td
class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg"
>
{guess.sectionMatch ? "✅" : "❌"}
{guess.adjacent ? "‼️ " : ""}{guess.book.section}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{#if hasGuesses}
<div class="bg-white rounded-2xl shadow-xl overflow-x-auto fade-in">
<table class="w-full">
<thead class="fade-in">
<tr class="bg-linear-to-r from-gray-50 to-gray-300">
<th
class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
>Book</th
>
<th
class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
>Testament</th
>
<th
class="p-3 sm:p-4 md:p-4 text-left text-md sm:text-base md:text-md text-gray-700 border-b border-gray-200"
>Section</th
>
</tr>
</thead>
<tbody>
{#each guesses as guess, index (guess.book.id)}
<tr
class="border-b border-gray-100 transition-colors {guess.book.id ===
correctBookId
? 'bg-green-200 animate-shine'
: 'hover:bg-gray-50'} {index === 0 ? 'fade-in' : ''}"
>
<td
class="p-3 sm:p-4 md:p-6 text-sm sm:text-base font-bold md:text-lg"
>
{guess.book.id === correctBookId ? "✅" : "❌"}
{guess.book.name}
</td>
<td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
{guess.testamentMatch ? "✅" : "❌"}
{guess.book.testament.charAt(0).toUpperCase() +
guess.book.testament.slice(1).toLowerCase()}
</td>
<td class="p-3 sm:p-4 md:p-6 text-sm sm:text-base md:text-lg">
{guess.sectionMatch ? "✅" : "❌"}
{guess.adjacent ? "‼️ " : ""}{guess.book.section}
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/if}
<style>
@keyframes shine {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
@keyframes shine {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.animate-shine {
background: linear-gradient(
110deg,
#dcffe7 45%,
#f1fff5 50%,
#dcffe7 55%
);
background-size: 200% 100%;
animation: shine 5s infinite;
}
.animate-shine {
background: linear-gradient(110deg, #dcffe7 45%, #f1fff5 50%, #dcffe7 55%);
background-size: 200% 100%;
animation: shine 5s infinite;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}
</style>

19
src/lib/components/WinScreen.svelte
View File

@@ -73,7 +73,7 @@
</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 fade-in"
>
<h2 class="text-2xl sm:text-4xl font-black mb-4 drop-shadow-lg">
{congratulationsMessage}
@@ -147,3 +147,20 @@
<div class="mt-6 text-sm opacity-80">Submitting stats...</div>
{/if}
</div>
<style>
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}
</style>

1
src/routes/+layout.svelte
View File

@@ -11,6 +11,7 @@
defer
src="https://umami.snail.city/script.js"
data-website-id="5b8c31ad-71cd-4317-940b-6bccea732acc"
data-domains="bibdle.com,www.bibdle.com"
></script>
</svelte:head>
{@render children()}

8
src/routes/+page.svelte
View File

@@ -338,17 +338,15 @@
</script>
<svelte:head>
<title>Bibdle – A daily bible game{isDev ? " (dev)" : ""}</title>
<title>Bibdle &mdash; A daily bible game{isDev ? " (dev)" : ""}</title>
<meta
name="description"
content="Guess which book of the Bible a daily verse comes from. A Wordle-inspired Bible game!"
/>
</svelte:head>
<div class="min-h-dvh bg-linear-to-br from-blue-50 to-indigo-100 py-8">
<div
class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] w-full max-w-3xl mx-auto px-4"
>
<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-8 sm:p-12"
>

4
src/routes/layout.css
View File

@@ -5,3 +5,7 @@
@theme {
--font-triodion: "PT Serif", serif;
}
html, body {
background: oklch(98.11% 0.02777 158.93);
}