From 7ed91f36216cccb1d00d96cfd9c48a03039a6a8e Mon Sep 17 00:00:00 2001
From: Inga <inga-lovinde@noreply.oomza.cutegay.software>
Date: Tue, 19 Nov 2024 01:13:09 +0000
Subject: [PATCH] extracted display controls to shared function

---
 src/backend/components/boardgame.tsx | 30 ++++++++++++++--------------
 src/shared/display.ts                | 11 ++++++++++
 2 files changed, 26 insertions(+), 15 deletions(-)
 create mode 100644 src/shared/display.ts

diff --git a/src/backend/components/boardgame.tsx b/src/backend/components/boardgame.tsx
index 9a755cb..ca46281 100644
--- a/src/backend/components/boardgame.tsx
+++ b/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" }}>
-            Player X won
-          </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>
+          <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>
         </p>
 
         <p>
           <button type="submit" name={key} value={gameState.withEmptyBoard().serialize()}>
-            <span class="start-new-game" style={gameState.board ? { display: "none" } : {}}>
-              Start game
-            </span>
-            <span class="start-clear-game" style={gameState.board ? {} : { display: "none" }}>
-              Restart game
-            </span>
+            <span {...getClassAndDisplayAttributes("start-new-game", gameState, currentOutcome)}>Start game</span>
+            <span {...getClassAndDisplayAttributes("start-clear-game", gameState, currentOutcome)}>Restart game</span>
           </button>
         </p>
       </form>
diff --git a/src/shared/display.ts b/src/shared/display.ts
new file mode 100644
index 0000000..0a08d3e
--- /dev/null
+++ b/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>;