used templates for new cells instead of manually creating new button on frontend; removed unused optimization

src/backend/components/boardgame.tsx

@@ -91,6 +91,7 @@ export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, gam
         </button>
       </>
     ),
+    "game-cell": <button {...getSubmitAttributes(key, gameState)} />,
   };
 
   const slotTemplateNames = getSlotTemplateNames(gameState, currentOutcome);
@@ -115,7 +116,9 @@ export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, gam
               {sequence(gameState.rows).map((row) => (
                 <tr>
                   {sequence(gameState.columns).map((column) => (
-                    <td>{getCellHtml({ key, gameState, currentOutcome, row, column })}</td>
+                    <td data-current-template="game-cell">
+                      {getCellHtml({ key, gameState, currentOutcome, row, column })}
+                    </td>
                   ))}
                 </tr>
               ))}

src/frontend/components/board-game.ts

@@ -10,10 +10,10 @@ import {
   getSlotTemplateNames,
 } from "../../shared/display.ts";
 import { GameVariantName, gamesRules } from "../../shared/game-variants/index.ts";
+import { ensureColumnsNumber, ensureRowsNumber, ensureSlotTemplate } from "../utils/dom-utils.ts";
 import { replaceLocation } from "../utils/navigation-utils.ts";
 import { TrackingTools } from "../utils/query-tracking-utils.ts";
 import { updateWithQueryParams } from "../utils/url-utils.ts";
-import { ensureColumnsNumber, ensureRowsNumber, ensureSlotTemplate } from "../utils/dom-utils.ts";
 
 class BoardGameComponent extends HTMLElement {
   private readonly trackingTools = new TrackingTools(this);
@@ -63,19 +63,12 @@ class BoardGameComponent extends HTMLElement {
       for (let rowNumber = 0; rowNumber < tbody.rows.length; rowNumber++) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- should not be empty by the definition of rowNumber
         const row = tbody.rows[rowNumber]!;
-
         ensureColumnsNumber(row, gameState.columns);
 
         for (let columnNumber = 0; columnNumber < row.cells.length; columnNumber++) {
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- should not be empty by the definition of columnNumber
           const cell = row.cells[columnNumber]!;
-
-          if (!cell.childNodes.length) {
-            const button = document.createElement("button");
-            button.type = "submit";
-            button.name = key;
-            cell.append(button);
-          }
+          ensureSlotTemplate(cell, "game-cell", () => this.querySelector(`template[name="game-cell"]`));
 
           const { isDisabled, nextGameState, text, className } = getCellDisplayData({
             gameState,
@@ -85,15 +78,9 @@ class BoardGameComponent extends HTMLElement {
           });
           cell.querySelectorAll("button").forEach((button) => {
             button.value = nextGameState.serialize();
-            if (button.disabled !== isDisabled) {
             button.disabled = isDisabled;
-            }
-            if (button.innerText !== text) {
             button.innerText = text;
-            }
-            if (button.className !== className) {
             button.className = className;
-            }
           });
         }
       }