|
|
@@ -13,9 +13,11 @@ interface GridProps {
|
|
|
maxRows?: number;
|
|
|
/** Cursor position in the current (unsubmitted) row (0–5) */
|
|
|
cursorPos?: number;
|
|
|
+ /** Called when the user taps a cell in the current row */
|
|
|
+ onCursorMove?: (pos: number) => void;
|
|
|
}
|
|
|
|
|
|
-export function Grid({ guesses, maxRows = 6, cursorPos = 0 }: GridProps) {
|
|
|
+export function Grid({ guesses, maxRows = 6, cursorPos = 0, onCursorMove }: GridProps) {
|
|
|
const rows: (GuessEntry | null)[] = [...guesses];
|
|
|
while (rows.length < maxRows) {
|
|
|
rows.push(null);
|
|
|
@@ -48,6 +50,7 @@ export function Grid({ guesses, maxRows = 6, cursorPos = 0 }: GridProps) {
|
|
|
return (
|
|
|
<div
|
|
|
key={colIdx}
|
|
|
+ onClick={() => { if (isCurrentRow) onCursorMove?.(colIdx); }}
|
|
|
style={{
|
|
|
width: '52px',
|
|
|
height: '52px',
|
|
|
@@ -62,6 +65,7 @@ export function Grid({ guesses, maxRows = 6, cursorPos = 0 }: GridProps) {
|
|
|
textTransform: 'uppercase',
|
|
|
fontFamily: 'monospace',
|
|
|
position: 'relative',
|
|
|
+ cursor: isCurrentRow ? 'pointer' : undefined,
|
|
|
}}
|
|
|
>
|
|
|
{letter}
|