WIP

src/main.ts

@@ -9,10 +9,12 @@ import createAnimation from "./encoders/createAnimation";
 import WebFont from "webfontloader";
 import Player from "./player/Player";
 import * as Hammer from "hammerjs";
-import Moves from "./ui/moves/Moves";
+import Moves from "./ui/Moves";
+import Controls from "./ui/Controls";
 
 const $board = document.querySelector<HTMLImageElement>("#board");
 const $moves = document.querySelector<HTMLImageElement>("#moves");
+const $controls = document.querySelector<HTMLImageElement>("#controls");
 
 const boardConfig: BoardConfig = {
   size: 1024,
@@ -63,21 +65,6 @@ const main = async () => {
   const player = new Player(board, gameConfig);
   const game = new Game().loadPGN(pgn);
 
-  new Moves($moves as HTMLElement, player).load(game.getMoves());
-
-  // @ts-ignore
-  window.game = game;
-
-  await player.load(game);
-
-  // @ts-ignore
-  window.player = player;
-
-  // @ts-ignore
-  window.load = async (pgn: string) => {
-    await player.load(new Game().loadPGN(pgn));
-  };
-
   const handlers = {
     prev() {
       player.pause();
@@ -116,6 +103,19 @@ const main = async () => {
     },
   };
 
+  const moves = new Moves($moves as HTMLElement, player).load(game.getMoves());
+  const controls = new Controls($controls as HTMLElement, handlers).load();
+
+  await player.load(game);
+
+  // @ts-ignore
+  window.load = async (pgn: string) => {
+    const game = new Game().loadPGN(pgn);
+    await player.load(game);
+    moves.load(game.getMoves());
+    controls.load();
+  };
+
   document.addEventListener(
     "contextmenu",
     (e) => {
@@ -155,7 +155,7 @@ const main = async () => {
   hammer.on("swipedown", handlers.last);
   hammer.on("pinchin", handlers.showBorder);
   hammer.on("pinchout", handlers.hideBorder);
-  hammer.on("tap", handlers.togglePlay);
+  hammer.on("tap", handlers.next);
   hammer.on("press", handlers.flip);
 
   // createDownloadLink(pgn, boardConfig).then((link) => {

src/style.css

@@ -48,6 +48,7 @@ body {
 
 .moves-box {
   background: rgba(255, 192, 203, 0.5);
+  height: 85vh;
   grid-area: moves;
 }
 
@@ -65,7 +66,7 @@ body {
 
 .controls-box {
   background: rgba(0, 255, 0, 0.5);
-  height: 100px;
+  height: 15vh;
   grid-area: controls;
 }
 

src/types.ts

@@ -161,3 +161,16 @@ export type Position = {
   placement: Placement;
   last: boolean;
 };
+
+export type Handlers = {
+  prev(): void;
+  next(): void;
+  first(): void;
+  last(): void;
+  toggleBorder(): void;
+  showBorder(): void;
+  hideBorder(): void;
+  toggleExtraInfo(): void;
+  flip(): void;
+  togglePlay(): void;
+};

src/ui/Controls.ts

@@ -0,0 +1,38 @@
+import { Handlers } from "./../types";
+import { html } from "common-tags";
+
+class Controls {
+  constructor(private element: HTMLElement, handlers: Handlers) {
+    this.element.addEventListener("click", (e) => {
+      const target = e.target as HTMLElement;
+
+      if (target?.dataset?.type === "control") {
+        const action = target?.dataset?.action;
+        console.log(action);
+        if (action && handlers.hasOwnProperty(action)) {
+          // @ts-ignore
+          handlers[action]();
+        }
+      }
+    });
+  }
+
+  load() {
+    const content = html`<div class="controls">
+      <button data-type="control" data-action="first">FIRST</button>  
+      <button data-type="control" data-action="prev">PREV</button>  
+      <button data-type="control" data-action="togglePlay">PLAY/PAUSE</button>  
+      <button data-type="control" data-action="next">NEXT</button>  
+      <button data-type="control" data-action="last">LAST</button>  
+      <button data-type="control" data-action="flip">FLIP</button>  
+      <button data-type="control" data-action="toggleBorder">TOGGLE BORDER</button>  
+      <button data-type="control" data-action="toggleExtraInfo">TOGGLE EXTRA INFO</button>  
+    </ul> `;
+
+    this.element.innerHTML = content;
+
+    return this;
+  }
+}
+
+export default Controls;

src/ui/Moves.ts

@@ -1,5 +1,5 @@
 import { html } from "common-tags";
-import Player from "../../player/Player";
+import Player from "../player/Player";
 import chunk_ from "@arrows/array/chunk_";
 
 class Moves {