WIP

src/board/Board.ts

@@ -65,7 +65,7 @@ class Board {
 
   flip() {
     this.flipped = !this.flipped;
-    this.render(this.boardData, this.lastMove);
+    // this.render(this.boardData, this.lastMove);
     return this;
   }
 

src/game/PGNHelpers.ts

@@ -24,7 +24,7 @@ const cleanPGN = (pgn: string) => {
   const [_, moves] = game.pgn().split("\n\n");
 
   const header = Object.entries(game.header())
-    .filter(([key]) => PGN_KEYS.includes(key))
+    .filter(([key, val]) => PGN_KEYS.includes(key) && val !== "?")
     .map(([key, val]) => `[${key} "${val}"]`)
     .sort()
     .join("\n");

src/main.ts

@@ -6,6 +6,13 @@ import Game from "./game/Game";
 import pgns from "./test-data/pgns";
 import createSimpleGIF from "./gif/createSimpleGIF";
 // import { decompressPGN } from "./game/PGNHelpers";
+import WebFont from "webfontloader";
+
+WebFont.load({
+  google: {
+    families: ["Ubuntu:500,700", "Fira Code"],
+  },
+});
 
 const $app = document.querySelector<HTMLImageElement>("#app");
 
@@ -33,7 +40,7 @@ const play = async (board: Board, pgn: string | null, interval: number) => {
     await board.render(game.getBoardData(), move);
   }
 
-  await delay(interval * 3);
+  await delay(interval * 5);
   play(board, pgn, interval);
 };
 
@@ -51,18 +58,19 @@ console.log(createDownloadLink.name);
 const main = async () => {
   const style = styles.lila;
 
-  window.location.hash =
-    "#QiBEdWtlIEthcmwgLyBDb3VudCBJc291YXJkCkQgMTg1OC4/Py4/PwpFIFBhcmlzClIgMS0wClMgUGFyaXMgRlJBClcgUGF1bCBNb3JwaHkKCmU0IGU1IE5mMyBkNiBkNCBCZzQgZHhlNSBCeGYzIFF4ZjMgZHhlNSBCYzQgTmY2IFFiMyBRZTcgTmMzIGM2IEJnNSBiNSBOeGI1IGN4YjUgQnhiNSsgTmJkNyBPLU8tTyBSZDggUnhkNyBSeGQ3IFJkMSBRZTYgQnhkNysgTnhkNyBRYjgrIE54YjggUmQ4Iw==";
+  // window.location.hash =
+  //   "#QiBEdWtlIEthcmwgLyBDb3VudCBJc291YXJkCkQgMTg1OC4/Py4/PwpFIFBhcmlzClIgMS0wClMgUGFyaXMgRlJBClcgUGF1bCBNb3JwaHkKCmU0IGU1IE5mMyBkNiBkNCBCZzQgZHhlNSBCeGYzIFF4ZjMgZHhlNSBCYzQgTmY2IFFiMyBRZTcgTmMzIGM2IEJnNSBiNSBOeGI1IGN4YjUgQnhiNSsgTmJkNyBPLU8tTyBSZDggUnhkNyBSeGQ3IFJkMSBRZTYgQnhkNysgTnhkNyBRYjgrIE54YjggUmQ4Iw==";
 
   // const hash = window.location.hash;
   // const pgn = hash === "" ? null : decompressPGN(hash.slice(1));
+  const pgn = pgns[1];
   const board = new Board(8).setStyle(style).setSize(720).showBorder();
 
   $app?.appendChild(board.canvas);
 
-  console.log(pgns[5]);
+  console.log(pgn);
 
-  play(board, pgns[5], 1000);
+  play(board, pgn, 1000);
 
   // createDownloadLink(pgns[2], style).then((link) => {
   //   document.body.appendChild(link);

src/style.css

@@ -1,6 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@500;700&display=swap");
-
 body {
   background-color: #111;
   background-image: url(01.png);
@@ -20,20 +17,3 @@ body {
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
   border-radius: 5px;
 }
-
-.font-init-a {
-  height: 0;
-  font-family: "Fira Mono";
-}
-
-.font-init-b {
-  height: 0;
-  font-family: "Ubuntu";
-  font-weight: 500;
-}
-
-.font-init-c {
-  height: 0;
-  font-family: "Ubuntu";
-  font-weight: 700;
-}

src/test-data/pgns.ts

@@ -1,5 +1,5 @@
 const pgns = [
-  `[Event "Paris"]
+  `[Event "Paris Opera"]
 [Site "Paris FRA"]
 [Date "1858.??.??"]
 [EventDate "?"]