Nest board in a separate element
This commit is contained in:
parent
fb51f48a02
commit
0794aaf8fb
3 changed files with 19 additions and 3 deletions
|
@ -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
|
||||||
|
|
|
@ -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++)
|
||||||
|
|
|
@ -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 = () =>
|
||||||
|
|
Loading…
Reference in a new issue