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

Make prettier

Browse Source
This commit is contained in:
Pavel Lutskov
2021-11-08 21:55:51 +01:00
parent 28011b8f93
commit b246ba83d1
3 changed files with 64 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/visuals.js
View File

@@ -1,10 +1,10 @@
const BOX_SIDE = 80;
const INDEX_MARGIN = BOX_SIDE / 2;
const INDEX_LETTERS = 'abcdefgh';
const INDEX_LETTERS = "abcdefgh";
export class Canvas {
constructor() {
this._canvas = document.createElement('canvas');
this._canvas = document.createElement("canvas");
let boardSide = BOX_SIDE * 8 + INDEX_MARGIN;
this._canvas.width = boardSide;
this._canvas.height = boardSide;
@@ -13,27 +13,35 @@ export class Canvas {
}
drawChessBoard() {
// Draw squares
let ctx = this._canvas.getContext('2d');
ctx.fillStyle = '#c0c0c0';
let ctx = this._canvas.getContext("2d");
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_SIDE + INDEX_MARGIN,
r * BOX_SIDE + INDEX_MARGIN,
BOX_SIDE, BOX_SIDE);
if ((r + c) % 2)
ctx.fillRect(
c * BOX_SIDE + INDEX_MARGIN,
r * BOX_SIDE + INDEX_MARGIN,
BOX_SIDE,
BOX_SIDE
);
}
}
// Draw letters
ctx.fillStyle = 'black';
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],
ctx.fillText(
INDEX_LETTERS[idx],
BOX_SIDE * idx + BOX_SIDE / 2 + INDEX_MARGIN - fontsize / 4,
INDEX_MARGIN / 2);
ctx.fillText((8 - idx).toString(),
INDEX_MARGIN / 2
);
ctx.fillText(
(8 - idx).toString(),
INDEX_MARGIN / 2 - fontsize / 4,
BOX_SIDE * idx + BOX_SIDE / 2 + INDEX_MARGIN + fontsize / 4);
BOX_SIDE * idx + BOX_SIDE / 2 + INDEX_MARGIN + fontsize / 4
);
}
}
screenCoordsToRowCol(cx, cy) {
@@ -49,9 +57,11 @@ export class Canvas {
}
rowColToScreenCoords(row, col) {
let canvasRect = this._canvas.getBoundingClientRect();
let topPx = canvasRect.top + INDEX_MARGIN + row * BOX_SIDE + window.pageYOffset;
let leftPx = canvasRect.left + INDEX_MARGIN + col * BOX_SIDE + window.pageXOffset;
return [topPx, leftPx]
let topPx =
canvasRect.top + INDEX_MARGIN + row * BOX_SIDE + window.pageYOffset;
let leftPx =
canvasRect.left + INDEX_MARGIN + col * BOX_SIDE + window.pageXOffset;
return [topPx, leftPx];
}
}
@@ -76,20 +86,20 @@ export class PieceVis {
}
draw(canvas) {
let [topPx, leftPx] = canvas.rowColToScreenCoords(
...boardIndexToRowCol(this.position), canvas
...boardIndexToRowCol(this.position),
canvas
);
if (this.im === null) {
let im = new Image(BOX_SIDE, BOX_SIDE);
im.src = this.icon;
im.onload = () => {
im.style.position = 'absolute';
im.style.position = "absolute";
im.style.top = `${topPx}px`;
im.style.left = `${leftPx}px`;
};
document.body.appendChild(im);
this.im = im;
}
else {
} else {
this.im.style.top = `${topPx}px`;
this.im.style.left = `${leftPx}px`;
}