pavel/chess
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Make board dimensions global

Browse Source
This commit is contained in:
Pavel Lutskov
2021-05-27 20:54:26 +02:00
parent 0bbb4e6125
commit 8d65dda7c6
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/main.js
View File

@@ -1,34 +1,37 @@
var _canvas = document.getElementById('chessBoard'); 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) { function drawChessBoard(canvas) {
let ctx = canvas.getContext('2d'); let ctx = canvas.getContext('2d');
let indexMargin = (canvas.width + canvas.height) / 2 / 16;
let w = canvas.width - indexMargin;
let h = canvas.height - indexMargin;
let bw = w / 8;
let bh = h / 8;
// Draw squares // Draw squares
ctx.fillStyle = '#c0c0c0'; ctx.fillStyle = '#c0c0c0';
for (let r = 0; r < 8; r++) { for (let r = 0; r < 8; r++) {
for (let c = 0; c < 8; c++) { for (let c = 0; c < 8; c++) {
if ((r + c) % 2) ctx.fillRect(bw*c+indexMargin, bh*r+indexMargin, bw, bh); if ((r + c) % 2) ctx.fillRect(c*BOX_WIDTH + INDEX_MARGIN,
r*BOX_HEIGHT + INDEX_MARGIN,
BOX_WIDTH, BOX_HEIGHT);
} }
} }
// Draw letters // Draw letters
let indexLetters = 'abcdefgh';
ctx.fillStyle = 'black'; ctx.fillStyle = 'black';
let fontsize = indexMargin / 2; let fontsize = INDEX_MARGIN / 2;
ctx.font = fontsize.toString() + 'px Monospace'; ctx.font = `${fontsize}px Monospace`;
for (let idx = 0; idx < 8; idx++) { for (let idx = 0; idx < 8; idx++) {
ctx.fillText(indexLetters[idx], ctx.fillText(INDEX_LETTERS[idx],
bw*idx + bw/2 + indexMargin - fontsize / 4, BOX_WIDTH*idx + BOX_WIDTH/2 + INDEX_MARGIN - fontsize / 4,
indexMargin / 2); INDEX_MARGIN / 2);
ctx.fillText((8-idx).toString(), ctx.fillText((8-idx).toString(),
indexMargin / 2 - fontsize / 4, INDEX_MARGIN / 2 - fontsize / 4,
bh*idx + bh/2 + indexMargin + fontsize / 4); BOX_HEIGHT*idx + BOX_HEIGHT/2 + INDEX_MARGIN + fontsize / 4);
} }
} }