Render game using SJDON

This commit is contained in:
Manuel Thalmann 2022-12-15 00:43:15 +01:00
parent 2aa9bf5b4b
commit 399fa7257c
No known key found for this signature in database
GPG key ID: 5FD9AD3CCDDBD27B

View file

@ -1,5 +1,6 @@
import { Constants } from "./Constants.js"; import { Constants } from "./Constants.js";
import { elt } from "./elt.js"; import { elt } from "./elt.js";
import { render } from "./SJDON.js";
import { State } from "./State.js"; import { State } from "./State.js";
/** /**
@ -145,55 +146,52 @@ export class Game
let board = this.#board; let board = this.#board;
board.innerHTML = ""; board.innerHTML = "";
for (let y = 0; y < Game.#height; y++) render(
[
"div",
...this.board.flatMap(
(row, y) =>
{ {
for (let x = 0; x < Game.#width; x++) return row.map(
(cell, x) =>
{ {
/** @type {Node[]} */ return /** @type {NodeDescriptor} */ ([
let children = [];
let playerId = this.board[y][x];
if (playerId !== "")
{
children.push(
elt(
"div", "div",
{ {
class: `piece ${Constants.PLAYER_NAMES[playerId]}` className: "field",
})); onclick: () =>
}
let field = elt(
"div",
{
class: "field"
},
...children);
field.onclick = () =>
{ {
if (this.addChip(x, y)) if (this.addChip(x, y))
{ {
this.state.turnCount++; this.state.turnCount++;
this.draw(); this.draw();
} }
};
board.appendChild(field);
}
} }
},
...(
cell !== "" ?
[
/** @type {NodeDescriptor} */ (["div", { className: `piece ${Constants.PLAYER_NAMES[cell]}` }])
] :
[])
]);
});
}),
["div", { style: "clear: both;" }]
],
board);
board.appendChild( this.#log.innerHTML = "";
elt(
render(
[
"div", "div",
{ {
style: "clear: both;" className: this.state.currentPlayer
})); },
`It's player "${Constants.PLAYER_NAMES[this.state.currentPlayer]}"s turn`
this.#log.className = ""; ],
this.#log.classList.add(this.state.currentPlayer); this.#log);
this.#log.innerHTML = "";
this.#log.textContent = `It's player "${Constants.PLAYER_NAMES[this.state.currentPlayer]}"s turn`;
} }
/** /**