WIP

src/board/Board.ts

@@ -158,17 +158,19 @@ class Board {
       }
     }
 
-    drawCoords(
+    if (this.borderVisible) {
-      ctx,
+      drawCoords(
-      coords,
+        ctx,
-      this.squareSize,
+        coords,
-      this.tiles,
+        this.squareSize,
-      this.flipped,
+        this.tiles,
-      this.borderWidth,
+        this.flipped,
-      this.size,
+        this.borderWidth,
-      this.borderVisible,
+        this.size,
-      this.margin
+        this.borderVisible,
-    );
+        this.margin
+      );
+    }
 
     this.background = canvas;
   }
@@ -210,6 +212,20 @@ class Board {
         );
       }
 
+      if (!this.borderVisible) {
+        drawCoords(
+          this.tempCtx,
+          this.style.coords,
+          this.squareSize,
+          this.tiles,
+          this.flipped,
+          this.borderWidth,
+          this.size,
+          this.borderVisible,
+          this.margin
+        );
+      }
+
       const piecesShadow = false;
 
       await drawPieces(

src/board/layers/drawExtraInfo.ts

@@ -55,18 +55,10 @@ const drawExtraInfo = async (
     const [resultWhite, resultBlack] = data.Result.split("-");
 
     const textWhite =
-      resultWhite === "0"
+      resultWhite === "0" ? "Lost" : resultWhite === "1" ? "Won" : "Draw";
-        ? "Lost: 0"
-        : resultWhite === "1"
-        ? "Won: 1"
-        : "Draw: 1/2";
 
     const textBlack =
-      resultBlack === "0"
+      resultBlack === "0" ? "Lost" : resultBlack === "1" ? "Won" : "Draw";
-        ? "Lost: 0"
-        : resultBlack === "1"
-        ? "Won: 1"
-        : "Draw: 1/2";
 
     drawText(
       ctx,

src/main.ts

@@ -64,17 +64,18 @@ const main = async () => {
 
   // const hash = window.location.hash;
   // const pgn = hash === "" ? null : decompressPGN(hash.slice(1));
-  const pgn = pgns[pgns.length - 1];
+  const pgn = pgns[pgns.length - 12];
-  const board = new Board(8).setStyle(style).setSize(720).showBorder();
+  const board = new Board(8).setStyle(style).setSize(720).hideBorder();
 
   $app?.appendChild(board.canvas);
 
   const interval = 1000;
   play(board, pgn, interval);
 
-  createDownloadLink(pgns[2], style).then((link) => {
+  // createDownloadLink(pgns[2], style).then((link) => {
-    document.body.appendChild(link);
+  //   document.body.appendChild(link);
-  });
+  //   console.log("Animation created!");
+  // });
 };
 
 WebFont.load({

src/test-data/pgns.ts

@@ -195,6 +195,48 @@ Rdc1 Bf6 28. Rc8+ 1-0`,
 
 1. d4 { [%eval 0.3] [%clk 1:40:32] } 1... d5 { [%eval 0.28] [%clk 1:39:39] } 2. c4 { [%eval 0.35] [%clk 1:40:46] } 2... e6 { [%eval 0.38] [%clk 1:40:04] } 3. Nf3 { [%eval 0.0] [%clk 1:41:11] } 3... dxc4 { [%eval 0.25] [%clk 1:40:27] } 4. e3 { [%eval 0.13] [%clk 1:39:16] } 4... a6 { [%eval 0.4] [%clk 1:39:48] } 5. Bxc4 { [%eval 0.25] [%clk 1:38:16] } 5... Nf6 { [%eval 0.2] [%clk 1:40:00] } 6. O-O { [%eval 0.17] [%clk 1:37:53] } 6... c5 { [%eval 0.36] [%clk 1:40:25] } 7. b3 { [%eval 0.19] [%clk 1:35:31] } 7... b6 { [%eval 0.58] [%clk 1:37:38] } 8. Ba3 { [%eval 0.78] [%clk 1:28:39] } 8... Nbd7 { [%eval 0.6] [%clk 1:35:08] } 9. d5 { [%eval 0.52] [%clk 1:27:25] } 9... exd5 { [%eval 0.7] [%clk 1:35:29] } 10. Bxd5 { [%eval 0.52] [%clk 1:27:50] } 10... Rb8 { [%eval 0.6] [%clk 1:34:05] } 11. Bb2 { [%eval 0.87] [%clk 1:19:12] } 11... Be7 { [%eval 0.59] [%clk 1:26:21] } 12. Nc3 { [%eval 0.58] [%clk 1:17:24] } 12... O-O { [%eval 1.03] [%clk 1:25:08] } 13. Qc2 { [%eval 1.0] [%clk 1:10:37] } 13... b5 { [%eval 0.69] [%clk 1:02:49] } 14. Rfd1?! { [%eval 0.17] } { Inaccuracy. Rad1 was best. } { [%clk 1:01:39] } (14. Rad1 Qc7 15. Ng5 g6 16. f4 c4 17. Ne6 fxe6 18. Bxe6+ Rf7 19. Nd5 Nxd5 20. Bxd5 Nf6) 14... Qc7?! { [%eval 0.91] } { Inaccuracy. h6 was best. } { [%clk 0:54:21] } (14... h6) 15. a4? { [%eval -0.52] } { Mistake. Ng5 was best. } { [%clk 0:48:20] } (15. Ng5 g6 16. h3 b4 17. Nce4 Nxd5 18. Rxd5 h6 19. Nf3 Bb7 20. Rd2 Qc6 21. Ng3 Nb6) 15... h6?! { [%eval 0.11] } { Inaccuracy. b4 was best. } { [%clk 0:39:23] } (15... b4) 16. axb5 { [%eval 0.33] [%clk 0:42:13] } 16... axb5 { [%eval 0.23] [%clk 0:39:47] } 17. Qe2 { [%eval 0.25] [%clk 0:36:43] } 17... Qb6 { [%eval -0.1] [%clk 0:30:41] } 18. e4 { [%eval 0.11] [%clk 0:32:56] } 18... Re8 { [%eval 0.04] [%clk 0:30:49] } 19. Qd2?! { [%eval -0.64] } { Inaccuracy. e5 was best. } { [%clk 0:26:08] } (19. e5) 19... Bf8 { [%eval -0.71] [%clk 0:24:56] } 20. Qf4 { [%eval -1.08] [%clk 0:23:07] } 20... b4 { [%eval -1.18] [%clk 0:22:47] } 21. Na4 { [%eval -1.21] [%clk 0:15:15] } 21... Nxd5 { [%eval -1.29] [%clk 0:23:11] } 22. Rxd5 { [%eval -1.26] [%clk 0:15:18] } 22... Qe6?! { [%eval -0.59] } { Inaccuracy. Qc6 was best. } { [%clk 0:19:20] } (22... Qc6) 23. Rad1?? { [%eval -2.8] } { Blunder. Nxc5 was best. } { [%clk 0:11:53] } (23. Nxc5 Bxc5) 23... Ra8 { [%eval -3.08] [%clk 0:12:30] } 24. Qc1 { [%eval -2.92] [%clk 0:06:43] } 24... Qxe4 { [%eval -2.73] [%clk 0:07:45] } 25. h3 { [%eval -2.68] [%clk 0:03:59] } 25... Ra7 { [%eval -2.94] [%clk 0:02:17] } 26. Qd2 { [%eval -3.28] [%clk 0:03:22] } 26... Qg6 { [%eval -2.87] [%clk 0:02:07] } 27. Nh4 { [%eval -3.12] [%clk 0:01:33] } 27... Qe6 { [%eval -3.07] [%clk 0:01:19] } 28. Nf5 { [%eval -3.49] [%clk 0:01:11] } 28... c4? { [%eval -1.57] } { Mistake. Bb7 was best. } { [%clk 0:01:03] } (28... Bb7 29. Nxh6+) 29. Qd4?? { [%eval -4.12] } { Blunder. Bxg7 was best. } { [%clk 0:00:36] } (29. Bxg7 Bxg7) 29... Nf6 { [%eval -4.18] [%clk 0:01:04] } 30. Nb6? { [%eval -8.81] } { Mistake. Nxg7 was best. } { [%clk 0:00:32] } (30. Nxg7 Bxg7 31. Rd6 Qxd6 32. Qxd6 Rd7 33. Bxf6 Rxd6 34. Rxd6 c3 35. Bxg7 Kxg7 36. Nxc3 bxc3) 30... c3 { [%eval -8.85] [%clk 0:01:14] } 31. Nxc8 { [%eval -8.95] [%clk 0:00:32] } 31... Qxd5 { [%eval -8.46] [%clk 0:01:25] } 32. Qxd5 { [%eval -9.12] [%clk 0:00:40] } 32... Nxd5 { [%eval -9.0] [%clk 0:01:52] } 33. Nxa7 { [%eval -9.05] [%clk 0:01:04] } 33... cxb2 { [%eval -9.13] [%clk 0:02:13] } 34. Rb1 { [%eval -9.07] [%clk 0:01:26] } 34... Re2 { [%eval -9.08] [%clk 0:02:34] } 0-1
 
+`,
+
+  `[Event "Tata Steel Chess Masters 2022"]
+[Site "Wijk aan Zee, Netherlands"]
+[Date "2022.01.23"]
+[Round "8.5"]
+[White "Vidit, Santosh Gujrathi"]
+[Black "Grandelius, Nils"]
+[Result "1-0"]
+[WhiteElo "2727"]
+[WhiteTitle "GM"]
+[BlackElo "2672"]
+[BlackTitle "GM"]
+[UTCDate "2022.01.23"]
+[UTCTime "05:58:34"]
+[Variant "Standard"]
+[ECO "A48"]
+[Opening "East Indian Defense"]
+[Annotator "https://lichess.org/@/ImaginaryGC"]
+
+1. d4 { [%eval 0.3] [%clk 1:40:00] } 1... Nf6 { [%eval 0.0] [%clk 1:40:36] } 2. Nf3 { [%eval 0.12] [%clk 1:40:16] } 2... g6 { [%eval 0.21] [%clk 1:40:14] } 3. Nbd2 { [%eval 0.05] [%clk 1:40:35] } 3... Bg7 { [%eval 0.27] [%clk 1:37:22] } 4. e4 { [%eval 0.28] [%clk 1:40:53] } 4... O-O { [%eval 0.48] [%clk 1:37:00] } 5. e5 { [%eval 0.17] [%clk 1:41:02] } 5... Nh5 { [%eval 0.0] [%clk 1:35:41] } 6. g4 { [%eval 0.4] [%clk 1:41:20] } 6... Nf4 { [%eval 0.28] [%clk 1:36:08] } 7. Ne4 { [%eval 0.13] [%clk 1:41:42] } 7... d5 { [%eval 0.09] [%clk 1:36:32] } 8. Ng3 { [%eval 0.49] [%clk 1:41:39] } 8... Ne6 { [%eval 0.41] [%clk 1:36:56] } 9. Nf5 { [%eval 0.49] [%clk 1:42:00] } 9... c5 { [%eval 0.3] [%clk 1:35:57] } 10. Nxg7 { [%eval 0.36] [%clk 1:40:57] } 10... Nxg7 { [%eval 0.33] [%clk 1:31:50] } 11. h3 { [%eval 0.03] [%clk 1:40:22] } 11... cxd4 { [%eval 0.65] [%clk 1:22:13] } 12. Bh6 { [%eval 0.59] [%clk 1:38:52] } 12... Qa5+ { [%eval 0.78] [%clk 1:11:10] } 13. Qd2 { [%eval 0.53] [%clk 1:38:54] } 13... Qxd2+ { [%eval 0.55] [%clk 1:11:35] } 14. Nxd2 { [%eval 0.64] [%clk 1:38:50] } 14... Nc6 { [%eval 0.72] [%clk 1:07:19] } 15. f4 { [%eval 0.82] [%clk 1:39:08] } 15... f6 { [%eval 0.77] [%clk 0:52:13] } 16. exf6 { [%eval 0.72] [%clk 1:20:04] } 16... exf6 { [%eval 1.14] [%clk 0:52:03] } 17. O-O-O { [%eval 1.18] [%clk 1:05:59] } 17... Re8 { [%eval 0.98] [%clk 0:30:58] } 18. Nb3?! { [%eval 0.27] } { Inaccuracy. Rg1 was best. } { [%clk 0:57:25] } (18. Rg1 f5) 18... Ne6? { [%eval 1.75] } { Mistake. Bf5 was best. } { [%clk 0:30:35] } (18... Bf5 19. Rg1 Be4 20. Bxg7 Kxg7 21. Bb5 f5 22. g5 a5 23. Nxd4 Rac8 24. c3 Re7 25. h4) 19. Bg2 { [%eval 1.57] [%clk 0:45:26] } 19... Nc7 { [%eval 1.66] [%clk 0:30:46] } 20. f5?! { [%eval 0.8] } { Inaccuracy. Nxd4 was best. } { [%clk 0:33:48] } (20. Nxd4) 20... gxf5 { [%eval 0.85] [%clk 0:28:21] } 21. Rhf1 { [%eval 0.78] [%clk 0:30:49] } 21... Kf7?! { [%eval 1.36] } { Inaccuracy. fxg4 was best. } { [%clk 0:19:13] } (21... fxg4 22. Rxf6 gxh3 23. Bf3 Kh8 24. Nxd4 Bd7 25. Nxc6 Bxc6 26. Rf5 Ne6 27. Bg4 Rg8 28. Bxh3) 22. gxf5 { [%eval 1.38] [%clk 0:30:52] } 22... Rg8 { [%eval 1.24] [%clk 0:18:02] } 23. Rd2?! { [%eval 0.66] } { Inaccuracy. Bh1 was best. } { [%clk 0:30:20] } (23. Bh1 Bxf5 24. Rxf5 Kg6 25. Bf4 Ne6 26. Rxd5 Nxf4 27. Be4+ Kh6 28. Rd7 Rg7 29. Rd6 Ne2+) 23... Ne5?? { [%eval 2.57] } { Blunder. Bxf5 was best. } { [%clk 0:15:49] } (23... Bxf5) 24. Nxd4 { [%eval 2.71] [%clk 0:29:47] } 24... Bd7 { [%eval 2.5] [%clk 0:15:52] } 25. b3 { [%eval 2.19] [%clk 0:26:46] } 25... Rae8 { [%eval 2.45] [%clk 0:14:22] } 26. a4 { [%eval 2.42] [%clk 0:26:09] } 26... a6 { [%eval 2.58] [%clk 0:13:27] } 27. Bf4 { [%eval 2.87] [%clk 0:22:34] } 27... Re7 { [%eval 2.41] [%clk 0:10:15] } 28. Rff2 { [%eval 2.36] [%clk 0:20:54] } 28... Bc6 { [%eval 2.58] [%clk 0:09:23] } 29. Kb2 { [%eval 2.48] [%clk 0:14:28] } 29... Rd7?! { [%eval 3.22] } { Inaccuracy. Ke8 was best. } { [%clk 0:07:14] } (29... Ke8 30. c4) 30. Ka3 { [%eval 2.6] [%clk 0:13:36] } 30... Ne8 { [%eval 2.53] [%clk 0:04:54] } 31. c4 { [%eval 2.65] [%clk 0:05:49] } 31... Ng7?? { [%eval 6.14] } { Blunder. Nc7 was best. } { [%clk 0:01:19] } (31... Nc7) 32. Nxc6 { [%eval 6.78] [%clk 0:05:23] } 32... bxc6 { [%eval 6.36] [%clk 0:01:42] } 33. cxd5 { [%eval 6.58] [%clk 0:05:47] } 33... Rgd8 { [%eval 7.99] [%clk 0:00:42] } 34. dxc6 { [%eval 7.77] [%clk 0:05:00] } 1-0`,
+
+  `[Event "Tata Steel Chess Masters 2022"]
+[Site "Wijk aan Zee, Netherlands"]
+[Date "2022.01.23"]
+[Round "8.1"]
+[White "Shankland, Sam"]
+[Black "Carlsen, Magnus"]
+[Result "1/2-1/2"]
+[WhiteElo "2708"]
+[WhiteTitle "GM"]
+[BlackElo "2865"]
+[BlackTitle "GM"]
+[UTCDate "2022.01.23"]
+[UTCTime "05:58:34"]
+[Variant "Standard"]
+[ECO "D32"]
+[Opening "Tarrasch Defense: Schara Gambit"]
+[Annotator "https://lichess.org/@/ImaginaryGC"]
+
+1. d4 { [%eval 0.3] [%clk 1:40:56] } 1... d5 { [%eval 0.28] [%clk 1:39:45] } 2. c4 { [%eval 0.34] [%clk 1:41:19] } 2... e6 { [%eval 0.38] [%clk 1:40:10] } 3. Nc3 { [%eval 0.39] [%clk 1:41:41] } 3... c5 { [%eval 0.51] [%clk 1:40:34] } 4. cxd5 { [%eval 0.42] [%clk 1:41:06] } 4... cxd4 { [%eval 0.55] [%clk 1:40:23] } 5. Qa4+ { [%eval 0.69] [%clk 1:40:40] } 5... Bd7 { [%eval 0.84] [%clk 1:40:41] } 6. Qxd4 { [%eval 0.62] [%clk 1:41:05] } 6... exd5 { [%eval 0.67] [%clk 1:40:59] } 7. Qxd5 { [%eval 0.62] [%clk 1:40:40] } 7... Nf6 { [%eval 0.58] [%clk 1:41:16] } 8. Qb3 { [%eval 0.65] [%clk 1:36:01] } 8... Na6 { [%eval 0.49] [%clk 1:37:20] } 9. Nf3 { [%eval 0.47] [%clk 1:33:43] } 9... Nc5 { [%eval 0.46] [%clk 1:33:44] } 10. Qc2 { [%eval 0.45] [%clk 1:32:05] } 10... Rc8 { [%eval 0.61] [%clk 1:26:01] } 11. e3 { [%eval 0.46] [%clk 1:25:56] } 11... Nce4 { [%eval 0.89] [%clk 1:22:09] } 12. Bd3 { [%eval 0.56] [%clk 1:20:10] } 12... Nxc3 { [%eval 0.71] [%clk 1:18:12] } 13. bxc3 { [%eval 0.82] [%clk 1:20:36] } 13... Nd5 { [%eval 0.42] [%clk 1:11:14] } 14. O-O { [%eval 0.67] [%clk 1:15:00] } 14... Nxc3 { [%eval 0.61] [%clk 1:04:09] } 15. Bb2 { [%eval 0.86] [%clk 1:09:32] } 15... Bb4 { [%eval 0.46] [%clk 0:59:53] } 16. Bxc3 { [%eval 0.2] [%clk 0:51:52] } 16... Bxc3 { [%eval 0.41] [%clk 0:54:16] } 17. Rab1 { [%eval 0.12] [%clk 0:50:47] } 17... Bf6 { [%eval 0.19] [%clk 0:48:55] } 18. Qe2 { [%eval 0.18] [%clk 0:50:36] } 18... Rc7 { [%eval 0.18] [%clk 0:41:07] } 19. e4 { [%eval 0.0] [%clk 0:45:13] } 19... O-O { [%eval -0.05] [%clk 0:39:59] } 20. e5 { [%eval 0.0] [%clk 0:44:59] } 20... Be7 { [%eval -0.03] [%clk 0:40:18] } 21. Nd4 { [%eval 0.02] [%clk 0:40:02] } 21... Bc5 { [%eval 0.0] [%clk 0:27:25] } 22. e6 { [%eval 0.07] [%clk 0:36:59] } 22... Bxe6 { [%eval 0.07] [%clk 0:26:56] } 23. Nxe6 { [%eval 0.0] [%clk 0:37:14] } 23... fxe6 { [%eval 0.0] [%clk 0:27:23] } 24. Qxe6+ { [%eval 0.0] [%clk 0:35:49] } 24... Kh8 { [%eval 0.0] [%clk 0:27:52] } 25. Qh3 { [%eval -0.25] [%clk 0:25:18] } 25... h6 { [%eval -0.24] [%clk 0:28:03] } 26. Qg3 { [%eval -0.25] [%clk 0:23:54] } 26... Rd7 { [%eval -0.23] [%clk 0:22:53] } 27. Rb3 { [%eval -0.29] [%clk 0:16:26] } 27... Rf6 { [%eval -0.09] [%clk 0:23:05] } 28. h3 { [%eval -0.32] [%clk 0:12:54] } 28... b6 { [%eval -0.21] [%clk 0:20:08] } 29. Be2 { [%eval -0.43] [%clk 0:10:08] } 29... Rd2 { [%eval -0.21] [%clk 0:13:43] } 30. Rd3 { [%eval -0.23] [%clk 0:10:32] } 30... Rxd3 { [%eval -0.22] [%clk 0:13:33] } 31. Bxd3?! { [%eval -0.85] } { Inaccuracy. Qxd3 was best. } { [%clk 0:08:28] } (31. Qxd3 Qxd3 32. Bxd3 g5 33. Bb5 Rf4 34. g3 Rb4 35. a4 a6 36. Bxa6 Rxa4 37. Bb5 Rb4) 31... Qd6?! { [%eval -0.2] } { Inaccuracy. Qd5 was best. } { [%clk 0:13:52] } (31... Qd5) 32. Qxd6 { [%eval 0.0] [%clk 0:08:24] } 32... Rxd6 { [%eval -0.17] [%clk 0:14:19] } 33. Rd1 { [%eval 0.0] [%clk 0:08:31] } 33... g5 { [%eval -0.19] [%clk 0:14:39] } 34. Kf1 { [%eval -0.15] [%clk 0:07:54] } 34... Kg7 { [%eval -0.06] [%clk 0:14:07] } 35. Bc2 { [%eval -0.24] [%clk 0:08:02] } 1/2-1/2
+
 `,
 ];