diff --git a/src/lib/components/GuessesTable.svelte b/src/lib/components/GuessesTable.svelte
index d5a88b9..e360cac 100644
--- a/src/lib/components/GuessesTable.svelte
+++ b/src/lib/components/GuessesTable.svelte
@@ -5,9 +5,12 @@
let {
guesses,
correctBookId,
- }: { guesses: Guess[]; correctBookId: string } = $props();
+ isWon = false,
+ }: { guesses: Guess[]; correctBookId: string; isWon?: boolean } = $props();
let hasGuesses = $derived(guesses.length > 0);
+ let showMinimized = $derived(isWon && guesses.length > 3);
+ let expanded = $state(false);
function getBoxColor(isCorrect: boolean, isAdjacent?: boolean): string {
if (isCorrect) return "bg-green-500 border-green-600";
@@ -104,31 +107,35 @@
- {#each guesses as guess, rowIndex (guess.book.id)}
+ {#if showMinimized && !expanded}
+
+
+
+ {@const firstGuess = guesses[0]}
{getBoxContent(guess, "testament")}{getBoxContent(firstGuess, "testament")}
{getBoxContent(guess, "section")}
- {#if guess.adjacent}
+ >{getBoxContent(firstGuess, "section")}
+ {#if firstGuess.adjacent}
‼️
{/if}
@@ -137,29 +144,173 @@
{getBoxContent(guess, "firstLetter")}{getBoxContent(firstGuess, "firstLetter")}
{getBoxContent(guess, "book")}{getBoxContent(firstGuess, "book")}
- {/each}
+
+
+
+
+
+ {#each guesses.slice(-2) as guess (guess.book.id)}
+
+
+
+ {getBoxContent(guess, "testament")}
+
+
+
+
+ {getBoxContent(guess, "section")}
+ {#if guess.adjacent}
+ ‼️
+ {/if}
+
+
+
+
+
+ {getBoxContent(guess, "firstLetter")}
+
+
+
+
+ {getBoxContent(guess, "book")}
+
+
+ {/each}
+ {:else}
+
+
+ {#each guesses as guess, rowIndex (guess.book.id)}
+
+
+
+ {getBoxContent(guess, "testament")}
+
+
+
+
+ {getBoxContent(guess, "section")}
+ {#if guess.adjacent}
+ ‼️
+ {/if}
+
+
+
+
+
+ {getBoxContent(guess, "firstLetter")}
+
+
+
+
+ {getBoxContent(guess, "book")}
+
+
+ {#if showMinimized && expanded && rowIndex === 0}
+
+
+ {/if}
+ {/each}
+ {/if}
-
{/if}