From a6af3a49adc208af45a608f87f151d495dbbbd70 Mon Sep 17 00:00:00 2001 From: Elijah Date: Tue, 14 Jul 2026 20:33:39 -0700 Subject: [PATCH] Highlight assisted crossword cells in final results --- src/app/globals.css | 3 +++ src/components/arcade/CrosswordGame.tsx | 19 ++++++++++++------- src/components/arcade/CrosswordHub.tsx | 2 ++ 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index 5d7692f..75eeb37 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -677,17 +677,20 @@ body:has(.crossword-world) .app-mobile-header { .crossword-final-legend span { display: inline-flex; align-items: center; gap: .35rem; } .crossword-final-legend i { width: .8rem; height: .8rem; border: 1px solid currentColor; border-radius: .15rem; } .crossword-final-legend i.is-correct { color: #356b3b; background: #bfe0b9; } +.crossword-final-legend i.is-assisted { color: #8a631c; background: #f2d47e; } .crossword-final-legend i.is-incorrect { color: #923a30; background: #efb9af; } .crossword-final-viewport { overflow: auto; padding: 1rem; border-radius: 1rem; background: #2a1d13; box-shadow: inset 0 0 22px rgba(0,0,0,.55); } .crossword-final-grid { display: grid; width: max-content; min-width: 100%; place-content: center; } .crossword-final-cell { position: relative; display: grid; place-items: center; color: #25190f; border: 1px solid #62482f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .crossword-final-cell.is-correct { background: #c7e6bf; box-shadow: inset 0 0 0 1px rgba(47,108,58,.35); } +.crossword-final-cell.is-assisted { background: #f2d47e; box-shadow: inset 0 0 0 2px rgba(138,99,28,.42); } .crossword-final-cell.is-incorrect { background: #efbbb1; box-shadow: inset 0 0 0 2px rgba(145,47,39,.45); } .crossword-final-cell small { position: absolute; left: 2px; top: 1px; font-size: 7px; line-height: 1; } .crossword-final-cell strong { font-size: clamp(10px, 2vw, 15px); } .crossword-review { border: 1px solid #c8aa79; color: #392718; background: #f4e7c9; box-shadow: 0 8px 22px rgba(20,12,6,.15); } .crossword-review.is-incorrect { border-left: 6px solid #a63a2e; } .crossword-review.is-correct { border-left: 6px solid #4f7a4f; } +.crossword-review.is-assisted { border-left: 6px solid #b58627; } .crossword-review.is-omitted { opacity: .75; border-left: 6px solid #8c765a; } @media (max-width: 639px) { diff --git a/src/components/arcade/CrosswordGame.tsx b/src/components/arcade/CrosswordGame.tsx index 822792f..e320d83 100644 --- a/src/components/arcade/CrosswordGame.tsx +++ b/src/components/arcade/CrosswordGame.tsx @@ -201,7 +201,7 @@ export function CrosswordGame({ seed, packId, packName, classSlug, layout, setti } if (result) { - return ; + return ; } const activeKeys = new Set(activeEntry?.cellKeys ?? []); @@ -235,28 +235,33 @@ export function CrosswordGame({ seed, packId, packName, classSlug, layout, setti ); } -function CrosswordResults({ result, layout, answers, exitHref }: { result: CrosswordRoundResult; layout: CrosswordLayout; answers: Record; exitHref: string }) { +function CrosswordResults({ result, layout, answers, revealedCells, exitHref }: { result: CrosswordRoundResult; layout: CrosswordLayout; answers: Record; revealedCells: Set; exitHref: string }) { const ordered = result.entries.filter((entry) => !entry.omitted).sort((left, right) => { const rank = (entry: typeof left) => !entry.correct ? 0 : entry.revealedWord || entry.revealedLetters > 0 || entry.alternateClueUsed ? 1 : 2; return rank(left) - rank(right); }); return

Final edition

{result.outcome === "GAVE_UP" ? "Answers revealed" : "Puzzle submitted"}

{[["Score", `${result.score}/${result.maxScore}`], ["Accuracy", `${Math.round(result.accuracy * 100)}%`], ["Hints", result.hintsUsed], ["Words", result.placedCount]].map(([label, value]) =>
{label}{value}
)}
- -
{ordered.map((entry) =>

{entry.revealedWord || entry.revealedLetters ? "Assisted" : entry.correct ? "Correct" : "Incorrect"}

{entry.answer}

Clue: {entry.clue}

Your answer: {entry.playerAnswer || "No answer"}

{entry.explanation}

)}
+ +
{ordered.map((entry) => { + const assisted = entry.revealedWord || entry.revealedLetters > 0; + return

{assisted ? "Assisted" : entry.correct ? "Correct" : "Incorrect"}

{entry.answer}

Clue: {entry.clue}

Your answer: {entry.playerAnswer || "No answer"}

{entry.explanation}

; + })}
Back to banks
; } -function FinalCrosswordBoard({ layout, answers }: { layout: CrosswordLayout; answers: Record }) { +function FinalCrosswordBoard({ layout, answers, revealedCells }: { layout: CrosswordLayout; answers: Record; revealedCells: Set }) { const cellSize = Math.max(18, Math.min(30, Math.floor(640 / Math.max(layout.rows, layout.columns)))); return
-

Completed grid

Your final board

CorrectIncorrect or blank
+

Completed grid

Your final board

CorrectRevealed or assistedIncorrect or blank
{layout.cells.map((cell) => { + const assisted = revealedCells.has(cell.key); const correct = answers[cell.key] === cell.answer; - return
{cell.number}{cell.answer}
; + const state = assisted ? "assisted" : correct ? "correct" : "incorrect"; + return
{cell.number}{cell.answer}
; })}
diff --git a/src/components/arcade/CrosswordHub.tsx b/src/components/arcade/CrosswordHub.tsx index adfa193..74fa5e9 100644 --- a/src/components/arcade/CrosswordHub.tsx +++ b/src/components/arcade/CrosswordHub.tsx @@ -47,6 +47,7 @@ export function CrosswordHub({ classId, classSlug, initialPacks }: { classId: st }, [selected, size]); function selectPack(pack: ArcadePackSummary) { + if (pack.id === effectiveSelectedId) return; setSelectedId(pack.id); setInstantCheck(pack.defaultInstantCheck); setAllowHints(pack.defaultAllowHints); @@ -57,6 +58,7 @@ export function CrosswordHub({ classId, classSlug, initialPacks }: { classId: st } function selectSize(nextSize: CrosswordSize) { + if (nextSize === size) return; setSize(nextSize); setPreviewLayout(null); setPreviewLoading(true);