Fix broken type

packages/game/src/js/Game.js

@@ -1,5 +1,6 @@
 import { Constants } from "./Constants.js";
 import { elt } from "./elt.js";
+import { render } from "./SJDON.js";
 import { State } from "./State.js";
 
 /**
@@ -145,55 +146,52 @@ export class Game
         let board = this.#board;
         board.innerHTML = "";
 
-        for (let y = 0; y < Game.#height; y++)
+        render(
+            [
+                "div",
+                ...this.board.flatMap(
+                    (row, y) =>
                     {
-            for (let x = 0; x < Game.#width; x++)
+                        return row.map(
+                            (cell, x) =>
                             {
-                /** @type {Node[]} */
+                                return /** @type {NodeDescriptor} */ ([
-                let children = [];
-                let playerId = this.board[y][x];
-
-                if (playerId !== "")
-                {
-                    children.push(
-                        elt(
                                     "div",
                                     {
-                                class: `piece ${Constants.PLAYER_NAMES[playerId]}`
+                                        className: "field",
-                            }));
+                                        onclick: () =>
-                }
-
-                let field = elt(
-                    "div",
-                    {
-                        class: "field"
-                    },
-                    ...children);
-
-                field.onclick = () =>
                                         {
                                             if (this.addChip(x, y))
                                             {
                                                 this.state.turnCount++;
                                                 this.draw();
                                             }
-                };
-
-                board.appendChild(field);
-            }
                                         }
+                                    },
+                                    ...(
+                                        cell !== "" ?
+                                            [
+                                                /** @type {NodeDescriptor} */ (["div", { className: `piece ${Constants.PLAYER_NAMES[cell]}` }])
+                                            ] :
+                                            [])
+                                ]);
+                            });
+                    }),
+                ["div", { style: "clear: both;" }]
+            ],
+            board);
 
-        board.appendChild(
+        this.#log.innerHTML = "";
-            elt(
+
+        render(
+            [
                 "div",
                 {
-                    style: "clear: both;"
+                    className: this.state.currentPlayer
-                }));
+                },
-
+                `It's player "${Constants.PLAYER_NAMES[this.state.currentPlayer]}"s turn`
-        this.#log.className = "";
+            ],
-        this.#log.classList.add(this.state.currentPlayer);
+            this.#log);
-        this.#log.innerHTML = "";
-        this.#log.textContent = `It's player "${Constants.PLAYER_NAMES[this.state.currentPlayer]}"s turn`;
     }
 
     /**

packages/game/src/js/SJDON.js

@@ -0,0 +1,51 @@
+/**
+ * Renders the specified {@link data `data`} and appends it to the specified {@link element `element`}.
+ *
+ * @param {NodeDescriptor} data
+ * The node to render written in SJDON notation.
+ *
+ * @param {HTMLElement} element
+ * The element to add the rendered node to.
+ */
+export function render(data, element)
+{
+    if (Array.isArray(data))
+    {
+        let descriptor = data[0];
+        let args = data.slice(1);
+
+        if (typeof descriptor === "function")
+        {
+            render(descriptor(...args), element);
+        }
+        else if (typeof descriptor === "string")
+        {
+            let result = element.ownerDocument.createElement(descriptor);
+            element.appendChild(result);
+
+            for (let arg of args)
+            {
+                if (typeof arg === "object" && !Array.isArray(arg))
+                {
+                    Object.assign(result, arg);
+                }
+                else
+                {
+                    render(arg, result);
+                }
+            }
+        }
+        else
+        {
+            throw new SyntaxError();
+        }
+    }
+    else if (typeof data === "string")
+    {
+        element.appendChild(element.ownerDocument.createTextNode(data));
+    }
+    else
+    {
+        throw new SyntaxError();
+    }
+}

packages/game/src/js/main.js

@@ -65,8 +65,9 @@ function initialize()
     game = new Game("game");
     game.initialize();
 
-    (/** @type {HTMLElement} */ (document.querySelector(".new-game"))).onclick = () =>
+    (/** @type {HTMLElement} */ (document.querySelector(".new-game"))).onclick = (event) =>
     {
+        event.preventDefault();
         game.reset();
     };
 

packages/game/src/js/types.d.ts

@@ -28,3 +28,32 @@ interface IState
      */
     board: Board;
 }
+
+/**
+ * Represents a node in the SJDON notation.
+ */
+type NodeDescriptor =
+    TextDescriptor |
+    ElementDescriptor |
+    FunctionNode;
+
+/**
+ * Represents a text-node in the SJDON notation.
+ */
+type TextDescriptor = string;
+
+/**
+ * Represents an html-element in the SJDON notation.
+ */
+type ElementDescriptor = [
+    tag: string,
+    // eslint-disable-next-line @typescript-eslint/array-type
+    ...args: (NodeDescriptor | Record<string, unknown>)[]
+];
+
+/**
+ * Represents a component in the SJDON notation.
+ */
+type FunctionNode = [
+    fn: (...args: any[]) => NodeDescriptor, ...args: any[]
+];