WIP

src/board/layers/drawBorder.ts

@@ -0,0 +1,28 @@
+import { SquareStyle } from "../../types";
+import createGradient from "../fill/createGradient";
+import createPattern from "../fill/createPattern";
+
+const drawBorder = async (
+  ctx: CanvasRenderingContext2D,
+  size: number,
+  x: number,
+  y: number,
+  width: number,
+  squareStyle: SquareStyle
+) => {
+  const fill = await (squareStyle.type === "solid"
+    ? squareStyle.data.color
+    : squareStyle.type === "gradient"
+    ? createGradient(ctx, squareStyle.data, size, x, y)
+    : createPattern(ctx, squareStyle.data));
+
+  if (fill === null) {
+    throw new Error("Cannot create canvas fill style");
+  }
+
+  ctx.lineWidth = width;
+  ctx.strokeStyle = fill;
+  ctx.strokeRect(x, y, size, size);
+};
+
+export default drawBorder;

src/board/layers/drawCoords.ts

@@ -0,0 +1,63 @@
+import { Coords } from "../../types";
+
+const BASE_FONT_SIZE = 20;
+const FONT_FAMILY = "Fira Mono";
+
+const drawCoords = (
+  ctx: CanvasRenderingContext2D,
+  coords: Coords,
+  squareSize: number,
+  tiles: number,
+  blackSide: boolean = false,
+  borderWidth: number,
+  size: number
+) => {
+  const scale = size / 1024;
+
+  if (scale <= 0.25) {
+    return;
+  }
+
+  const fontSize = BASE_FONT_SIZE * scale;
+  const offset = 10;
+  const offsetFileX =
+    borderWidth > 0 ? borderWidth + squareSize / 2 : offset * scale;
+  const offsetFileY =
+    borderWidth > 0 ? -borderWidth * 2 + offset * scale : offset * scale;
+  const offsetRankX = borderWidth > 0 ? borderWidth / 2 : offset * scale;
+  const offsetRankY =
+    borderWidth > 0
+      ? borderWidth + squareSize / 2 - fontSize / 2
+      : offset * scale;
+
+  const ranks =
+    "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26"
+      .split(",")
+      .slice(0, tiles);
+  const orderedRanks = blackSide ? ranks : ranks.reverse();
+
+  ctx.font = `${fontSize}px ${FONT_FAMILY}`;
+
+  orderedRanks.forEach((v, i) => {
+    ctx.fillStyle = i % 2 === 0 ? coords.darkColor : coords.lightColor;
+
+    ctx.textAlign = borderWidth > 0 ? "center" : "left";
+    ctx.fillText(v, offsetRankX, squareSize * i + fontSize + offsetRankY);
+  });
+
+  const files = "ABCDEFGHIJKLMNOPQRSTUWVXYZ".split("").slice(0, tiles);
+  const orderedFiles = blackSide ? files.reverse() : files;
+
+  orderedFiles.forEach((v, i) => {
+    ctx.fillStyle = i % 2 === 0 ? coords.lightColor : coords.darkColor;
+
+    ctx.textAlign = borderWidth > 0 ? "center" : "left";
+    ctx.fillText(
+      v,
+      squareSize * i + offsetFileX,
+      squareSize * tiles - offsetFileY
+    );
+  });
+};
+
+export default drawCoords;

src/board/layers/drawMoveIndicators.ts

@@ -0,0 +1,32 @@
+import { Move } from "chess.js";
+import { SquareStyle } from "../../types";
+import drawSquare from "./drawSquare";
+
+const FILES = "abcdefghijklmnopqrstuwvxyz";
+
+const notationToXY = (notation: string, flipped: boolean, tiles: number) => {
+  const x = FILES.indexOf(notation[0]);
+  const y = Number(notation[1]) - 1;
+
+  return [flipped ? tiles - x - 1 : x, flipped ? y : tiles - y - 1];
+};
+
+const drawMoveIndicators = async (
+  ctx: CanvasRenderingContext2D,
+  move: Move,
+  squareSize: number,
+  squareStyle: SquareStyle,
+  borderWidth: number,
+  tiles: number,
+  flipped: boolean = false
+) => {
+  const [fromX, fromY, toX, toY] = [
+    ...notationToXY(move.from, flipped, tiles),
+    ...notationToXY(move.to, flipped, tiles),
+  ].map((v) => v * squareSize + borderWidth);
+
+  drawSquare(ctx, squareSize, fromX, fromY, squareStyle);
+  drawSquare(ctx, squareSize, toX, toY, squareStyle);
+};
+
+export default drawMoveIndicators;

src/board/layers/drawPieces.ts

@@ -0,0 +1,35 @@
+import { BoardData, PieceType, PieceColor } from "../../types";
+import ImagesCache from "../loaders/PiecesCache";
+
+const drawPieces = async (
+  ctx: CanvasRenderingContext2D,
+  board: BoardData,
+  squareSize: number,
+  borderWidth: number,
+  tiles: number,
+  flipped: boolean = false
+) => {
+  for (let y = 0; y < 8; y++) {
+    for (let x = 0; x < 8; x++) {
+      if (board[y][x] !== null) {
+        const { type, color } = board[y][x] as {
+          type: PieceType;
+          color: PieceColor;
+        };
+        const img = await ImagesCache.get("tatiana", type, color);
+        const rank = flipped ? tiles - 1 - y : y;
+        const file = flipped ? tiles - 1 - x : x;
+
+        ctx.drawImage(
+          img,
+          borderWidth + file * squareSize,
+          borderWidth + rank * squareSize,
+          squareSize,
+          squareSize
+        );
+      }
+    }
+  }
+};
+
+export default drawPieces;

src/board/layers/drawSquare.ts

@@ -0,0 +1,26 @@
+import { SquareStyle } from "../../types";
+import createGradient from "../fill/createGradient";
+import createPattern from "../fill/createPattern";
+
+const drawSquare = async (
+  ctx: CanvasRenderingContext2D,
+  squareSize: number,
+  x: number,
+  y: number,
+  squareStyle: SquareStyle
+) => {
+  const fill = await (squareStyle.type === "solid"
+    ? squareStyle.data.color
+    : squareStyle.type === "gradient"
+    ? createGradient(ctx, squareStyle.data, squareSize, x, y)
+    : createPattern(ctx, squareStyle.data));
+
+  if (fill === null) {
+    throw new Error("Cannot create canvas fill style");
+  }
+
+  ctx.fillStyle = fill;
+  ctx.fillRect(x, y, squareSize, squareSize);
+};
+
+export default drawSquare;