WIP

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;