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

2
frontend/jsconfig.json
View File

@@ -1,5 +1,5 @@
{ {
"compilerOptions" : { "compilerOptions": {
"checkJs": true, "checkJs": true,
"target": "es6" "target": "es6"
} }

67
frontend/main.js
View File

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

48
frontend/visuals.js
View File

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