WIP

src/board/Board.ts

@@ -23,7 +23,7 @@ class Board {
   private squareSize: number = 84;
   private innerSize: number = 672;
   private borderWidth: number = 24;
-  private background: Promise<ImageBitmap> | null = null;
+  private background: HTMLCanvasElement | null = null;
   private extraInfo: boolean = true;
   private scale: number = 1;
   private margin: number = 0;
@@ -125,12 +125,18 @@ class Board {
   }
 
   async renderBackground() {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
+
+    canvas.width = this.size;
+    canvas.height = this.size + this.margin * 2;
+
     const { background, dark, light, border, coords } = this.style;
 
-    await drawRectangle(this.tempCtx, this.width, this.height, 0, 0, border);
+    await drawRectangle(ctx, this.width, this.height, 0, 0, border);
 
     await drawRectangle(
-      this.tempCtx,
+      ctx,
       this.innerSize,
       this.innerSize,
       this.borderVisible ? this.borderWidth : 0,
@@ -149,19 +155,12 @@ class Board {
         const x = file * this.squareSize + this.borderWidth;
         const y = rank * this.squareSize + this.borderWidth + this.margin;
 
-        await drawRectangle(
-          this.tempCtx,
-          this.squareSize,
-          this.squareSize,
-          x,
-          y,
-          style
-        );
+        await drawRectangle(ctx, this.squareSize, this.squareSize, x, y, style);
       }
     }
 
     drawCoords(
-      this.tempCtx,
+      ctx,
       coords,
       this.squareSize,
       this.tiles,
@@ -172,7 +171,7 @@ class Board {
       this.margin
     );
 
-    this.background = createImageBitmap(this.tempCanvas);
+    this.background = canvas;
   }
 
   async frame(
@@ -180,6 +179,7 @@ class Board {
     header: { [key: string]: string | undefined },
     move: Move | null = null
   ) {
+    console.log("Preparing frame");
     this.lastMove = move;
     this.boardData = boardData;
 
@@ -193,10 +193,12 @@ class Board {
     this.tempCtx.clearRect(0, 0, this.size, this.size);
 
     if (this.background === null) {
+      console.log("Background rendering...");
       await this.renderBackground();
+      console.log("Background rendered");
     }
 
-    this.tempCtx.drawImage((await this.background) as ImageBitmap, 0, 0);
+    this.tempCtx.drawImage((await this.background) as HTMLCanvasElement, 0, 0);
 
     if (boardData !== null) {
       if (this.lastMove) {

src/board/fill/createGradient.ts

@@ -15,13 +15,27 @@ const createGradient = (
   x: number,
   y: number
 ) => {
-  const [dirXStart, dirYStart, dirXStop, dirYStop] = gradientDirs[data.dir];
-  const gradient = ctx.createLinearGradient(
-    x + dirXStart * width,
-    y + dirYStart * height,
-    x + dirXStop * width,
-    y + dirYStop * height
-  );
+  let gradient: CanvasGradient;
+
+  if (data.dir === "radial") {
+    const radius = Math.sqrt((width / 2) ** 2 + (height / 2) ** 2);
+    gradient = ctx.createRadialGradient(
+      x + width / 2,
+      y + height / 2,
+      radius,
+      x + width / 2,
+      y + height / 2,
+      0
+    );
+  } else {
+    const [dirXStart, dirYStart, dirXStop, dirYStop] = gradientDirs[data.dir];
+    gradient = ctx.createLinearGradient(
+      x + dirXStart * width,
+      y + dirYStart * height,
+      x + dirXStop * width,
+      y + dirYStop * height
+    );
+  }
 
   const maxIndex = data.colors.length - 1;
 

src/board/fill/createPattern.ts

@@ -1,12 +0,0 @@
-import { ImageData } from "../../types";
-import loadImage from "../loaders/loadImage";
-
-const createPattern = async (
-  ctx: CanvasRenderingContext2D,
-  data: ImageData
-) => {
-  const img = await loadImage(data.src);
-  return ctx.createPattern(img, "repeat");
-};
-
-export default createPattern;

src/board/layers/drawRectangle.ts

@@ -1,6 +1,6 @@
 import { SquareStyle } from "../../types";
 import createGradient from "../fill/createGradient";
-import createPattern from "../fill/createPattern";
+import loadImage from "../loaders/loadImage";
 
 const drawRectangle = async (
   ctx: CanvasRenderingContext2D,
@@ -10,11 +10,15 @@ const drawRectangle = async (
   y: number,
   squareStyle: SquareStyle
 ) => {
+  if (squareStyle.type === "image") {
+    const img = await loadImage(squareStyle.data.src);
+    ctx.drawImage(img, x, y, width, height);
+    return;
+  }
+
   const fill = await (squareStyle.type === "solid"
     ? squareStyle.data.color
-    : squareStyle.type === "gradient"
-    ? createGradient(ctx, squareStyle.data, width, height, x, y)
-    : createPattern(ctx, squareStyle.data));
+    : createGradient(ctx, squareStyle.data, width, height, x, y));
 
   if (fill === null) {
     throw new Error("Cannot create canvas fill style");

src/board/styles-board/avocado.ts

@@ -27,7 +27,7 @@ const style: Style = {
   border: {
     type: "solid",
     data: {
-      color: "#1f2b15",
+      color: "#2d3923",
     },
   },
   coords: {

src/board/styles-board/calm.ts

@@ -35,7 +35,7 @@ const style: Style = {
     type: "gradient",
     data: {
       dir: "diagonal-top",
-      colors: ["#70982b", "#008b7a"],
+      colors: ["#65a32e", "#007a80"],
     },
   },
   coords: {

src/board/styles-board/glass.ts

@@ -1,40 +0,0 @@
-import { Style } from "../../types";
-
-const style: Style = {
-  name: "Glass",
-  background: {
-    type: "solid",
-    data: {
-      color: "transparent",
-    },
-  },
-  dark: {
-    type: "solid",
-    data: {
-      color: "#ffffff33",
-    },
-  },
-  light: {
-    type: "solid",
-    data: {
-      color: "#ffffff99",
-    },
-  },
-  moveIndicator: {
-    type: "color",
-    data: "#00ffff55",
-  },
-  border: {
-    type: "solid",
-    data: {
-      color: "#ffffff66",
-    },
-  },
-  coords: {
-    onLight: "#222",
-    onDark: "#ddd",
-    onBorder: "#ddd",
-  },
-};
-
-export default style;

src/board/styles-board/index.ts

@@ -1,21 +1,21 @@
 import avocado from "./avocado";
 import calm from "./calm";
 import standard from "./standard";
-import glass from "./glass";
 import kittens from "./kittens";
 import lichess from "./lichess";
 import lila from "./lila";
 import mono from "./mono";
 import peach from "./peach";
+import temp from "./temp";
 
 export default {
   avocado,
   calm,
-  glass,
   kittens,
   lichess,
   lila,
   mono,
   peach,
   standard,
+  temp,
 };

src/board/styles-board/lichess.ts

@@ -27,13 +27,13 @@ const style: Style = {
   border: {
     type: "solid",
     data: {
-      color: "#896d56",
+      color: "#916655",
     },
   },
   coords: {
-    onLight: "#b58863",
-    onDark: "#f0d9b5",
-    onBorder: "#f0d9b5",
+    onLight: "#9c6f49",
+    onDark: "#f9f0e1",
+    onBorder: "#f9f0e1",
   },
 };
 

src/board/styles-board/temp.ts

@@ -0,0 +1,42 @@
+import { Style } from "../../types";
+
+const style: Style = {
+  name: "Temp",
+  background: {
+    type: "gradient",
+    data: {
+      dir: "radial",
+      colors: ["#ff00ff", "#00ffff"],
+    },
+  },
+  dark: {
+    type: "image",
+    data: {
+      src: "https://placekitten.com/1024/1024",
+    },
+  },
+  light: {
+    type: "gradient",
+    data: {
+      dir: "radial",
+      colors: ["#ffffff11", "#ffff0099", "#ffff0099"],
+    },
+  },
+  moveIndicator: {
+    type: "hueShift",
+    data: 70,
+  },
+  border: {
+    type: "solid",
+    data: {
+      color: "#2d3923",
+    },
+  },
+  coords: {
+    onLight: "#4d7a26",
+    onDark: "#ffffc4",
+    onBorder: "#ececa4",
+  },
+};
+
+export default style;