WIP

src/board/layers/drawCircle.ts

@@ -1,23 +0,0 @@
-const drawCircle = async (
-  ctx: CanvasRenderingContext2D,
-  radius: number,
-  x: number,
-  y: number,
-  thickness: number,
-  color: string,
-  fill: boolean = false
-) => {
-  ctx.strokeStyle = color;
-  ctx.lineWidth = thickness;
-  ctx.beginPath();
-  ctx.arc(x + radius, y + radius, radius - thickness / 2, 0, 2 * Math.PI);
-  ctx.closePath();
-  ctx.stroke();
-
-  if (fill) {
-    ctx.fillStyle = color;
-    ctx.fill();
-  }
-};
-
-export default drawCircle;

src/board/layers/drawPieces.ts

@@ -1,6 +1,6 @@
+import { state } from "../../state";
 import { Position, PiecesStyle } from "../../types";
 import ImagesCache from "../loaders/PiecesCache";
-// import drawCircle from "./drawCircle";
 
 const drawPieces = async (
   ctx: CanvasRenderingContext2D,
@@ -9,37 +9,40 @@ const drawPieces = async (
   borderWidth: number,
   flipped: boolean,
   margin: number,
-  piecesStyle: PiecesStyle
+  piecesStyle: PiecesStyle,
+  shadow: boolean = true
 ) => {
   const { placement, check, mate, turn } = position;
+  ctx.shadowColor = "rgba(0, 0, 0, 0)";
+  ctx.shadowBlur = 0;
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 0;
 
   for (const { x, y, type, color } of placement) {
     const img = await ImagesCache.get(piecesStyle, type, color);
     const rank = flipped ? 8 - 1 - y : y;
     const file = flipped ? 8 - 1 - x : x;
 
-    const filters = [];
-
-    // if ((color === check || color === mate) && type === "k") {
-    //   const hex = check ? "#ffa600" : "#ff002f";
-    //   drawCircle(
-    //     ctx,
-    //     squareSize / 2,
-    //     borderWidth + file * squareSize,
-    //     borderWidth + rank * squareSize + margin,
-    //     0,
-    //     hex,
-    //     true
-    //   );
-    // }
-
     if ((check || mate) && type === "k" && color === turn) {
       const hex = mate ? "#ff002f" : "#ffa600";
-      filters.push(`drop-shadow(0 0 ${squareSize * 0.07}px ${hex})`);
-      filters.push(`drop-shadow(0 0 ${squareSize * 0.07}px ${hex})`);
-    }
 
-    ctx.filter = filters.join(" ");
+      ctx.shadowColor = hex;
+      ctx.shadowBlur = squareSize * (state.mobile ? 0.15 : 0.15);
+      ctx.shadowOffsetX = 0;
+      ctx.shadowOffsetY = 0;
+      ctx.drawImage(
+        img,
+        borderWidth + file * squareSize,
+        borderWidth + rank * squareSize + margin,
+        squareSize,
+        squareSize
+      );
+    } else if (shadow) {
+      ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+      ctx.shadowOffsetX = squareSize * 0.07;
+      ctx.shadowOffsetY = squareSize * 0.07;
+      ctx.shadowBlur = squareSize * 0.1;
+    }
 
     ctx.drawImage(
       img,
@@ -49,7 +52,10 @@ const drawPieces = async (
       squareSize
     );
 
-    ctx.filter = "none";
+    ctx.shadowColor = "rgba(0, 0, 0, 0)";
+    ctx.shadowBlur = 0;
+    ctx.shadowOffsetX = 0;
+    ctx.shadowOffsetY = 0;
   }
 };