src/js/Components.js

@@ -4,7 +4,6 @@ const saveGameKey = "connect-force-save";
 const newGameClass = "new-game";
 const saveGameClass = "save-game";
 const loadGameClass = "load-game";
-const undoClass = "undo-game";
 
 /**
  * Gets a component which represents the specified {@link game `game`}.
@@ -36,10 +35,6 @@ export function App(game)
                 {
                     game.load(JSON.parse(localStorage.getItem(saveGameKey)));
                 }
-                else if (target.classList.contains(undoClass))
-                {
-                    game.undo();
-                }
                 else
                 {
                     for (let y = 0; y < game.board.length; y++)
@@ -54,6 +49,7 @@ export function App(game)
                             {
                                 if (game.addChip(x, y))
                                 {
+                                    game.state.turnCount++;
                                     game.draw();
                                 }
                             }
@@ -76,7 +72,7 @@ export function App(game)
                 `Player ${Constants.PLAYER_NAMES[game.winner]} wins!` :
                 `It's player "${Constants.PLAYER_NAMES[game.currentPlayer]}"s turn`
         ],
-        [MenuBar]
+        [MenuBar, game]
     ];
 }
 
@@ -135,18 +131,44 @@ export function Field(field)
 /**
  * Renders a menu bar.
  *
+ * @param {import("./Game.js").Game} game
+ * The game controlled by the menu bar.
+ *
  * @returns {NodeDescriptor}
  * The rendered element.
  */
-export function MenuBar()
+export function MenuBar(game)
 {
     return [
         "div",
         { className: "menu-bar" },
-        [Button, ["New Game", { className: newGameClass }]],
+        [
-        [Button, ["Save Game", { className: saveGameClass }]],
+            Button,
-        [Button, ["Load Game", { className: loadGameClass }]],
+            [
-        [Button, ["Undo Last Move", { className: undoClass }]]
+                "New Game",
+                {
+                    className: newGameClass
+                }
+            ]
+        ],
+        [
+            Button,
+            [
+                "Save Game",
+                {
+                    className: saveGameClass
+                }
+            ]
+        ],
+        [
+            Button,
+            [
+                "Load Game",
+                {
+                    className: loadGameClass
+                }
+            ]
+        ]
     ];
 }
 

src/js/Game.js

@@ -22,13 +22,6 @@ export class Game
      */
     static #height = 6;
 
-    /**
-     * The previous states of the game.
-     *
-     * @type {IState[]}
-     */
-    #previousStates = [];
-
     /**
      * The state of the game.
      *
@@ -147,7 +140,7 @@ export class Game
      */
     load(data)
     {
-        this.setState([], data);
+        this.#state = data;
         this.draw();
     }
 
@@ -164,27 +157,10 @@ export class Game
      */
     reset()
     {
-        this.setState([], State.create(Game.#width, Game.#height));
+        this.#state = State.create(Game.#width, Game.#height);
         this.draw();
     }
 
-    /**
-     * Reverts the last move.
-     */
-    undo()
-    {
-        this.#state = this.#previousStates.pop();
-
-        if (!this.#state)
-        {
-            this.reset();
-        }
-        else
-        {
-            this.draw();
-        }
-    }
-
     /**
      * Replaces the content of the board with the current state.
      */
@@ -195,55 +171,6 @@ export class Game
         SuiWeb.render([App, this], container);
     }
 
-    /**
-     * Sets the value located at the specified {@link path `path`} to the specified {@link value `value`}.
-     *
-     * @param  {(keyof any)[]} path
-     * The path of the value to set.
-     *
-     * @param {any} value
-     * The value to set.
-     */
-    setState(path, value)
-    {
-        this.#previousStates.push(this.#state);
-        this.#state = { ...this.#state };
-        this.#state.turnCount++;
-
-        if (path.length === 0)
-        {
-            this.#state = value;
-        }
-        else if (path.length === 1)
-        {
-            this.#state = {
-                ...this.#state,
-                [path[0]]: value
-            };
-        }
-        else
-        {
-            let target = /** @type {any} */ (this.#state);
-
-            while (path.length > 1)
-            {
-                if (Array.isArray(target[path[0]]))
-                {
-                    target[path[0]] = [...target[path[0]]];
-                }
-                else
-                {
-                    target[path[0]] = { ...target[path[0]] };
-                }
-
-                target = target[path[0]];
-                path = path.slice(1);
-            }
-
-            target[path[0]] = value;
-        }
-    }
-
     /**
      * Adds a chip to the board indicated by the {@link x `x`} and the {@link y `y`} coordinate.
      *
@@ -264,7 +191,7 @@ export class Game
             {
                 if (this.board[i][x] === "")
                 {
-                    this.setState(["board", i, x], this.currentPlayer);
+                    this.board[i][x] = this.currentPlayer;
                     return true;
                 }
             }