less inline styles, more CSS

src/backend/components/boardgame.tsx

@@ -1,15 +1,6 @@
 import { sequence } from "../../shared/array-utils.ts";
 import { BoardgameStateType, CurrentOutcome, GameRules, Player } from "../../shared/datatypes.ts";
-import { ClassNames, getCellDisplayData, getDisplayStates } from "../../shared/display.ts";
-
-const getClassAndDisplayAttributes = (
-  className: ClassNames,
-  gameState: BoardgameStateType,
-  currentOutcome: CurrentOutcome,
-) => ({
-  class: className,
-  style: getDisplayStates(gameState, currentOutcome)[className] ? {} : { display: "none" },
-});
+import { getCellDisplayData, getDisplayStates } from "../../shared/display.ts";
 
 const getSubmitAttributes = (key: string, targetState: BoardgameStateType) => ({
   type: "submit" as const,
@@ -41,9 +32,13 @@ const getCellHtml = ({
 
 export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, rules: GameRules) => {
   const currentOutcome = gameState.board ? rules.getBoardOutcome(gameState.board) : CurrentOutcome.Undecided;
+  const gameClasses = getDisplayStates(gameState, currentOutcome);
+  const gameActiveClassNames = Object.entries(gameClasses)
+    .filter(([, value]) => value)
+    .map(([name]) => name);
 
   return (
-    <board-game track={key}>
+    <board-game track={key} class={gameActiveClassNames.join(" ")}>
       <form method="post" is="progressive-form">
         <p>
           Current player: <span class="current-player-name">{gameState.currentPlayerName}</span>
@@ -62,33 +57,33 @@ export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, rul
         </table>
 
         <p>
-          <span {...getClassAndDisplayAttributes("outcome-winx", gameState, currentOutcome)}>Player X won</span>
-          <span {...getClassAndDisplayAttributes("outcome-wino", gameState, currentOutcome)}>Player O won</span>
-          <span {...getClassAndDisplayAttributes("outcome-draw", gameState, currentOutcome)}>Draw</span>
+          <span class="when-outcome-winx">Player X won</span>
+          <span class="when-outcome-wino">Player O won</span>
+          <span class="when-outcome-draw">Draw</span>
         </p>
 
-        <p {...getClassAndDisplayAttributes("autoplayer-x-disabled", gameState, currentOutcome)}>
+        <p class="when-autoplayer-x-disabled">
           Currently X moves are made manually.{" "}
           <button class="autoplayer-x-enable" {...getSubmitAttributes(key, gameState.withAutoPlayer(Player.X))}>
             Make computer play for X.
           </button>
         </p>
 
-        <p {...getClassAndDisplayAttributes("autoplayer-x-enabled", gameState, currentOutcome)}>
+        <p class="when-autoplayer-x-enabled">
           Currently X moves are made by computer.{" "}
           <button class="autoplayer-x-disable" {...getSubmitAttributes(key, gameState.withoutAutoPlayer(Player.X))}>
             Make them manually.
           </button>
         </p>
 
-        <p {...getClassAndDisplayAttributes("autoplayer-o-disabled", gameState, currentOutcome)}>
+        <p class="when-autoplayer-o-disabled">
           Currently O moves are made manually.{" "}
           <button class="autoplayer-o-enable" {...getSubmitAttributes(key, gameState.withAutoPlayer(Player.O))}>
             Make computer play for O.
           </button>
         </p>
 
-        <p {...getClassAndDisplayAttributes("autoplayer-o-enabled", gameState, currentOutcome)}>
+        <p class="when-autoplayer-o-enabled">
           Currently O moves are made by computer.{" "}
           <button class="autoplayer-o-disable" {...getSubmitAttributes(key, gameState.withoutAutoPlayer(Player.O))}>
             Make them manually.
@@ -97,8 +92,8 @@ export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, rul
 
         <p>
           <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>
+            <span class="when-game-not-in-progress">Start game</span>
+            <span class="when-game-in-progress">Restart game</span>
           </button>
         </p>
       </form>

src/frontend/components/board-game.ts

@@ -27,10 +27,8 @@ export class BoardGameComponent extends HTMLElement {
     const currentOutcome = gameState.board ? rules.getBoardOutcome(gameState.board) : CurrentOutcome.Undecided;
 
     const displayStates = getDisplayStates(gameState, currentOutcome);
-    for (const [className, shouldDisplay] of Object.entries(displayStates)) {
-      for (const element of this.querySelectorAll(`.${className}`)) {
-        (element as HTMLElement).style.display = shouldDisplay ? "" : "none";
-      }
+    for (const [className, shouldEnable] of Object.entries(displayStates)) {
+      this.classList.toggle(className, shouldEnable);
     }
 
     for (const playerNameElement of this.querySelectorAll(".current-player-name")) {

src/frontend/static/style.css

@@ -4,5 +4,17 @@
 }
 
 li form {
-    display: inline;
+  display: inline;
+}
+
+board-game:not(.outcome-winx) .when-outcome-winx,
+board-game:not(.outcome-wino) .when-outcome-wino,
+board-game:not(.outcome-draw) .when-outcome-draw,
+board-game:not(.autoplayer-x-enabled) .when-autoplayer-x-enabled,
+board-game:not(.autoplayer-x-disabled) .when-autoplayer-x-disabled,
+board-game:not(.autoplayer-o-enabled) .when-autoplayer-o-enabled,
+board-game:not(.autoplayer-o-disabled) .when-autoplayer-o-disabled,
+board-game:not(.game-in-progress) .when-game-in-progress,
+board-game:not(.game-not-in-progress) .when-game-not-in-progress {
+  display: none;
 }

src/shared/display.ts

@@ -8,12 +8,10 @@ export const getDisplayStates = (gameState: BoardgameStateType, currentOutcome:
   "autoplayer-x-disabled": !gameState.autoPlayers.has(Player.X),
   "autoplayer-o-enabled": gameState.autoPlayers.has(Player.O),
   "autoplayer-o-disabled": !gameState.autoPlayers.has(Player.O),
-  "start-new-game": !gameState.board,
-  "start-clear-game": gameState.board,
+  "game-in-progress": !!gameState.board,
+  "game-not-in-progress": !gameState.board,
 });
 
-export type ClassNames = keyof ReturnType<typeof getDisplayStates>;
-
 export const getCellDisplayData = ({
   gameState,
   currentOutcome,