Move all click handlers to the App

src/js/Components.js

@@ -1,6 +1,9 @@
 import { Constants } from "./Constants.js";
 
 const saveGameKey = "connect-force-save";
+const newGameClass = "new-game";
+const saveGameClass = "save-game";
+const loadGameClass = "load-game";
 
 /**
  * Gets a component which represents the specified {@link game `game`}.
@@ -20,6 +23,20 @@ export function App(game)
             {
                 let target = /** @type {HTMLElement} */ (event.target);
 
+                if (target.classList.contains(newGameClass))
+                {
+                    game.reset();
+                }
+                else if (target.classList.contains(saveGameClass))
+                {
+                    localStorage.setItem(saveGameKey, JSON.stringify(game.dump()));
+                }
+                else if (target.classList.contains(loadGameClass))
+                {
+                    game.load(JSON.parse(localStorage.getItem(saveGameKey)));
+                }
+                else
+                {
                     for (let y = 0; y < game.board.length; y++)
                     {
                         let rowLength = game.board[y].length;
@@ -39,6 +56,7 @@ export function App(game)
                         }
                     }
                 }
+            }
         },
         [
             Board,
@@ -123,59 +141,47 @@ export function MenuBar(game)
         { className: "menu-bar" },
         [
             Button,
+            [
+                "New Game",
                 {
-                text: "New Game",
-                attributes: {
-                    onclick: () =>
-                    {
-                        game.reset();
-                    }
-                }
+                    className: newGameClass
                 }
+            ]
         ],
         [
             Button,
+            [
+                "Save Game",
                 {
-                text: "Save Game",
-                attributes: {
-                    onclick: () =>
-                    {
-                        localStorage.setItem(
-                            saveGameKey,
-                            JSON.stringify(game.dump()));
-                    }
-                }
+                    className: saveGameClass
                 }
+            ]
         ],
         [
             Button,
+            [
+                "Load Game",
                 {
-                text: "Load Game",
-                attributes: {
-                    onclick: () =>
-                    {
-                        game.load(JSON.parse(localStorage.getItem(saveGameKey)));
-                    }
-                }
+                    className: loadGameClass
                 }
             ]
+        ]
     ];
 }
 
 /**
  * Renders a button.
  *
- * @param {{text: string, attributes: (Partial<HTMLElement> & Record<string, any>)}} data
+ * @param {...ElementDescriptor[1][]} content
  * The settings of the button.
  *
  * @returns {NodeDescriptor}
  * The rendered element.
  */
-export function Button(data)
+export function Button(content)
 {
     return [
         "button",
-        data.attributes,
-        data.text
+        ...content
     ];
 }