Render game using SJDON
This commit is contained in:
parent
2aa9bf5b4b
commit
399fa7257c
|
@ -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`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in a new issue