WIP

src/gif/GIF.ts

@@ -3,12 +3,12 @@ import GIFLib from "gif.js";
 class GIF {
   private gif: GIFLib;
 
-  constructor(size: number, loop: boolean) {
+  constructor(width: number, height: number, loop: boolean) {
     this.gif = new GIFLib({
       workers: 2,
       quality: 10,
-      width: size,
-      height: size,
+      width,
+      height,
       repeat: loop ? 0 : -1,
     });
   }
@@ -26,14 +26,14 @@ class GIF {
 
   render(): Promise<File> {
     return new Promise((resolve) => {
+      const timestamp = Date.now();
       this.gif.on("finished", function (blob) {
-        const file = new File([blob], `board.gif`, {
+        const file = new File([blob], `board_${timestamp}.gif`, {
           type: "image/gif",
-          lastModified: Date.now(),
+          lastModified: timestamp,
         });
 
         resolve(file);
-        // resolve(URL.createObjectURL(file));
       });
 
       this.gif.render();

src/gif/createSimpleGIF.ts

@@ -11,13 +11,16 @@ const createSimpleGIF = async (
   size: number = 720
 ) => {
   const game = new Game().loadPGN(pgn);
-  const board = new Board(8).setStyle(style).setSize(size).showBorder();
-  const gif = new GIF(size, true);
+  const board = new Board(8).setStyle(style).setSize(size).hideBorder();
+  const gif = new GIF(board.width, board.height, true);
+  const header = game.getHeader();
 
-  await board.renderTitleScreen(game.getHeader());
+  await board.titleFrame(header);
+  board.render();
   gif.add(board.toImgElement(), 5000);
 
-  await board.render(game.getBoardData());
+  await board.frame(game.getBoardData(), header);
+  board.render();
   gif.add(board.toImgElement(), MOVE_TIME);
 
   while (true) {
@@ -27,7 +30,8 @@ const createSimpleGIF = async (
       break;
     }
 
-    await board.render(game.getBoardData(), move);
+    await board.frame(game.getBoardData(), header, move);
+    board.render();
     gif.add(board.toImgElement(), MOVE_TIME);
   }