08e9d1bd0d1a7174577d5c860230359897c13022
1 import { Random
} from "/utils/alea.js";
2 import { ArrayFun
} from "/utils/array.js";
3 import PiPo
from "/utils/PiPo.js";
4 import Move
from "/utils/Move.js";
6 // Helper class for move animation
9 constructor(callOnComplete
) {
12 this.callOnComplete
= callOnComplete
;
15 if (++this.value
== this.target
)
16 this.callOnComplete();
21 // NOTE: x coords: top to bottom (white perspective); y: left to right
22 // NOTE: ChessRules is aliased as window.C, and variants as window.V
23 export default class ChessRules
{
25 static get Aliases() {
26 return {'C': ChessRules
};
29 /////////////////////////
30 // VARIANT SPECIFICATIONS
32 // Some variants have specific options, like the number of pawns in Monster,
33 // or the board size for Pandemonium.
34 // Users can generally select a randomness level from 0 to 2.
35 static get Options() {
39 variable: "randomness",
42 {label: "Deterministic", value: 0},
43 {label: "Symmetric random", value: 1},
44 {label: "Asymmetric random", value: 2}
49 label: "Capture king",
55 label: "Falling pawn",
61 // Game modifiers (using "elementary variants"). Default: false
64 "balance", //takes precedence over doublemove & progressive
68 "cylinder", //ok with all
72 "progressive", //(natural) priority over doublemove
81 get pawnPromotions() {
82 return ['q', 'r', 'n', 'b'];
85 // Some variants don't have flags:
94 // En-passant captures allowed?
101 !!this.options
["crazyhouse"] ||
102 (!!this.options
["recycle"] && !this.options
["teleport"])
105 // Some variants do not store reserve state (Align4, Chakart...)
106 get hasReserveFen() {
107 return this.hasReserve
;
111 return !!this.options
["dark"];
114 // Some variants use only click information
119 // Some variants reveal moves only after both players played
124 // Some variants use click infos:
126 if (typeof coords
.x
!= "number")
127 return null; //click on reserves
129 this.options
["teleport"] && this.subTurnTeleport
== 2 &&
130 this.board
[coords
.x
][coords
.y
] == ""
133 start: {x: this.captured
.x
, y: this.captured
.y
},
144 res
.drag
= {c: this.captured
.c
, p: this.captured
.p
};
153 // 3a --> {x:3, y:10}
154 static SquareToCoords(sq
) {
155 return ArrayFun
.toObject(["x", "y"],
156 [0, 1].map(i
=> parseInt(sq
[i
], 36)));
159 // {x:11, y:12} --> bc
160 static CoordsToSquare(cd
) {
161 return Object
.values(cd
).map(c
=> c
.toString(36)).join("");
165 if (typeof cd
.x
== "number") {
167 `${this.containerId}|sq-${cd.x.toString(36)}-${cd.y.toString(36)}`
171 return `${this.containerId}|rsq-${cd.x}-${cd.y}`;
174 idToCoords(targetId
) {
176 return null; //outside page, maybe...
177 const idParts
= targetId
.split('|'); //prefix|sq-2-3 (start at 0 => 3,4)
179 idParts
.length
< 2 ||
180 idParts
[0] != this.containerId
||
181 !idParts
[1].match(/sq-[0-9a-zA-Z]-[0-9a-zA-Z]/)
185 const squares
= idParts
[1].split('-');
186 if (squares
[0] == "sq")
187 return {x: parseInt(squares
[1], 36), y: parseInt(squares
[2], 36)};
188 // squares[0] == "rsq" : reserve, 'c' + 'p' (letters color & piece)
189 return {x: squares
[1], y: squares
[2]};
195 // Turn "wb" into "B" (for FEN)
197 return (b
[0] == "w" ? b
[1].toUpperCase() : b
[1]);
200 // Turn "p" into "bp" (for board)
202 return (f
.charCodeAt(0) <= 90 ? "w" + f
.toLowerCase() : "b" + f
);
205 genRandInitFen(seed
) {
206 Random
.setSeed(seed
); //may be unused
207 let baseFen
= this.genRandInitBaseFen();
208 baseFen
.o
= Object
.assign({init: true}, baseFen
.o
);
209 const parts
= this.getPartFen(baseFen
.o
);
212 (Object
.keys(parts
).length
> 0 ? (" " + JSON
.stringify(parts
)) : "")
216 // Setup the initial random-or-not (asymmetric-or-not) position
217 genRandInitBaseFen() {
218 let fen
, flags
= "0707";
219 if (!this.options
.randomness
)
221 fen
= "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w 0";
225 let pieces
= {w: new Array(8), b: new Array(8)};
227 // Shuffle pieces on first (and last rank if randomness == 2)
228 for (let c
of ["w", "b"]) {
229 if (c
== 'b' && this.options
.randomness
== 1) {
230 pieces
['b'] = pieces
['w'];
234 let positions
= ArrayFun
.range(8);
235 // Get random squares for bishops
236 let randIndex
= 2 * Random
.randInt(4);
237 const bishop1Pos
= positions
[randIndex
];
238 // The second bishop must be on a square of different color
239 let randIndex_tmp
= 2 * Random
.randInt(4) + 1;
240 const bishop2Pos
= positions
[randIndex_tmp
];
241 // Remove chosen squares
242 positions
.splice(Math
.max(randIndex
, randIndex_tmp
), 1);
243 positions
.splice(Math
.min(randIndex
, randIndex_tmp
), 1);
244 // Get random squares for knights
245 randIndex
= Random
.randInt(6);
246 const knight1Pos
= positions
[randIndex
];
247 positions
.splice(randIndex
, 1);
248 randIndex
= Random
.randInt(5);
249 const knight2Pos
= positions
[randIndex
];
250 positions
.splice(randIndex
, 1);
251 // Get random square for queen
252 randIndex
= Random
.randInt(4);
253 const queenPos
= positions
[randIndex
];
254 positions
.splice(randIndex
, 1);
255 // Rooks and king positions are now fixed,
256 // because of the ordering rook-king-rook
257 const rook1Pos
= positions
[0];
258 const kingPos
= positions
[1];
259 const rook2Pos
= positions
[2];
260 // Finally put the shuffled pieces in the board array
261 pieces
[c
][rook1Pos
] = "r";
262 pieces
[c
][knight1Pos
] = "n";
263 pieces
[c
][bishop1Pos
] = "b";
264 pieces
[c
][queenPos
] = "q";
265 pieces
[c
][kingPos
] = "k";
266 pieces
[c
][bishop2Pos
] = "b";
267 pieces
[c
][knight2Pos
] = "n";
268 pieces
[c
][rook2Pos
] = "r";
269 flags
+= rook1Pos
.toString() + rook2Pos
.toString();
272 pieces
["b"].join("") +
273 "/pppppppp/8/8/8/8/PPPPPPPP/" +
274 pieces
["w"].join("").toUpperCase() +
278 return { fen: fen
, o: {flags: flags
} };
281 // "Parse" FEN: just return untransformed string data
283 const fenParts
= fen
.split(" ");
285 position: fenParts
[0],
287 movesCount: fenParts
[2]
289 if (fenParts
.length
> 3)
290 res
= Object
.assign(res
, JSON
.parse(fenParts
[3]));
294 // Return current fen (game state)
296 const parts
= this.getPartFen({});
299 (Object
.keys(parts
).length
> 0 ? (" " + JSON
.stringify(parts
)) : "")
304 return this.getPosition() + " " + this.turn
+ " " + this.movesCount
;
310 parts
["flags"] = o
.init
? o
.flags : this.getFlagsFen();
311 if (this.hasEnpassant
)
312 parts
["enpassant"] = o
.init
? "-" : this.getEnpassantFen();
313 if (this.hasReserveFen
)
314 parts
["reserve"] = this.getReserveFen(o
);
315 if (this.options
["crazyhouse"])
316 parts
["ispawn"] = this.getIspawnFen(o
);
320 static FenEmptySquares(count
) {
321 // if more than 9 consecutive free spaces, break the integer,
322 // otherwise FEN parsing will fail.
325 // Most boards of size < 18:
327 return "9" + (count
- 9);
329 return "99" + (count
- 18);
332 // Position part of the FEN string
335 for (let i
= 0; i
< this.size
.y
; i
++) {
337 for (let j
= 0; j
< this.size
.x
; j
++) {
338 if (this.board
[i
][j
] == "")
341 if (emptyCount
> 0) {
342 // Add empty squares in-between
343 position
+= C
.FenEmptySquares(emptyCount
);
346 position
+= this.board2fen(this.board
[i
][j
]);
351 position
+= C
.FenEmptySquares(emptyCount
);
352 if (i
< this.size
.y
- 1)
353 position
+= "/"; //separate rows
358 // Flags part of the FEN string
360 return ["w", "b"].map(c
=> {
361 return this.castleFlags
[c
].map(x
=> x
.toString(36)).join("");
365 // Enpassant part of the FEN string
369 return C
.CoordsToSquare(this.epSquare
);
374 return "000000000000";
376 ["w","b"].map(c
=> Object
.values(this.reserve
[c
]).join("")).join("")
382 // NOTE: cannot merge because this.ispawn doesn't exist yet
384 const squares
= Object
.keys(this.ispawn
);
385 if (squares
.length
== 0)
387 return squares
.join(",");
390 // Set flags from fen (castle: white a,h then black a,h)
393 w: [0, 1].map(i
=> parseInt(fenflags
.charAt(i
), 36)),
394 b: [2, 3].map(i
=> parseInt(fenflags
.charAt(i
), 36))
402 this.options
= o
.options
;
403 // Fill missing options (always the case if random challenge)
404 (V
.Options
.select
|| []).concat(V
.Options
.input
|| []).forEach(opt
=> {
405 if (this.options
[opt
.variable
] === undefined)
406 this.options
[opt
.variable
] = opt
.defaut
;
409 // This object will be used only for initial FEN generation
413 this.playerColor
= o
.color
;
414 this.afterPlay
= o
.afterPlay
; //trigger some actions after playing a move
415 this.containerId
= o
.element
;
416 this.isDiagram
= o
.diagram
;
417 this.marks
= o
.marks
;
421 o
.fen
= this.genRandInitFen(o
.seed
);
422 this.re_initFromFen(o
.fen
);
423 this.graphicalInit();
426 re_initFromFen(fen
, oldBoard
) {
427 const fenParsed
= this.parseFen(fen
);
428 this.board
= oldBoard
|| this.getBoard(fenParsed
.position
);
429 this.turn
= fenParsed
.turn
;
430 this.movesCount
= parseInt(fenParsed
.movesCount
, 10);
431 this.setOtherVariables(fenParsed
);
434 // Turn position fen into double array ["wb","wp","bk",...]
436 const rows
= position
.split("/");
437 let board
= ArrayFun
.init(this.size
.x
, this.size
.y
, "");
438 for (let i
= 0; i
< rows
.length
; i
++) {
440 for (let indexInRow
= 0; indexInRow
< rows
[i
].length
; indexInRow
++) {
441 const character
= rows
[i
][indexInRow
];
442 const num
= parseInt(character
, 10);
443 // If num is a number, just shift j:
446 // Else: something at position i,j
448 board
[i
][j
++] = this.fen2board(character
);
454 // Some additional variables from FEN (variant dependant)
455 setOtherVariables(fenParsed
) {
456 // Set flags and enpassant:
458 this.setFlags(fenParsed
.flags
);
459 if (this.hasEnpassant
)
460 this.epSquare
= this.getEpSquare(fenParsed
.enpassant
);
461 if (this.hasReserve
&& !this.isDiagram
)
462 this.initReserves(fenParsed
.reserve
);
463 if (this.options
["crazyhouse"])
464 this.initIspawn(fenParsed
.ispawn
);
465 if (this.options
["teleport"]) {
466 this.subTurnTeleport
= 1;
467 this.captured
= null;
469 if (this.options
["dark"]) {
470 // Setup enlightened: squares reachable by player side
471 this.enlightened
= ArrayFun
.init(this.size
.x
, this.size
.y
, false);
472 this.updateEnlightened();
474 this.subTurn
= 1; //may be unused
475 if (!this.moveStack
) //avoid resetting (unwanted)
479 // ordering as in pieces() p,r,n,b,q,k
480 initReserves(reserveStr
) {
481 const counts
= reserveStr
.split("").map(c
=> parseInt(c
, 36));
482 this.reserve
= { w: {}, b: {} };
483 const pieceName
= ['p', 'r', 'n', 'b', 'q', 'k'];
484 const L
= pieceName
.length
;
485 for (let i
of ArrayFun
.range(2 * L
)) {
487 this.reserve
['w'][pieceName
[i
]] = counts
[i
];
489 this.reserve
['b'][pieceName
[i
-L
]] = counts
[i
];
493 initIspawn(ispawnStr
) {
494 if (ispawnStr
!= "-")
495 this.ispawn
= ArrayFun
.toObject(ispawnStr
.split(","), true);
503 getPieceWidth(rwidth
) {
504 return (rwidth
/ this.size
.y
);
507 getReserveSquareSize(rwidth
, nbR
) {
508 const sqSize
= this.getPieceWidth(rwidth
);
509 return Math
.min(sqSize
, rwidth
/ nbR
);
512 getReserveNumId(color
, piece
) {
513 return `${this.containerId}|rnum-${color}${piece}`;
516 getNbReservePieces(color
) {
518 Object
.values(this.reserve
[color
]).reduce(
519 (oldV
,newV
) => oldV
+ (newV
> 0 ? 1 : 0), 0)
523 getRankInReserve(c
, p
) {
524 const pieces
= Object
.keys(this.pieces());
525 const lastIndex
= pieces
.findIndex(pp
=> pp
== p
)
526 let toTest
= pieces
.slice(0, lastIndex
);
527 return toTest
.reduce(
528 (oldV
,newV
) => oldV
+ (this.reserve
[c
][newV
] > 0 ? 1 : 0), 0);
531 static AddClass_es(piece
, class_es
) {
532 if (!Array
.isArray(class_es
))
533 class_es
= [class_es
];
534 class_es
.forEach(cl
=> {
535 piece
.classList
.add(cl
);
539 static RemoveClass_es(piece
, class_es
) {
540 if (!Array
.isArray(class_es
))
541 class_es
= [class_es
];
542 class_es
.forEach(cl
=> {
543 piece
.classList
.remove(cl
);
547 // Generally light square bottom-right
548 getSquareColorClass(x
, y
) {
549 return ((x
+y
) % 2 == 0 ? "light-square": "dark-square");
553 // Works for all rectangular boards:
554 return Math
.sqrt(r
.width
** 2 + r
.height
** 2);
558 return (typeof x
== "string" ? this.r_pieces : this.g_pieces
)[x
][y
];
565 const g_init
= () => {
566 this.re_drawBoardElements();
567 if (!this.isDiagram
&& !this.mouseListeners
&& !this.touchListeners
)
568 this.initMouseEvents();
570 let container
= document
.getElementById(this.containerId
);
571 this.windowResizeObs
= new ResizeObserver(g_init
);
572 this.windowResizeObs
.observe(container
);
575 re_drawBoardElements() {
576 const board
= this.getSvgChessboard();
577 const oppCol
= C
.GetOppCol(this.playerColor
);
578 const container
= document
.getElementById(this.containerId
);
579 const rc
= container
.getBoundingClientRect();
580 let chessboard
= container
.querySelector(".chessboard");
581 chessboard
.innerHTML
= "";
582 chessboard
.insertAdjacentHTML('beforeend', board
);
583 // Compare window ratio width / height to aspectRatio:
584 const windowRatio
= rc
.width
/ rc
.height
;
585 let cbWidth
, cbHeight
;
586 const vRatio
= this.size
.ratio
|| 1;
587 if (windowRatio
<= vRatio
) {
588 // Limiting dimension is width:
589 cbWidth
= Math
.min(rc
.width
, 767);
590 cbHeight
= cbWidth
/ vRatio
;
593 // Limiting dimension is height:
594 cbHeight
= Math
.min(rc
.height
, 767);
595 cbWidth
= cbHeight
* vRatio
;
597 if (this.hasReserve
&& !this.isDiagram
) {
598 const sqSize
= cbWidth
/ this.size
.y
;
599 // NOTE: allocate space for reserves (up/down) even if they are empty
600 // Cannot use getReserveSquareSize() here, but sqSize is an upper bound.
601 if ((rc
.height
- cbHeight
) / 2 < sqSize
+ 5) {
602 cbHeight
= rc
.height
- 2 * (sqSize
+ 5);
603 cbWidth
= cbHeight
* vRatio
;
606 chessboard
.style
.width
= cbWidth
+ "px";
607 chessboard
.style
.height
= cbHeight
+ "px";
608 // Center chessboard:
609 const spaceLeft
= (rc
.width
- cbWidth
) / 2,
610 spaceTop
= (rc
.height
- cbHeight
) / 2;
611 chessboard
.style
.left
= spaceLeft
+ "px";
612 chessboard
.style
.top
= spaceTop
+ "px";
613 // Give sizes instead of recomputing them,
614 // because chessboard might not be drawn yet.
623 // Get SVG board (background, no pieces)
625 const flipped
= (this.playerColor
== 'b');
628 viewBox="0 0 ${10*this.size.y} ${10*this.size.x}"
629 class="chessboard_SVG">`;
630 for (let i
=0; i
< this.size
.x
; i
++) {
631 for (let j
=0; j
< this.size
.y
; j
++) {
632 const ii
= (flipped
? this.size
.x
- 1 - i : i
);
633 const jj
= (flipped
? this.size
.y
- 1 - j : j
);
634 let classes
= this.getSquareColorClass(ii
, jj
);
635 if (this.enlightened
&& !this.enlightened
[ii
][jj
])
636 classes
+= " in-shadow";
637 // NOTE: x / y reversed because coordinates system is reversed.
641 id="${this.coordsToId({x: ii, y: jj})}"
655 document
.getElementById(this.containerId
).querySelector(".chessboard");
657 r
= chessboard
.getBoundingClientRect();
658 const pieceWidth
= this.getPieceWidth(r
.width
);
659 const addPiece
= (i
, j
, arrName
, classes
) => {
660 this[arrName
][i
][j
] = document
.createElement("piece");
661 C
.AddClass_es(this[arrName
][i
][j
], classes
);
662 this[arrName
][i
][j
].style
.width
= pieceWidth
+ "px";
663 this[arrName
][i
][j
].style
.height
= pieceWidth
+ "px";
664 let [ip
, jp
] = this.getPixelPosition(i
, j
, r
);
665 // Translate coordinates to use chessboard as reference:
666 this[arrName
][i
][j
].style
.transform
=
667 `translate(${ip - r.x}px,${jp - r.y}px)`;
668 chessboard
.appendChild(this[arrName
][i
][j
]);
670 const conditionalReset
= (arrName
) => {
672 // Refreshing: delete old pieces first. This isn't necessary,
673 // but simpler (this method isn't called many times)
674 for (let i
=0; i
<this.size
.x
; i
++) {
675 for (let j
=0; j
<this.size
.y
; j
++) {
676 if (this[arrName
][i
][j
]) {
677 this[arrName
][i
][j
].remove();
678 this[arrName
][i
][j
] = null;
684 this[arrName
] = ArrayFun
.init(this.size
.x
, this.size
.y
, null);
685 if (arrName
== "d_pieces")
686 this.marks
.forEach(([i
, j
]) => addPiece(i
, j
, arrName
, "mark"));
689 conditionalReset("d_pieces");
690 conditionalReset("g_pieces");
691 for (let i
=0; i
< this.size
.x
; i
++) {
692 for (let j
=0; j
< this.size
.y
; j
++) {
693 if (this.board
[i
][j
] != "") {
694 const color
= this.getColor(i
, j
);
695 const piece
= this.getPiece(i
, j
);
696 addPiece(i
, j
, "g_pieces", this.pieces(color
, i
, j
)[piece
]["class"]);
697 this.g_pieces
[i
][j
].classList
.add(C
.GetColorClass(color
));
698 if (this.enlightened
&& !this.enlightened
[i
][j
])
699 this.g_pieces
[i
][j
].classList
.add("hidden");
701 if (this.marks
&& this.d_pieces
[i
][j
]) {
702 let classes
= ["mark"];
703 if (this.board
[i
][j
] != "")
704 classes
.push("transparent");
705 addPiece(i
, j
, "d_pieces", classes
);
709 if (this.hasReserve
&& !this.isDiagram
)
710 this.re_drawReserve(['w', 'b'], r
);
713 // NOTE: assume this.reserve != null
714 re_drawReserve(colors
, r
) {
716 // Remove (old) reserve pieces
717 for (let c
of colors
) {
718 Object
.keys(this.r_pieces
[c
]).forEach(p
=> {
719 this.r_pieces
[c
][p
].remove();
720 delete this.r_pieces
[c
][p
];
721 const numId
= this.getReserveNumId(c
, p
);
722 document
.getElementById(numId
).remove();
727 this.r_pieces
= { w: {}, b: {} };
728 let container
= document
.getElementById(this.containerId
);
730 r
= container
.querySelector(".chessboard").getBoundingClientRect();
731 for (let c
of colors
) {
732 let reservesDiv
= document
.getElementById("reserves_" + c
);
734 reservesDiv
.remove();
735 if (!this.reserve
[c
])
737 const nbR
= this.getNbReservePieces(c
);
740 const sqResSize
= this.getReserveSquareSize(r
.width
, nbR
);
742 const vShift
= (c
== this.playerColor
? r
.height
+ 5 : -sqResSize
- 5);
743 const [i0
, j0
] = [r
.x
, r
.y
+ vShift
];
744 let rcontainer
= document
.createElement("div");
745 rcontainer
.id
= "reserves_" + c
;
746 rcontainer
.classList
.add("reserves");
747 rcontainer
.style
.left
= i0
+ "px";
748 rcontainer
.style
.top
= j0
+ "px";
749 // NOTE: +1 fix display bug on Firefox at least
750 rcontainer
.style
.width
= (nbR
* sqResSize
+ 1) + "px";
751 rcontainer
.style
.height
= sqResSize
+ "px";
752 container
.appendChild(rcontainer
);
753 for (let p
of Object
.keys(this.reserve
[c
])) {
754 if (this.reserve
[c
][p
] == 0)
756 let r_cell
= document
.createElement("div");
757 r_cell
.id
= this.coordsToId({x: c
, y: p
});
758 r_cell
.classList
.add("reserve-cell");
759 r_cell
.style
.width
= sqResSize
+ "px";
760 r_cell
.style
.height
= sqResSize
+ "px";
761 rcontainer
.appendChild(r_cell
);
762 let piece
= document
.createElement("piece");
763 C
.AddClass_es(piece
, this.pieces(c
, c
, p
)[p
]["class"]);
764 piece
.classList
.add(C
.GetColorClass(c
));
765 piece
.style
.width
= "100%";
766 piece
.style
.height
= "100%";
767 this.r_pieces
[c
][p
] = piece
;
768 r_cell
.appendChild(piece
);
769 let number
= document
.createElement("div");
770 number
.textContent
= this.reserve
[c
][p
];
771 number
.classList
.add("reserve-num");
772 number
.id
= this.getReserveNumId(c
, p
);
773 const fontSize
= "1.3em";
774 number
.style
.fontSize
= fontSize
;
775 number
.style
.fontSize
= fontSize
;
776 r_cell
.appendChild(number
);
782 updateReserve(color
, piece
, count
) {
783 if (this.options
["cannibal"] && C
.CannibalKings
[piece
])
784 piece
= "k"; //capturing cannibal king: back to king form
785 const oldCount
= this.reserve
[color
][piece
];
786 this.reserve
[color
][piece
] = count
;
787 // Redrawing is much easier if count==0
788 if ([oldCount
, count
].includes(0))
789 this.re_drawReserve([color
]);
791 const numId
= this.getReserveNumId(color
, piece
);
792 document
.getElementById(numId
).textContent
= count
;
796 // Resize board: no need to destroy/recreate pieces
798 const container
= document
.getElementById(this.containerId
);
799 let chessboard
= container
.querySelector(".chessboard");
800 const rc
= container
.getBoundingClientRect(),
801 r
= chessboard
.getBoundingClientRect();
802 const multFact
= (mode
== "up" ? 1.05 : 0.95);
803 let [newWidth
, newHeight
] = [multFact
* r
.width
, multFact
* r
.height
];
805 const vRatio
= this.size
.ratio
|| 1;
806 if (newWidth
> rc
.width
) {
808 newHeight
= newWidth
/ vRatio
;
810 if (newHeight
> rc
.height
) {
811 newHeight
= rc
.height
;
812 newWidth
= newHeight
* vRatio
;
814 chessboard
.style
.width
= newWidth
+ "px";
815 chessboard
.style
.height
= newHeight
+ "px";
816 const newX
= (rc
.width
- newWidth
) / 2;
817 chessboard
.style
.left
= newX
+ "px";
818 const newY
= (rc
.height
- newHeight
) / 2;
819 chessboard
.style
.top
= newY
+ "px";
820 const newR
= {x: newX
, y: newY
, width: newWidth
, height: newHeight
};
821 const pieceWidth
= this.getPieceWidth(newWidth
);
822 // NOTE: next "if" for variants which use squares filling
823 // instead of "physical", moving pieces
825 for (let i
=0; i
< this.size
.x
; i
++) {
826 for (let j
=0; j
< this.size
.y
; j
++) {
827 if (this.g_pieces
[i
][j
]) {
828 // NOTE: could also use CSS transform "scale"
829 this.g_pieces
[i
][j
].style
.width
= pieceWidth
+ "px";
830 this.g_pieces
[i
][j
].style
.height
= pieceWidth
+ "px";
831 const [ip
, jp
] = this.getPixelPosition(i
, j
, newR
);
832 // Translate coordinates to use chessboard as reference:
833 this.g_pieces
[i
][j
].style
.transform
=
834 `translate(${ip - newX}px,${jp - newY}px)`;
840 this.rescaleReserve(newR
);
844 for (let c
of ['w','b']) {
845 if (!this.reserve
[c
])
847 const nbR
= this.getNbReservePieces(c
);
850 // Resize container first
851 const sqResSize
= this.getReserveSquareSize(r
.width
, nbR
);
852 const vShift
= (c
== this.playerColor
? r
.height
+ 5 : -sqResSize
- 5);
853 const [i0
, j0
] = [r
.x
, r
.y
+ vShift
];
854 let rcontainer
= document
.getElementById("reserves_" + c
);
855 rcontainer
.style
.left
= i0
+ "px";
856 rcontainer
.style
.top
= j0
+ "px";
857 rcontainer
.style
.width
= (nbR
* sqResSize
+ 1) + "px";
858 rcontainer
.style
.height
= sqResSize
+ "px";
859 // And then reserve cells:
860 const rpieceWidth
= this.getReserveSquareSize(r
.width
, nbR
);
861 Object
.keys(this.reserve
[c
]).forEach(p
=> {
862 if (this.reserve
[c
][p
] == 0)
864 let r_cell
= document
.getElementById(this.coordsToId({x: c
, y: p
}));
865 r_cell
.style
.width
= sqResSize
+ "px";
866 r_cell
.style
.height
= sqResSize
+ "px";
871 // Return the absolute pixel coordinates given current position.
872 // Our coordinate system differs from CSS one (x <--> y).
873 // We return here the CSS coordinates (more useful).
874 getPixelPosition(i
, j
, r
) {
876 return [0, 0]; //piece vanishes
878 if (typeof i
== "string") {
879 // Reserves: need to know the rank of piece
880 const nbR
= this.getNbReservePieces(i
);
881 const rsqSize
= this.getReserveSquareSize(r
.width
, nbR
);
882 x
= this.getRankInReserve(i
, j
) * rsqSize
;
883 y
= (this.playerColor
== i
? y
= r
.height
+ 5 : - 5 - rsqSize
);
886 const sqSize
= r
.width
/ this.size
.y
;
887 const flipped
= (this.playerColor
== 'b');
888 x
= (flipped
? this.size
.y
- 1 - j : j
) * sqSize
;
889 y
= (flipped
? this.size
.x
- 1 - i : i
) * sqSize
;
891 return [r
.x
+ x
, r
.y
+ y
];
895 let container
= document
.getElementById(this.containerId
);
896 let chessboard
= container
.querySelector(".chessboard");
898 const getOffset
= e
=> {
901 return {x: e
.clientX
, y: e
.clientY
};
902 let touchLocation
= null;
903 if (e
.targetTouches
&& e
.targetTouches
.length
>= 1)
904 // Touch screen, dragstart
905 touchLocation
= e
.targetTouches
[0];
906 else if (e
.changedTouches
&& e
.changedTouches
.length
>= 1)
907 // Touch screen, dragend
908 touchLocation
= e
.changedTouches
[0];
910 return {x: touchLocation
.clientX
, y: touchLocation
.clientY
};
911 return {x: 0, y: 0}; //shouldn't reach here =)
914 const centerOnCursor
= (piece
, e
) => {
915 const centerShift
= this.getPieceWidth(r
.width
) / 2;
916 const offset
= getOffset(e
);
917 piece
.style
.left
= (offset
.x
- centerShift
) + "px";
918 piece
.style
.top
= (offset
.y
- centerShift
) + "px";
923 startPiece
, curPiece
= null,
925 const mousedown
= (e
) => {
926 // Disable zoom on smartphones:
927 if (e
.touches
&& e
.touches
.length
> 1)
929 r
= chessboard
.getBoundingClientRect();
930 pieceWidth
= this.getPieceWidth(r
.width
);
931 const cd
= this.idToCoords(e
.target
.id
);
933 const move = this.doClick(cd
);
935 this.buildMoveStack(move, r
);
936 else if (!this.clickOnly
) {
937 const [x
, y
] = Object
.values(cd
);
938 if (typeof x
!= "number")
939 startPiece
= this.r_pieces
[x
][y
];
941 startPiece
= this.g_pieces
[x
][y
];
942 if (startPiece
&& this.canIplay(x
, y
)) {
945 curPiece
= startPiece
.cloneNode();
946 curPiece
.style
.transform
= "none";
947 curPiece
.style
.zIndex
= 5;
948 curPiece
.style
.width
= pieceWidth
+ "px";
949 curPiece
.style
.height
= pieceWidth
+ "px";
950 centerOnCursor(curPiece
, e
);
951 container
.appendChild(curPiece
);
952 startPiece
.style
.opacity
= "0.4";
953 chessboard
.style
.cursor
= "none";
959 const mousemove
= (e
) => {
962 centerOnCursor(curPiece
, e
);
964 else if (e
.changedTouches
&& e
.changedTouches
.length
>= 1)
965 // Attempt to prevent horizontal swipe...
969 const mouseup
= (e
) => {
972 const [x
, y
] = [start
.x
, start
.y
];
975 chessboard
.style
.cursor
= "pointer";
976 startPiece
.style
.opacity
= "1";
977 const offset
= getOffset(e
);
978 const landingElt
= document
.elementFromPoint(offset
.x
, offset
.y
);
980 (landingElt
? this.idToCoords(landingElt
.id
) : undefined);
982 // NOTE: clearly suboptimal, but much easier, and not a big deal.
983 const potentialMoves
= this.getPotentialMovesFrom([x
, y
])
984 .filter(m
=> m
.end
.x
== cd
.x
&& m
.end
.y
== cd
.y
);
985 const moves
= this.filterValid(potentialMoves
);
986 if (moves
.length
>= 2)
987 this.showChoices(moves
, r
);
988 else if (moves
.length
== 1)
989 this.buildMoveStack(moves
[0], r
);
994 const resize
= (e
) => this.rescale(e
.deltaY
< 0 ? "up" : "down");
996 if ('onmousedown' in window
) {
997 this.mouseListeners
= [
998 {type: "mousedown", listener: mousedown
},
999 {type: "mousemove", listener: mousemove
},
1000 {type: "mouseup", listener: mouseup
},
1001 {type: "wheel", listener: resize
}
1003 this.mouseListeners
.forEach(ml
=> {
1004 document
.addEventListener(ml
.type
, ml
.listener
);
1007 if ('ontouchstart' in window
) {
1008 this.touchListeners
= [
1009 {type: "touchstart", listener: mousedown
},
1010 {type: "touchmove", listener: mousemove
},
1011 {type: "touchend", listener: mouseup
}
1013 this.touchListeners
.forEach(tl
=> {
1014 // https://stackoverflow.com/a/42509310/12660887
1015 document
.addEventListener(tl
.type
, tl
.listener
, {passive: false});
1018 // TODO: onpointerdown/move/up ? See reveal.js /controllers/touch.js
1022 let container
= document
.getElementById(this.containerId
);
1023 this.windowResizeObs
.unobserve(container
);
1025 return; //no listeners in this case
1026 if ('onmousedown' in window
) {
1027 this.mouseListeners
.forEach(ml
=> {
1028 document
.removeEventListener(ml
.type
, ml
.listener
);
1031 if ('ontouchstart' in window
) {
1032 this.touchListeners
.forEach(tl
=> {
1033 // https://stackoverflow.com/a/42509310/12660887
1034 document
.removeEventListener(tl
.type
, tl
.listener
);
1039 showChoices(moves
, r
) {
1040 let container
= document
.getElementById(this.containerId
);
1041 let chessboard
= container
.querySelector(".chessboard");
1042 let choices
= document
.createElement("div");
1043 choices
.id
= "choices";
1045 r
= chessboard
.getBoundingClientRect();
1046 choices
.style
.width
= r
.width
+ "px";
1047 choices
.style
.height
= r
.height
+ "px";
1048 choices
.style
.left
= r
.x
+ "px";
1049 choices
.style
.top
= r
.y
+ "px";
1050 chessboard
.style
.opacity
= "0.5";
1051 container
.appendChild(choices
);
1052 const squareWidth
= r
.width
/ this.size
.y
;
1053 const firstUpLeft
= (r
.width
- (moves
.length
* squareWidth
)) / 2;
1054 const firstUpTop
= (r
.height
- squareWidth
) / 2;
1055 const color
= moves
[0].appear
[0].c
;
1056 const callback
= (m
) => {
1057 chessboard
.style
.opacity
= "1";
1058 container
.removeChild(choices
);
1059 this.buildMoveStack(m
, r
);
1061 for (let i
=0; i
< moves
.length
; i
++) {
1062 let choice
= document
.createElement("div");
1063 choice
.classList
.add("choice");
1064 choice
.style
.width
= squareWidth
+ "px";
1065 choice
.style
.height
= squareWidth
+ "px";
1066 choice
.style
.left
= (firstUpLeft
+ i
* squareWidth
) + "px";
1067 choice
.style
.top
= firstUpTop
+ "px";
1068 choice
.style
.backgroundColor
= "lightyellow";
1069 choice
.onclick
= () => callback(moves
[i
]);
1070 const piece
= document
.createElement("piece");
1071 const cdisp
= moves
[i
].choice
|| moves
[i
].appear
[0].p
;
1072 C
.AddClass_es(piece
,
1073 this.pieces(color
, moves
[i
].end
.x
, moves
[i
].end
.y
)[cdisp
]["class"]);
1074 piece
.classList
.add(C
.GetColorClass(color
));
1075 piece
.style
.width
= "100%";
1076 piece
.style
.height
= "100%";
1077 choice
.appendChild(piece
);
1078 choices
.appendChild(choice
);
1082 displayMessage(elt
, msg
, classe_s
, timeout
) {
1084 // Fixed element, e.g. for Dice Chess
1085 elt
.innerHTML
= msg
;
1087 // Temporary div (Chakart, Apocalypse...)
1088 let divMsg
= document
.createElement("div");
1089 C
.AddClass_es(divMsg
, classe_s
);
1090 divMsg
.innerHTML
= msg
;
1091 let container
= document
.getElementById(this.containerId
);
1092 container
.appendChild(divMsg
);
1093 setTimeout(() => container
.removeChild(divMsg
), timeout
);
1100 updateEnlightened() {
1101 this.oldEnlightened
= this.enlightened
;
1102 this.enlightened
= ArrayFun
.init(this.size
.x
, this.size
.y
, false);
1103 // Add pieces positions + all squares reachable by moves (includes Zen):
1104 for (let x
=0; x
<this.size
.x
; x
++) {
1105 for (let y
=0; y
<this.size
.y
; y
++) {
1106 if (this.board
[x
][y
] != "" && this.getColor(x
, y
) == this.playerColor
)
1108 this.enlightened
[x
][y
] = true;
1109 this.getPotentialMovesFrom([x
, y
]).forEach(m
=> {
1110 this.enlightened
[m
.end
.x
][m
.end
.y
] = true;
1116 this.enlightEnpassant();
1119 // Include square of the en-passant capturing square:
1120 enlightEnpassant() {
1121 // NOTE: shortcut, pawn has only one attack type, doesn't depend on square
1122 const steps
= this.pieces(this.playerColor
)["p"].attack
[0].steps
;
1123 for (let step
of steps
) {
1124 const x
= this.epSquare
.x
- step
[0],
1125 y
= this.getY(this.epSquare
.y
- step
[1]);
1127 this.onBoard(x
, y
) &&
1128 this.getColor(x
, y
) == this.playerColor
&&
1129 this.getPieceType(x
, y
) == "p"
1131 this.enlightened
[x
][this.epSquare
.y
] = true;
1137 // Apply diff this.enlightened --> oldEnlightened on board
1138 graphUpdateEnlightened() {
1140 document
.getElementById(this.containerId
).querySelector(".chessboard");
1141 const r
= chessboard
.getBoundingClientRect();
1142 const pieceWidth
= this.getPieceWidth(r
.width
);
1143 for (let x
=0; x
<this.size
.x
; x
++) {
1144 for (let y
=0; y
<this.size
.y
; y
++) {
1145 if (!this.enlightened
[x
][y
] && this.oldEnlightened
[x
][y
]) {
1146 let elt
= document
.getElementById(this.coordsToId({x: x
, y: y
}));
1147 elt
.classList
.add("in-shadow");
1148 if (this.g_pieces
[x
][y
])
1149 this.g_pieces
[x
][y
].classList
.add("hidden");
1151 else if (this.enlightened
[x
][y
] && !this.oldEnlightened
[x
][y
]) {
1152 let elt
= document
.getElementById(this.coordsToId({x: x
, y: y
}));
1153 elt
.classList
.remove("in-shadow");
1154 if (this.g_pieces
[x
][y
])
1155 this.g_pieces
[x
][y
].classList
.remove("hidden");
1168 ratio: 1 //for rectangular board = y / x (optional, 1 = default)
1172 // Color of thing on square (i,j). '' if square is empty
1174 if (typeof i
== "string")
1175 return i
; //reserves
1176 return this.board
[i
][j
].charAt(0);
1179 static GetColorClass(c
) {
1184 return "other-color"; //unidentified color
1187 // Piece on i,j. '' if square is empty
1189 if (typeof j
== "string")
1190 return j
; //reserves
1191 return this.board
[i
][j
].charAt(1);
1194 // Piece type on square (i,j)
1195 getPieceType(x
, y
, p
) {
1197 p
= this.getPiece(x
, y
);
1198 return this.pieces()[p
].moveas
|| p
;
1203 p
= this.getPiece(x
, y
);
1204 if (!this.options
["cannibal"])
1206 return !!C
.CannibalKings
[p
];
1209 // Get opponent color
1210 static GetOppCol(color
) {
1211 return (color
== "w" ? "b" : "w");
1214 // Is (x,y) on the chessboard?
1216 return (x
>= 0 && x
< this.size
.x
&&
1217 y
>= 0 && y
< this.size
.y
);
1220 // Am I allowed to move thing at square x,y ?
1222 return (this.playerColor
== this.turn
&& this.getColor(x
, y
) == this.turn
);
1225 ////////////////////////
1226 // PIECES SPECIFICATIONS
1228 pieces(color
, x
, y
) {
1229 const pawnShift
= (color
== "w" ? -1 : 1);
1230 // NOTE: jump 2 squares from first rank (pawns can be here sometimes)
1231 const initRank
= ((color
== 'w' && x
>= 6) || (color
== 'b' && x
<= 1));
1237 steps: [[pawnShift
, 0]],
1238 range: (initRank
? 2 : 1)
1243 steps: [[pawnShift
, 1], [pawnShift
, -1]],
1251 {steps: [[0, 1], [0, -1], [1, 0], [-1, 0]]}
1259 [1, 2], [1, -2], [-1, 2], [-1, -2],
1260 [2, 1], [-2, 1], [2, -1], [-2, -1]
1269 {steps: [[1, 1], [1, -1], [-1, 1], [-1, -1]]}
1277 [0, 1], [0, -1], [1, 0], [-1, 0],
1278 [1, 1], [1, -1], [-1, 1], [-1, -1]
1288 [0, 1], [0, -1], [1, 0], [-1, 0],
1289 [1, 1], [1, -1], [-1, 1], [-1, -1]
1296 '!': {"class": "king-pawn", moveas: "p"},
1297 '#': {"class": "king-rook", moveas: "r"},
1298 '$': {"class": "king-knight", moveas: "n"},
1299 '%': {"class": "king-bishop", moveas: "b"},
1300 '*': {"class": "king-queen", moveas: "q"}
1304 // NOTE: using special symbols to not interfere with variants' pieces codes
1305 static get CannibalKings() {
1316 static get CannibalKingCode() {
1327 //////////////////////////
1328 // MOVES GENERATION UTILS
1330 // For Cylinder: get Y coordinate
1332 if (!this.options
["cylinder"])
1334 let res
= y
% this.size
.y
;
1340 getSegments(curSeg
, segStart
, segEnd
) {
1341 if (curSeg
.length
== 0)
1343 let segments
= JSON
.parse(JSON
.stringify(curSeg
)); //not altering
1344 segments
.push([[segStart
[0], segStart
[1]], [segEnd
[0], segEnd
[1]]]);
1348 getStepSpec(color
, x
, y
, piece
) {
1349 return this.pieces(color
, x
, y
)[piece
|| this.getPieceType(x
, y
)];
1352 // Can thing on square1 capture thing on square2?
1353 canTake([x1
, y1
], [x2
, y2
]) {
1354 return this.getColor(x1
, y1
) !== this.getColor(x2
, y2
);
1357 canStepOver(i
, j
, p
) {
1358 // In some variants, objects on boards don't stop movement (Chakart)
1359 return this.board
[i
][j
] == "";
1362 canDrop([c
, p
], [i
, j
]) {
1364 this.board
[i
][j
] == "" &&
1365 (!this.enlightened
|| this.enlightened
[i
][j
]) &&
1368 (c
== 'w' && i
< this.size
.x
- 1) ||
1375 // (redefined in Baroque etc, where Madrasi condition doesn't make sense)
1376 isImmobilized([x
, y
]) {
1377 if (!this.options
["madrasi"])
1379 const color
= this.getColor(x
, y
);
1380 const oppCol
= C
.GetOppCol(color
);
1381 const piece
= this.getPieceType(x
, y
);
1382 const stepSpec
= this.getStepSpec(color
, x
, y
, piece
);
1383 const attacks
= stepSpec
.attack
|| stepSpec
.moves
;
1384 for (let a
of attacks
) {
1385 outerLoop: for (let step
of a
.steps
) {
1386 let [i
, j
] = [x
+ step
[0], y
+ step
[1]];
1387 let stepCounter
= 1;
1388 while (this.onBoard(i
, j
) && this.board
[i
][j
] == "") {
1389 if (a
.range
<= stepCounter
++)
1392 j
= this.getY(j
+ step
[1]);
1395 this.onBoard(i
, j
) &&
1396 this.getColor(i
, j
) == oppCol
&&
1397 this.getPieceType(i
, j
) == piece
1406 // Stop at the first capture found
1407 atLeastOneCapture(color
) {
1408 const oppCol
= C
.GetOppCol(color
);
1409 const allowed
= (sq1
, sq2
) => {
1411 // NOTE: canTake is reversed for Zen.
1412 // Generally ok because of the symmetry. TODO?
1413 this.canTake(sq1
, sq2
) &&
1415 [this.getBasicMove(sq1
, sq2
)]).length
>= 1
1418 for (let i
=0; i
<this.size
.x
; i
++) {
1419 for (let j
=0; j
<this.size
.y
; j
++) {
1420 if (this.getColor(i
, j
) == color
) {
1423 !this.options
["zen"] &&
1424 this.findDestSquares(
1429 segments: this.options
["cylinder"]
1437 this.options
["zen"] &&
1438 this.findCapturesOn(
1442 segments: this.options
["cylinder"]
1457 compatibleStep([x1
, y1
], [x2
, y2
], step
, range
) {
1458 const epsilon
= 1e-7; //arbitrary small value
1460 if (this.options
["cylinder"])
1461 Array
.prototype.push
.apply(shifts
, [-this.size
.y
, this.size
.y
]);
1462 for (let sh
of shifts
) {
1463 const rx
= (x2
- x1
) / step
[0],
1464 ry
= (y2
+ sh
- y1
) / step
[1];
1466 // Zero step but non-zero interval => impossible
1467 (!Number
.isFinite(rx
) && !Number
.isNaN(rx
)) ||
1468 (!Number
.isFinite(ry
) && !Number
.isNaN(ry
)) ||
1469 // Negative number of step (impossible)
1470 (rx
< 0 || ry
< 0) ||
1471 // Not the same number of steps in both directions:
1472 (!Number
.isNaN(rx
) && !Number
.isNaN(ry
) && Math
.abs(rx
- ry
) > epsilon
)
1476 let distance
= (Number
.isNaN(rx
) ? ry : rx
);
1477 if (Math
.abs(distance
- Math
.round(distance
)) > epsilon
)
1479 distance
= Math
.round(distance
); //in case of (numerical...)
1480 if (!range
|| range
>= distance
)
1486 ////////////////////
1489 getDropMovesFrom([c
, p
]) {
1490 // NOTE: by design, this.reserve[c][p] >= 1 on user click
1491 // (but not necessarily otherwise: atLeastOneMove() etc)
1492 if (this.reserve
[c
][p
] == 0)
1495 for (let i
=0; i
<this.size
.x
; i
++) {
1496 for (let j
=0; j
<this.size
.y
; j
++) {
1497 if (this.canDrop([c
, p
], [i
, j
])) {
1499 start: {x: c
, y: p
},
1501 appear: [new PiPo({x: i
, y: j
, c: c
, p: p
})],
1504 if (this.board
[i
][j
] != "") {
1505 mv
.vanish
.push(new PiPo({
1508 c: this.getColor(i
, j
),
1509 p: this.getPiece(i
, j
)
1519 // All possible moves from selected square
1520 getPotentialMovesFrom([x
, y
], color
) {
1521 if (this.subTurnTeleport
== 2)
1523 if (typeof x
== "string")
1524 return this.getDropMovesFrom([x
, y
]);
1525 if (this.isImmobilized([x
, y
]))
1527 const piece
= this.getPieceType(x
, y
);
1528 let moves
= this.getPotentialMovesOf(piece
, [x
, y
]);
1529 if (piece
== "p" && this.hasEnpassant
&& this.epSquare
)
1530 Array
.prototype.push
.apply(moves
, this.getEnpassantCaptures([x
, y
]));
1532 this.isKing(0, 0, piece
) && this.hasCastle
&&
1533 this.castleFlags
[color
|| this.turn
].some(v
=> v
< this.size
.y
)
1535 Array
.prototype.push
.apply(moves
, this.getCastleMoves([x
, y
]));
1537 return this.postProcessPotentialMoves(moves
);
1540 postProcessPotentialMoves(moves
) {
1541 if (moves
.length
== 0)
1543 const color
= this.getColor(moves
[0].start
.x
, moves
[0].start
.y
);
1544 const oppCol
= C
.GetOppCol(color
);
1546 if (this.options
["capture"] && this.atLeastOneCapture(color
))
1547 moves
= this.capturePostProcess(moves
, oppCol
);
1549 if (this.options
["atomic"])
1550 moves
= this.atomicPostProcess(moves
, color
, oppCol
);
1554 this.getPieceType(moves
[0].start
.x
, moves
[0].start
.y
) == "p"
1556 moves
= this.pawnPostProcess(moves
, color
, oppCol
);
1559 if (this.options
["cannibal"] && this.options
["rifle"])
1560 // In this case a rifle-capture from last rank may promote a pawn
1561 moves
= this.riflePromotePostProcess(moves
, color
);
1566 capturePostProcess(moves
, oppCol
) {
1567 // Filter out non-capturing moves (not using m.vanish because of
1568 // self captures of Recycle and Teleport).
1569 return moves
.filter(m
=> {
1571 this.board
[m
.end
.x
][m
.end
.y
] != "" &&
1572 this.getColor(m
.end
.x
, m
.end
.y
) == oppCol
1577 atomicPostProcess(moves
, color
, oppCol
) {
1578 moves
.forEach(m
=> {
1580 this.board
[m
.end
.x
][m
.end
.y
] != "" &&
1581 this.getColor(m
.end
.x
, m
.end
.y
) == oppCol
1594 let mNext
= new Move({
1600 for (let step
of steps
) {
1601 let x
= m
.end
.x
+ step
[0];
1602 let y
= this.getY(m
.end
.y
+ step
[1]);
1604 this.onBoard(x
, y
) &&
1605 this.board
[x
][y
] != "" &&
1606 (x
!= m
.start
.x
|| y
!= m
.start
.y
) &&
1607 this.getPieceType(x
, y
) != "p"
1611 p: this.getPiece(x
, y
),
1612 c: this.getColor(x
, y
),
1619 if (!this.options
["rifle"]) {
1620 // The moving piece also vanish
1621 mNext
.vanish
.unshift(
1626 p: this.getPiece(m
.start
.x
, m
.start
.y
)
1636 pawnPostProcess(moves
, color
, oppCol
) {
1638 const lastRank
= (color
== "w" ? 0 : this.size
.x
- 1);
1639 const initPiece
= this.getPiece(moves
[0].start
.x
, moves
[0].start
.y
);
1640 moves
.forEach(m
=> {
1641 const [x1
, y1
] = [m
.start
.x
, m
.start
.y
];
1642 const [x2
, y2
] = [m
.end
.x
, m
.end
.y
];
1643 const promotionOk
= (
1645 (!this.options
["rifle"] || this.board
[x2
][y2
] == "")
1648 return; //nothing to do
1649 if (this.options
["pawnfall"]) {
1655 this.options
["cannibal"] &&
1656 this.board
[x2
][y2
] != "" &&
1657 this.getColor(x2
, y2
) == oppCol
1659 finalPieces
= [this.getPieceType(x2
, y2
)];
1662 finalPieces
= this.pawnPromotions
;
1663 m
.appear
[0].p
= finalPieces
[0];
1664 if (initPiece
== "!") //cannibal king-pawn
1665 m
.appear
[0].p
= C
.CannibalKingCode
[finalPieces
[0]];
1666 for (let i
=1; i
<finalPieces
.length
; i
++) {
1667 let newMove
= JSON
.parse(JSON
.stringify(m
));
1668 const piece
= finalPieces
[i
];
1669 m
.appear
[0].p
= (initPiece
!= "!" ? piece : C
.CannibalKingCode
[piece
]);
1670 moreMoves
.push(newMove
);
1673 return moves
.concat(moreMoves
);
1676 riflePromotePostProcess(moves
, color
) {
1677 const lastRank
= (color
== "w" ? 0 : this.size
.x
- 1);
1679 moves
.forEach(m
=> {
1681 m
.start
.x
== lastRank
&&
1682 m
.appear
.length
>= 1 &&
1683 m
.appear
[0].p
== "p" &&
1684 m
.appear
[0].x
== m
.start
.x
&&
1685 m
.appear
[0].y
== m
.start
.y
1687 m
.appear
[0].p
= this.pawnPromotions
[0];
1688 for (let i
=1; i
<this.pawnPromotions
.length
; i
++) {
1689 let newMv
= JSON
.parse(JSON
.stringify(m
));
1690 newMv
.appear
[0].p
= this.pawnSpecs
.promotions
[i
];
1691 newMoves
.push(newMv
);
1695 return moves
.concat(newMoves
);
1698 // Generic method to find possible moves of "sliding or jumping" pieces
1699 getPotentialMovesOf(piece
, [x
, y
]) {
1700 const color
= this.getColor(x
, y
);
1701 const stepSpec
= this.getStepSpec(color
, x
, y
, piece
);
1703 if (stepSpec
.attack
) {
1704 squares
= this.findDestSquares(
1708 segments: this.options
["cylinder"],
1711 ([i1
, j1
], [i2
, j2
]) => {
1713 (!this.options
["zen"] || this.isKing(i2
, j2
)) &&
1714 this.canTake([i1
, j1
], [i2
, j2
])
1719 const noSpecials
= this.findDestSquares(
1722 moveOnly: !!stepSpec
.attack
|| this.options
["zen"],
1723 segments: this.options
["cylinder"],
1727 Array
.prototype.push
.apply(squares
, noSpecials
);
1728 if (this.options
["zen"]) {
1729 let zenCaptures
= this.findCapturesOn(
1731 {}, //byCol: default is ok
1732 ([i1
, j1
], [i2
, j2
]) =>
1733 !this.isKing(i1
, j1
) && this.canTake([i2
, j2
], [i1
, j1
])
1735 // Technical step: segments (if any) are reversed
1736 if (this.options
["cylinder"]) {
1737 zenCaptures
.forEach(z
=> {
1738 z
.segments
= z
.segments
.reverse().map(s
=> s
.reverse())
1741 Array
.prototype.push
.apply(squares
, zenCaptures
);
1744 this.options
["recycle"] ||
1745 (this.options
["teleport"] && this.subTurnTeleport
== 1)
1747 const selfCaptures
= this.findDestSquares(
1751 segments: this.options
["cylinder"],
1754 ([i1
, j1
], [i2
, j2
]) =>
1755 this.getColor(i2
, j2
) == color
&& !this.isKing(i2
, j2
)
1757 Array
.prototype.push
.apply(squares
, selfCaptures
);
1759 return squares
.map(s
=> {
1760 let mv
= this.getBasicMove([x
, y
], s
.sq
);
1761 if (this.options
["cylinder"] && s
.segments
.length
>= 2)
1762 mv
.segments
= s
.segments
;
1767 findDestSquares([x
, y
], o
, allowed
) {
1769 allowed
= (sq1
, sq2
) => this.canTake(sq1
, sq2
);
1770 const apparentPiece
= this.getPiece(x
, y
); //how it looks
1772 // Next 3 for Cylinder mode: (unused if !o.segments)
1776 const addSquare
= ([i
, j
]) => {
1777 let elt
= {sq: [i
, j
]};
1779 elt
.segments
= this.getSegments(segments
, segStart
, end
);
1782 const exploreSteps
= (stepArray
) => {
1783 for (let s
of stepArray
) {
1784 outerLoop: for (let step
of s
.steps
) {
1789 let [i
, j
] = [x
, y
];
1790 let stepCounter
= 0;
1792 this.onBoard(i
, j
) &&
1793 ((i
== x
&& j
== y
) || this.canStepOver(i
, j
, apparentPiece
))
1795 if (!explored
[i
+ "." + j
] && (i
!= x
|| j
!= y
)) {
1796 explored
[i
+ "." + j
] = true;
1799 (o
.captureTarget
[0] == i
&& o
.captureTarget
[1] == j
)
1801 if (o
.one
&& !o
.attackOnly
)
1804 addSquare(!o
.captureTarget
? [i
, j
] : [x
, y
]);
1805 if (o
.captureTarget
)
1809 if (s
.range
<= stepCounter
++)
1811 const oldIJ
= [i
, j
];
1813 j
= this.getY(j
+ step
[1]);
1814 if (o
.segments
&& Math
.abs(j
- oldIJ
[1]) > 1) {
1815 // Boundary between segments (cylinder mode)
1816 segments
.push([[segStart
[0], segStart
[1]], oldIJ
]);
1820 if (!this.onBoard(i
, j
))
1822 const pieceIJ
= this.getPieceType(i
, j
);
1823 if (!explored
[i
+ "." + j
]) {
1824 explored
[i
+ "." + j
] = true;
1825 if (allowed([x
, y
], [i
, j
])) {
1826 if (o
.one
&& !o
.moveOnly
)
1829 addSquare(!o
.captureTarget
? [i
, j
] : [x
, y
]);
1832 o
.captureTarget
[0] == i
&& o
.captureTarget
[1] == j
1840 return undefined; //default, but let's explicit it
1842 if (o
.captureTarget
)
1843 return exploreSteps(o
.captureSteps
)
1846 o
.stepSpec
|| this.getStepSpec(this.getColor(x
, y
), x
, y
);
1848 if (!o
.attackOnly
|| !stepSpec
.attack
)
1849 outOne
= exploreSteps(stepSpec
.moves
);
1850 if (!outOne
&& !o
.moveOnly
&& !!stepSpec
.attack
) {
1851 o
.attackOnly
= true; //ok because o is always a temporary object
1852 outOne
= exploreSteps(stepSpec
.attack
);
1854 return (o
.one
? outOne : res
);
1858 // Search for enemy (or not) pieces attacking [x, y]
1859 findCapturesOn([x
, y
], o
, allowed
) {
1861 o
.byCol
= [C
.GetOppCol(this.getColor(x
, y
) || this.turn
)];
1863 for (let i
=0; i
<this.size
.x
; i
++) {
1864 for (let j
=0; j
<this.size
.y
; j
++) {
1865 const colIJ
= this.getColor(i
, j
);
1867 this.board
[i
][j
] != "" &&
1868 o
.byCol
.includes(colIJ
) &&
1869 !this.isImmobilized([i
, j
])
1871 const apparentPiece
= this.getPiece(i
, j
);
1872 // Quick check: does this potential attacker target x,y ?
1873 if (this.canStepOver(x
, y
, apparentPiece
))
1875 const stepSpec
= this.getStepSpec(colIJ
, i
, j
);
1876 const attacks
= stepSpec
.attack
|| stepSpec
.moves
;
1877 for (let a
of attacks
) {
1878 for (let s
of a
.steps
) {
1879 // Quick check: if step isn't compatible, don't even try
1880 if (!this.compatibleStep([i
, j
], [x
, y
], s
, a
.range
))
1882 // Finally verify that nothing stand in-between
1883 const out
= this.findDestSquares(
1886 captureTarget: [x
, y
],
1887 captureSteps: [{steps: [s
], range: a
.range
}],
1888 segments: o
.segments
,
1890 one: false //one and captureTarget are mutually exclusive
1904 return (o
.one
? false : res
);
1907 // Build a regular move from its initial and destination squares.
1908 // tr: transformation
1909 getBasicMove([sx
, sy
], [ex
, ey
], tr
) {
1910 const initColor
= this.getColor(sx
, sy
);
1911 const initPiece
= this.getPiece(sx
, sy
);
1912 const destColor
= (this.board
[ex
][ey
] != "" ? this.getColor(ex
, ey
) : "");
1916 start: {x: sx
, y: sy
},
1920 !this.options
["rifle"] ||
1921 this.board
[ex
][ey
] == "" ||
1922 destColor
== initColor
//Recycle, Teleport
1928 c: !!tr
? tr
.c : initColor
,
1929 p: !!tr
? tr
.p : initPiece
1941 if (this.board
[ex
][ey
] != "") {
1946 c: this.getColor(ex
, ey
),
1947 p: this.getPiece(ex
, ey
)
1950 if (this.options
["cannibal"] && destColor
!= initColor
) {
1951 const lastIdx
= mv
.vanish
.length
- 1; //think "Rifle+Cannibal"
1952 let trPiece
= mv
.vanish
[lastIdx
].p
;
1953 if (this.isKing(sx
, sy
))
1954 trPiece
= C
.CannibalKingCode
[trPiece
];
1955 if (mv
.appear
.length
>= 1)
1956 mv
.appear
[0].p
= trPiece
;
1957 else if (this.options
["rifle"]) {
1980 // En-passant square, if any
1981 getEpSquare(moveOrSquare
) {
1982 if (typeof moveOrSquare
=== "string") {
1983 const square
= moveOrSquare
;
1986 return C
.SquareToCoords(square
);
1988 // Argument is a move:
1989 const move = moveOrSquare
;
1990 const s
= move.start
,
1994 Math
.abs(s
.x
- e
.x
) == 2 &&
1995 // Next conditions for variants like Atomic or Rifle, Recycle...
1997 move.appear
.length
> 0 &&
1998 this.getPieceType(0, 0, move.appear
[0].p
) == 'p'
2002 move.vanish
.length
> 0 &&
2003 this.getPieceType(0, 0, move.vanish
[0].p
) == 'p'
2011 return undefined; //default
2014 // Special case of en-passant captures: treated separately
2015 getEnpassantCaptures([x
, y
]) {
2016 const color
= this.getColor(x
, y
);
2017 const shiftX
= (color
== 'w' ? -1 : 1);
2018 const oppCol
= C
.GetOppCol(color
);
2021 this.epSquare
.x
== x
+ shiftX
&&
2022 Math
.abs(this.getY(this.epSquare
.y
- y
)) == 1 &&
2023 // Doublemove (and Progressive?) guards:
2024 this.board
[this.epSquare
.x
][this.epSquare
.y
] == "" &&
2025 this.getColor(x
, this.epSquare
.y
) == oppCol
2027 const [epx
, epy
] = [this.epSquare
.x
, this.epSquare
.y
];
2028 this.board
[epx
][epy
] = oppCol
+ 'p';
2029 let enpassantMove
= this.getBasicMove([x
, y
], [epx
, epy
]);
2030 this.board
[epx
][epy
] = "";
2031 const lastIdx
= enpassantMove
.vanish
.length
- 1; //think Rifle
2032 enpassantMove
.vanish
[lastIdx
].x
= x
;
2033 return [enpassantMove
];
2038 getCastleMoves([x
, y
], finalSquares
, castleWith
) {
2039 const c
= this.getColor(x
, y
);
2042 const oppCol
= C
.GetOppCol(c
);
2046 finalSquares
|| [ [2, 3], [this.size
.y
- 2, this.size
.y
- 3] ];
2047 const castlingKing
= this.getPiece(x
, y
);
2048 castlingCheck: for (
2051 castleSide
++ //large, then small
2053 if (this.castleFlags
[c
][castleSide
] >= this.size
.y
)
2055 // If this code is reached, rook and king are on initial position
2057 // NOTE: in some variants this is not a rook
2058 const rookPos
= this.castleFlags
[c
][castleSide
];
2059 const castlingPiece
= this.getPiece(x
, rookPos
);
2061 this.board
[x
][rookPos
] == "" ||
2062 this.getColor(x
, rookPos
) != c
||
2063 (castleWith
&& !castleWith
.includes(castlingPiece
))
2065 // Rook is not here, or changed color (see Benedict)
2068 // Nothing on the path of the king ? (and no checks)
2069 const finDist
= finalSquares
[castleSide
][0] - y
;
2070 let step
= finDist
/ Math
.max(1, Math
.abs(finDist
));
2074 // NOTE: next weird test because underCheck() verification
2075 // will be executed in filterValid() later.
2077 i
!= finalSquares
[castleSide
][0] &&
2078 this.underCheck([x
, i
], oppCol
)
2082 this.board
[x
][i
] != "" &&
2083 // NOTE: next check is enough, because of chessboard constraints
2084 (this.getColor(x
, i
) != c
|| ![rookPos
, y
].includes(i
))
2087 continue castlingCheck
;
2090 } while (i
!= finalSquares
[castleSide
][0]);
2091 // Nothing on the path to the rook?
2092 step
= (castleSide
== 0 ? -1 : 1);
2093 for (i
= y
+ step
; i
!= rookPos
; i
+= step
) {
2094 if (this.board
[x
][i
] != "")
2095 continue castlingCheck
;
2098 // Nothing on final squares, except maybe king and castling rook?
2099 for (i
= 0; i
< 2; i
++) {
2101 finalSquares
[castleSide
][i
] != rookPos
&&
2102 this.board
[x
][finalSquares
[castleSide
][i
]] != "" &&
2104 finalSquares
[castleSide
][i
] != y
||
2105 this.getColor(x
, finalSquares
[castleSide
][i
]) != c
2108 continue castlingCheck
;
2112 // If this code is reached, castle is potentially valid
2118 y: finalSquares
[castleSide
][0],
2124 y: finalSquares
[castleSide
][1],
2130 // King might be initially disguised (Titan...)
2131 new PiPo({ x: x
, y: y
, p: castlingKing
, c: c
}),
2132 new PiPo({ x: x
, y: rookPos
, p: castlingPiece
, c: c
})
2135 Math
.abs(y
- rookPos
) <= 2
2136 ? {x: x
, y: rookPos
}
2137 : {x: x
, y: y
+ 2 * (castleSide
== 0 ? -1 : 1)}
2145 ////////////////////
2148 // Is piece (or square) at given position attacked by "oppCol" ?
2149 underAttack([x
, y
], oppCol
) {
2150 // An empty square is considered as king,
2151 // since it's used only in getCastleMoves (TODO?)
2152 const king
= this.board
[x
][y
] == "" || this.isKing(x
, y
);
2155 (!this.options
["zen"] || king
) &&
2156 this.findCapturesOn(
2160 segments: this.options
["cylinder"],
2167 (!!this.options
["zen"] && !king
) &&
2168 this.findDestSquares(
2172 segments: this.options
["cylinder"],
2175 ([i1
, j1
], [i2
, j2
]) => this.getColor(i2
, j2
) == oppCol
2181 // Argument is (very generally) an array of squares (= arrays)
2182 underCheck(square_s
, oppCol
) {
2183 if (this.options
["taking"] || this.options
["dark"])
2185 if (!Array
.isArray(square_s
[0]))
2186 square_s
= [square_s
];
2187 return square_s
.some(sq
=> this.underAttack(sq
, oppCol
));
2190 // Scan board for king(s)
2191 searchKingPos(color
) {
2193 for (let i
=0; i
< this.size
.x
; i
++) {
2194 for (let j
=0; j
< this.size
.y
; j
++) {
2195 if (this.getColor(i
, j
) == color
&& this.isKing(i
, j
))
2202 // 'color' arg because some variants (e.g. Refusal) check opponent moves
2203 filterValid(moves
, color
) {
2206 const oppCol
= C
.GetOppCol(color
);
2207 let kingPos
= this.searchKingPos(color
);
2208 let filtered
= {}; //avoid re-checking similar moves (promotions...)
2209 return moves
.filter(m
=> {
2210 const key
= m
.start
.x
+ m
.start
.y
+ '.' + m
.end
.x
+ m
.end
.y
;
2211 if (!filtered
[key
]) {
2212 this.playOnBoard(m
);
2213 let newKingPP
= null,
2215 res
= true; //a priori valid
2217 m
.vanish
.find(v
=> this.isKing(0, 0, v
.p
) && v
.c
== color
);
2219 // Search king in appear array:
2221 m
.appear
.find(a
=> this.isKing(0, 0, a
.p
) && a
.c
== color
);
2223 sqIdx
= kingPos
.findIndex(kp
=>
2224 kp
[0] == oldKingPP
.x
&& kp
[1] == oldKingPP
.y
);
2225 kingPos
[sqIdx
] = [newKingPP
.x
, newKingPP
.y
];
2228 res
= false; //king vanished
2230 res
&&= !this.underCheck(kingPos
, oppCol
);
2231 if (oldKingPP
&& newKingPP
)
2232 kingPos
[sqIdx
] = [oldKingPP
.x
, oldKingPP
.y
];
2233 this.undoOnBoard(m
);
2234 filtered
[key
] = res
;
2237 return filtered
[key
];
2244 // Apply a move on board
2246 for (let psq
of move.vanish
)
2247 this.board
[psq
.x
][psq
.y
] = "";
2248 for (let psq
of move.appear
)
2249 this.board
[psq
.x
][psq
.y
] = psq
.c
+ psq
.p
;
2251 // Un-apply the played move
2253 for (let psq
of move.appear
)
2254 this.board
[psq
.x
][psq
.y
] = "";
2255 for (let psq
of move.vanish
)
2256 this.board
[psq
.x
][psq
.y
] = psq
.c
+ psq
.p
;
2259 updateCastleFlags(move) {
2260 // Update castling flags if start or arrive from/at rook/king locations
2261 move.appear
.concat(move.vanish
).forEach(psq
=> {
2262 if (this.isKing(0, 0, psq
.p
))
2263 this.castleFlags
[psq
.c
] = [this.size
.y
, this.size
.y
];
2264 // NOTE: not "else if" because king can capture enemy rook...
2268 else if (psq
.x
== this.size
.x
- 1)
2271 const fidx
= this.castleFlags
[c
].findIndex(f
=> f
== psq
.y
);
2273 this.castleFlags
[c
][fidx
] = this.size
.y
;
2281 // If flags already off, no need to re-check:
2282 Object
.values(this.castleFlags
).some(cvals
=>
2283 cvals
.some(val
=> val
< this.size
.y
))
2285 this.updateCastleFlags(move);
2287 if (this.options
["crazyhouse"]) {
2288 move.vanish
.forEach(v
=> {
2289 const square
= C
.CoordsToSquare({x: v
.x
, y: v
.y
});
2290 if (this.ispawn
[square
])
2291 delete this.ispawn
[square
];
2293 if (move.appear
.length
> 0 && move.vanish
.length
> 0) {
2294 // Assumption: something is moving
2295 const initSquare
= C
.CoordsToSquare(move.start
);
2296 const destSquare
= C
.CoordsToSquare(move.end
);
2298 this.ispawn
[initSquare
] ||
2299 (move.vanish
[0].p
== 'p' && move.appear
[0].p
!= 'p')
2301 this.ispawn
[destSquare
] = true;
2304 this.ispawn
[destSquare
] &&
2305 this.getColor(move.end
.x
, move.end
.y
) != move.vanish
[0].c
2307 move.vanish
[1].p
= 'p';
2308 delete this.ispawn
[destSquare
];
2312 const minSize
= Math
.min(move.appear
.length
, move.vanish
.length
);
2315 // Warning; atomic pawn removal isn't a capture
2316 (!this.options
["atomic"] || !this.rempawn
|| this.movesCount
>= 1)
2318 const color
= this.turn
;
2319 for (let i
=minSize
; i
<move.appear
.length
; i
++) {
2320 // Something appears = dropped on board (some exceptions, Chakart...)
2321 if (move.appear
[i
].c
== color
) {
2322 const piece
= move.appear
[i
].p
;
2323 this.updateReserve(color
, piece
, this.reserve
[color
][piece
] - 1);
2326 for (let i
=minSize
; i
<move.vanish
.length
; i
++) {
2327 // Something vanish: add to reserve except if recycle & opponent
2329 this.options
["crazyhouse"] ||
2330 (this.options
["recycle"] && move.vanish
[i
].c
== color
)
2332 const piece
= move.vanish
[i
].p
;
2333 this.updateReserve(color
, piece
, this.reserve
[color
][piece
] + 1);
2341 if (this.hasEnpassant
)
2342 this.epSquare
= this.getEpSquare(move);
2343 this.playOnBoard(move);
2344 this.postPlay(move);
2348 const color
= this.turn
;
2349 if (this.options
["dark"])
2350 this.updateEnlightened();
2351 if (this.options
["teleport"]) {
2353 this.subTurnTeleport
== 1 &&
2354 move.vanish
.length
> move.appear
.length
&&
2355 move.vanish
[1].c
== color
2357 const v
= move.vanish
[move.vanish
.length
- 1];
2358 this.captured
= {x: v
.x
, y: v
.y
, c: v
.c
, p: v
.p
};
2359 this.subTurnTeleport
= 2;
2362 this.subTurnTeleport
= 1;
2363 this.captured
= null;
2365 if (this.isLastMove(move)) {
2366 this.turn
= C
.GetOppCol(color
);
2370 else if (!move.next
)
2377 const color
= this.turn
;
2378 const oppKingPos
= this.searchKingPos(C
.GetOppCol(color
));
2379 if (oppKingPos
.length
== 0 || this.underCheck(oppKingPos
, color
))
2383 !this.options
["balance"] ||
2384 ![1, 2].includes(this.movesCount
) ||
2389 !this.options
["doublemove"] ||
2390 this.movesCount
== 0 ||
2395 !this.options
["progressive"] ||
2396 this.subTurn
== this.movesCount
+ 1
2401 // "Stop at the first move found"
2402 atLeastOneMove(color
) {
2403 for (let i
= 0; i
< this.size
.x
; i
++) {
2404 for (let j
= 0; j
< this.size
.y
; j
++) {
2405 if (this.board
[i
][j
] != "" && this.getColor(i
, j
) == color
) {
2406 // NOTE: in fact searching for all potential moves from i,j.
2407 // I don't believe this is an issue, for now at least.
2408 const moves
= this.getPotentialMovesFrom([i
, j
]);
2409 if (moves
.some(m
=> this.filterValid([m
]).length
>= 1))
2414 if (this.hasReserve
&& this.reserve
[color
]) {
2415 for (let p
of Object
.keys(this.reserve
[color
])) {
2416 const moves
= this.getDropMovesFrom([color
, p
]);
2417 if (moves
.some(m
=> this.filterValid([m
]).length
>= 1))
2424 // What is the score ? (Interesting if game is over)
2425 getCurrentScore(move) {
2426 const color
= this.turn
;
2427 const oppCol
= C
.GetOppCol(color
);
2429 [color
]: this.searchKingPos(color
),
2430 [oppCol
]: this.searchKingPos(oppCol
)
2432 if (kingPos
[color
].length
== 0 && kingPos
[oppCol
].length
== 0)
2434 if (kingPos
[color
].length
== 0)
2435 return (color
== "w" ? "0-1" : "1-0");
2436 if (kingPos
[oppCol
].length
== 0)
2437 return (color
== "w" ? "1-0" : "0-1");
2438 if (this.atLeastOneMove(color
))
2440 // No valid move: stalemate or checkmate?
2441 if (!this.underCheck(kingPos
[color
], oppCol
))
2444 return (color
== "w" ? "0-1" : "1-0");
2447 playVisual(move, r
) {
2448 move.vanish
.forEach(v
=> {
2449 this.g_pieces
[v
.x
][v
.y
].remove();
2450 this.g_pieces
[v
.x
][v
.y
] = null;
2453 document
.getElementById(this.containerId
).querySelector(".chessboard");
2455 r
= chessboard
.getBoundingClientRect();
2456 const pieceWidth
= this.getPieceWidth(r
.width
);
2457 move.appear
.forEach(a
=> {
2458 this.g_pieces
[a
.x
][a
.y
] = document
.createElement("piece");
2459 C
.AddClass_es(this.g_pieces
[a
.x
][a
.y
],
2460 this.pieces(a
.c
, a
.x
, a
.y
)[a
.p
]["class"]);
2461 this.g_pieces
[a
.x
][a
.y
].classList
.add(C
.GetColorClass(a
.c
));
2462 this.g_pieces
[a
.x
][a
.y
].style
.width
= pieceWidth
+ "px";
2463 this.g_pieces
[a
.x
][a
.y
].style
.height
= pieceWidth
+ "px";
2464 const [ip
, jp
] = this.getPixelPosition(a
.x
, a
.y
, r
);
2465 // Translate coordinates to use chessboard as reference:
2466 this.g_pieces
[a
.x
][a
.y
].style
.transform
=
2467 `translate(${ip - r.x}px,${jp - r.y}px)`;
2468 if (this.enlightened
&& !this.enlightened
[a
.x
][a
.y
])
2469 this.g_pieces
[a
.x
][a
.y
].classList
.add("hidden");
2470 chessboard
.appendChild(this.g_pieces
[a
.x
][a
.y
]);
2472 if (this.options
["dark"])
2473 this.graphUpdateEnlightened();
2476 // TODO: send stack receive stack, or allow incremental? (good/bad points)
2477 buildMoveStack(move, r
) {
2478 this.moveStack
.push(move);
2479 this.computeNextMove(move);
2481 const newTurn
= this.turn
;
2482 if (this.moveStack
.length
== 1 && !this.hideMoves
)
2483 this.playVisual(move, r
);
2487 board: JSON
.parse(JSON
.stringify(this.board
)) //easier
2489 this.buildMoveStack(move.next
, r
);
2492 if (this.moveStack
.length
== 1) {
2493 // Usual case (one normal move)
2494 this.afterPlay(this.moveStack
, newTurn
, {send: true, res: true});
2498 this.afterPlay(this.moveStack
, newTurn
, {send: true, res: false});
2499 this.re_initFromFen(this.gameState
.fen
, this.gameState
.board
);
2500 this.playReceivedMove(this.moveStack
.slice(1), () => {
2501 this.afterPlay(this.moveStack
, newTurn
, {send: false, res: true});
2508 // Implemented in variants using (automatic) moveStack
2509 computeNextMove(move) {}
2511 animateMoving(start
, end
, drag
, segments
, cb
) {
2512 let initPiece
= this.getDomPiece(start
.x
, start
.y
);
2513 // NOTE: cloning often not required, but light enough, and simpler
2514 let movingPiece
= initPiece
.cloneNode();
2515 initPiece
.style
.opacity
= "0";
2517 document
.getElementById(this.containerId
)
2518 const r
= container
.querySelector(".chessboard").getBoundingClientRect();
2519 if (typeof start
.x
== "string") {
2520 // Need to bound width/height (was 100% for reserve pieces)
2521 const pieceWidth
= this.getPieceWidth(r
.width
);
2522 movingPiece
.style
.width
= pieceWidth
+ "px";
2523 movingPiece
.style
.height
= pieceWidth
+ "px";
2525 const maxDist
= this.getMaxDistance(r
);
2526 const apparentColor
= this.getColor(start
.x
, start
.y
);
2527 const pieces
= this.pieces(apparentColor
, start
.x
, start
.y
);
2529 const startCode
= this.getPiece(start
.x
, start
.y
);
2530 C
.RemoveClass_es(movingPiece
, pieces
[startCode
]["class"]);
2531 C
.AddClass_es(movingPiece
, pieces
[drag
.p
]["class"]);
2532 if (apparentColor
!= drag
.c
) {
2533 movingPiece
.classList
.remove(C
.GetColorClass(apparentColor
));
2534 movingPiece
.classList
.add(C
.GetColorClass(drag
.c
));
2537 container
.appendChild(movingPiece
);
2538 const animateSegment
= (index
, cb
) => {
2539 // NOTE: move.drag could be generalized per-segment (usage?)
2540 const [i1
, j1
] = segments
[index
][0];
2541 const [i2
, j2
] = segments
[index
][1];
2542 const dep
= this.getPixelPosition(i1
, j1
, r
);
2543 const arr
= this.getPixelPosition(i2
, j2
, r
);
2544 movingPiece
.style
.transitionDuration
= "0s";
2545 movingPiece
.style
.transform
= `translate(${dep[0]}px, ${dep[1]}px)`;
2547 Math
.sqrt((arr
[0] - dep
[0]) ** 2 + (arr
[1] - dep
[1]) ** 2);
2548 const duration
= 0.2 + (distance
/ maxDist
) * 0.3;
2549 // TODO: unclear why we need this new delay below:
2551 movingPiece
.style
.transitionDuration
= duration
+ "s";
2552 // movingPiece is child of container: no need to adjust coordinates
2553 movingPiece
.style
.transform
= `translate(${arr[0]}px, ${arr[1]}px)`;
2554 setTimeout(cb
, duration
* 1000);
2558 const animateSegmentCallback
= () => {
2559 if (index
< segments
.length
)
2560 animateSegment(index
++, animateSegmentCallback
);
2562 movingPiece
.remove();
2563 initPiece
.style
.opacity
= "1";
2567 animateSegmentCallback();
2570 // Input array of objects with at least fields x,y (e.g. PiPo)
2571 animateFading(arr
, cb
) {
2572 const animLength
= 350; //TODO: 350ms? More? Less?
2574 let fadingPiece
= this.getDomPiece(v
.x
, v
.y
);
2575 fadingPiece
.style
.transitionDuration
= (animLength
/ 1000) + "s";
2576 fadingPiece
.style
.opacity
= "0";
2578 setTimeout(cb
, animLength
);
2581 animate(move, callback
) {
2582 if (this.noAnimate
|| move.noAnimate
) {
2586 let segments
= move.segments
;
2588 segments
= [ [[move.start
.x
, move.start
.y
], [move.end
.x
, move.end
.y
]] ];
2589 let targetObj
= new TargetObj(callback
);
2590 if (move.start
.x
!= move.end
.x
|| move.start
.y
!= move.end
.y
) {
2592 this.animateMoving(move.start
, move.end
, move.drag
, segments
,
2593 () => targetObj
.increment());
2595 if (move.vanish
.length
> move.appear
.length
) {
2596 const arr
= move.vanish
.slice(move.appear
.length
)
2597 // Ignore disappearing pieces hidden by some appearing ones:
2598 .filter(v
=> move.appear
.every(a
=> a
.x
!= v
.x
|| a
.y
!= v
.y
));
2599 if (arr
.length
> 0) {
2601 this.animateFading(arr
, () => targetObj
.increment());
2605 this.tryAnimateCastle(move, () => targetObj
.increment());
2607 this.customAnimate(move, segments
, () => targetObj
.increment());
2608 if (targetObj
.target
== 0)
2612 tryAnimateCastle(move, cb
) {
2615 move.vanish
.length
== 2 &&
2616 move.appear
.length
== 2 &&
2617 this.isKing(0, 0, move.vanish
[0].p
) &&
2618 this.isKing(0, 0, move.appear
[0].p
)
2620 const start
= {x: move.vanish
[1].x
, y: move.vanish
[1].y
},
2621 end
= {x: move.appear
[1].x
, y: move.appear
[1].y
};
2622 const segments
= [ [[start
.x
, start
.y
], [end
.x
, end
.y
]] ];
2623 this.animateMoving(start
, end
, null, segments
, cb
);
2629 // Potential other animations (e.g. for Suction variant)
2630 customAnimate(move, segments
, cb
) {
2631 return 0; //nb of targets
2634 launchAnimation(moves
, callback
) {
2635 if (this.hideMoves
) {
2636 moves
.forEach(m
=> this.play(m
));
2640 const r
= container
.querySelector(".chessboard").getBoundingClientRect();
2641 const animateRec
= i
=> {
2642 this.animate(moves
[i
], () => {
2643 this.play(moves
[i
]);
2644 this.playVisual(moves
[i
], r
);
2645 if (i
< moves
.length
- 1)
2646 setTimeout(() => animateRec(i
+1), 300);
2654 playReceivedMove(moves
, callback
) {
2655 // Delay if user wasn't focused:
2656 const checkDisplayThenAnimate
= (delay
) => {
2657 if (container
.style
.display
== "none") {
2658 alert("New move! Let's go back to game...");
2659 document
.getElementById("gameInfos").style
.display
= "none";
2660 container
.style
.display
= "block";
2661 setTimeout(() => this.launchAnimation(moves
, callback
), 700);
2664 setTimeout(() => this.launchAnimation(moves
, callback
), delay
|| 0);
2666 let container
= document
.getElementById(this.containerId
);
2667 if (document
.hidden
) {
2668 document
.onvisibilitychange
= () => {
2669 document
.onvisibilitychange
= undefined;
2670 checkDisplayThenAnimate(700);
2674 checkDisplayThenAnimate();