WIP

src/gif/GIF.ts

@@ -0,0 +1,38 @@
+import GIFLib from "gif.js";
+
+class GIF {
+  private gif: GIFLib;
+
+  constructor(size: number, loop: boolean) {
+    this.gif = new GIFLib({
+      workers: 2,
+      quality: 10,
+      width: size,
+      height: size,
+      repeat: loop ? 0 : -1,
+    });
+  }
+
+  add(
+    frame:
+      | CanvasImageSource
+      | CanvasRenderingContext2D
+      | WebGLRenderingContext
+      | ImageData,
+    delay: number
+  ) {
+    this.gif.addFrame(frame, { delay });
+  }
+
+  render(): Promise<string> {
+    return new Promise((resolve) => {
+      this.gif.on("finished", function (blob) {
+        resolve(URL.createObjectURL(blob));
+      });
+
+      this.gif.render();
+    });
+  }
+}
+
+export default GIF;

src/gif/createSimpleGIF.ts

@@ -0,0 +1,36 @@
+import { Style } from "./../types";
+import Board from "../board/Board";
+import Game from "../game/Game";
+import GIF from "./GIF";
+
+const MOVE_TIME = 1000;
+
+const createSimpleGIF = async (
+  pgn: string,
+  style: Style,
+  size: number = 1024
+) => {
+  const game = new Game().loadPGN(pgn);
+  const board = new Board(8).setStyle(style).setSize(size).showBorder();
+  const gif = new GIF(size, true);
+
+  await board.render(game.getBoardData());
+  gif.add(board.toImgElement(), MOVE_TIME);
+
+  while (true) {
+    const move = game.next();
+
+    if (!move) {
+      break;
+    }
+
+    await board.render(game.getBoardData(), move);
+    gif.add(board.toImgElement(), MOVE_TIME);
+  }
+
+  const url = await gif.render();
+
+  window.open(url);
+};
+
+export default createSimpleGIF;