From 60eb8edbac9fb54ec956841fb849e6ff7ea8c2fc Mon Sep 17 00:00:00 2001
From: Inga <inga-lovinde@noreply.oomza.cutegay.software>
Date: Sat, 7 Dec 2024 01:43:41 +0000
Subject: [PATCH] used templates for new cells instead of manually creating new
 button on frontend; removed unused optimization

---
 src/backend/components/boardgame.tsx  |  5 ++++-
 src/frontend/components/board-game.ts | 23 +++++------------------
 2 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/backend/components/boardgame.tsx b/src/backend/components/boardgame.tsx
index b9bacc7..22c889c 100644
--- a/src/backend/components/boardgame.tsx
+++ b/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>
               ))}
diff --git a/src/frontend/components/board-game.ts b/src/frontend/components/board-game.ts
index 55a395d..ae7ee8a 100644
--- a/src/frontend/components/board-game.ts
+++ b/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;
-            }
+            button.disabled = isDisabled;
+            button.innerText = text;
+            button.className = className;
           });
         }
       }