feat: handle non-letter characters in actor names with separator rows

Display spaces, hyphens and other non-letter characters as static cells
instead of input fields, and add separator rows in the grid for
non-alphabetic characters in the main actor's name.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

assets/react/controllers/GameRow.jsx

@@ -1,19 +1,31 @@
-import React, { useRef, useCallback } from 'react';
+import React, { useRef, useCallback, useMemo } from 'react';
 import LetterInput from './LetterInput';
 import ActorPopover from './ActorPopover';
 
+function isLetter(ch) {
+    return /[a-zA-Z]/.test(ch);
+}
+
 export default function GameRow({ actorName, pos, colStart, totalWidth }) {
     const inputRefs = useRef([]);
+    const letters = actorName.split('');
+
+    const letterIndices = useMemo(
+        () => letters.reduce((acc, ch, i) => { if (isLetter(ch)) acc.push(i); return acc; }, []),
+        [actorName]
+    );
 
     const setInputRef = useCallback((index) => (el) => {
         inputRefs.current[index] = el;
     }, []);
 
-    const focusInput = useCallback((index) => {
-        inputRefs.current[index]?.focus();
-    }, []);
-
-    const letters = actorName.split('');
+    const focusNextInput = useCallback((charIndex, direction) => {
+        const currentPos = letterIndices.indexOf(charIndex);
+        const nextPos = currentPos + direction;
+        if (nextPos >= 0 && nextPos < letterIndices.length) {
+            inputRefs.current[letterIndices[nextPos]]?.focus();
+        }
+    }, [letterIndices]);
 
     return (
         <tr>
@@ -28,13 +40,23 @@ export default function GameRow({ actorName, pos, colStart, totalWidth }) {
                     return <td key={colIndex} />;
                 }
 
+                const ch = letters[charIndex];
+
+                if (!isLetter(ch)) {
+                    return (
+                        <td key={colIndex} className="letter-static">
+                            {ch}
+                        </td>
+                    );
+                }
+
                 return (
                     <LetterInput
                         key={colIndex}
                         highlighted={charIndex === pos}
                         inputRef={setInputRef(charIndex)}
-                        onNext={() => focusInput(charIndex + 1)}
-                        onPrev={() => focusInput(charIndex - 1)}
+                        onNext={() => focusNextInput(charIndex, 1)}
+                        onPrev={() => focusNextInput(charIndex, -1)}
                     />
                 );
             })}