Nest board in a separate element

This commit is contained in:
Manuel Thalmann 2022-12-13 12:54:49 +01:00
parent fb51f48a02
commit 0794aaf8fb
No known key found for this signature in database
GPG key ID: 5FD9AD3CCDDBD27B
3 changed files with 19 additions and 3 deletions

View file

@ -7,7 +7,7 @@
<script type="module" src="./js/main.js"></script> <script type="module" src="./js/main.js"></script>
</head> </head>
<body> <body>
<div class="board" id="board"> <div id="game">
</div> </div>
<button class="button new-game"> <button class="button new-game">
New Game New Game

View file

@ -24,6 +24,13 @@ export class Game
*/ */
#state; #state;
/**
* The actual board.
*
* @type {HTMLElement}
*/
#board;
/** /**
* The id of the element to add the board to. * The id of the element to add the board to.
* *
@ -64,6 +71,15 @@ export class Game
*/ */
initialize() initialize()
{ {
let container = document.getElementById(this.id);
this.#board = elt(
"div",
{
class: "board"
});
container.appendChild(this.#board);
this.draw(); this.draw();
} }
@ -81,7 +97,7 @@ export class Game
*/ */
draw() draw()
{ {
let board = document.getElementById(this.id); let board = this.#board;
board.innerHTML = ""; board.innerHTML = "";
for (let y = 0; y < Game.#height; y++) for (let y = 0; y < Game.#height; y++)

View file

@ -12,7 +12,7 @@ let game;
*/ */
function initialize() function initialize()
{ {
game = new Game("board"); game = new Game("game");
game.initialize(); game.initialize();
(/** @type {HTMLElement} */ (document.querySelector(".new-game"))).onclick = () => (/** @type {HTMLElement} */ (document.querySelector(".new-game"))).onclick = () =>