;
constructor(private board: Board, private config: GameConfig) {
this.firstRender = this.board
- .frame(this.game.getBoardData(), {}, null)
+ .frame(this.game.getPosition(0), this.game.header)
.then((_) => this.board.render());
}
@@ -28,9 +27,9 @@ class Player {
await this.firstRender;
this.game = game;
- this.header = game.getHeader();
+ this.ply = -1;
- await this.board.titleFrame(this.game.getHeader());
+ await this.board.titleFrame(this.game.header);
this.board.render();
}
@@ -52,103 +51,56 @@ class Player {
}
async prev() {
- if (this.start) {
+ const ply = this.ply - 1;
+
+ if (ply < -1) {
return;
}
- this.end = false;
+ this.ply = ply;
- const move = this.game.prev();
-
- if (!move) {
- await this.board.titleFrame(this.header);
+ if (ply === -1) {
+ await this.board.titleFrame(this.game.header);
this.board.render();
- this.start = true;
-
return;
}
- await this.board.frame(
- this.game.getBoardData(),
- this.header,
- move,
- this.game.materialInfo()
- );
+ await this.board.frame(this.game.getPosition(ply), this.game.header);
this.board.render();
}
async next() {
- if (this.end) {
+ const ply = this.ply + 1;
+
+ if (ply >= this.game.length) {
return;
}
- if (this.start) {
- await this.board.frame(
- this.game.getBoardData(),
- this.header,
- null,
- this.game.materialInfo()
- );
- this.board.render();
- this.start = false;
- return;
- }
+ this.ply = ply;
- const move = this.game.next();
-
- this.end = move?.end === 0;
-
- if (!move) {
- return;
- }
-
- await this.board.frame(
- this.game.getBoardData(),
- this.header,
- move,
- this.game.materialInfo()
- );
+ await this.board.frame(this.game.getPosition(ply), this.game.header);
this.board.render();
}
async first() {
- this.game.first();
+ this.ply = 0;
- await this.board.titleFrame(this.header);
+ await this.board.frame(this.game.getPosition(this.ply), this.game.header);
this.board.render();
-
- this.end = false;
- this.start = true;
}
async last() {
- const move = this.game.last();
+ this.ply = this.game.length - 1;
- await this.board.frame(
- this.game.getBoardData(),
- this.header,
- move,
- this.game.materialInfo()
- );
+ await this.board.frame(this.game.getPosition(this.ply), this.game.header);
this.board.render();
-
- this.end = true;
- this.start = false;
}
async goto(ply: number) {
- const move = this.game.goto(ply);
+ this.ply = ply;
- await this.board.frame(
- this.game.getBoardData(),
- this.header,
- move,
- this.game.materialInfo()
- );
+ await this.board.frame(this.game.getPosition(this.ply), this.game.header);
this.board.render();
-
- this.start = false;
- this.end = move?.end === 0;
}
}
diff --git a/src/style.css b/src/style.css
index 292ec57..a03b01d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -10,12 +10,19 @@
}
body {
- background-color: #191d24;
- background-image: url(pattern.png);
background-repeat: repeat;
background-position: center;
text-align: center;
- padding-top: 2.5vh;
+}
+
+.dark {
+ background-color: #191d24;
+ background-image: url(pattern.png);
+}
+
+.light {
+ background-color: #cfcfcf;
+ background-image: url(pattern-light.png);
}
.board {
@@ -30,3 +37,23 @@ body {
max-width: 100%;
max-height: 95vh;
}
+
+.layout {
+ display: grid;
+ grid-template-columns: 1fr 2fr 1fr;
+}
+
+.moves-box {
+ background: rgba(255, 192, 203, 0.5);
+ height: 100vh;
+}
+
+.board-box {
+ background: rgba(255, 166, 0, 0.5);
+ height: 100vh;
+}
+
+.setup-box {
+ background: rgba(135, 207, 235, 0.5);
+ height: 100vh;
+}
diff --git a/src/types.ts b/src/types.ts
index 6f51768..be2f7ea 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,3 +1,5 @@
+import { Move } from "chess.js";
+
export type GradientDir =
| "horizontal"
| "vertical"
@@ -112,3 +114,50 @@ export type GameConfig = {
toPly: number | null;
loop: boolean;
};
+
+export type MaterialCount = {
+ w: {
+ p: number;
+ n: number;
+ b: number;
+ r: number;
+ q: number;
+ };
+ b: {
+ p: number;
+ n: number;
+ b: number;
+ r: number;
+ q: number;
+ };
+};
+
+export type Material = {
+ sum: {
+ w: number;
+ b: number;
+ };
+ imbalance: MaterialCount;
+ count: MaterialCount;
+ diff: number;
+};
+
+export type Placement = {
+ x: number;
+ y: number;
+ type: PieceType;
+ color: PieceColor;
+}[];
+
+export type Position = {
+ move: Move | null;
+ ply: number;
+ end: number;
+ fen: string;
+ check: boolean;
+ mate: boolean;
+ turn: PieceColor;
+ material: Material;
+ placement: Placement;
+ last: boolean;
+};
diff --git a/src/ui/moves/Moves.ts b/src/ui/moves/Moves.ts
new file mode 100644
index 0000000..3e14f99
--- /dev/null
+++ b/src/ui/moves/Moves.ts
@@ -0,0 +1,36 @@
+import { html } from "common-tags";
+import Player from "../../player/Player";
+import chunk_ from "@arrows/array/chunk_";
+
+class Moves {
+ constructor(private element: HTMLElement, private player: Player) {
+ this.element.addEventListener("click", (e) => {
+ const target = e.target as HTMLElement;
+
+ if (target?.dataset?.type === "ply") {
+ const ply = Number(target?.dataset?.ply);
+ this.player.goto(ply);
+ }
+ });
+ }
+
+ load(moves: string[]) {
+ const items = chunk_(2, moves).map(
+ ([white, black], i) =>
+ html`
+ ${i + 1}. ${white}
+ ${black}
+
`
+ );
+
+ const content = html`
+ ${items.join("\n")}
+ `;
+
+ this.element.innerHTML = content;
+
+ return this;
+ }
+}
+
+export default Moves;