WIP

2022-01-19 02:40:28 +01:00
parent 8a3743a328
commit b7d1ca9329
5 changed files with 90 additions and 26 deletions
--- a/index.html
+++ b/index.html
@@ -7,6 +7,9 @@
    <title>Vite App</title>
  </head>
  <body>
+    <div class="font-init-a">.</div>
+    <div class="font-init-b">.</div>
+    <div class="font-init-c">.</div>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
--- a/src/board/layers/drawHeader.ts.ts
+++ b/src/board/layers/drawHeader.ts.ts
@@ -1,15 +1,47 @@
 import { Style } from "./../../types";
 import drawSquare from "../layers/drawSquare";

+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+const formatDate = (date: string) => {
+  const [y, m, d] = date.split(".").map(Number);
+
+  const month = Number.isNaN(m) ? null : MONTHS[m - 1];
+  const day = Number.isNaN(d) || month === null ? null : d;
+  const year = Number.isNaN(y) ? null : y;
+
+  return month && day && year
+    ? `${month} ${day}, ${year}`
+    : month && year
+    ? `${month} ${year}`
+    : year
+    ? year
+    : "";
+};
+
 const drawText = (
  ctx: CanvasRenderingContext2D,
  text: string,
  fontSize: number,
+  fontWeight: number,
  x: number,
  y: number,
  align: CanvasTextAlign
 ) => {
-  ctx.font = `${fontSize}px Arial`;
+  ctx.font = `${fontWeight} ${fontSize}px Ubuntu`;
  ctx.textAlign = align;
  ctx.textBaseline = "middle";
  ctx.fillText(text, x, y);
@@ -29,25 +61,33 @@ const drawHeader = async (
  ctx.fillStyle = style.coords.onBorder;

  if (data.White) {
-    drawText(ctx, data.White, 36 * scale, size / 2, 200 * scale, "center");
+    drawText(ctx, data.White, 36 * scale, 700, size / 2, 200 * scale, "center");
  }

-  drawText(ctx, "vs", 20 * scale, size / 2, 260 * scale, "center");
+  drawText(ctx, "vs", 20 * scale, 500, size / 2, 260 * scale, "center");

  if (data.Black) {
-    drawText(ctx, data.Black, 36 * scale, size / 2, 320 * scale, "center");
+    drawText(ctx, data.Black, 36 * scale, 700, size / 2, 320 * scale, "center");
  }

  if (data.Date) {
-    drawText(ctx, data.Date, 20 * scale, size / 2, 500 * scale, "center");
+    drawText(
+      ctx,
+      formatDate(data.Date),
+      20 * scale,
+      500,
+      size / 2,
+      500 * scale,
+      "center"
+    );
  }

  if (data.Event) {
-    drawText(ctx, data.Event, 24 * scale, size / 2, 540 * scale, "center");
+    drawText(ctx, data.Event, 24 * scale, 500, size / 2, 540 * scale, "center");
  }

  if (data.Site) {
-    drawText(ctx, data.Site, 20 * scale, size / 2, 580 * scale, "center");
+    drawText(ctx, data.Site, 20 * scale, 500, size / 2, 580 * scale, "center");
  }
 };

--- a/src/main.ts
+++ b/src/main.ts
@@ -63,11 +63,11 @@ const main = async () => {

  console.log(pgn);

-  play(board, pgns[2], 1000);
+  play(board, pgns[1], 1000);

-  createDownloadLink(pgns[2], style).then((link) => {
-    document.body.appendChild(link);
-  });
+  // createDownloadLink(pgns[2], style).then((link) => {
+  //   document.body.appendChild(link);
+  // });
 };

 main();
--- a/src/style.css
+++ b/src/style.css
@@ -1,4 +1,5 @@
@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;
@@ -19,3 +20,20 @@ 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;
+}
--- a/src/test-data/pgns.ts
+++ b/src/test-data/pgns.ts
@@ -20,24 +20,27 @@ is hanging, the bishop is blocked because of the
 Queen.--Fischer} b5 10.Nxb5 cxb5 11.Bxb5+ Nbd7 12.O-O-O Rd8
 13.Rxd7 Rxd7 14.Rd1 Qe6 15.Bxd7+ Nxd7 16.Qb8+ Nxb8 17.Rd8# 1-0`,

-  `[Event "Casual Bullet game"]
-[Site "https://lichess.org/9PndkM3J"]
-[Date "2022.01.15"]
-[White "Anonymous"]
-[Black "Anonymous"]
-[Result "1-0"]
-[UTCDate "2022.01.15"]
-[UTCTime "19:04:57"]
+  `[Event "Karpov - Kasparov World Championship Match"]
+[Site "Moscow URS"]
+[Date "1985.10.15"]
+[EventDate "?"]
+[Round "16"]
+[Result "0-1"]
+[White "Anatoly Karpov"]
+[Black "Garry Kasparov"]
+[ECO "B44"]
 [WhiteElo "?"]
 [BlackElo "?"]
-[Variant "Standard"]
-[TimeControl "60+0"]
-[ECO "A00"]
-[Opening "Polish Opening"]
-[Termination "Normal"]
-[Annotator "lichess.org"]
+[PlyCount "80"]

-1. b4 { A00 Polish Opening } e5 2. Bb2 Nc6 3. b5 Nd4 4. e3 Nxb5 5. Bxb5 c6 6. Be2 Nf6 7. Bxe5 d6 8. Bb2 Be7 9. Nf3 O-O 10. O-O Bg4 11. d3 d5 12. Nbd2 Rc8 13. Qc1 Be6 14. c4 d4 15. Bxd4 Bg4 16. Bb2 Qc7 17. Qc3 Bxf3 18. Bxf3 Rcd8 19. Ne4 a5 20. a3 b5 21. Rad1 b4 22. axb4 Bxb4 23. Nxf6+ gxf6 24. Qxf6 Rd6 25. Qg7# { White wins by checkmate. } 1-0`,
+1.e4 c5 2.Nf3 e6 3.d4 cxd4 4.Nxd4 Nc6 5.Nb5 d6 6.c4 Nf6 7.N1c3
+a6 8.Na3 d5 9.cxd5 exd5 10.exd5 Nb4 11.Be2 Bc5 12.O-O O-O
+13.Bf3 Bf5 14.Bg5 Re8 15.Qd2 b5 16.Rad1 Nd3 17.Nab1 h6 18.Bh4
+b4 19.Na4 Bd6 20.Bg3 Rc8 21.b3 g5 22.Bxd6 Qxd6 23.g3 Nd7
+24.Bg2 Qf6 25.a3 a5 26.axb4 axb4 27.Qa2 Bg6 28.d6 g4 29.Qd2
+Kg7 30.f3 Qxd6 31.fxg4 Qd4+ 32.Kh1 Nf6 33.Rf4 Ne4 34.Qxd3 Nf2+
+35.Rxf2 Bxd3 36.Rfd2 Qe3 37.Rxd3 Rc1 38.Nb2 Qf2 39.Nd2 Rxd1+
+40.Nxd1 Re1+ 0-1`,

  `[Event "Hoogovens Group A"]
 [Site "Wijk aan Zee NED"]