28 lines
1.0 KiB
JavaScript
28 lines
1.0 KiB
JavaScript
import React from 'react';
|
|
|
|
export default function GameGrid({ grid, width, middle }) {
|
|
return (
|
|
<table id="actors">
|
|
<tbody>
|
|
{grid.map((row, rowIndex) => (
|
|
<tr key={rowIndex}>
|
|
{Array.from({ length: width + 1 }, (_, colIndex) => {
|
|
const start = middle - row.pos;
|
|
const charIndex = colIndex - start;
|
|
const name = row.actorName;
|
|
const isInRange = charIndex >= 0 && charIndex < name.length;
|
|
const isHighlighted = charIndex === row.pos;
|
|
|
|
return (
|
|
<td key={colIndex} style={isHighlighted ? { color: 'red' } : undefined}>
|
|
{isInRange ? name[charIndex].toUpperCase() : ''}
|
|
</td>
|
|
);
|
|
})}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
);
|
|
}
|