diff --git a/src/js/Components.js b/src/js/Components.js index 8420709..ae5ece6 100644 --- a/src/js/Components.js +++ b/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 }) + } + ] + } + ] ]; } diff --git a/src/js/Game.js b/src/js/Game.js index 4118aea..830bd21 100644 --- a/src/js/Game.js +++ b/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. * diff --git a/src/styles/style.css b/src/styles/style.css index 290525f..cecc996 100644 --- a/src/styles/style.css +++ b/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; }