105 lines
2.6 KiB
JavaScript
105 lines
2.6 KiB
JavaScript
import { Constants } from "./Constants.js";
|
|
|
|
/**
|
|
* Gets a component which represents the specified {@link game `game`}.
|
|
*
|
|
* @param {import("./Game.js").Game} game
|
|
* The game represented in this app.
|
|
*
|
|
* @returns {NodeDescriptor}
|
|
* The rendered node.
|
|
*/
|
|
export function App(game)
|
|
{
|
|
return [
|
|
"div",
|
|
{
|
|
onclick: (event) =>
|
|
{
|
|
let target = /** @type {HTMLElement} */ (event.target);
|
|
|
|
for (let y = 0; y < game.board.length; y++)
|
|
{
|
|
let rowLength = game.board[y].length;
|
|
|
|
for (let x = 0; x < rowLength; x++)
|
|
{
|
|
let node = document.querySelector(".board").children.item(y * rowLength + x);
|
|
|
|
if (node === target || node.contains(target))
|
|
{
|
|
if (game.addChip(x, y))
|
|
{
|
|
game.state.turnCount++;
|
|
game.draw();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
[
|
|
Board,
|
|
game.board
|
|
],
|
|
[
|
|
"div",
|
|
{ className: "log" },
|
|
game.winner ?
|
|
`Player ${Constants.PLAYER_NAMES[game.winner]} wins!` :
|
|
`It's player "${Constants.PLAYER_NAMES[game.currentPlayer]}"s turn`
|
|
]
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Renders an element which represents the specified {@link board `board`}.
|
|
*
|
|
* @param {Board} board
|
|
* The board represented in this element.
|
|
*
|
|
* @returns {NodeDescriptor}
|
|
* The rendered element.
|
|
*/
|
|
export function Board(board)
|
|
{
|
|
let fields = board.flatMap((row) => row);
|
|
|
|
return [
|
|
"div",
|
|
{ className: "board" },
|
|
...fields.map(
|
|
(field) =>
|
|
{
|
|
return /** @type {NodeDescriptor} */([Field, field]);
|
|
}),
|
|
["div", { style: "clear: both;" }]
|
|
];
|
|
}
|
|
|
|
/**
|
|
* Renders an element which represents the specified {@link field `field`}.
|
|
*
|
|
* @param {CellOwner} field
|
|
* The field to represent.
|
|
*
|
|
* @returns {NodeDescriptor}
|
|
* The rendered element.
|
|
*/
|
|
export function Field(field)
|
|
{
|
|
return [
|
|
"div",
|
|
{ className: "field" },
|
|
...(
|
|
field !== "" ?
|
|
[
|
|
/** @type {NodeDescriptor} */
|
|
([
|
|
"div",
|
|
{ className: `piece ${Constants.PLAYER_NAMES[field]}` }
|
|
])
|
|
] :
|
|
[])
|
|
];
|
|
}
|