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,20 +23,35 @@ export function App(game)
             {
                 let target = /** @type {HTMLElement} */ (event.target);
 
-                for (let y = 0; y < game.board.length; y++)
+                if (target.classList.contains(newGameClass))
                 {
-                    let rowLength = game.board[y].length;
+                    game.reset();
-
+                }
-                    for (let x = 0; x < rowLength; x++)
+                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 node = document.querySelector(".board").children.item(y * rowLength + x);
+                        let rowLength = game.board[y].length;
 
-                        if (node === target || node.contains(target))
+                        for (let x = 0; x < rowLength; x++)
                         {
-                            if (game.addChip(x, y))
+                            let node = document.querySelector(".board").children.item(y * rowLength + x);
+
+                            if (node === target || node.contains(target))
                             {
-                                game.state.turnCount++;
+                                if (game.addChip(x, y))
-                                game.draw();
+                                {
+                                    game.state.turnCount++;
+                                    game.draw();
+                                }
                             }
                         }
                     }
@@ -123,41 +141,30 @@ export function MenuBar(game)
         { className: "menu-bar" },
         [
             Button,
-            {
+            [
-                text: "New Game",
+                "New Game",
-                attributes: {
+                {
-                    onclick: () =>
+                    className: newGameClass
-                    {
-                        game.reset();
-                    }
                 }
-            }
+            ]
         ],
         [
             Button,
-            {
+            [
-                text: "Save Game",
+                "Save Game",
-                attributes: {
+                {
-                    onclick: () =>
+                    className: saveGameClass
-                    {
-                        localStorage.setItem(
-                            saveGameKey,
-                            JSON.stringify(game.dump()));
-                    }
                 }
-            }
+            ]
         ],
         [
             Button,
-            {
+            [
-                text: "Load Game",
+                "Load Game",
-                attributes: {
+                {
-                    onclick: () =>
+                    className: loadGameClass
-                    {
-                        game.load(JSON.parse(localStorage.getItem(saveGameKey)));
-                    }
                 }
-            }
+            ]
         ]
     ];
 }
@@ -165,17 +172,16 @@ export function MenuBar(game)
 /**
  * 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,
+        ...content
-        data.text
     ];
 }