WIP

src/main.ts

@@ -1,3 +1,4 @@
+import { Style } from "./types";
 import "./style.css";
 import Board from "./board/Board";
 import styles from "./board/styles-board";
@@ -9,9 +10,7 @@ const $app = document.querySelector<HTMLImageElement>("#app");
 
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-const pgn = pgns[5];
-
-const play = async (board: Board, interval: number) => {
+const play = async (board: Board, pgn: string, interval: number) => {
   const game = new Game().loadPGN(pgn);
   await board.render(game.getBoardData());
 
@@ -27,21 +26,31 @@ const play = async (board: Board, interval: number) => {
   }
 
   await delay(interval);
-  play(board, interval);
+  play(board, pgn, interval);
+};
+
+const createDownloadLink = async (pgn: string, style: Style) => {
+  const file = await createSimpleGIF(pgn, style, 720);
+  const link = document.createElement("a");
+  link.innerText = "DOWNLOAD";
+  link.setAttribute("href", URL.createObjectURL(file));
+  link.setAttribute("download", file.name);
+  return link;
 };
 
 const main = async () => {
   const style = styles.calm;
 
-  createSimpleGIF(pgn, style, 1024);
-
-  for (const style of Object.values(styles)) {
-    const board = new Board(8).setStyle(style).setSize(1024).showBorder();
+  Object.values(styles).forEach((style, i) => {
+    const board = new Board(8).setStyle(style).setSize(480).showBorder();
 
     $app?.appendChild(board.canvas);
 
-    play(board, 1000);
-  }
+    play(board, pgns[i], 1000);
+  });
+
+  const link = await createDownloadLink(pgns[0], styles.peach);
+  document.body.appendChild(link);
 };
 
 main();