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

switched to NKJV, improved grading, improved styling

Browse Source
This commit is contained in:
George Powell
2025-12-23 17:33:33 -05:00
parent 93acafc232
commit f9f0928278
16 changed files with 34345 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -82,6 +82,12 @@
animation: shine 5s infinite;
}
.animate-shine.fade-in {
animation:
fadeIn 0.5s ease-out,
shine 5s infinite;
}
@keyframes fadeIn {
from {
opacity: 0;

31
src/lib/components/VerseDisplay.svelte
View File

@@ -1,19 +1,22 @@
<script lang="ts">
import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed
import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed
let { data, isWon }: { data: PageData; isWon: boolean } = $props();
let dailyVerse = $derived(data.dailyVerse);
let { data, isWon }: { data: PageData; isWon: boolean } = $props();
let dailyVerse = $derived(data.dailyVerse);
let displayReference = $derived(
dailyVerse.reference.replace(/^Psalms /, "Psalm ")
);
</script>
<div class="bg-gray-50 rounded-2xl shadow-xl p-8 sm:p-12 mb-8 sm:mb-12 w-full">
<blockquote
class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
>
{dailyVerse.verseText}
</blockquote>
{#if isWon}
<p class="text-center text-lg text-green-600 font-bold mt-4">
{dailyVerse.reference}
</p>
{/if}
<div class="bg-gray-50 rounded-2xl shadow-xl p-8 sm:p-12 mb-4 sm:mb-12 w-full">
<blockquote
class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
>
{dailyVerse.verseText}
</blockquote>
{#if isWon}
<p class="text-center text-lg! big-text text-green-600! font-bold mt-8">
{displayReference}
</p>
{/if}
</div>

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

@@ -1,6 +1,6 @@
<script lang="ts">
import { fade } from "svelte/transition";
import { getBookById, toOrdinal } from "$lib/utils/game";
import { getBookById, toOrdinal, getNextGradeMessage } from "$lib/utils/game";
interface StatsData {
solveRank: number;
@@ -128,20 +128,50 @@
</button>
{/if}
<p class="pt-6 big-text text-gray-100!">
{getNextGradeMessage(guessCount)}
</p>
<!-- 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 class="mt-6" in:fade={{ delay: 800 }}>
<div class="grid grid-cols-3 gap-4 gap-x-8 text-center">
<!-- Solve Rank Column -->
<div class="flex flex-col">
<div class="text-3xl sm:text-4xl font-black">
#{statsData.solveRank}
</div>
<div class="text-xs 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-xs sm:text-sm opacity-90 mt-1">
You ranked {toOrdinal(statsData.guessRank)} of {statsData.totalSolves}
total solves
</div>
</div>
<!-- Average Column -->
<div class="flex flex-col">
<div class="text-3xl sm:text-4xl font-black">
{statsData.averageGuesses}
</div>
<div class="text-xs sm:text-sm opacity-90 mt-1">
People guessed correctly after {statsData.averageGuesses} guesses on
average
</div>
</div>
</div>
</div>
{:else if !statsSubmitted}
<div class="mt-6 text-sm opacity-80">Submitting stats...</div>