From 399fa7257c3e8478bff30fee55153a29ec01f0cd Mon Sep 17 00:00:00 2001
From: Manuel Thalmann <m@nuth.ch>
Date: Thu, 15 Dec 2022 00:43:15 +0100
Subject: [PATCH] Render game using SJDON

---
 packages/game/src/js/Game.js | 86 ++++++++++++++++++------------------
 1 file changed, 42 insertions(+), 44 deletions(-)

diff --git a/packages/game/src/js/Game.js b/packages/game/src/js/Game.js
index e4a0504..588cdd9 100644
--- a/packages/game/src/js/Game.js
+++ b/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++)
-        {
-            for (let x = 0; x < Game.#width; x++)
-            {
-                /** @type {Node[]} */
-                let children = [];
-                let playerId = this.board[y][x];
-
-                if (playerId !== "")
-                {
-                    children.push(
-                        elt(
-                            "div",
+        render(
+            [
+                "div",
+                ...this.board.flatMap(
+                    (row, y) =>
+                    {
+                        return row.map(
+                            (cell, x) =>
                             {
-                                class: `piece ${Constants.PLAYER_NAMES[playerId]}`
-                            }));
-                }
+                                return /** @type {NodeDescriptor} */ ([
+                                    "div",
+                                    {
+                                        className: "field",
+                                        onclick: () =>
+                                        {
+                                            if (this.addChip(x, y))
+                                            {
+                                                this.state.turnCount++;
+                                                this.draw();
+                                            }
+                                        }
+                                    },
+                                    ...(
+                                        cell !== "" ?
+                                            [
+                                                /** @type {NodeDescriptor} */ (["div", { className: `piece ${Constants.PLAYER_NAMES[cell]}` }])
+                                            ] :
+                                            [])
+                                ]);
+                            });
+                    }),
+                ["div", { style: "clear: both;" }]
+            ],
+            board);
 
-                let field = elt(
-                    "div",
-                    {
-                        class: "field"
-                    },
-                    ...children);
+        this.#log.innerHTML = "";
 
-                field.onclick = () =>
-                {
-                    if (this.addChip(x, y))
-                    {
-                        this.state.turnCount++;
-                        this.draw();
-                    }
-                };
-
-                board.appendChild(field);
-            }
-        }
-
-        board.appendChild(
-            elt(
+        render(
+            [
                 "div",
                 {
-                    style: "clear: both;"
-                }));
-
-        this.#log.className = "";
-        this.#log.classList.add(this.state.currentPlayer);
-        this.#log.innerHTML = "";
-        this.#log.textContent = `It's player "${Constants.PLAYER_NAMES[this.state.currentPlayer]}"s turn`;
+                    className: this.state.currentPlayer
+                },
+                `It's player "${Constants.PLAYER_NAMES[this.state.currentPlayer]}"s turn`
+            ],
+            this.#log);
     }
 
     /**