WIP

src/board/Board.ts

@@ -8,7 +8,7 @@ import drawPieces from "./layers/drawPieces";
 import boards from "./styles-board";
 
 class Board {
-  private size: number = 1024;
+  private size: number = 720;
   private style: Style = boards.standard;
   private flipped: boolean = false;
   private boardData: BoardData | null = null;
@@ -62,6 +62,30 @@ class Board {
     return this;
   }
 
+  isCheck(move: Move | null) {
+    if (!move) {
+      return false;
+    }
+
+    return move.san.includes("+");
+  }
+
+  isMate(move: Move | null) {
+    if (!move) {
+      return false;
+    }
+
+    return move.san.includes("#");
+  }
+
+  getOppositeColor(color?: "w" | "b") {
+    if (!color) {
+      return;
+    }
+
+    return color === "w" ? "b" : "w";
+  }
+
   async render(boardData: BoardData | null, move: Move | null = null) {
     this.lastMove = move;
     this.boardData = boardData;
@@ -75,6 +99,13 @@ class Board {
     const innerSize = squareSize * this.tiles;
     const borderWidth = (this.size - innerSize) / 2;
 
+    const check = this.isCheck(move)
+      ? this.getOppositeColor(move?.color)
+      : undefined;
+    const mate = this.isMate(move)
+      ? this.getOppositeColor(move?.color)
+      : undefined;
+
     this.ctx.clearRect(0, 0, this.size, this.size);
 
     await drawSquare(this.ctx, innerSize, borderWidth, borderWidth, background);
@@ -134,7 +165,10 @@ class Board {
         squareSize,
         borderWidth,
         this.tiles,
-        this.flipped
+        this.flipped,
+        check,
+        mate,
+        true
       );
     }
   }

src/board/layers/drawPieces.ts

@@ -7,7 +7,10 @@ const drawPieces = async (
   squareSize: number,
   borderWidth: number,
   tiles: number,
-  flipped: boolean = false
+  flipped: boolean,
+  check?: "b" | "w",
+  mate?: "b" | "w",
+  shadow: boolean = false
 ) => {
   for (let y = 0; y < 8; y++) {
     for (let x = 0; x < 8; x++) {
@@ -20,6 +23,24 @@ const drawPieces = async (
         const rank = flipped ? tiles - 1 - y : y;
         const file = flipped ? tiles - 1 - x : x;
 
+        const filters = [];
+
+        if (shadow) {
+          filters.push(
+            `drop-shadow(${squareSize * 0.05}px ${squareSize * 0.05}px ${
+              squareSize * 0.05
+            }px rgba(0, 0, 0, 0.6))`
+          );
+        }
+
+        if (color === check && type === "k") {
+          filters.push(`drop-shadow(0 0 ${squareSize * 0.1}px orange)`);
+        } else if (color === mate && type === "k") {
+          filters.push(`drop-shadow(0 0 ${squareSize * 0.1}px red)`);
+        }
+
+        ctx.filter = filters.length > 0 ? filters.join(" ") : "none";
+
         ctx.drawImage(
           img,
           borderWidth + file * squareSize,
@@ -30,6 +51,8 @@ const drawPieces = async (
       }
     }
   }
+
+  ctx.filter = "none";
 };
 
 export default drawPieces;

src/board/styles-board/calm.ts

@@ -24,7 +24,7 @@ const style: Style = {
   moveIndicator: {
     type: "solid",
     data: {
-      color: "#ff00dd44",
+      color: "#0077ff00",
     },
   },
   border: {