extracted display controls to shared function

src/backend/components/boardgame.tsx

@@ -6,6 +6,16 @@ import {
   SquareState,
   formatSquareState,
 } from "../../shared/datatypes.ts";
+import { ClassNames, getDisplayStates } from "../../shared/display.ts";
+
+const getClassAndDisplayAttributes = (
+  className: ClassNames,
+  gameState: BoardgameStateType,
+  currentOutcome: CurrentOutcome,
+) => ({
+  class: className,
+  style: getDisplayStates(gameState, currentOutcome)[className] ? {} : { display: "none" },
+});
 
 const getCellHtml = ({
   key,
@@ -61,25 +71,15 @@ export const getBoardgameHtml = (key: string, gameState: BoardgameStateType, rul
         </table>
 
         <p>
-          <span class="outcome-winx" style={currentOutcome === CurrentOutcome.WinX ? {} : { display: "none" }}>
+          <span {...getClassAndDisplayAttributes("outcome-winx", gameState, currentOutcome)}>Player X won</span>
-            Player X won
+          <span {...getClassAndDisplayAttributes("outcome-wino", gameState, currentOutcome)}>Player O won</span>
-          </span>
+          <span {...getClassAndDisplayAttributes("outcome-draw", gameState, currentOutcome)}>Draw</span>
-          <span class="outcome-winy" style={currentOutcome === CurrentOutcome.WinO ? {} : { display: "none" }}>
-            Player O won
-          </span>
-          <span class="outcome-draw" style={currentOutcome === CurrentOutcome.Draw ? {} : { display: "none" }}>
-            Draw
-          </span>
         </p>
 
         <p>
           <button type="submit" name={key} value={gameState.withEmptyBoard().serialize()}>
-            <span class="start-new-game" style={gameState.board ? { display: "none" } : {}}>
+            <span {...getClassAndDisplayAttributes("start-new-game", gameState, currentOutcome)}>Start game</span>
-              Start game
+            <span {...getClassAndDisplayAttributes("start-clear-game", gameState, currentOutcome)}>Restart game</span>
-            </span>
-            <span class="start-clear-game" style={gameState.board ? {} : { display: "none" }}>
-              Restart game
-            </span>
           </button>
         </p>
       </form>

src/shared/display.ts

@@ -0,0 +1,11 @@
+import { BoardgameStateType, CurrentOutcome } from "./datatypes.ts";
+
+export const getDisplayStates = (gameState: BoardgameStateType, currentOutcome: CurrentOutcome) => ({
+  "outcome-winx": currentOutcome === CurrentOutcome.WinX,
+  "outcome-wino": currentOutcome === CurrentOutcome.WinO,
+  "outcome-draw": currentOutcome === CurrentOutcome.Draw,
+  "start-new-game": !gameState.board,
+  "start-clear-game": gameState.board,
+});
+
+export type ClassNames = keyof ReturnType<typeof getDisplayStates>;