WIP

src/board/layers/drawCircle.ts

@@ -0,0 +1,23 @@
+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/drawMoveIndicators.ts

@@ -1,6 +1,8 @@
+import { Solid } from "./../../types";
 import { Move } from "chess.js";
 import { Style, SquareStyle } from "../../types";
 import drawRectangle from "./drawRectangle";
+import { changeHSL } from "../../utils/colors";
 
 const FILES = "abcdefghijklmnopqrstuwvxyz";
 
@@ -32,9 +34,26 @@ const drawMoveIndicators = async (
   let toStyle;
 
   if (moveIndicator.type === "hueShift") {
-    ctx.filter = `hue-rotate(${moveIndicator.data}deg)`;
-    fromStyle = (x0 + y0) % 2 === 0 ? light : dark;
-    toStyle = (x1 + y1) % 2 === 0 ? light : dark;
+    const newLight: Solid = {
+      type: "solid",
+      data: {
+        color: light.data.color
+          ? changeHSL(light.data.color, moveIndicator.data)
+          : "#00ff0055",
+      },
+    };
+
+    const newDark: Solid = {
+      type: "solid",
+      data: {
+        color: dark.data.color
+          ? changeHSL(dark.data.color, moveIndicator.data)
+          : "#00ff0055",
+      },
+    };
+
+    fromStyle = (x0 + y0) % 2 === 0 ? newLight : newDark;
+    toStyle = (x1 + y1) % 2 === 0 ? newLight : newDark;
   } else {
     fromStyle = {
       type: "solid",

src/board/layers/drawPieces.ts

@@ -1,5 +1,6 @@
 import { BoardData, PieceType, PieceColor, PiecesStyle } from "../../types";
 import ImagesCache from "../loaders/PiecesCache";
+// import drawCircle from "./drawCircle";
 
 const drawPieces = async (
   ctx: CanvasRenderingContext2D,
@@ -35,12 +36,23 @@ const drawPieces = async (
           );
         }
 
-        if (color === check && type === "k") {
-          filters.push(`drop-shadow(0 0 ${squareSize * 0.07}px #ffa600)`);
-          filters.push(`drop-shadow(0 0 ${squareSize * 0.07}px #ffa600)`);
-        } else if (color === mate && type === "k") {
-          filters.push(`drop-shadow(0 0 ${squareSize * 0.07}px #ff002f)`);
-          filters.push(`drop-shadow(0 0 ${squareSize * 0.07}px #ff002f)`);
+        // 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 ((color === check || color === mate) && type === "k") {
+          const hex = check ? "#ffa600" : "#ff002f";
+          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.length > 0 ? filters.join(" ") : "none";

src/board/layers/drawRectangleStroke.ts

@@ -0,0 +1,21 @@
+const drawRectangleStroke = async (
+  ctx: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  x: number,
+  y: number,
+  thickness: number,
+  color: string
+) => {
+  ctx.strokeStyle = color;
+  ctx.lineWidth = thickness;
+  ctx.strokeRect(
+    x + thickness / 2,
+    y + thickness / 2,
+    width - thickness,
+    height - thickness
+  );
+  ctx.stroke();
+};
+
+export default drawRectangleStroke;

src/board/styles-board/mono/lichess.ts

@@ -23,7 +23,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "hueShift",
-    data: 40,
+    data: -40,
   },
   border: {
     type: "solid",

src/board/styles-board/mono/lila.ts

@@ -23,7 +23,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "hueShift",
-    data: 180,
+    data: -120,
   },
   border: {
     type: "solid",

src/board/styles-board/mono/peach.ts

@@ -23,7 +23,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "hueShift",
-    data: 330,
+    data: 30,
   },
   border: {
     type: "solid",

src/board/styles-board/mono/violet.ts

@@ -12,7 +12,7 @@ const style: Style = {
   dark: {
     type: "solid",
     data: {
-      color: "#5d3e7d",
+      color: "#7b4fa8",
     },
   },
   light: {
@@ -23,7 +23,7 @@ const style: Style = {
   },
   moveIndicator: {
     type: "hueShift",
-    data: 60,
+    data: -60,
   },
   border: {
     type: "solid",