From 0794aaf8fb9cb9d31f186c6b042ed82ad62dc2db Mon Sep 17 00:00:00 2001
From: Manuel Thalmann <m@nuth.ch>
Date: Tue, 13 Dec 2022 12:54:49 +0100
Subject: [PATCH] Nest board in a separate element

---
 src/index.html |  2 +-
 src/js/Game.js | 18 +++++++++++++++++-
 src/js/main.js |  2 +-
 3 files changed, 19 insertions(+), 3 deletions(-)
diff --git a/src/index.html b/src/index.html
index 2e6144f..4043d08 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,7 +7,7 @@
         <script type="module" src="./js/main.js"></script>
     </head>
     <body>
-        <div class="board" id="board">
+        <div id="game">
         </div>
         <button class="button new-game">
             New Game
diff --git a/src/js/Game.js b/src/js/Game.js
index 749ae67..0f44c5a 100644
--- a/src/js/Game.js
+++ b/src/js/Game.js
@@ -24,6 +24,13 @@ export class Game
      */
     #state;
 
+    /**
+     * The actual board.
+     *
+     * @type {HTMLElement}
+     */
+    #board;
+
     /**
      * The id of the element to add the board to.
      *
@@ -64,6 +71,15 @@ export class Game
      */
     initialize()
     {
+        let container = document.getElementById(this.id);
+
+        this.#board = elt(
+            "div",
+            {
+                class: "board"
+            });
+
+        container.appendChild(this.#board);
         this.draw();
     }
 
@@ -81,7 +97,7 @@ export class Game
      */
     draw()
     {
-        let board = document.getElementById(this.id);
+        let board = this.#board;
         board.innerHTML = "";
 
         for (let y = 0; y < Game.#height; y++)
diff --git a/src/js/main.js b/src/js/main.js
index d431c5d..551dda3 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -12,7 +12,7 @@ let game;
  */
 function initialize()
 {
-    game = new Game("board");
+    game = new Game("game");
     game.initialize();
 
     (/** @type {HTMLElement} */ (document.querySelector(".new-game"))).onclick = () =>
