WIP

src/board/Board.ts

@@ -1,10 +1,10 @@
-import { BoardConfig, PiecesStyle, Position } from "./../types";
+import { BoardConfig, Header, PiecesStyle, Position } from "./../types";
 import { Style, BoardStyle } from "../types";
 import drawRectangle from "./layers/drawRectangle";
 import drawCoords from "./layers/drawCoords";
 import drawMoveIndicators from "./layers/drawMoveIndicators";
 import drawPieces from "./layers/drawPieces";
-import drawHeader from "./layers/drawHeader.ts";
+import drawHeader from "./layers/drawHeader";
 import drawExtraInfo from "./layers/drawExtraInfo";
 import boards from "./styles-board";
 
@@ -20,6 +20,22 @@ const defaultConfig: BoardConfig = {
   showChecks: true,
   showCoords: true,
   flipped: false,
+  anonymous: false,
+};
+
+const defaultHeader: Header = {
+  White: "White",
+  Black: "Black",
+  WhitePretty: "White",
+  BlackPretty: "Black",
+  WhiteElo: null,
+  BlackElo: null,
+  Date: null,
+  DatePretty: null,
+  Event: null,
+  Round: null,
+  Site: null,
+  Result: null,
 };
 
 class Board {
@@ -34,7 +50,7 @@ class Board {
   private margin: number = 0;
 
   private style: Style = boards.standard;
-  private header: { [key: string]: string | undefined } = {};
+  private header: Header = defaultHeader;
   private lastPosition: Position | null = null;
   private background: HTMLCanvasElement | null = null;
   private currentScreen: "title" | "move" = "move";
@@ -158,7 +174,19 @@ class Board {
     return this;
   }
 
-  async titleFrame(header: { [key: string]: string | undefined }) {
+  private getFinalHeader() {
+    return this.cfg.anonymous
+      ? {
+          ...this.header,
+          White: "Anonymous",
+          Black: "Anonymous",
+          WhitePretty: "Anonymous",
+          BlackPretty: "Anonymous",
+        }
+      : this.header;
+  }
+
+  async titleFrame(header: Header) {
     this.currentScreen = "title";
     this.header = header;
 
@@ -168,7 +196,7 @@ class Board {
       this.scale,
       this.margin,
       this.style,
-      header
+      this.getFinalHeader()
     );
   }
 
@@ -224,13 +252,10 @@ class Board {
     this.background = canvas;
   }
 
-  async frame(
-    position: Position | null,
-    header: { [key: string]: string | undefined }
-  ) {
+  async frame(position: Position | null, header?: Header) {
     this.currentScreen = "move";
     this.lastPosition = position;
-    this.header = header;
+    this.header = header ?? this.header;
 
     this.tempCtx.clearRect(0, 0, this.size, this.size);
 
@@ -289,7 +314,7 @@ class Board {
         this.scale,
         this.margin,
         this.style,
-        this.header,
+        this.getFinalHeader(),
         this.cfg.flipped,
         this.lastPosition
       );

src/board/layers/drawCoords.ts

@@ -16,7 +16,7 @@ const drawCoords = (
 ) => {
   const scale = size / 1024;
 
-  if (scale <= 0.25) {
+  if (scale <= 0.32) {
     return;
   }
 

src/board/layers/drawExtraInfo.ts

@@ -1,4 +1,4 @@
-import { Style, Position } from "./../../types";
+import { Style, Position, Header } from "./../../types";
 import drawText from "./drawText";
 
 const chessFontMapping: { [key: string]: string } = {
@@ -17,7 +17,7 @@ const drawExtraInfo = async (
   scale: number,
   margin: number,
   style: Style,
-  data: { [key: string]: string | undefined },
+  data: Header,
   flipped: boolean,
   position: Position
 ) => {
@@ -32,7 +32,7 @@ const drawExtraInfo = async (
   {
     const w = drawText(
       ctx,
-      data.White ?? "White",
+      data.White === "Anonymous" ? "White" : data.White,
       "Ubuntu",
       fontSize,
       700,
@@ -41,8 +41,7 @@ const drawExtraInfo = async (
       "left"
     );
 
-    const elo =
-      data.WhiteElo && data.WhiteElo !== "?" ? ` ${data.WhiteElo}` : "";
+    const elo = data.WhiteElo ? ` ${data.WhiteElo}` : "";
 
     drawText(
       ctx,
@@ -59,7 +58,7 @@ const drawExtraInfo = async (
   {
     const w = drawText(
       ctx,
-      data.Black ?? "Black",
+      data.Black === "Anonymous" ? "Black" : data.Black,
       "Ubuntu",
       fontSize,
       700,
@@ -68,8 +67,7 @@ const drawExtraInfo = async (
       "left"
     );
 
-    const elo =
-      data.BlackElo && data.BlackElo !== "?" ? ` ${data.BlackElo}` : "";
+    const elo = data.BlackElo ? ` ${data.BlackElo}` : "";
 
     drawText(
       ctx,

src/board/layers/drawHeader.ts

@@ -1,53 +1,14 @@
-import { Style } from "./../../types";
+import { Header, Style } from "../../types";
 import drawRectangle from "./drawRectangle";
 import drawText from "./drawText";
 
-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 formatName = (name: string) => {
-  return name
-    .split(",")
-    .map((x) => x.trim())
-    .reverse()
-    .join(" ");
-};
-
 const drawHeader = async (
   ctx: CanvasRenderingContext2D,
   size: number,
   scale: number,
   margin: number,
   style: Style,
-  data: { [key: string]: string | undefined }
+  data: Header
 ) => {
   ctx.clearRect(0, 0, size, size);
   await drawRectangle(ctx, size, size + margin * 2, 0, 0, style.border);
@@ -55,11 +16,11 @@ const drawHeader = async (
   const font = "Ubuntu";
 
   const allSizes = [
-    { key: "White", line: 60 * scale, fontSize: 42 * scale, n: 0 },
-    { key: "Black", line: 60 * scale, fontSize: 42 * scale, n: 2 },
+    { key: "WhitePretty", line: 60 * scale, fontSize: 42 * scale, n: 0 },
+    { key: "BlackPretty", line: 60 * scale, fontSize: 42 * scale, n: 2 },
     { key: "Event", line: 30 * scale, fontSize: 20 * scale, n: 4 },
     { key: "Round", line: 30 * scale, fontSize: 20 * scale, n: 5 },
-    { key: "Date", line: 30 * scale, fontSize: 20 * scale, n: 7 },
+    { key: "DatePretty", line: 30 * scale, fontSize: 20 * scale, n: 7 },
     { key: "Site", line: 30 * scale, fontSize: 20 * scale, n: 8 },
   ];
 
@@ -67,16 +28,16 @@ const drawHeader = async (
 
   const sizes = allSizes.filter(({ key }) => keys.has(key));
 
-  if (data.White && data.Black) {
-    sizes.push({ key: "vs", line: 50, fontSize: 20, n: 1 });
+  if (data.WhitePretty && data.BlackPretty) {
+    sizes.push({ key: "vs", line: 50 * scale, fontSize: 20 * scale, n: 1 });
   }
 
   if (data.Event || data.Round) {
-    sizes.push({ key: "margin", line: 100, fontSize: 0, n: 3 });
+    sizes.push({ key: "margin", line: 100 * scale, fontSize: 0, n: 3 });
   }
 
   if (data.Date || data.Site) {
-    const line = data.Event || data.Round ? 20 : 100;
+    const line = data.Event || data.Round ? 20 * scale : 100 * scale;
     sizes.push({ key: "margin", line, fontSize: 0, n: 6 });
   }
 
@@ -101,17 +62,10 @@ const drawHeader = async (
         return;
       }
 
-      const item = data[key];
+      const item = data[key as keyof Header];
 
       if (item) {
-        const text =
-          key === "Date"
-            ? formatDate(item)
-            : key === "Black" || key === "White"
-            ? formatName(item)
-            : key === "Round"
-            ? `Round ${item}`
-            : item;
+        const text = key === "Round" ? `Round ${item}` : item;
 
         const y = fromTop + line / 2;