feat: render game grid as React component via SymfonyUX

assets/react/controllers/GameGrid.jsx

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

src/Controller/HomepageController.php

@@ -64,9 +64,15 @@ class HomepageController extends AbstractController
         $width = $rightSize + $leftSize + 1;
         $middle = $leftSize;
 
+        // Build JSON-serializable grid for React
+        $grid = array_map(fn (array $actorData) => [
+            'actorName' => $actorData['actor']->getName(),
+            'actorId' => $actorData['actor']->getId(),
+            'pos' => $actorData['pos'],
+        ], $actors);
+
         return $this->render('homepage/index.html.twig', [
-            'mainActor' => $mainActor,
-            'actors' => $actors,
+            'grid' => $grid,
             'width' => $width,
             'middle' => $middle,
         ]);

templates/homepage/index.html.twig

@@ -1,26 +1,9 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-    <table id="actors">
-        {% set iActor = 0 %}
-        {% for mainChar in mainActor.name|split('') %}
-            {% if not mainChar|match('/[a-zA-Z]/') %}
-                <tr><td></td></tr>
-            {% else %}
-                {% set actor = actors[iActor] %}
-                <tr>
-                    {% set i = 0 %}
-                    {% set start = middle - actor.pos %}
-                    {% for c in range(0, width) %}
-                        {% if c >= start and c - start < actor.actor.name|length %}
-                            <td {% if c - start == actor.pos %}style="color:red;"{% endif %}>{{ actor.actor.name|slice(c - start, 1)|upper }}</td>
-                        {% else %}
-                            <td></td>
-                        {% endif %}
-                    {% endfor %}
-                </tr>
-                {% set iActor = iActor + 1 %}
-            {% endif %}
-        {% endfor %}
-    </table>
+    {{ react_component('GameGrid', {
+        grid: grid,
+        width: width,
+        middle: middle,
+    }) }}
 {% endblock %}