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

Refactor square drawing

Browse Source 
Make square drawing modular and a member function of Canvas.

Issue #3
This commit is contained in:
Pavel Lutskov
2021-12-13 19:38:54 +01:00
parent d36a948936
commit 941a5c072a
1 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/visuals.js
View File

@@ -5,39 +5,47 @@ const INDEX_LETTERS = "abcdefgh";
export class Canvas { export class Canvas {
constructor() { constructor() {
this._canvas = document.createElement("canvas"); this._canvas = document.createElement("canvas");
this._ctx = this._canvas.getContext("2d");
let boardSide = BOX_SIDE * 8 + INDEX_MARGIN; let boardSide = BOX_SIDE * 8 + INDEX_MARGIN;
this._canvas.width = boardSide; this._canvas.width = boardSide;
this._canvas.height = boardSide; this._canvas.height = boardSide;
document.body.appendChild(this._canvas); document.body.appendChild(this._canvas);
this.drawChessBoard(); this.drawChessBoard();
} }
drawChessBoard() { decideColor(r, c) {
// Draw squares if ((r + c) % 2) return "#c0c0c0";
let ctx = this._canvas.getContext("2d"); else return "#ffffff";
ctx.fillStyle = "#c0c0c0"; }
for (let r = 0; r < 8; r++) { drawSquareColor(color, r, c) {
for (let c = 0; c < 8; c++) { const crtStyle = this._ctx.fillStyle;
if ((r + c) % 2) this._ctx.fillStyle = color;
ctx.fillRect( this._ctx.fillRect(
c * BOX_SIDE + INDEX_MARGIN, c * BOX_SIDE + INDEX_MARGIN,
r * BOX_SIDE + INDEX_MARGIN, r * BOX_SIDE + INDEX_MARGIN,
BOX_SIDE, BOX_SIDE,
BOX_SIDE BOX_SIDE
); );
this._ctx.fillStyle = crtStyle;
}
drawChessBoard() {
// Draw squares
for (let r = 0; r < 8; r++) {
for (let c = 0; c < 8; c++) {
this.drawSquareColor(this.decideColor(r, c), r, c);
} }
} }
// Draw letters // Draw letters
ctx.fillStyle = "black"; this._ctx.fillStyle = "black";
let fontsize = INDEX_MARGIN / 2; let fontsize = INDEX_MARGIN / 2;
ctx.font = `${fontsize}px Monospace`; this._ctx.font = `${fontsize}px Monospace`;
for (let idx = 0; idx < 8; idx++) { for (let idx = 0; idx < 8; idx++) {
ctx.fillText( this._ctx.fillText(
INDEX_LETTERS[idx], INDEX_LETTERS[idx],
BOX_SIDE * idx + BOX_SIDE / 2 + INDEX_MARGIN - fontsize / 4, BOX_SIDE * idx + BOX_SIDE / 2 + INDEX_MARGIN - fontsize / 4,
INDEX_MARGIN / 2 INDEX_MARGIN / 2
); );
ctx.fillText( this._ctx.fillText(
(8 - idx).toString(), (8 - idx).toString(),
INDEX_MARGIN / 2 - fontsize / 4, 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