haunter/sharechess
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Maciej Caderek
2022-01-30 15:15:47 +01:00
parent 3023329586
commit 6ca3836586
12 changed files with 250 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/background.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 413 KiB

10
src/board/Board.ts
View File

@@ -1,5 +1,5 @@
import { BoardConfig, PiecesStyle } from "./../types";
import { Material, MoveWithPly } from "./../game/Game";
import { Material, MoveWithDetails } from "../game/Game_x";
import { Style, BoardData } from "../types";
import drawRectangle from "./layers/drawRectangle";
import drawCoords from "./layers/drawCoords";
@@ -41,7 +41,7 @@ class Board {
private ctx: CanvasRenderingContext2D;
private tempCtx: CanvasRenderingContext2D;
private borderVisible: boolean = true;
private lastMove: MoveWithPly | null = null;
private lastMove: MoveWithDetails | null = null;
private lastMaterial: Material | undefined = undefined;
public canvas: HTMLCanvasElement = document.createElement("canvas");
private tempCanvas: HTMLCanvasElement = document.createElement("canvas");
@@ -174,7 +174,7 @@ class Board {
return this;
}
isCheck(move: MoveWithPly | null) {
isCheck(move: MoveWithDetails | null) {
if (!move) {
return false;
}
@@ -182,7 +182,7 @@ class Board {
return move.san.includes("+");
}
isMate(move: MoveWithPly | null) {
isMate(move: MoveWithDetails | null) {
if (!move) {
return false;
}
@@ -267,7 +267,7 @@ class Board {
async frame(
boardData: BoardData | null,
header: { [key: string]: string | undefined },
move: MoveWithPly | null = null,
move: MoveWithDetails | null = null,
material?: Material
) {
this.currentScreen = "move";

2
src/board/layers/drawExtraInfo.ts
View File

@@ -1,4 +1,4 @@
import { Material } from "../../game/Game";
import { Material } from "../../game/Game_x";
import { Style } from "./../../types";
import drawText from "./drawText";

2
src/board/styles-board/gradient/sunset.ts
View File

@@ -41,5 +41,3 @@ const style: Style = {
};
export default style;
// background-image: linear-gradient( 68.3deg, rgba(245,177,97,1) 0.4%, rgba(236,54,110,1) 100.2% );

2
src/board/styles-board/index.ts
View File

@@ -1,3 +1,4 @@
import chesscom from "./mono/chesscom";
import lichess from "./mono/lichess";
import lila from "./mono/lila";
import peach from "./mono/peach";
@@ -15,6 +16,7 @@ import rainbowLight from "./gradient/rainbow-light";
import kittens from "./pic/kittens";
export default {
chesscom,
lichess,
lila,
peach,

41
src/board/styles-board/mono/chesscom.ts Normal file
View File

@@ -0,0 +1,41 @@
import { Style } from "../../../types";
const style: Style = {
name: "Chessc*m",
category: "mono",
background: {
type: "solid",
data: {
color: "transparent",
},
},
dark: {
type: "solid",
data: {
color: "#769656",
},
},
light: {
type: "solid",
data: {
color: "#eeeed2",
},
},
moveIndicator: {
type: "color",
data: "#ffff007f",
},
border: {
type: "solid",
data: {
color: "#40522f",
},
},
coords: {
onLight: "#40522f",
onDark: "#fcfce1",
onBorder: "#eeeed2",
},
};
export default style;

46
src/game/Game.ts
View File

@@ -1,8 +1,8 @@
import { PieceType } from "./../types";
import { PieceType } from "../types";
import { Chess, ChessInstance, Move } from "chess.js";
import { cleanPGN } from "./PGNHelpers";
export type MoveWithPly = Move & { ply: number; end: number };
export type MoveWithDetails = Move & { ply: number; end: number; fen: string };
const MATERIAL_VALUE: Map<PieceType, number> = new Map([
["q", 9],
@@ -15,7 +15,7 @@ const MATERIAL_VALUE: Map<PieceType, number> = new Map([
class Game {
private game: ChessInstance;
private replay: ChessInstance;
private moves: MoveWithPly[];
private moves: MoveWithDetails[];
private currentPly: number = 0;
constructor() {
@@ -24,28 +24,40 @@ class Game {
this.moves = [];
}
getMoves() {
return this.moves.map((move) => move.san);
}
getFEN() {
return this.replay.fen();
}
loadPGN(pgn: string) {
this.game.load_pgn(cleanPGN(pgn));
this.game.delete_comments();
console.log(this.game.pgn());
const moves = this.game.history({ verbose: true });
this.moves = moves.map((item, i) => ({
...item,
ply: i + 1,
end: moves.length - 1 - i,
}));
this.currentPly = 0;
const tempGame = new Chess();
const fen = this.game.header().FEN;
if (fen) {
tempGame.load(fen);
this.replay.load(fen);
}
this.moves = moves.map((item, i) => {
tempGame.move(item);
return {
...item,
ply: i + 1,
end: moves.length - 1 - i,
fen: tempGame.fen(),
};
});
this.currentPly = 0;
return this;
}
@@ -111,7 +123,7 @@ class Game {
w: { p: 0, n: 0, b: 0, r: 0, q: 0 },
b: { p: 0, n: 0, b: 0, r: 0, q: 0 },
};
const material = {
const count = {
w: { p: 0, n: 0, b: 0, r: 0, q: 0 },
b: { p: 0, n: 0, b: 0, r: 0, q: 0 },
};
@@ -119,7 +131,7 @@ class Game {
for (const piece of pieces) {
if (piece !== null && piece.type !== "k") {
sum[piece.color] += MATERIAL_VALUE.get(piece.type) ?? 0;
material[piece.color][piece.type] += 1;
count[piece.color][piece.type] += 1;
const oppositeColor = piece.color === "b" ? "w" : "b";
@@ -131,7 +143,7 @@ class Game {
}
}
return { sum, imbalance, material, diff: sum.w - sum.b };
return { sum, imbalance, count, diff: sum.w - sum.b };
}
getBoardData() {

150
src/game/Game_x.ts Normal file
View File

@@ -0,0 +1,150 @@
// import { PieceType, BoardData } from "../types";
// import { Chess, ChessInstance, Move } from "chess.js";
// import { cleanPGN } from "./PGNHelpers";
// export type MoveWithDetails = Move & { ply: number; end: number; fen: string };
// const MATERIAL_VALUE: Map<PieceType, number> = new Map([
// ["q", 9],
// ["r", 5],
// ["b", 3],
// ["n", 3],
// ["p", 1],
// ]);
// class Game {
// private moves: MoveWithDetails[];
// private currentPly: number = 0;
// constructor() {
// this.moves = [];
// }
// getMoves() {
// return this.moves.map((move) => move.san);
// }
// loadPGN(pgn: string) {
// const game = new Chess();
// const replay = new Chess();
// game.load_pgn(cleanPGN(pgn));
// game.delete_comments();
// const moves = game.history({ verbose: true });
// const fen = game.header().FEN;
// if (fen) {
// replay.load(fen);
// }
// this.moves = moves.map((item, i) => {
// replay.move(item);
// const currentFEN = replay.fen();
// return {
// ...item,
// ply: i + 1,
// end: moves.length - 1 - i,
// fen: currentFEN,
// material: this.materialInfo(replay.board()),
// };
// });
// this.currentPly = 0;
// return this;
// }
// next() {
// // const move = this.moves[this.currentPly];
// // if (!move) {
// // return null;
// // }
// // this.currentPly++;
// // this.replay.move(move);
// // return move;
// }
// prev() {
// // const undo = Boolean(this.replay.undo());
// // if (undo) {
// // this.currentPly--;
// // } else {
// // return null;
// // }
// // const move = this.moves[this.currentPly - 1];
// // return move;
// }
// last() {
// while (this.next()) {}
// return this.moves[this.moves.length - 1];
// }
// first() {
// while (this.prev()) {}
// return this.moves[0];
// }
// goto(ply: number) {
// if (ply === this.currentPly || ply < 0 || ply > this.moves.length - 1) {
// return null;
// }
// while (this.currentPly !== ply) {
// ply > this.currentPly ? this.next() : this.prev();
// }
// return this.moves[ply - 1];
// }
// materialInfo(boardData: BoardData) {
// const pieces = boardData.flat().filter(Boolean);
// const sum = { w: 0, b: 0 };
// const imbalance = {
// w: { p: 0, n: 0, b: 0, r: 0, q: 0 },
// b: { p: 0, n: 0, b: 0, r: 0, q: 0 },
// };
// const count = {
// w: { p: 0, n: 0, b: 0, r: 0, q: 0 },
// b: { p: 0, n: 0, b: 0, r: 0, q: 0 },
// };
// for (const piece of pieces) {
// if (piece !== null && piece.type !== "k") {
// sum[piece.color] += MATERIAL_VALUE.get(piece.type) ?? 0;
// count[piece.color][piece.type] += 1;
// const oppositeColor = piece.color === "b" ? "w" : "b";
// if (imbalance[oppositeColor][piece.type] === 0) {
// imbalance[piece.color][piece.type] += 1;
// } else {
// imbalance[oppositeColor][piece.type] -= 1;
// }
// }
// }
// return { sum, imbalance, count, diff: sum.w - sum.b };
// }
// getBoardData() {
// // return this.replay.board();
// return new Chess().board();
// }
// getHeader() {
// return this.game.header();
// }
// pgn() {
// return this.game.pgn();
// }
// }
// export type Material = ReturnType<Game["materialInfo"]>;
// export default Game;

17
src/main.ts
View File

@@ -13,8 +13,8 @@ import * as Hammer from "hammerjs";
const $app = document.querySelector<HTMLImageElement>("#app");
const boardConfig: BoardConfig = {
size: 720,
boardStyle: styles.sunset,
size: 1024,
boardStyle: styles.chesscom,
piecesStyle: "tatiana",
showBorder: true,
showExtraInfo: true,
@@ -59,11 +59,14 @@ const main = async () => {
// play(board, gameConfig, pgn, interval);
const player = new Player(board, gameConfig);
const game = new Game().loadPGN(pgn);
await player.load(new Game().loadPGN(pgn));
await player.load(game);
// @ts-ignore
window.player = player;
// @ts-ignore
window.game = game;
// @ts-ignore
window.load = async (pgn: string) => {
@@ -121,7 +124,7 @@ const main = async () => {
hammer.add(new Hammer.Swipe());
hammer.add(new Hammer.Pinch());
hammer.add(new Hammer.Press({ time: 500 }));
hammer.add(new Hammer.Tap({ taps: 2 }));
hammer.add(new Hammer.Tap({ taps: 1 }));
hammer.on("swiperight", () => {
player.pause();
@@ -129,8 +132,7 @@ const main = async () => {
});
hammer.on("swipeleft", () => {
player.pause();
player.next();
player.playing ? player.pause() : player.play();
});
hammer.on("swipeup", () => {
@@ -152,7 +154,8 @@ const main = async () => {
});
hammer.on("tap", () => {
player.playing ? player.pause() : player.play();
player.pause();
player.next();
});
hammer.on("press", () => {

BIN
src/pattern.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

8
src/style.css
View File

@@ -11,12 +11,11 @@
body {
background-color: #191d24;
/* background-image: url(background.png); */
background-attachment: fixed;
background-size: cover;
background-image: url(pattern.png);
background-repeat: repeat;
background-position: center;
text-align: center;
padding-top: 50px;
padding-top: 2.5vh;
}
.board {
@@ -29,4 +28,5 @@ body {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
border-radius: 5px;
max-width: 100%;
max-height: 95vh;
}

17
src/test-data/pgns.ts
View File

@@ -33,17 +33,16 @@ Rd3 40. Qa8 c3 41. Qa4+ Ke1 42. f4 f5 43. Kc1 Rd2 44. Qa7 1-0`,
1. e4 c5 2. Bc4 Nc6 3. Qf3 Ne5 4. Qc3 Nxc4 5. Qxc4 b6 6. Nh3 e6 7. Ng5 Qxg5 8. d4 Qxc1+ 9. Ke2 Qxh1 10. f4 Qxg2+ 11. Ke3 Qxh2 12. Nd2 Qh3+ 13. Nf3 Nf6 14. e5 Ng4+ 15. Ke4 Bb7+ 16. Kd3 Qxf3+ 17. Kd2 Qe3+ 18. Kd1 Nf2# 0-1`,
`[Black "Carlsen, Magnus"]
[BlackElo "2865"]
[Date "2022.01.29"]
[Event "Tata Steel Chess Masters 2022"]
`[Black "Grandelius, Nils"]
[BlackElo "2617"]
[Date "2021.11.16"]
[Event "Casual Blitz game"]
[Result "0-1"]
[Round "12.1"]
[Site "Wijk aan Zee, Netherlands"]
[White "Caruana, Fabiano"]
[WhiteElo "2792"]
[Site "https://youtu.be/QApxkK-cRxo"]
[White "Cramling Bellon, Anna"]
[WhiteElo "1905"]
1. e4 c5 2. Nf3 Nc6 3. Bb5 g6 4. O-O Bg7 5. c3 Nf6 6. Re1 O-O 7. d4 d5 8. e5 Ne4 9. Be3 cxd4 10. cxd4 Qb6 11. Qe2 Bd7 12. Ba4 Rac8 13. Nc3 Nxc3 14. bxc3 Qd8 15. Bb3 Na5 16. Rac1 Nxb3 17. axb3 Qb6 18. Qa2 a5 19. Qa3 Rfe8 20. c4 dxc4 21. bxc4 Qa6 22. c5 Bc6 23. Rb1 a4 24. Rec1 Rcd8 25. Nd2 Qe2 26. f3 Rxd4 27. Bxd4 Qxd2 28. Rd1 Qf4 29. Qb4 e6 30. Bc3 Qxb4 31. Bxb4 Bxe5 32. Ba3 Bf6 33. Kf2 Be7 34. Rb6 Rc8 35. Rd2 f6 36. f4 e5 37. fxe5 fxe5 38. Re2 Rf8+ 39. Ke1 Rf5 40. Rb1 e4 41. Rc1 Bh4+ 42. g3 Bg5 43. Rb1 Rf3 44. Bc1 Bf6 45. Rb6 Rf5 46. Ba3 Kf7 47. Rf2 Rf3 48. Rxf3 exf3 49. Kf1 Bd4 0-1`,
1. d4 Nf6 2. c4 c5 3. d5 b5 4. cxb5 a6 5. Nc3 axb5 6. e4 b4 7. Nb5 d6 8. Bc4 g6 9. e5 Ng4 10. e6 Ne5 11. exf7+ Nxf7 12. Nf3 Bg7 13. O-O O-O 14. Re1 Bg4 15. h3 Bxf3 16. Qxf3 Ne5 17. Qb3 Nbd7 18. Bg5 Nb6 19. Bf1 Rf5 20. Bh4 Qf8 21. a4 bxa3 22. Rxa3 Rxa3 23. Qxa3 Rf3 24. Bxe7 Qxe7 25. gxf3 Qg5+ 26. Kh1 Qh4 27. Qa7 Qxf2 28. Qb8+ Bf8 29. Ra1 Nxf3 30. Bg2 Ne1 31. Rxe1 Qxe1+ 32. Kh2 Qe5+ 33. Kg1 Nc4 34. Nc7 Qxb2 35. Qe8 Qf6 36. Ne6 Ne5 37. Qb8 c4 38. Qb4 Qf2+ 39. Kh2 Nf3+ 40. Kh1 Qg1#`,
];
export default pgns;