51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { Move } from "chess.js";
|
|
import { Style, 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,
|
|
{ dark, light, moveIndicator }: Style,
|
|
borderWidth: number,
|
|
tiles: number,
|
|
flipped: boolean = false
|
|
) => {
|
|
const [x0, y0] = notationToXY(move.from, flipped, tiles);
|
|
const [x1, y1] = notationToXY(move.to, flipped, tiles);
|
|
|
|
const [fromX, fromY, toX, toY] = [
|
|
...notationToXY(move.from, flipped, tiles),
|
|
...notationToXY(move.to, flipped, tiles),
|
|
].map((v) => v * squareSize + borderWidth);
|
|
|
|
let fromStyle;
|
|
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;
|
|
} else {
|
|
fromStyle = {
|
|
type: "solid",
|
|
data: { color: moveIndicator.data },
|
|
} as SquareStyle;
|
|
toStyle = fromStyle;
|
|
}
|
|
|
|
drawSquare(ctx, squareSize, fromX, fromY, fromStyle);
|
|
drawSquare(ctx, squareSize, toX, toY, toStyle);
|
|
};
|
|
|
|
export default drawMoveIndicators;
|