44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
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>
|
|
<td>
|
|
<ActorPopover actorName={actorName} />
|
|
</td>
|
|
{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)}
|
|
/>
|
|
);
|
|
})}
|
|
</tr>
|
|
);
|
|
}
|