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

added discord link and shrunk guessesgrid for more than three guesses

Browse Source
This commit is contained in:
George Powell
2026-03-19 10:53:57 -04:00
parent b6b41b6ba9
commit 67d9757f98
3 changed files with 198 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,9 +5,12 @@
let { let {
guesses, guesses,
correctBookId, correctBookId,
}: { guesses: Guess[]; correctBookId: string } = $props(); isWon = false,
}: { guesses: Guess[]; correctBookId: string; isWon?: boolean } = $props();
let hasGuesses = $derived(guesses.length > 0); let hasGuesses = $derived(guesses.length > 0);
let showMinimized = $derived(isWon && guesses.length > 3);
let expanded = $state(false);
function getBoxColor(isCorrect: boolean, isAdjacent?: boolean): string { function getBoxColor(isCorrect: boolean, isAdjacent?: boolean): string {
if (isCorrect) return "bg-green-500 border-green-600"; if (isCorrect) return "bg-green-500 border-green-600";
@@ -104,31 +107,35 @@
</div> </div>
</div> </div>
{#each guesses as guess, rowIndex (guess.book.id)} {#if showMinimized && !expanded}
<!-- Minimized view: first guess, divider, last two guesses -->
<!-- First guess (no animation since post-win) -->
{@const firstGuess = guesses[0]}
<div class="flex gap-2 justify-center"> <div class="flex gap-2 justify-center">
<!-- Testament Column --> <!-- Testament Column -->
<div <div
class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor( class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
guess.testamentMatch, firstGuess.testamentMatch,
)}" )}"
style="animation-delay: {rowIndex * 1000 + 0 * 500}ms" style="animation: none; opacity: 1; transform: none;"
> >
<span class="text-center leading-tight px-1 text-shadow-sm" <span class="text-center leading-tight px-1 text-shadow-sm"
>{getBoxContent(guess, "testament")}</span >{getBoxContent(firstGuess, "testament")}</span
> >
</div> </div>
<!-- Section Column --> <!-- Section Column -->
<div <div
class="relative w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor( class="relative w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
guess.sectionMatch, firstGuess.sectionMatch,
guess.adjacent, firstGuess.adjacent,
)}" )}"
style="animation-delay: {rowIndex * 1000 + 1 * 500}ms" style="animation: none; opacity: 1; transform: none;"
> >
<span class="text-center leading-tight px-1 text-shadow-sm" <span class="text-center leading-tight px-1 text-shadow-sm"
>{getBoxContent(guess, "section")} >{getBoxContent(firstGuess, "section")}
{#if guess.adjacent} {#if firstGuess.adjacent}
‼️ ‼️
{/if} {/if}
</span> </span>
@@ -137,29 +144,173 @@
<!-- First Letter Column --> <!-- First Letter Column -->
<div <div
class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor( class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
guess.firstLetterMatch, firstGuess.firstLetterMatch,
)}" )}"
style="animation-delay: {rowIndex * 1000 + 2 * 500}ms" style="animation: none; opacity: 1; transform: none;"
> >
<span class="text-center leading-tight px-1 text-shadow-sm" <span class="text-center leading-tight px-1 text-shadow-sm"
>{getBoxContent(guess, "firstLetter")}</span >{getBoxContent(firstGuess, "firstLetter")}</span
> >
</div> </div>
<!-- Book Column --> <!-- Book Column -->
<div <div
class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-4 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in" class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-4 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in"
style="animation-delay: {rowIndex * 1000 + style="animation: none; opacity: 1; transform: none; {getBookBoxStyle(firstGuess)}"
3 * 500}ms; {getBookBoxStyle(guess)}"
> >
<span class="text-center leading-tight px-1 text-shadow-lg" <span class="text-center leading-tight px-1 text-shadow-lg"
>{getBoxContent(guess, "book")}</span >{getBoxContent(firstGuess, "book")}</span
> >
</div> </div>
</div> </div>
{/each}
<!-- Expand/collapse divider -->
<button
type="button"
class="w-full flex items-center gap-3 py-1 cursor-pointer group"
onclick={() => (expanded = true)}
>
<div class="flex-1 h-px bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500 transition-colors"></div>
<span class="text-xs font-medium text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors whitespace-nowrap select-none">
expand guesses ▼
</span>
<div class="flex-1 h-px bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500 transition-colors"></div>
</button>
<!-- Last two guesses (no animation since post-win) -->
{#each guesses.slice(-2) as guess (guess.book.id)}
<div class="flex gap-2 justify-center">
<!-- Testament Column -->
<div
class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
guess.testamentMatch,
)}"
style="animation: none; opacity: 1; transform: none;"
>
<span class="text-center leading-tight px-1 text-shadow-sm"
>{getBoxContent(guess, "testament")}</span
>
</div>
<!-- Section Column -->
<div
class="relative w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
guess.sectionMatch,
guess.adjacent,
)}"
style="animation: none; opacity: 1; transform: none;"
>
<span class="text-center leading-tight px-1 text-shadow-sm"
>{getBoxContent(guess, "section")}
{#if guess.adjacent}
‼️
{/if}
</span>
</div>
<!-- First Letter Column -->
<div
class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
guess.firstLetterMatch,
)}"
style="animation: none; opacity: 1; transform: none;"
>
<span class="text-center leading-tight px-1 text-shadow-sm"
>{getBoxContent(guess, "firstLetter")}</span
>
</div>
<!-- Book Column -->
<div
class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-4 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in"
style="animation: none; opacity: 1; transform: none; {getBookBoxStyle(guess)}"
>
<span class="text-center leading-tight px-1 text-shadow-lg"
>{getBoxContent(guess, "book")}</span
>
</div>
</div>
{/each}
{:else}
<!-- Full view: all guesses -->
{#each guesses as guess, rowIndex (guess.book.id)}
<div class="flex gap-2 justify-center">
<!-- Testament Column -->
<div
class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
guess.testamentMatch,
)}"
style={showMinimized
? "animation: none; opacity: 1; transform: none;"
: `animation-delay: ${rowIndex * 1000 + 0 * 500}ms`}
>
<span class="text-center leading-tight px-1 text-shadow-sm"
>{getBoxContent(guess, "testament")}</span
>
</div>
<!-- Section Column -->
<div
class="relative w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
guess.sectionMatch,
guess.adjacent,
)}"
style={showMinimized
? "animation: none; opacity: 1; transform: none;"
: `animation-delay: ${rowIndex * 1000 + 1 * 500}ms`}
>
<span class="text-center leading-tight px-1 text-shadow-sm"
>{getBoxContent(guess, "section")}
{#if guess.adjacent}
‼️
{/if}
</span>
</div>
<!-- First Letter Column -->
<div
class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
guess.firstLetterMatch,
)}"
style={showMinimized
? "animation: none; opacity: 1; transform: none;"
: `animation-delay: ${rowIndex * 1000 + 2 * 500}ms`}
>
<span class="text-center leading-tight px-1 text-shadow-sm"
>{getBoxContent(guess, "firstLetter")}</span
>
</div>
<!-- Book Column -->
<div
class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-4 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in"
style={showMinimized
? `animation: none; opacity: 1; transform: none; ${getBookBoxStyle(guess)}`
: `animation-delay: ${rowIndex * 1000 + 3 * 500}ms; ${getBookBoxStyle(guess)}`}
>
<span class="text-center leading-tight px-1 text-shadow-lg"
>{getBoxContent(guess, "book")}</span
>
</div>
</div>
{#if showMinimized && expanded && rowIndex === 0}
<!-- Collapse divider shown right below the final (correct) guess -->
<button
type="button"
class="w-full flex items-center gap-3 py-1 cursor-pointer group"
onclick={() => (expanded = false)}
>
<div class="flex-1 h-px bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500 transition-colors"></div>
<span class="text-xs font-medium text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors whitespace-nowrap select-none">
collapse guesses ▲
</span>
<div class="flex-1 h-px bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500 transition-colors"></div>
</button>
{/if}
{/each}
{/if}
</div> </div>
<!-- </div> -->
{/if} {/if}
<style> <style>

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

@@ -334,7 +334,7 @@
<p class="signin-text"> <p class="signin-text">
Sign in to save your streak &amp; track your progress Sign in to save your streak &amp; track your progress
</p> </p>
<form method="POST" action="/auth/apple"> <form method="POST" action="/auth/apple" class="w-full">
<input type="hidden" name="anonymousId" value={anonymousId} /> <input type="hidden" name="anonymousId" value={anonymousId} />
<button <button
type="submit" type="submit"
@@ -662,7 +662,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.6rem 4rem; padding: 0.6rem 1rem;
width: 100%;
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
background: #000; background: #000;
color: #fff; color: #fff;

27
src/routes/+page.svelte
View File

@@ -330,10 +330,35 @@
{/if} {/if}
<div class="animate-fade-in-up animate-delay-600"> <div class="animate-fade-in-up animate-delay-600">
<GuessesTable guesses={persistence.guesses} {correctBookId} /> <GuessesTable
guesses={persistence.guesses}
{correctBookId}
{isWon}
/>
</div> </div>
{#if isWon} {#if isWon}
<hr class="animate-fade-in-up animate-delay-800 border-gray-300 dark:border-gray-600" />
<div class="animate-fade-in-up animate-delay-800">
<a
href="https://discord.gg/yWQXbGK8SD"
target="_blank"
rel="noopener noreferrer"
class="flex items-center justify-center gap-2 w-full px-5 py-2.5 bg-[#5865F2] hover:bg-[#4752C4] text-white font-semibold rounded-lg shadow-md transition-colors duration-200"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 127.14 96.36"
class="w-5 h-5 fill-white"
aria-hidden="true"
>
<path
d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"
/>
</svg>
Join the BIBDLE Discord!
</a>
</div>
<div class="animate-fade-in-up animate-delay-800"> <div class="animate-fade-in-up animate-delay-800">
<Credits /> <Credits />
</div> </div>