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

67
frontend/main.js
View File

@@ -1,31 +1,33 @@
import * as visuals from './visuals.js';
import * as visuals from "./visuals.js";
function setupBoard() {
let pawns = [];
for (let x of 'abcdefgh') {
pawns.push(new Piece('pawn', 'black', `${x}7`),
new Piece('pawn', 'white', `${x}2`));
for (let x of "abcdefgh") {
pawns.push(
new Piece("pawn", "black", `${x}7`),
new Piece("pawn", "white", `${x}2`)
);
}
return new Configuration([
new Piece('rook', 'black', 'a8'),
new Piece('rook', 'black', 'h8'),
new Piece('knight', 'black', 'b8'),
new Piece('knight', 'black', 'g8'),
new Piece('bishop', 'black', 'c8'),
new Piece('bishop', 'black', 'f8'),
new Piece('queen', 'black', 'd8'),
new Piece('king', 'black', 'e8'),
new Piece("rook", "black", "a8"),
new Piece("rook", "black", "h8"),
new Piece("knight", "black", "b8"),
new Piece("knight", "black", "g8"),
new Piece("bishop", "black", "c8"),
new Piece("bishop", "black", "f8"),
new Piece("queen", "black", "d8"),
new Piece("king", "black", "e8"),
...pawns,
new Piece('rook', 'white', 'a1'),
new Piece('rook', 'white', 'h1'),
new Piece('knight', 'white', 'b1'),
new Piece('knight', 'white', 'g1'),
new Piece('bishop', 'white', 'c1'),
new Piece('bishop', 'white', 'f1'),
new Piece('queen', 'white', 'd1'),
new Piece('king', 'white', 'e1'),
new Piece("rook", "white", "a1"),
new Piece("rook", "white", "h1"),
new Piece("knight", "white", "b1"),
new Piece("knight", "white", "g1"),
new Piece("bishop", "white", "c1"),
new Piece("bishop", "white", "f1"),
new Piece("queen", "white", "d1"),
new Piece("king", "white", "e1"),
]);
}
@@ -41,7 +43,7 @@ class Backend {
return this.config.clone();
}
getAvailableMoves(position) {
return []
return [];
}
}
@@ -63,13 +65,11 @@ class Chess {
this.configVis = new visuals.ConfigVis(config.pieces);
this.configVis.draw(this.canvas);
}
showAvailableMoves(canMoveTo) {
}
showAvailableMoves(canMoveTo) {}
click(ev) {
if (this.moveSource === null) {
this._firstClick(ev);
}
else {
} else {
this._secondClick(ev);
}
}
@@ -86,7 +86,7 @@ class Chess {
let move = {
from: this.moveSource,
to: visuals.rowColToBoardIndex(...rcB),
}
};
this.backend.makeMove(move);
this.syncBackend();
}
@@ -118,7 +118,7 @@ class Piece {
class Configuration {
constructor(pieces) {
this.pieces = pieces
this.pieces = pieces;
}
clone() {
let pieces = [];
@@ -128,20 +128,21 @@ class Configuration {
return new Configuration(pieces);
}
getAt(position) {
return this.pieces.find(piece => piece.position === position) || null;
return this.pieces.find((piece) => piece.position === position) || null;
}
dropAt(position) {
return new Configuration(
this.pieces.filter(piece => piece.position !== position)
this.pieces.filter((piece) => piece.position !== position)
);
}
makeMove(move) {
const pieceToMove = this.getAt(move.from);
if (pieceToMove === null) return this;
else return new Configuration([
...(this.dropAt(move.from).dropAt(move.to).pieces),
pieceToMove.moveTo(move.to)
])
else
return new Configuration([
...this.dropAt(move.from).dropAt(move.to).pieces,
pieceToMove.moveTo(move.to),
]);
}
}

46
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,
if ((r + c) % 2)
ctx.fillRect(
c * BOX_SIDE + INDEX_MARGIN,
r * BOX_SIDE + INDEX_MARGIN,
BOX_SIDE, BOX_SIDE);
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`;
}