89 lines
2.8 KiB
JavaScript
89 lines
2.8 KiB
JavaScript
var _canvas = document.getElementById('chessBoard');
|
|
|
|
const INDEX_MARGIN = (_canvas.width + _canvas.height) / 2 / 16;
|
|
const BOARD_WIDTH = _canvas.width - INDEX_MARGIN;
|
|
const BOARD_HEIGHT = _canvas.height - INDEX_MARGIN;
|
|
const BOX_WIDTH = BOARD_WIDTH / 8;
|
|
const BOX_HEIGHT = BOARD_HEIGHT / 8;
|
|
|
|
const INDEX_LETTERS = 'abcdefgh';
|
|
|
|
function drawChessBoard(canvas) {
|
|
let ctx = canvas.getContext('2d');
|
|
|
|
// Draw squares
|
|
ctx.fillStyle = '#c0c0c0';
|
|
for (let r = 0; r < 8; r++) {
|
|
for (let c = 0; c < 8; c++) {
|
|
if ((r + c) % 2) ctx.fillRect(c*BOX_WIDTH + INDEX_MARGIN,
|
|
r*BOX_HEIGHT + INDEX_MARGIN,
|
|
BOX_WIDTH, BOX_HEIGHT);
|
|
}
|
|
}
|
|
|
|
// Draw letters
|
|
ctx.fillStyle = 'black';
|
|
let fontsize = INDEX_MARGIN / 2;
|
|
ctx.font = `${fontsize}px Monospace`;
|
|
for (let idx = 0; idx < 8; idx++) {
|
|
ctx.fillText(INDEX_LETTERS[idx],
|
|
BOX_WIDTH*idx + BOX_WIDTH/2 + INDEX_MARGIN - fontsize / 4,
|
|
INDEX_MARGIN / 2);
|
|
ctx.fillText((8-idx).toString(),
|
|
INDEX_MARGIN / 2 - fontsize / 4,
|
|
BOX_HEIGHT*idx + BOX_HEIGHT/2 + INDEX_MARGIN + fontsize / 4);
|
|
}
|
|
}
|
|
|
|
function drawPiece(canvas, piece, field) {
|
|
let canvasRect = canvas.getBoundingClientRect();
|
|
let rc = boardIndexToRowCol(field);
|
|
|
|
let im = new Image(BOX_WIDTH, BOX_HEIGHT);
|
|
im.src = `./icons/${piece}.svg`;
|
|
im.onload = () => {
|
|
let topPx = canvasRect.top + INDEX_MARGIN + rc[0]*BOX_HEIGHT + window.pageYOffset;
|
|
let leftPx = canvasRect.left + INDEX_MARGIN + rc[1]*BOX_WIDTH + window.pageXOffset;
|
|
im.style.position = 'absolute';
|
|
im.style.top = `${topPx}px`;
|
|
im.style.left = `${leftPx}px`;
|
|
};
|
|
document.body.appendChild(im);
|
|
}
|
|
|
|
function _setupBoard(canvas) {
|
|
drawPiece(_canvas, 'rook_black', 'a8');
|
|
drawPiece(_canvas, 'rook_black', 'h8');
|
|
drawPiece(_canvas, 'knight_black', 'b8');
|
|
drawPiece(_canvas, 'knight_black', 'g8');
|
|
drawPiece(_canvas, 'bishop_black', 'c8');
|
|
drawPiece(_canvas, 'bishop_black', 'f8');
|
|
drawPiece(_canvas, 'queen_black', 'd8');
|
|
drawPiece(_canvas, 'king_black', 'e8');
|
|
|
|
for (let colLetter of INDEX_LETTERS) {
|
|
drawPiece(canvas, 'pawn_black', `${colLetter}7`);
|
|
drawPiece(canvas, 'pawn_white', `${colLetter}2`);
|
|
}
|
|
|
|
drawPiece(_canvas, 'rook_white', 'a1');
|
|
drawPiece(_canvas, 'rook_white', 'h1');
|
|
drawPiece(_canvas, 'knight_white', 'b1');
|
|
drawPiece(_canvas, 'knight_white', 'g1');
|
|
drawPiece(_canvas, 'bishop_white', 'c1');
|
|
drawPiece(_canvas, 'bishop_white', 'f1');
|
|
drawPiece(_canvas, 'queen_white', 'd1');
|
|
drawPiece(_canvas, 'king_white', 'e1');
|
|
}
|
|
|
|
function boardIndexToRowCol(boardIndex) {
|
|
let colLetter = boardIndex[0];
|
|
let rowDigit = boardIndex[1];
|
|
let row = 8 - parseInt(rowDigit);
|
|
let col = INDEX_LETTERS.indexOf(colLetter);
|
|
return [row, col];
|
|
}
|
|
|
|
drawChessBoard(_canvas);
|
|
_setupBoard(_canvas);
|