WIP

src/board/Board.ts

@@ -23,7 +23,6 @@ class Board {
   private innerSize: number = 672;
   private borderWidth: number = 24;
   private background: Promise<ImageBitmap> | null = null;
-  // private frames: Promise<ImageBitmap>[] = [];
 
   constructor(private tiles: number = 8) {
     const ctx = this.canvas.getContext("2d");
@@ -66,7 +65,7 @@ class Board {
 
   flip() {
     this.flipped = !this.flipped;
-    this.render(this.boardData, this.lastMove);
+    // this.render(this.boardData, this.lastMove);
     return this;
   }
 
@@ -107,7 +106,7 @@ class Board {
   }
 
   async renderTitleScreen(header: { [key: string]: string | undefined }) {
-    await drawHeader(this.tempCtx, this.size, this.style, header);
+    await drawHeader(this.tempCtx, this.size, this.style, header, this.flipped);
     this.ctx.drawImage(this.tempCanvas, 0, 0);
   }
 
@@ -183,7 +182,7 @@ class Board {
 
     if (boardData !== null) {
       if (this.lastMove) {
-        drawMoveIndicators(
+        await drawMoveIndicators(
           this.tempCtx,
           this.lastMove,
           this.squareSize,

src/board/layers/drawHeader.ts copy.ts

@@ -0,0 +1,94 @@
+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
+    ? String(year)
+    : "";
+};
+
+const drawText = (
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  fontSize: number,
+  fontWeight: number,
+  x: number,
+  y: number,
+  align: CanvasTextAlign
+) => {
+  ctx.font = `${fontWeight} ${fontSize}px Ubuntu`;
+  ctx.textAlign = align;
+  ctx.textBaseline = "middle";
+  ctx.fillText(text, x, y);
+};
+
+const drawHeader = async (
+  ctx: CanvasRenderingContext2D,
+  size: number,
+  style: Style,
+  data: { [key: string]: string | undefined }
+) => {
+  console.log(data);
+  const scale = size / 720;
+  ctx.clearRect(0, 0, size, size);
+  await drawSquare(ctx, size, 0, 0, style.border);
+
+  ctx.fillStyle = style.coords.onBorder;
+
+  if (data.White) {
+    drawText(ctx, data.White, 36 * scale, 700, size / 2, 200 * scale, "center");
+  }
+
+  drawText(ctx, "vs", 20 * scale, 500, size / 2, 260 * scale, "center");
+
+  if (data.Black) {
+    drawText(ctx, data.Black, 36 * scale, 700, size / 2, 320 * scale, "center");
+  }
+
+  if (data.Date) {
+    drawText(
+      ctx,
+      formatDate(data.Date),
+      20 * scale,
+      500,
+      size / 2,
+      500 * scale,
+      "center"
+    );
+  }
+
+  if (data.Event) {
+    drawText(ctx, data.Event, 24 * scale, 500, size / 2, 540 * scale, "center");
+  }
+
+  if (data.Site) {
+    drawText(ctx, data.Site, 20 * scale, 500, size / 2, 580 * scale, "center");
+  }
+};
+
+export default drawHeader;

src/board/layers/drawHeader.ts.ts

@@ -51,9 +51,9 @@ const drawHeader = async (
   ctx: CanvasRenderingContext2D,
   size: number,
   style: Style,
-  data: { [key: string]: string | undefined }
+  data: { [key: string]: string | undefined },
+  flipped: boolean
 ) => {
-  console.log(data);
   const scale = size / 720;
   ctx.clearRect(0, 0, size, size);
   await drawSquare(ctx, size, 0, 0, style.border);
@@ -61,13 +61,51 @@ const drawHeader = async (
   ctx.fillStyle = style.coords.onBorder;
 
   if (data.White) {
-    drawText(ctx, data.White, 36 * scale, 700, size / 2, 200 * scale, "center");
+    drawText(
+      ctx,
+      data.White,
+      36 * scale,
+      700,
+      size / 2,
+      (flipped ? 100 : size - 100) * scale,
+      "center"
+    );
   }
 
-  drawText(ctx, "vs", 20 * scale, 500, size / 2, 260 * scale, "center");
-
   if (data.Black) {
-    drawText(ctx, data.Black, 36 * scale, 700, size / 2, 320 * scale, "center");
+    drawText(
+      ctx,
+      data.Black,
+      36 * scale,
+      700,
+      size / 2,
+      (flipped ? size - 100 : 100) * scale,
+      "center"
+    );
+  }
+
+  if (data.Event) {
+    drawText(
+      ctx,
+      data.Event,
+      24 * scale,
+      500,
+      size / 2,
+      (size / 2 - (data.Round ? 20 : 0)) * scale,
+      "center"
+    );
+  }
+
+  if (data.Round) {
+    drawText(
+      ctx,
+      `Round ${data.Round}`,
+      24 * scale,
+      500,
+      size / 2,
+      (size / 2 + 20) * scale,
+      "center"
+    );
   }
 
   if (data.Date) {
@@ -77,17 +115,13 @@ const drawHeader = async (
       20 * scale,
       500,
       size / 2,
-      500 * scale,
+      450 * scale,
       "center"
     );
   }
 
-  if (data.Event) {
-    drawText(ctx, data.Event, 24 * scale, 500, size / 2, 540 * scale, "center");
-  }
-
   if (data.Site) {
-    drawText(ctx, data.Site, 20 * scale, 500, size / 2, 580 * scale, "center");
+    drawText(ctx, data.Site, 20 * scale, 500, size / 2, 480 * scale, "center");
   }
 };
 

src/board/layers/drawPieces.ts

@@ -10,7 +10,8 @@ const drawPieces = async (
   flipped: boolean,
   check?: "b" | "w",
   mate?: "b" | "w",
-  shadow: boolean = false
+  shadow: boolean = false,
+  blur: boolean = false
 ) => {
   for (let y = 0; y < 8; y++) {
     for (let x = 0; x < 8; x++) {
@@ -25,6 +26,10 @@ const drawPieces = async (
 
         const filters = [];
 
+        if (blur) {
+          filters.push(`blur(5px)`);
+        }
+
         if (shadow) {
           filters.push(
             `drop-shadow(${squareSize * 0.05}px ${squareSize * 0.05}px ${