Files
sharechess/src/ui/moves/Moves.ts
Maciej Caderek 013796a2ed WIP
2022-02-01 00:08:15 +01:00

37 lines
906 B
TypeScript

import { html } from "common-tags";
import Player from "../../player/Player";
import chunk_ from "@arrows/array/chunk_";
class Moves {
constructor(private element: HTMLElement, private player: Player) {
this.element.addEventListener("click", (e) => {
const target = e.target as HTMLElement;
if (target?.dataset?.type === "ply") {
const ply = Number(target?.dataset?.ply);
this.player.goto(ply);
}
});
}
load(moves: string[]) {
const items = chunk_(2, moves).map(
([white, black], i) =>
html`<p>
${i + 1}. <span data-type="ply" data-ply=${i * 2 + 1}>${white}</span>
<span data-type="ply" data-ply=${i * 2 + 2}>${black}</span>
</p>`
);
const content = html`<div class="moves">
${items.join("\n")}
</ul> `;
this.element.innerHTML = content;
return this;
}
}
export default Moves;