Change states using SuiWeb

src/js/Components.js

@@ -1,4 +1,6 @@
 import { Constants } from "./Constants.js";
+import { Game } from "./Game.js";
+import { useState } from "./SuiWeb.js";
 
 const saveGameKey = "connect-force-save";
 const newGameClass = "new-game";
@@ -7,16 +9,15 @@ const loadGameClass = "load-game";
 const undoClass = "undo-game";
 
 /**
- * Gets a component which represents the specified {@link game `game`}.
- *
- * @param {{game: import("./Game.js").Game }} game
- * The game represented in this app.
+ * Gets a component which represents game.
  *
  * @returns {NodeDescriptor}
  * The rendered node.
  */
-export function App({ game })
+export function App()
 {
+    const [game, setGame] = /** @type {[Game, (updateFunction: (game: Game) => void) => void]} */ (useState("game", "game", new Game()));
+
     return [
         "div",
         {
@@ -26,7 +27,12 @@ export function App({ game })
 
                 if (target.classList.contains(newGameClass))
                 {
-                    game.reset();
+                    setGame(
+                        (game) =>
+                        {
+                            game.reset();
+                            return game;
+                        });
                 }
                 else if (target.classList.contains(saveGameClass))
                 {
@@ -34,11 +40,21 @@ export function App({ game })
                 }
                 else if (target.classList.contains(loadGameClass))
                 {
-                    game.load(JSON.parse(localStorage.getItem(saveGameKey)));
+                    setGame(
+                        (game) =>
+                        {
+                            game.load(JSON.parse(localStorage.getItem(saveGameKey)));
+                            return game;
+                        });
                 }
                 else if (target.classList.contains(undoClass))
                 {
-                    game.undo();
+                    setGame(
+                        (game) =>
+                        {
+                            game.undo();
+                            return game;
+                        });
                 }
                 else
                 {
@@ -52,10 +68,12 @@ export function App({ game })
 
                             if (node === target || node.contains(target))
                             {
-                                if (game.addChip(x, y))
-                                {
-                                    game.draw();
-                                }
+                                setGame(
+                                    (game) =>
+                                    {
+                                        game.addChip(x, y);
+                                        return game;
+                                    });
                             }
                         }
                     }

src/js/Game.js

@@ -1,6 +1,4 @@
-import { App } from "./Components.js";
 import { State } from "./State.js";
-import { render } from "./SuiWeb.js";
 
 /**
  * Represents a game.
@@ -36,22 +34,11 @@ export class Game
      */
     #state;
 
-    /**
-     * The id of the element to add the board to.
-     *
-     * @type {string}
-     */
-    id;
-
     /**
      * Initializes a new instance of the {@link Game `Game`} class.
-     *
-     * @param {string} id
-     * The id of the element to add the board to.
      */
-    constructor(id)
+    constructor()
     {
-        this.id = id;
         this.#state = State.create(Game.#width, Game.#height);
     }
 
@@ -153,16 +140,6 @@ export class Game
         {
             this.reset();
         }
-
-        this.draw();
-    }
-
-    /**
-     * Initializes the game.
-     */
-    initialize()
-    {
-        this.draw();
     }
 
     /**
@@ -171,7 +148,6 @@ export class Game
     reset()
     {
         this.setState([], State.create(Game.#width, Game.#height));
-        this.draw();
     }
 
     /**
@@ -185,20 +161,6 @@ export class Game
         {
             this.reset();
         }
-        else
-        {
-            this.draw();
-        }
-    }
-
-    /**
-     * Replaces the content of the board with the current state.
-     */
-    draw()
-    {
-        let container = document.getElementById(this.id);
-        container.innerHTML = "";
-        render([App, { game: this }], container);
     }
 
     /**

src/js/main.js

@@ -1,19 +1,12 @@
-import { Game } from "./Game.js";
-
-/**
- * The game that is being played.
- *
- * @type {Game}
- */
-let game;
+import { App } from "./Components.js";
+import { render } from "./SuiWeb.js";
 
 /**
  * Initializes the board.
  */
 function initialize()
 {
-    game = new Game("game");
-    game.initialize();
+    render([App], document.querySelector("#game"));
 }
 
 initialize();