Render game using SJDON
This commit is contained in:
parent
2aa9bf5b4b
commit
399fa7257c
1 changed files with 42 additions and 44 deletions
|
@ -1,5 +1,6 @@
|
|||
import { Constants } from "./Constants.js";
|
||||
import { elt } from "./elt.js";
|
||||
import { render } from "./SJDON.js";
|
||||
import { State } from "./State.js";
|
||||
|
||||
/**
|
||||
|
@ -145,55 +146,52 @@ export class Game
|
|||
let board = this.#board;
|
||||
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[]} */
|
||||
let children = [];
|
||||
let playerId = this.board[y][x];
|
||||
|
||||
if (playerId !== "")
|
||||
{
|
||||
children.push(
|
||||
elt(
|
||||
return /** @type {NodeDescriptor} */ ([
|
||||
"div",
|
||||
{
|
||||
class: `piece ${Constants.PLAYER_NAMES[playerId]}`
|
||||
}));
|
||||
}
|
||||
|
||||
let field = elt(
|
||||
"div",
|
||||
{
|
||||
class: "field"
|
||||
},
|
||||
...children);
|
||||
|
||||
field.onclick = () =>
|
||||
className: "field",
|
||||
onclick: () =>
|
||||
{
|
||||
if (this.addChip(x, y))
|
||||
{
|
||||
this.state.turnCount++;
|
||||
this.draw();
|
||||
}
|
||||
};
|
||||
|
||||
board.appendChild(field);
|
||||
}
|
||||
}
|
||||
},
|
||||
...(
|
||||
cell !== "" ?
|
||||
[
|
||||
/** @type {NodeDescriptor} */ (["div", { className: `piece ${Constants.PLAYER_NAMES[cell]}` }])
|
||||
] :
|
||||
[])
|
||||
]);
|
||||
});
|
||||
}),
|
||||
["div", { style: "clear: both;" }]
|
||||
],
|
||||
board);
|
||||
|
||||
board.appendChild(
|
||||
elt(
|
||||
this.#log.innerHTML = "";
|
||||
|
||||
render(
|
||||
[
|
||||
"div",
|
||||
{
|
||||
style: "clear: both;"
|
||||
}));
|
||||
|
||||
this.#log.className = "";
|
||||
this.#log.classList.add(this.state.currentPlayer);
|
||||
this.#log.innerHTML = "";
|
||||
this.#log.textContent = `It's player "${Constants.PLAYER_NAMES[this.state.currentPlayer]}"s turn`;
|
||||
className: this.state.currentPlayer
|
||||
},
|
||||
`It's player "${Constants.PLAYER_NAMES[this.state.currentPlayer]}"s turn`
|
||||
],
|
||||
this.#log);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue