ltbxd-actorle/assets/react/controllers/GameRow.jsx

import React, { useRef, useCallback, useMemo } from 'react';
import LetterInput from './LetterInput';

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 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>
            {Array.from({ length: totalWidth + 1 }, (_, colIndex) => {
                const charIndex = colIndex - colStart;
                const isInRange = charIndex >= 0 && charIndex < letters.length;

                if (!isInRange) {
                    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={() => focusNextInput(charIndex, 1)}
                        onPrev={() => focusNextInput(charIndex, -1)}
                    />
                );
            })}
        </tr>
    );
}