feature parity between frontend and backend

src/backend/components/boardgame.tsx

@@ -45,7 +45,9 @@ export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, rul
   return (
     <board-game track={key}>
       <form method="post" is="progressive-form">
-        <p>Current player: {gameState.currentPlayerName}</p>
+        <p>
+          Current player: <span class="current-player-name">{gameState.currentPlayerName}</span>
+        </p>
 
         <table class="game-board">
           <tbody class="game-board">
@@ -94,7 +96,7 @@ export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, rul
         </p>
 
         <p>
-          <button type="submit" name={key} value={gameState.withEmptyBoard().serialize()}>
+          <button type="submit" class="game-start" name={key} value={gameState.withEmptyBoard().serialize()}>
             <span {...getClassAndDisplayAttributes("start-new-game", gameState, currentOutcome)}>Start game</span>
             <span {...getClassAndDisplayAttributes("start-clear-game", gameState, currentOutcome)}>Restart game</span>
           </button>

src/frontend/components/board-game.ts

@@ -1,6 +1,6 @@
 import { BoardgameState } from "../../shared/boardgame-state.ts";
 import { getTargetGameState } from "../../shared/boardgame.ts";
-import { CurrentOutcome } from "../../shared/datatypes.ts";
+import { CurrentOutcome, Player } from "../../shared/datatypes.ts";
 import { getCellDisplayData, getDisplayStates } from "../../shared/display.ts";
 import { gamesRules } from "../../shared/rules.ts";
 import { replaceLocation } from "../lib/navigation-utils.ts";
@@ -33,6 +33,32 @@ export class BoardGameComponent extends HTMLElement {
       }
     }
 
+    for (const playerNameElement of this.querySelectorAll(".current-player-name")) {
+      if ((playerNameElement as HTMLElement).innerText !== gameState.currentPlayerName) {
+        (playerNameElement as HTMLElement).innerText = gameState.currentPlayerName;
+      }
+    }
+
+    for (const button of this.querySelectorAll("button.autoplayer-x-enable")) {
+      (button as HTMLButtonElement).value = gameState.withAutoPlayer(Player.X).serialize();
+    }
+
+    for (const button of this.querySelectorAll("button.autoplayer-x-disable")) {
+      (button as HTMLButtonElement).value = gameState.withoutAutoPlayer(Player.X).serialize();
+    }
+
+    for (const button of this.querySelectorAll("button.autoplayer-o-enable")) {
+      (button as HTMLButtonElement).value = gameState.withAutoPlayer(Player.O).serialize();
+    }
+
+    for (const button of this.querySelectorAll("button.autoplayer-o-disable")) {
+      (button as HTMLButtonElement).value = gameState.withoutAutoPlayer(Player.O).serialize();
+    }
+
+    for (const button of this.querySelectorAll("button.game-start")) {
+      (button as HTMLButtonElement).value = gameState.withEmptyBoard().serialize();
+    }
+
     for (const tbodyUntyped of this.querySelectorAll("tbody.game-board")) {
       const tbody = tbodyUntyped as HTMLTableSectionElement;
       for (let rowNumber = 0; rowNumber < tbody.rows.length; rowNumber++) {