feat: add GameRow component composing LetterInput and ActorPopover

assets/react/controllers/GameRow.jsx

@@ -0,0 +1,43 @@
+import React, { useRef, useCallback } from 'react';
+import LetterInput from './LetterInput';
+import ActorPopover from './ActorPopover';
+
+export default function GameRow({ actorName, pos, colStart, totalWidth }) {
+    const inputRefs = useRef([]);
+
+    const setInputRef = useCallback((index) => (el) => {
+        inputRefs.current[index] = el;
+    }, []);
+
+    const focusInput = useCallback((index) => {
+        inputRefs.current[index]?.focus();
+    }, []);
+
+    const letters = actorName.split('');
+
+    return (
+        <tr>
+            {Array.from({ length: totalWidth + 1 }, (_, colIndex) => {
+                const charIndex = colIndex - colStart;
+                const isInRange = charIndex >= 0 && charIndex < letters.length;
+
+                if (!isInRange) {
+                    return <td key={colIndex} />;
+                }
+
+                return (
+                    <LetterInput
+                        key={colIndex}
+                        highlighted={charIndex === pos}
+                        inputRef={setInputRef(charIndex)}
+                        onNext={() => focusInput(charIndex + 1)}
+                        onPrev={() => focusInput(charIndex - 1)}
+                    />
+                );
+            })}
+            <td>
+                <ActorPopover actorName={actorName} />
+            </td>
+        </tr>
+    );
+}