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

import React from 'react';
import GameRow from './GameRow';
import ActorPopover from './ActorPopover';

export default function GameGrid({ grid, width, middle }) {
    return (
        <div className="game-grid-scroll">
            <table id="actors">
                <tbody>
                    {grid.map((row, rowIndex) => {
                        if (row.separator !== undefined) {
                            return (
                                <tr key={rowIndex} className="separator-row">
                                    <td className="hint-cell" />
                                    {Array.from({ length: middle }, (_, i) => (
                                        <td key={i} />
                                    ))}
                                    <td className="letter-static separator-char">
                                        {row.separator === ' ' ? '' : row.separator}
                                    </td>
                                    {Array.from({ length: width - middle }, (_, i) => (
                                        <td key={middle + 1 + i} />
                                    ))}
                                </tr>
                            );
                        }

                        return (
                            <GameRow
                                key={rowIndex}
                                actorName={row.actorName}
                                pos={row.pos}
                                colStart={middle - row.pos}
                                totalWidth={width}
                                hintType={row.hintType}
                                hintText={row.hintText}
                            />
                        );
                    })}
                </tbody>
            </table>
        </div>
    );
}