minor refactoring

src/backend/components/boardgame.tsx

@@ -22,10 +22,10 @@ const getCellHtml = ({
   row: number;
   column: number;
 }) => {
-  const { isDisabled, nextGameState, text } = getCellDisplayData({ gameState, currentOutcome, row, column });
+  const { isDisabled, nextGameState, text, className } = getCellDisplayData({ gameState, currentOutcome, row, column });
 
   return (
-    <button {...getSubmitAttributes(key, nextGameState)} disabled={isDisabled} className={`square-${text}`}>
+    <button {...getSubmitAttributes(key, nextGameState)} disabled={isDisabled} className={className}>
       {text}
     </button>
   );

src/frontend/components/board-game.ts

@@ -88,7 +88,7 @@ export class BoardGameComponent extends HTMLElement {
             cell.append(button);
           }
 
-          const { isDisabled, nextGameState, text } = getCellDisplayData({
+          const { isDisabled, nextGameState, text, className } = getCellDisplayData({
             gameState,
             currentOutcome,
             row: rowNumber,
@@ -102,8 +102,8 @@ export class BoardGameComponent extends HTMLElement {
             if (button.innerText !== text) {
               button.innerText = text;
             }
-            if (button.className !== `square-${text}`) {
+            if (button.className !== className) {
-              button.className = `square-${text}`;
+              button.className = className;
             }
           }
         }

src/shared/display.ts

@@ -28,6 +28,7 @@ export const getCellDisplayData = ({
       nextGameState: gameState,
       isDisabled: true,
       text: " ",
+      className: `square-empty`,
     };
   }
 
@@ -37,10 +38,12 @@ export const getCellDisplayData = ({
       ? gameState.withMove(row, column)
       : gameState;
 
+  const text = formatSquareState(squareState);
   return {
     nextGameState: nextGameState,
     isDisabled: nextGameState === gameState,
-    text: formatSquareState(squareState),
+    text,
+    className: `square-${text}`,
   };
 };