WIP

src/board/Board.ts

@@ -69,9 +69,11 @@ class Board {
       this.style;
 
     const hasBorder = border && this.borderVisible;
-    const borderWidth = hasBorder ? this.size / 32 : 0;
-    const innerSize = this.size - borderWidth * 2;
-    const squareSize = innerSize / this.tiles;
+    const tempBorderWidth = hasBorder ? this.size / 32 : 0;
+    const tempInnerSize = this.size - tempBorderWidth * 2;
+    const squareSize = Math.floor(tempInnerSize / this.tiles);
+    const innerSize = squareSize * this.tiles;
+    const borderWidth = (this.size - innerSize) / 2;
 
     this.ctx.clearRect(0, 0, this.size, this.size);
 

src/gif/GIF.ts

@@ -24,10 +24,16 @@ class GIF {
     this.gif.addFrame(frame, { delay });
   }
 
-  render(): Promise<string> {
+  render(): Promise<File> {
     return new Promise((resolve) => {
       this.gif.on("finished", function (blob) {
-        resolve(URL.createObjectURL(blob));
+        const file = new File([blob], `board.gif`, {
+          type: "image/gif",
+          lastModified: Date.now(),
+        });
+
+        resolve(file);
+        // resolve(URL.createObjectURL(file));
       });
 
       this.gif.render();

src/gif/createSimpleGIF.ts

@@ -8,7 +8,7 @@ const MOVE_TIME = 1000;
 const createSimpleGIF = async (
   pgn: string,
   style: Style,
-  size: number = 1024
+  size: number = 720
 ) => {
   const game = new Game().loadPGN(pgn);
   const board = new Board(8).setStyle(style).setSize(size).showBorder();
@@ -28,9 +28,7 @@ const createSimpleGIF = async (
     gif.add(board.toImgElement(), MOVE_TIME);
   }
 
-  const url = await gif.render();
-
-  window.open(url);
+  return await gif.render();
 };
 
 export default createSimpleGIF;

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();

src/test-data/pgns.ts

@@ -104,6 +104,23 @@ Kg7 30.f3 Qxd6 31.fxg4 Qd4+ 32.Kh1 Nf6 33.Rf4 Ne4 34.Qxd3 Nf2+
 [Annotator "lichess.org"]
 
 1. b4 { A00 Polish Opening } d5 2. Bb2 e6 3. e3 f6 4. b5 Bd7 5. a4 a6 6. Nc3 axb5 7. axb5 Rxa1 8. Bxa1 Ne7 9. Nf3 c6 10. bxc6 bxc6 11. Be2 c5 12. O-O c4 13. d3 cxd3 14. Qxd3 Nbc6 15. Nb5 Nb8 16. Nd6# { White wins by checkmate. } 1-0`,
+
+  `[Event "Casual Bullet game"]
+[Site "https://lichess.org/63Ayn7j6"]
+[Date "2022.01.14"]
+[White "Anonymous"]
+[Black "Anonymous"]
+[Result "0-1"]
+[UTCDate "2022.01.14"]
+[UTCTime "02:03:45"]
+[Variant "Standard"]
+[TimeControl "60+0"]
+[ECO "A01"]
+[Opening "Nimzo-Larsen Attack: Indian Variation"]
+[Termination "Normal"]
+[Annotator "lichess.org"]
+
+1. b3 Nf6 { A01 Nimzo-Larsen Attack: Indian Variation } 2. Bb2 g6 3. Nc3 Bg7 4. d3 O-O 5. Qd2 d5 6. O-O-O e6 7. Nf3 Nbd7 8. e4 a5 9. exd5 Nxd5 10. Nxd5 exd5 11. Bxg7 Kxg7 12. g3 b5 13. Bg2 a4 14. b4 a3 15. Nd4 c6 16. Nb3 Nf6 17. Nc5 Nd7 18. Rhe1 Nxc5 19. d4 Na4 20. c3 Nb2 21. Kb1 Bf5+ 22. Ka1 Nxd1 23. Qxd1 Qf6 24. Qf3 Rae8 25. g4 Rxe1+ 26. Qd1 Rxd1# { Black wins by checkmate. } 0-1`,
 ];
 
 export default pgns;