From 5ff474a7eab775a5b24b2d1cacf5e7a68d3fd7c3 Mon Sep 17 00:00:00 2001
From: Manuel Thalmann <m@nuth.ch>
Date: Thu, 15 Dec 2022 10:09:22 +0100
Subject: [PATCH] Nest `render` function in separate class

---
 src/js/Game.js   |  4 +--
 src/js/SuiWeb.js | 74 ++++++++++++++++++++++++++----------------------
 2 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/src/js/Game.js b/src/js/Game.js
index 09ec8ab..e5fbf9d 100644
--- a/src/js/Game.js
+++ b/src/js/Game.js
@@ -1,6 +1,6 @@
 import { App } from "./Components.js";
 import { State } from "./State.js";
-import { render } from "./SuiWeb.js";
+import { SuiWeb } from "./SuiWeb.js";
 
 /**
  * Represents a game.
@@ -171,7 +171,7 @@ export class Game
     {
         let container = document.getElementById(this.id);
         container.innerHTML = "";
-        render([App, this], container);
+        SuiWeb.render([App, this], container);
     }
 
     /**
diff --git a/src/js/SuiWeb.js b/src/js/SuiWeb.js
index 10b888f0..22f8b28 100644
--- a/src/js/SuiWeb.js
+++ b/src/js/SuiWeb.js
@@ -1,51 +1,57 @@
 /**
- * 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.
+ * Provides component for rendering elements written in SJDON notation.
  */
-export function render(data, element)
+export class SuiWeb
 {
-    if (Array.isArray(data))
+    /**
+     * 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.
+     */
+    static render(data, element)
     {
-        let descriptor = data[0];
-        let args = data.slice(1);
-
-        if (typeof descriptor === "function")
+        if (Array.isArray(data))
         {
-            render(descriptor(...args), element);
-        }
-        else if (typeof descriptor === "string")
-        {
-            let result = element.ownerDocument.createElement(descriptor);
-            element.appendChild(result);
+            let descriptor = data[0];
+            let args = data.slice(1);
 
-            for (let arg of args)
+            if (typeof descriptor === "function")
             {
-                if (typeof arg === "object" && !Array.isArray(arg))
+                SuiWeb.render(descriptor(...args), element);
+            }
+            else if (typeof descriptor === "string")
+            {
+                let result = element.ownerDocument.createElement(descriptor);
+                element.appendChild(result);
+
+                for (let arg of args)
                 {
-                    Object.assign(result, arg);
-                }
-                else
-                {
-                    render(arg, result);
+                    if (typeof arg === "object" && !Array.isArray(arg))
+                    {
+                        Object.assign(result, arg);
+                    }
+                    else
+                    {
+                        SuiWeb.render(arg, result);
+                    }
                 }
             }
+            else
+            {
+                throw new SyntaxError();
+            }
+        }
+        else if (typeof data === "string")
+        {
+            element.appendChild(element.ownerDocument.createTextNode(data));
         }
         else
         {
             throw new SyntaxError();
         }
     }
-    else if (typeof data === "string")
-    {
-        element.appendChild(element.ownerDocument.createTextNode(data));
-    }
-    else
-    {
-        throw new SyntaxError();
-    }
 }