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

main
Inga 🏳‍🌈 2 months ago
parent 91dfc14bad
commit 60eb8edbac
  1. 5
      src/backend/components/boardgame.tsx
  2. 17
      src/frontend/components/board-game.ts

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

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

Loading…
Cancel
Save