feat: render game grid as React component via SymfonyUX
This commit is contained in:
27
assets/react/controllers/GameGrid.jsx
Normal file
27
assets/react/controllers/GameGrid.jsx
Normal file
@@ -0,0 +1,27 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user