Ver código fonte

feat: tap letter in current guess to move cursor

Clicking/tapping a letter cell in the current (unsubmitted) guess row
moves the cursor to that position, matching the arrow-key cursor
navigation.

Co-Authored-By: Claude <noreply@anthropic.com>
Oleg Panashchenko 1 semana atrás
pai
commit
c38d407857

+ 5 - 1
client/src/components/Grid.tsx

@@ -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}

+ 1 - 0
client/src/screens/Screen2Game.tsx

@@ -168,6 +168,7 @@ export function Screen2Game({ guesses, letterColors, message, onGuess, onDismiss
         <Grid
           guesses={[...guesses, currentGuess ? { guess: currentGuess, colors: [] } : null].filter(Boolean) as GuessEntry[]}
           cursorPos={currentGuess.length > 0 ? cursorPos : undefined}
+          onCursorMove={setCursorPos}
         />
 
         {message && (