haunter/sharechess
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Maciej Caderek
2022-02-01 00:08:15 +01:00
parent 6ca3836586
commit 013796a2ed
17 changed files with 433 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/board/layers/drawPieces.ts
View File

@@ -1,74 +1,56 @@
import { BoardData, PieceType, PieceColor, PiecesStyle } from "../../types";
import { Position, PieceType, PieceColor, PiecesStyle } from "../../types";
import ImagesCache from "../loaders/PiecesCache";
// import drawCircle from "./drawCircle";
const drawPieces = async (
ctx: CanvasRenderingContext2D,
board: BoardData,
position: Position,
squareSize: number,
borderWidth: number,
tiles: number,
flipped: boolean,
check: "b" | "w" | undefined,
mate: "b" | "w" | undefined,
shadow: boolean,
margin: number,
piecesStyle: PiecesStyle
) => {
for (let y = 0; y < 8; y++) {
for (let x = 0; x < 8; x++) {
if (board[y][x] !== null) {
const { type, color } = board[y][x] as {
type: PieceType;
color: PieceColor;
};
const img = await ImagesCache.get(piecesStyle, type, color);
const rank = flipped ? tiles - 1 - y : y;
const file = flipped ? tiles - 1 - x : x;
const { placement, check, mate, turn } = position;
const filters = [];
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;
if (shadow) {
filters.push(
`drop-shadow(${squareSize * 0.05}px ${squareSize * 0.05}px ${
squareSize * 0.05
}px rgba(0, 0, 0, 0.6))`
);
}
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 ((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";
ctx.drawImage(
img,
borderWidth + file * squareSize,
borderWidth + rank * squareSize + margin,
squareSize,
squareSize
);
}
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 = "none";
ctx.filter = filters.join(" ");
ctx.drawImage(
img,
borderWidth + file * squareSize,
borderWidth + rank * squareSize + margin,
squareSize,
squareSize
);
ctx.filter = "none";
}
};
export default drawPieces;