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

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>
    );
}