manuth/ConnectForce
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Render game using SJDON

Browse source
This commit is contained in:
Manuel Thalmann 2022-12-15 10:06:49 +01:00
parent 7b765db827
commit 6beda8d14f
No known key found for this signature in database
GPG key ID: 5FD9AD3CCDDBD27B
2 changed files with 84 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
src/js/Components.js Normal file
View file

@ -0,0 +1,80 @@
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",
[
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]}` }
])
] :
[])
];
}

87
src/js/Game.js
View file

@ -1,5 +1,4 @@
import { Constants } from "./Constants.js";
import { elt } from "./elt.js";
import { App } from "./Components.js";
import { render } from "./SJDON.js";
import { State } from "./State.js";
@ -30,20 +29,6 @@ export class Game
*/
#state;
/**
* The actual board.
*
* @type {HTMLElement}
*/
#board;
/**
* The element containing a log message.
*
* @type {HTMLElement}
*/
#log;
/**
* The id of the element to add the board to.
*
@ -167,22 +152,6 @@ export class Game
*/
initialize()
{
let container = document.getElementById(this.id);
this.#board = elt(
"div",
{
class: "board"
});
this.#log = elt(
"div",
{
class: "log"
});
container.appendChild(this.#board);
container.appendChild(this.#log);
this.draw();
}
@ -200,57 +169,9 @@ export class Game
*/
draw()
{
let board = this.#board;
board.innerHTML = "";
render(
[
"div",
...this.board.flatMap(
(row, y) =>
{
return row.map(
(cell, x) =>
{
return /** @type {NodeDescriptor} */ ([
"div",
{
className: "field",
onclick: () =>
{
if (this.addChip(x, y))
{
this.state.turnCount++;
this.draw();
}
}
},
...(
cell !== "" ?
[
/** @type {NodeDescriptor} */ (["div", { className: `piece ${Constants.PLAYER_NAMES[cell]}` }])
] :
[])
]);
});
}),
["div", { style: "clear: both;" }]
],
board);
this.#log.innerHTML = "";
render(
[
"div",
{
className: this.state.currentPlayer
},
this.winner ?
`Player ${Constants.PLAYER_NAMES[this.winner]} wins!` :
`It's player "${Constants.PLAYER_NAMES[this.state.currentPlayer]}"s turn`
],
this.#log);
let container = document.getElementById(this.id);
container.innerHTML = "";
render([App, this], container);
}
/**