From 01c16ab7bd50e50836b77b43c34c8d5a1349d73f Mon Sep 17 00:00:00 2001 From: Maciej Caderek Date: Fri, 14 Jan 2022 03:18:11 +0100 Subject: [PATCH] WIP --- src/board/Board.ts | 8 +++++--- src/gif/GIF.ts | 10 ++++++++-- src/gif/createSimpleGIF.ts | 6 ++---- src/main.ts | 29 +++++++++++++++++++---------- src/test-data/pgns.ts | 17 +++++++++++++++++ 5 files changed, 51 insertions(+), 19 deletions(-) diff --git a/src/board/Board.ts b/src/board/Board.ts index 6dda714..02b04d0 100644 --- a/src/board/Board.ts +++ b/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); diff --git a/src/gif/GIF.ts b/src/gif/GIF.ts index 2719547..a26b2a6 100644 --- a/src/gif/GIF.ts +++ b/src/gif/GIF.ts @@ -24,10 +24,16 @@ class GIF { this.gif.addFrame(frame, { delay }); } - render(): Promise { + render(): Promise { 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(); diff --git a/src/gif/createSimpleGIF.ts b/src/gif/createSimpleGIF.ts index 3f89902..f07c505 100644 --- a/src/gif/createSimpleGIF.ts +++ b/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; diff --git a/src/main.ts b/src/main.ts index cb239bb..a1a1236 100644 --- a/src/main.ts +++ b/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("#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(); diff --git a/src/test-data/pgns.ts b/src/test-data/pgns.ts index aa5c45b..9ed83b3 100644 --- a/src/test-data/pgns.ts +++ b/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;