accept game variant as a parameter

src/backend/components/boardgame.tsx

@@ -1,6 +1,7 @@
 import { sequence } from "../../shared/array-utils.ts";
-import { BoardgameStateType, CurrentOutcome, GameRules } from "../../shared/datatypes.ts";
+import { BoardgameStateType, CurrentOutcome } from "../../shared/datatypes.ts";
 import { ButtonValues, getButtonValues, getCellDisplayData, getDisplayStates } from "../../shared/display.ts";
+import { GameVariantName, gamesRules } from "../../shared/rules.ts";
 
 const getSubmitAttributes = (key: string, targetState: BoardgameStateType) => ({
   type: "submit" as const,
@@ -38,7 +39,9 @@ const getGenericButtonAttributes = (
   className: kind,
 });
 
-export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, rules: GameRules) => {
+export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, gameVariant: GameVariantName) => {
+  const rules = gamesRules[gameVariant];
+
   const currentOutcome = gameState.board ? rules.getBoardOutcome(gameState.board) : CurrentOutcome.Undecided;
 
   const buttonValues = getButtonValues(gameState);
@@ -49,7 +52,7 @@ export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, rul
     .map(([name]) => name);
 
   return (
-    <board-game track={key} className={gameActiveClassNames.join(" ")}>
+    <board-game track={key} className={gameActiveClassNames.join(" ")} game-variant={gameVariant}>
       <form method="post" is="progressive-form">
         <p>
           Current player: <span class="current-player-name">{gameState.currentPlayerName}</span>

src/backend/main/boardgame-handler.ts

@@ -2,13 +2,13 @@ import type { Request, Response } from "express";
 import { rewriteQueryParamsWith, safeGetQueryValue } from "../utils.ts";
 import { BoardgameState } from "../../shared/boardgame-state.ts";
 import { getBoardgameHtml } from "../components/boardgame.tsx";
-import { gamesRules } from "../../shared/rules.ts";
+import { GameVariantName, gamesRules } from "../../shared/rules.ts";
 import { getTargetGameState } from "../../shared/boardgame.ts";
 
 // Returns nothing if query parameter is uninitialized and a redirect was made,
 // or component if query parameter is initialized.
-export const handleBoardgame = (req: Request, res: Response, key: string) => {
-  const rules = gamesRules.tictactoe;
+export const handleBoardgame = (req: Request, res: Response, key: string, gameVariant: GameVariantName) => {
+  const rules = gamesRules[gameVariant];
 
   const serializedState = safeGetQueryValue(req, key);
   const inputState = BoardgameState.fromSerialized(serializedState);
@@ -19,5 +19,5 @@ export const handleBoardgame = (req: Request, res: Response, key: string) => {
     return;
   }
 
-  return getBoardgameHtml(key, state, rules);
+  return getBoardgameHtml(key, state, gameVariant);
 };

src/backend/main/index.tsx

@@ -8,12 +8,12 @@ export const mainPageHandler: RequestHandler = (req, res) => {
     b: parseInt(safeGetQueryValue(req, "b") ?? "0", 10),
   };
 
-  const board1 = handleBoardgame(req, res, "tictactoe1");
+  const board1 = handleBoardgame(req, res, "tictactoe1", "tictactoe");
   if (!board1) {
     return;
   }
 
-  const board2 = handleBoardgame(req, res, "tictactoe2");
+  const board2 = handleBoardgame(req, res, "tictactoe2", "tictactoe");
   if (!board2) {
     return;
   }

src/frontend/components/board-game.ts

@@ -2,7 +2,7 @@ import { BoardgameState } from "../../shared/boardgame-state.ts";
 import { getTargetGameState } from "../../shared/boardgame.ts";
 import { CurrentOutcome } from "../../shared/datatypes.ts";
 import { ButtonValues, getButtonValues, getCellDisplayData, getDisplayStates } from "../../shared/display.ts";
-import { gamesRules } from "../../shared/rules.ts";
+import { GameVariantName, gamesRules } from "../../shared/rules.ts";
 import { replaceLocation } from "../lib/navigation-utils.ts";
 import { TrackingTools } from "../lib/query-tracking-utils.ts";
 import { updateWithQueryParams } from "../lib/url-utils.ts";
@@ -11,7 +11,7 @@ export class BoardGameComponent extends HTMLElement {
   private readonly trackingTools = new TrackingTools(this);
 
   handleTrackedValueUpdate(newValue: string | null, key: string) {
-    const rules = gamesRules.tictactoe;
+    const rules = gamesRules[this.getAttribute("game-variant") as GameVariantName];
 
     const inputGameState = BoardgameState.fromSerialized(newValue);
     if (!inputGameState) {

src/shared/rules.ts

@@ -3,3 +3,5 @@ import { rules as tictactoeRules } from "./tictactoe-rules.ts";
 export const gamesRules = {
   tictactoe: tictactoeRules,
 };
+
+export type GameVariantName = keyof typeof gamesRules;