WIP

src/ui/moves/Moves.ts

@@ -0,0 +1,36 @@
+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;