diff --git a/index.html b/index.html index 1c2a30e..2af8acc 100644 --- a/index.html +++ b/index.html @@ -7,9 +7,6 @@ Vite App -
.
-
.
-
.
diff --git a/package-lock.json b/package-lock.json index 5b9c94f..a8869bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,10 +11,12 @@ "@types/chess.js": "^0.11.2", "@types/gif.js": "^0.2.2", "chess.js": "^0.12.0", - "gif.js": "^0.2.0" + "gif.js": "^0.2.0", + "webfontloader": "^1.6.28" }, "devDependencies": { "@types/node": "^17.0.8", + "@types/webfontloader": "^1.6.34", "typescript": "^4.4.4", "vite": "^2.7.2" } @@ -35,6 +37,12 @@ "integrity": "sha512-YofkM6fGv4gDJq78g4j0mMuGMkZVxZDgtU0JRdx6FgiJDG+0fY0GKVolOV8WqVmEhLCXkQRjwDdKyPxJp/uucg==", "dev": true }, + "node_modules/@types/webfontloader": { + "version": "1.6.34", + "resolved": "https://registry.npmjs.org/@types/webfontloader/-/webfontloader-1.6.34.tgz", + "integrity": "sha512-yNIPDl3P1yK/ag9C8CdleEhWrtU1myGr3cxb0yEBN/tkCYoGP5PbQa53mQCXcOLFAvBFzJJQfuEahOZ0ARakqw==", + "dev": true + }, "node_modules/chess.js": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/chess.js/-/chess.js-0.12.0.tgz", @@ -467,6 +475,11 @@ "optional": true } } + }, + "node_modules/webfontloader": { + "version": "1.6.28", + "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz", + "integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64=" } }, "dependencies": { @@ -486,6 +499,12 @@ "integrity": "sha512-YofkM6fGv4gDJq78g4j0mMuGMkZVxZDgtU0JRdx6FgiJDG+0fY0GKVolOV8WqVmEhLCXkQRjwDdKyPxJp/uucg==", "dev": true }, + "@types/webfontloader": { + "version": "1.6.34", + "resolved": "https://registry.npmjs.org/@types/webfontloader/-/webfontloader-1.6.34.tgz", + "integrity": "sha512-yNIPDl3P1yK/ag9C8CdleEhWrtU1myGr3cxb0yEBN/tkCYoGP5PbQa53mQCXcOLFAvBFzJJQfuEahOZ0ARakqw==", + "dev": true + }, "chess.js": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/chess.js/-/chess.js-0.12.0.tgz", @@ -743,6 +762,11 @@ "resolve": "^1.20.0", "rollup": "^2.59.0" } + }, + "webfontloader": { + "version": "1.6.28", + "resolved": "https://registry.npmjs.org/webfontloader/-/webfontloader-1.6.28.tgz", + "integrity": "sha1-23hhKSU8tujq5UwvsF+HCvZnW64=" } } } diff --git a/package.json b/package.json index 237eaca..85551e5 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ }, "devDependencies": { "@types/node": "^17.0.8", + "@types/webfontloader": "^1.6.34", "typescript": "^4.4.4", "vite": "^2.7.2" }, @@ -15,6 +16,7 @@ "@types/chess.js": "^0.11.2", "@types/gif.js": "^0.2.2", "chess.js": "^0.12.0", - "gif.js": "^0.2.0" + "gif.js": "^0.2.0", + "webfontloader": "^1.6.28" } } diff --git a/src/board/Board.ts b/src/board/Board.ts index efca50e..d98b185 100644 --- a/src/board/Board.ts +++ b/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; } diff --git a/src/game/PGNHelpers.ts b/src/game/PGNHelpers.ts index 56b2425..c2f8ab5 100644 --- a/src/game/PGNHelpers.ts +++ b/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"); diff --git a/src/main.ts b/src/main.ts index 302b3ed..231b5a1 100644 --- a/src/main.ts +++ b/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("#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); diff --git a/src/style.css b/src/style.css index 56d1c5d..5eb87f9 100644 --- a/src/style.css +++ b/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; -} diff --git a/src/test-data/pgns.ts b/src/test-data/pgns.ts index 99d426b..4f41db3 100644 --- a/src/test-data/pgns.ts +++ b/src/test-data/pgns.ts @@ -1,5 +1,5 @@ const pgns = [ - `[Event "Paris"] + `[Event "Paris Opera"] [Site "Paris FRA"] [Date "1858.??.??"] [EventDate "?"]