Add style for disabled button

src/js/Components.js

@@ -94,7 +94,7 @@ export function App()
                 `Player ${Constants.PLAYER_NAMES[game.winner]} wins!` :
                 `It's player "${Constants.PLAYER_NAMES[game.currentPlayer]}"s turn`
         ],
-        [MenuBar]
+        [MenuBar, { game }]
     ];
 }
 
@@ -153,10 +153,13 @@ export function Field({ field })
 /**
  * Renders a menu bar.
  *
+ * @param {{ game: Game }} game
+ * The game to represent.
+ *
  * @returns {NodeDescriptor}
  * The rendered element.
  */
-export function MenuBar()
+export function MenuBar({ game })
 {
     return [
         "div",
@@ -164,7 +167,18 @@ export function MenuBar()
         [Button, { content: ["New Game", { className: newGameClass }] }],
         [Button, { content: ["Save Game", { className: saveGameClass }] }],
         [Button, { content: ["Load Game", { className: loadGameClass }] }],
-        [Button, { content: ["Undo Last Move", { className: undoClass }] }]
+        [
+            Button,
+            {
+                content: [
+                    "Undo Last Move",
+                    {
+                        className: undoClass,
+                        ...(game.undoStackCount > 0 ? {} : { disabled: true })
+                    }
+                ]
+            }
+        ]
     ];
 }
 

src/js/Game.js

@@ -68,6 +68,14 @@ export class Game
         return this.state.turnCount % 2 === 0 ? "r" : "b";
     }
 
+    /**
+     * Gets the number of entries in the undo stack.
+     */
+    get undoStackCount()
+    {
+        return this.#previousStates.length;
+    }
+
     /**
      * Gets the id of the player that is winning.
      *

src/styles/style.css

@@ -19,6 +19,11 @@ button:active {
     background-color: rgb(96, 190, 221);
 }
 
+button:disabled {
+    background-color: whitesmoke;
+    border-color: lightgray;
+}
+
 div {
     box-sizing: border-box;
 }