george/bibdle
1
0
Fork 0
mirror of https://github.com/pupperpowell/bibdle.git synced 2026-04-05 17:33:31 -04: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

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>