Highlight assisted crossword cells in final results

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) {

src/components/arcade/CrosswordGame.tsx

@@ -201,7 +201,7 @@ export function CrosswordGame({ seed, packId, packName, classSlug, layout, setti
   }
 
   if (result) {
-    return <ArcadeGameShell title={packName} exitHref={`/${classSlug}/arcade/crossword`} elapsedSeconds={elapsedSeconds} complete worldClassName="crossword-world crossword-stage"><CrosswordResults result={result} layout={layout} answers={answers} exitHref={`/${classSlug}/arcade/crossword`} /></ArcadeGameShell>;
+    return <ArcadeGameShell title={packName} exitHref={`/${classSlug}/arcade/crossword`} elapsedSeconds={elapsedSeconds} complete worldClassName="crossword-world crossword-stage"><CrosswordResults result={result} layout={layout} answers={answers} revealedCells={revealedCells} exitHref={`/${classSlug}/arcade/crossword`} /></ArcadeGameShell>;
   }
 
   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<string, string>; exitHref: string }) {
+function CrosswordResults({ result, layout, answers, revealedCells, exitHref }: { result: CrosswordRoundResult; layout: CrosswordLayout; answers: Record<string, string>; revealedCells: Set<string>; 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 <div className="crossword-results">
     <section className="crossword-results-hero rounded-3xl p-6 sm:p-8"><p className="crossword-kicker">Final edition</p><h2 className="editorial-title mt-1 text-4xl">{result.outcome === "GAVE_UP" ? "Answers revealed" : "Puzzle submitted"}</h2><div className="mt-6 grid grid-cols-2 gap-3 sm:grid-cols-4">{[["Score", `${result.score}/${result.maxScore}`], ["Accuracy", `${Math.round(result.accuracy * 100)}%`], ["Hints", result.hintsUsed], ["Words", result.placedCount]].map(([label, value]) => <div key={label} className="rounded-xl p-3"><small>{label}</small><strong>{value}</strong></div>)}</div></section>
-    <FinalCrosswordBoard layout={layout} answers={answers} />
-    <div className="mt-5 space-y-3">{ordered.map((entry) => <article key={entry.entryId} className={`crossword-review rounded-2xl p-4 ${entry.correct ? "is-correct" : "is-incorrect"}`}><p className="text-xs font-extrabold uppercase tracking-wide">{entry.revealedWord || entry.revealedLetters ? "Assisted" : entry.correct ? "Correct" : "Incorrect"}</p><h3 className="mt-1 text-lg font-extrabold">{entry.answer}</h3><p className="mt-1 text-sm"><strong>Clue:</strong> {entry.clue}</p><p className="mt-1 text-sm"><strong>Your answer:</strong> {entry.playerAnswer || "No answer"}</p><p className="mt-3 text-sm leading-6">{entry.explanation}</p></article>)}</div>
+    <FinalCrosswordBoard layout={layout} answers={answers} revealedCells={revealedCells} />
+    <div className="mt-5 space-y-3">{ordered.map((entry) => {
+      const assisted = entry.revealedWord || entry.revealedLetters > 0;
+      return <article key={entry.entryId} className={`crossword-review rounded-2xl p-4 ${assisted ? "is-assisted" : entry.correct ? "is-correct" : "is-incorrect"}`}><p className="text-xs font-extrabold uppercase tracking-wide">{assisted ? "Assisted" : entry.correct ? "Correct" : "Incorrect"}</p><h3 className="mt-1 text-lg font-extrabold">{entry.answer}</h3><p className="mt-1 text-sm"><strong>Clue:</strong> {entry.clue}</p><p className="mt-1 text-sm"><strong>Your answer:</strong> {entry.playerAnswer || "No answer"}</p><p className="mt-3 text-sm leading-6">{entry.explanation}</p></article>;
+    })}</div>
     <div className="mt-6 grid grid-cols-2 gap-3"><button onClick={() => window.location.reload()} className="crossword-primary min-h-12 rounded-xl font-extrabold">New layout</button><a href={exitHref} className="crossword-secondary flex min-h-12 items-center justify-center">Back to banks</a></div>
   </div>;
 }
 
-function FinalCrosswordBoard({ layout, answers }: { layout: CrosswordLayout; answers: Record<string, string> }) {
+function FinalCrosswordBoard({ layout, answers, revealedCells }: { layout: CrosswordLayout; answers: Record<string, string>; revealedCells: Set<string> }) {
   const cellSize = Math.max(18, Math.min(30, Math.floor(640 / Math.max(layout.rows, layout.columns))));
   return <section className="crossword-final-board mt-5 rounded-3xl p-4 sm:p-6">
-    <div className="flex flex-wrap items-end justify-between gap-3"><div><p className="crossword-kicker">Completed grid</p><h3 className="editorial-title mt-1 text-2xl">Your final board</h3></div><div className="crossword-final-legend"><span><i className="is-correct" />Correct</span><span><i className="is-incorrect" />Incorrect or blank</span></div></div>
+    <div className="flex flex-wrap items-end justify-between gap-3"><div><p className="crossword-kicker">Completed grid</p><h3 className="editorial-title mt-1 text-2xl">Your final board</h3></div><div className="crossword-final-legend"><span><i className="is-correct" />Correct</span><span><i className="is-assisted" />Revealed or assisted</span><span><i className="is-incorrect" />Incorrect or blank</span></div></div>
     <div className="crossword-final-viewport mt-4">
       <div className="crossword-final-grid" style={{ gridTemplateColumns: `repeat(${layout.columns}, ${cellSize}px)`, gridTemplateRows: `repeat(${layout.rows}, ${cellSize}px)` }}>
         {layout.cells.map((cell) => {
+          const assisted = revealedCells.has(cell.key);
           const correct = answers[cell.key] === cell.answer;
-          return <div key={cell.key} className={`crossword-final-cell ${correct ? "is-correct" : "is-incorrect"}`} style={{ gridColumn: cell.column + 1, gridRow: cell.row + 1 }} aria-label={`${cell.answer}, ${correct ? "correct" : "incorrect or blank"}`}><small>{cell.number}</small><strong>{cell.answer}</strong></div>;
+          const state = assisted ? "assisted" : correct ? "correct" : "incorrect";
+          return <div key={cell.key} className={`crossword-final-cell is-${state}`} style={{ gridColumn: cell.column + 1, gridRow: cell.row + 1 }} aria-label={`${cell.answer}, ${state === "incorrect" ? "incorrect or blank" : state}`}><small>{cell.number}</small><strong>{cell.answer}</strong></div>;
         })}
       </div>
     </div>

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);