handle decided boards

src/backend/components/boardgame.tsx

@@ -1,48 +1,66 @@
 import { sequence } from "../../shared/array-utils.ts";
-import { BoardgameStateType, SquareState, formatSquareState } from "../../shared/datatypes.ts";
+import {
+  BoardgameStateType,
+  CurrentOutcome,
+  GameRules,
+  SquareState,
+  formatSquareState,
+} from "../../shared/datatypes.ts";
 
-const getCellHtml = (key: string, state: BoardgameStateType, row: number, column: number) => {
+const getCellHtml = ({
-  if (!state.board) {
+  key,
+  gameState,
+  currentOutcome,
+  row,
+  column,
+}: {
+  key: string;
+  gameState: BoardgameStateType;
+  currentOutcome: CurrentOutcome;
+  row: number;
+  column: number;
+}) => {
+  if (!gameState.board) {
     return (
-      <button type="submit" name={key} value={state.serialize()} disabled>
+      <button type="submit" name={key} value={gameState.serialize()} disabled>
         {" "}
       </button>
     );
   }
 
-  const squareState = state.board.get(row, column);
+  const squareState = gameState.board.get(row, column);
-  const nextGameState = squareState === SquareState.Unoccupied ? state.withMove(row, column) : state;
+  const nextGameState =
+    squareState === SquareState.Unoccupied && currentOutcome === CurrentOutcome.Undecided
+      ? gameState.withMove(row, column)
+      : gameState;
   return (
-    <button
+    <button type="submit" name={key} value={nextGameState.serialize()} disabled={nextGameState === gameState}>
-      type="submit"
-      name={key}
-      value={nextGameState.serialize()}
-      disabled={squareState !== SquareState.Unoccupied}
-    >
       {formatSquareState(squareState)}
     </button>
   );
 };
 
-export const getBoardgameHtml = (key: string, state: BoardgameStateType) => {
+export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, rules: GameRules) => {
+  const currentOutcome = gameState.board ? rules.getBoardOutcome(gameState.board) : CurrentOutcome.Undecided;
+
   return (
     <board-game>
       <form method="post">
-        <p>Current player: {state.currentPlayerName}</p>
+        <p>Current player: {gameState.currentPlayerName}</p>
 
         <table>
           <tbody>
-            {sequence(state.rows).map((row) => (
+            {sequence(gameState.rows).map((row) => (
               <tr>
-                {sequence(state.columns).map((column) => (
+                {sequence(gameState.columns).map((column) => (
-                  <td>{getCellHtml(key, state, row, column)}</td>
+                  <td>{getCellHtml({ key, gameState, currentOutcome, row, column })}</td>
                 ))}
               </tr>
             ))}
           </tbody>
         </table>
 
-        <button type="submit" name={key} value={state.withEmptyBoard().serialize()}>
+        <button type="submit" name={key} value={gameState.withEmptyBoard().serialize()}>
           Start game
         </button>
       </form>

src/backend/main/boardgame-handler.ts

@@ -2,6 +2,7 @@ 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.spec.ts";
 
 // Returns nothing if query parameter is uninitialized and a redirect was made,
 // or component if query parameter is initialized.
@@ -15,5 +16,5 @@ export const handleBoardgame = (req: Request, res: Response, key: string) => {
     return;
   }
 
-  return getBoardgameHtml(key, state);
+  return getBoardgameHtml(key, state, gamesRules.tictactoe);
 };

src/shared/rules.spec.ts

@@ -0,0 +1,5 @@
+import { rules as tictactoeRules } from "./tictactoe-rules.ts";
+
+export const gamesRules = {
+  tictactoe: tictactoeRules,
+};