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

Reordered guesses table and added emphasis

Browse Source
This commit is contained in:
George Powell
2026-02-11 23:42:50 -05:00
parent df8a9e62bb
commit 290fb06fe9
1 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -99,47 +99,35 @@
class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400" class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400"
> >
<div <div
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700" class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
>
Book
</div>
<div
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700"
> >
Testament Testament
</div> </div>
<div <div
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700" class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
> >
Section Section
</div> </div>
<div <div
class="w-1/4 shrink-0 text-center text-sm font-semibold text-gray-700" class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
> >
First Letter First Letter
</div> </div>
<div
class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700"
>
Book
</div>
</div> </div>
{#each guesses as guess, rowIndex (guess.book.id)} {#each guesses as guess, rowIndex (guess.book.id)}
<div class="flex gap-2 justify-center"> <div class="flex gap-2 justify-center">
<!-- Book 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-lg animate-flip-in {getBoxColor(
guess.book.id === correctBookId,
)}"
style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
>
<span class="text-center leading-tight px-1 text-shadow-lg"
>{getBoxContent(guess, "book")}</span
>
</div>
<!-- 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, guess.testamentMatch,
)}" )}"
style="animation-delay: {rowIndex * 1000 + 1 * 500}ms" style="animation-delay: {rowIndex * 1000 + 0 * 500}ms"
> >
<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(guess, "testament")}</span
@@ -152,7 +140,7 @@
guess.sectionMatch, guess.sectionMatch,
guess.adjacent, guess.adjacent,
)}" )}"
style="animation-delay: {rowIndex * 1000 + 2 * 500}ms" style="animation-delay: {rowIndex * 1000 + 1 * 500}ms"
> >
<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(guess, "section")}
@@ -167,12 +155,24 @@
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, guess.firstLetterMatch,
)}" )}"
style="animation-delay: {rowIndex * 1000 + 3 * 500}ms" style="animation-delay: {rowIndex * 1000 + 2 * 500}ms"
> >
<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(guess, "firstLetter")}</span
> >
</div> </div>
<!-- Book Column -->
<div
class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-4 border-opacity-100 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in {getBoxColor(
guess.book.id === correctBookId,
)}"
style="animation-delay: {rowIndex * 1000 + 3 * 500}ms"
>
<span class="text-center leading-tight px-1 text-shadow-lg"
>{getBoxContent(guess, "book")}</span
>
</div>
</div> </div>
{/each} {/each}
</div> </div>