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 use click infos:
121 if (typeof coords
.x
!= "number")
122 return null; //click on reserves
124 this.options
["teleport"] && this.subTurnTeleport
== 2 &&
125 this.board
[coords
.x
][coords
.y
] == ""
128 start: {x: this.captured
.x
, y: this.captured
.y
},
139 res
.drag
= {c: this.captured
.c
, p: this.captured
.p
};
148 // 3a --> {x:3, y:10}
149 static SquareToCoords(sq
) {
150 return ArrayFun
.toObject(["x", "y"],
151 [0, 1].map(i
=> parseInt(sq
[i
], 36)));
154 // {x:11, y:12} --> bc
155 static CoordsToSquare(cd
) {
156 return Object
.values(cd
).map(c
=> c
.toString(36)).join("");
160 if (typeof cd
.x
== "number") {
162 `${this.containerId}|sq-${cd.x.toString(36)}-${cd.y.toString(36)}`
166 return `${this.containerId}|rsq-${cd.x}-${cd.y}`;
169 idToCoords(targetId
) {
171 return null; //outside page, maybe...
172 const idParts
= targetId
.split('|'); //prefix|sq-2-3 (start at 0 => 3,4)
174 idParts
.length
< 2 ||
175 idParts
[0] != this.containerId
||
176 !idParts
[1].match(/sq-[0-9a-zA-Z]-[0-9a-zA-Z]/)
180 const squares
= idParts
[1].split('-');
181 if (squares
[0] == "sq")
182 return {x: parseInt(squares
[1], 36), y: parseInt(squares
[2], 36)};
183 // squares[0] == "rsq" : reserve, 'c' + 'p' (letters color & piece)
184 return {x: squares
[1], y: squares
[2]};
190 // Turn "wb" into "B" (for FEN)
192 return (b
[0] == "w" ? b
[1].toUpperCase() : b
[1]);
195 // Turn "p" into "bp" (for board)
197 return (f
.charCodeAt(0) <= 90 ? "w" + f
.toLowerCase() : "b" + f
);
200 genRandInitFen(seed
) {
201 Random
.setSeed(seed
); //may be unused
202 let baseFen
= this.genRandInitBaseFen();
203 baseFen
.o
= Object
.assign({init: true}, baseFen
.o
);
204 const parts
= this.getPartFen(baseFen
.o
);
207 (Object
.keys(parts
).length
> 0 ? (" " + JSON
.stringify(parts
)) : "")
211 // Setup the initial random-or-not (asymmetric-or-not) position
212 genRandInitBaseFen() {
213 let fen
, flags
= "0707";
214 if (!this.options
.randomness
)
216 fen
= "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w 0";
220 let pieces
= {w: new Array(8), b: new Array(8)};
222 // Shuffle pieces on first (and last rank if randomness == 2)
223 for (let c
of ["w", "b"]) {
224 if (c
== 'b' && this.options
.randomness
== 1) {
225 pieces
['b'] = pieces
['w'];
229 let positions
= ArrayFun
.range(8);
230 // Get random squares for bishops
231 let randIndex
= 2 * Random
.randInt(4);
232 const bishop1Pos
= positions
[randIndex
];
233 // The second bishop must be on a square of different color
234 let randIndex_tmp
= 2 * Random
.randInt(4) + 1;
235 const bishop2Pos
= positions
[randIndex_tmp
];
236 // Remove chosen squares
237 positions
.splice(Math
.max(randIndex
, randIndex_tmp
), 1);
238 positions
.splice(Math
.min(randIndex
, randIndex_tmp
), 1);
239 // Get random squares for knights
240 randIndex
= Random
.randInt(6);
241 const knight1Pos
= positions
[randIndex
];
242 positions
.splice(randIndex
, 1);
243 randIndex
= Random
.randInt(5);
244 const knight2Pos
= positions
[randIndex
];
245 positions
.splice(randIndex
, 1);
246 // Get random square for queen
247 randIndex
= Random
.randInt(4);
248 const queenPos
= positions
[randIndex
];
249 positions
.splice(randIndex
, 1);
250 // Rooks and king positions are now fixed,
251 // because of the ordering rook-king-rook
252 const rook1Pos
= positions
[0];
253 const kingPos
= positions
[1];
254 const rook2Pos
= positions
[2];
255 // Finally put the shuffled pieces in the board array
256 pieces
[c
][rook1Pos
] = "r";
257 pieces
[c
][knight1Pos
] = "n";
258 pieces
[c
][bishop1Pos
] = "b";
259 pieces
[c
][queenPos
] = "q";
260 pieces
[c
][kingPos
] = "k";
261 pieces
[c
][bishop2Pos
] = "b";
262 pieces
[c
][knight2Pos
] = "n";
263 pieces
[c
][rook2Pos
] = "r";
264 flags
+= rook1Pos
.toString() + rook2Pos
.toString();
267 pieces
["b"].join("") +
268 "/pppppppp/8/8/8/8/PPPPPPPP/" +
269 pieces
["w"].join("").toUpperCase() +
273 return { fen: fen
, o: {flags: flags
} };
276 // "Parse" FEN: just return untransformed string data
278 const fenParts
= fen
.split(" ");
280 position: fenParts
[0],
282 movesCount: fenParts
[2]
284 if (fenParts
.length
> 3)
285 res
= Object
.assign(res
, JSON
.parse(fenParts
[3]));
289 // Return current fen (game state)
291 const parts
= this.getPartFen({});
294 (Object
.keys(parts
).length
> 0 ? (" " + JSON
.stringify(parts
)) : "")
299 return this.getPosition() + " " + this.turn
+ " " + this.movesCount
;
305 parts
["flags"] = o
.init
? o
.flags : this.getFlagsFen();
306 if (this.hasEnpassant
)
307 parts
["enpassant"] = o
.init
? "-" : this.getEnpassantFen();
308 if (this.hasReserveFen
)
309 parts
["reserve"] = this.getReserveFen(o
);
310 if (this.options
["crazyhouse"])
311 parts
["ispawn"] = this.getIspawnFen(o
);
315 static FenEmptySquares(count
) {
316 // if more than 9 consecutive free spaces, break the integer,
317 // otherwise FEN parsing will fail.
320 // Most boards of size < 18:
322 return "9" + (count
- 9);
324 return "99" + (count
- 18);
327 // Position part of the FEN string
330 for (let i
= 0; i
< this.size
.y
; i
++) {
332 for (let j
= 0; j
< this.size
.x
; j
++) {
333 if (this.board
[i
][j
] == "")
336 if (emptyCount
> 0) {
337 // Add empty squares in-between
338 position
+= C
.FenEmptySquares(emptyCount
);
341 position
+= this.board2fen(this.board
[i
][j
]);
346 position
+= C
.FenEmptySquares(emptyCount
);
347 if (i
< this.size
.y
- 1)
348 position
+= "/"; //separate rows
353 // Flags part of the FEN string
355 return ["w", "b"].map(c
=> {
356 return this.castleFlags
[c
].map(x
=> x
.toString(36)).join("");
360 // Enpassant part of the FEN string
364 return C
.CoordsToSquare(this.epSquare
);
369 return "000000000000";
371 ["w","b"].map(c
=> Object
.values(this.reserve
[c
]).join("")).join("")
377 // NOTE: cannot merge because this.ispawn doesn't exist yet
379 const squares
= Object
.keys(this.ispawn
);
380 if (squares
.length
== 0)
382 return squares
.join(",");
385 // Set flags from fen (castle: white a,h then black a,h)
388 w: [0, 1].map(i
=> parseInt(fenflags
.charAt(i
), 36)),
389 b: [2, 3].map(i
=> parseInt(fenflags
.charAt(i
), 36))
397 this.options
= o
.options
;
398 // Fill missing options (always the case if random challenge)
399 (V
.Options
.select
|| []).concat(V
.Options
.input
|| []).forEach(opt
=> {
400 if (this.options
[opt
.variable
] === undefined)
401 this.options
[opt
.variable
] = opt
.defaut
;
404 // This object will be used only for initial FEN generation
408 this.playerColor
= o
.color
;
409 this.afterPlay
= o
.afterPlay
; //trigger some actions after playing a move
410 this.containerId
= o
.element
;
411 this.isDiagram
= o
.diagram
;
412 this.marks
= o
.marks
;
416 o
.fen
= this.genRandInitFen(o
.seed
);
417 this.re_initFromFen(o
.fen
);
418 this.graphicalInit();
421 re_initFromFen(fen
, oldBoard
) {
422 const fenParsed
= this.parseFen(fen
);
423 this.board
= oldBoard
|| this.getBoard(fenParsed
.position
);
424 this.turn
= fenParsed
.turn
;
425 this.movesCount
= parseInt(fenParsed
.movesCount
, 10);
426 this.setOtherVariables(fenParsed
);
429 // Turn position fen into double array ["wb","wp","bk",...]
431 const rows
= position
.split("/");
432 let board
= ArrayFun
.init(this.size
.x
, this.size
.y
, "");
433 for (let i
= 0; i
< rows
.length
; i
++) {
435 for (let indexInRow
= 0; indexInRow
< rows
[i
].length
; indexInRow
++) {
436 const character
= rows
[i
][indexInRow
];
437 const num
= parseInt(character
, 10);
438 // If num is a number, just shift j:
441 // Else: something at position i,j
443 board
[i
][j
++] = this.fen2board(character
);
449 // Some additional variables from FEN (variant dependant)
450 setOtherVariables(fenParsed
) {
451 // Set flags and enpassant:
453 this.setFlags(fenParsed
.flags
);
454 if (this.hasEnpassant
)
455 this.epSquare
= this.getEpSquare(fenParsed
.enpassant
);
456 if (this.hasReserve
&& !this.isDiagram
)
457 this.initReserves(fenParsed
.reserve
);
458 if (this.options
["crazyhouse"])
459 this.initIspawn(fenParsed
.ispawn
);
460 if (this.options
["teleport"]) {
461 this.subTurnTeleport
= 1;
462 this.captured
= null;
464 if (this.options
["dark"]) {
465 // Setup enlightened: squares reachable by player side
466 this.enlightened
= ArrayFun
.init(this.size
.x
, this.size
.y
, false);
467 this.updateEnlightened();
469 this.subTurn
= 1; //may be unused
470 if (!this.moveStack
) //avoid resetting (unwanted)
474 // ordering as in pieces() p,r,n,b,q,k
475 initReserves(reserveStr
) {
476 const counts
= reserveStr
.split("").map(c
=> parseInt(c
, 36));
477 this.reserve
= { w: {}, b: {} };
478 const pieceName
= ['p', 'r', 'n', 'b', 'q', 'k'];
479 const L
= pieceName
.length
;
480 for (let i
of ArrayFun
.range(2 * L
)) {
482 this.reserve
['w'][pieceName
[i
]] = counts
[i
];
484 this.reserve
['b'][pieceName
[i
-L
]] = counts
[i
];
488 initIspawn(ispawnStr
) {
489 if (ispawnStr
!= "-")
490 this.ispawn
= ArrayFun
.toObject(ispawnStr
.split(","), true);
498 getPieceWidth(rwidth
) {
499 return (rwidth
/ this.size
.y
);
502 getReserveSquareSize(rwidth
, nbR
) {
503 const sqSize
= this.getPieceWidth(rwidth
);
504 return Math
.min(sqSize
, rwidth
/ nbR
);
507 getReserveNumId(color
, piece
) {
508 return `${this.containerId}|rnum-${color}${piece}`;
511 getNbReservePieces(color
) {
513 Object
.values(this.reserve
[color
]).reduce(
514 (oldV
,newV
) => oldV
+ (newV
> 0 ? 1 : 0), 0)
518 getRankInReserve(c
, p
) {
519 const pieces
= Object
.keys(this.pieces());
520 const lastIndex
= pieces
.findIndex(pp
=> pp
== p
)
521 let toTest
= pieces
.slice(0, lastIndex
);
522 return toTest
.reduce(
523 (oldV
,newV
) => oldV
+ (this.reserve
[c
][newV
] > 0 ? 1 : 0), 0);
526 static AddClass_es(piece
, class_es
) {
527 if (!Array
.isArray(class_es
))
528 class_es
= [class_es
];
529 class_es
.forEach(cl
=> {
530 piece
.classList
.add(cl
);
534 static RemoveClass_es(piece
, class_es
) {
535 if (!Array
.isArray(class_es
))
536 class_es
= [class_es
];
537 class_es
.forEach(cl
=> {
538 piece
.classList
.remove(cl
);
542 // Generally light square bottom-right
543 getSquareColorClass(x
, y
) {
544 return ((x
+y
) % 2 == 0 ? "light-square": "dark-square");
548 // Works for all rectangular boards:
549 return Math
.sqrt(r
.width
** 2 + r
.height
** 2);
553 return (typeof x
== "string" ? this.r_pieces : this.g_pieces
)[x
][y
];
560 const g_init
= () => {
561 this.re_drawBoardElements();
562 if (!this.isDiagram
&& !this.mouseListeners
&& !this.touchListeners
)
563 this.initMouseEvents();
565 let container
= document
.getElementById(this.containerId
);
566 this.windowResizeObs
= new ResizeObserver(g_init
);
567 this.windowResizeObs
.observe(container
);
570 re_drawBoardElements() {
571 const board
= this.getSvgChessboard();
572 const oppCol
= C
.GetOppCol(this.playerColor
);
573 const container
= document
.getElementById(this.containerId
);
574 const rc
= container
.getBoundingClientRect();
575 let chessboard
= container
.querySelector(".chessboard");
576 chessboard
.innerHTML
= "";
577 chessboard
.insertAdjacentHTML('beforeend', board
);
578 // Compare window ratio width / height to aspectRatio:
579 const windowRatio
= rc
.width
/ rc
.height
;
580 let cbWidth
, cbHeight
;
581 const vRatio
= this.size
.ratio
|| 1;
582 if (windowRatio
<= vRatio
) {
583 // Limiting dimension is width:
584 cbWidth
= Math
.min(rc
.width
, 767);
585 cbHeight
= cbWidth
/ vRatio
;
588 // Limiting dimension is height:
589 cbHeight
= Math
.min(rc
.height
, 767);
590 cbWidth
= cbHeight
* vRatio
;
592 if (this.hasReserve
&& !this.isDiagram
) {
593 const sqSize
= cbWidth
/ this.size
.y
;
594 // NOTE: allocate space for reserves (up/down) even if they are empty
595 // Cannot use getReserveSquareSize() here, but sqSize is an upper bound.
596 if ((rc
.height
- cbHeight
) / 2 < sqSize
+ 5) {
597 cbHeight
= rc
.height
- 2 * (sqSize
+ 5);
598 cbWidth
= cbHeight
* vRatio
;
601 chessboard
.style
.width
= cbWidth
+ "px";
602 chessboard
.style
.height
= cbHeight
+ "px";
603 // Center chessboard:
604 const spaceLeft
= (rc
.width
- cbWidth
) / 2,
605 spaceTop
= (rc
.height
- cbHeight
) / 2;
606 chessboard
.style
.left
= spaceLeft
+ "px";
607 chessboard
.style
.top
= spaceTop
+ "px";
608 // Give sizes instead of recomputing them,
609 // because chessboard might not be drawn yet.
618 // Get SVG board (background, no pieces)
620 const flipped
= (this.playerColor
== 'b');
623 viewBox="0 0 ${10*this.size.y} ${10*this.size.x}"
624 class="chessboard_SVG">`;
625 for (let i
=0; i
< this.size
.x
; i
++) {
626 for (let j
=0; j
< this.size
.y
; j
++) {
627 const ii
= (flipped
? this.size
.x
- 1 - i : i
);
628 const jj
= (flipped
? this.size
.y
- 1 - j : j
);
629 let classes
= this.getSquareColorClass(ii
, jj
);
630 if (this.enlightened
&& !this.enlightened
[ii
][jj
])
631 classes
+= " in-shadow";
632 // NOTE: x / y reversed because coordinates system is reversed.
636 id="${this.coordsToId({x: ii, y: jj})}"
650 document
.getElementById(this.containerId
).querySelector(".chessboard");
652 r
= chessboard
.getBoundingClientRect();
653 const pieceWidth
= this.getPieceWidth(r
.width
);
654 const addPiece
= (i
, j
, arrName
, classes
) => {
655 this[arrName
][i
][j
] = document
.createElement("piece");
656 C
.AddClass_es(this[arrName
][i
][j
], classes
);
657 this[arrName
][i
][j
].style
.width
= pieceWidth
+ "px";
658 this[arrName
][i
][j
].style
.height
= pieceWidth
+ "px";
659 let [ip
, jp
] = this.getPixelPosition(i
, j
, r
);
660 // Translate coordinates to use chessboard as reference:
661 this[arrName
][i
][j
].style
.transform
=
662 `translate(${ip - r.x}px,${jp - r.y}px)`;
663 chessboard
.appendChild(this[arrName
][i
][j
]);
665 const conditionalReset
= (arrName
) => {
667 // Refreshing: delete old pieces first. This isn't necessary,
668 // but simpler (this method isn't called many times)
669 for (let i
=0; i
<this.size
.x
; i
++) {
670 for (let j
=0; j
<this.size
.y
; j
++) {
671 if (this[arrName
][i
][j
]) {
672 this[arrName
][i
][j
].remove();
673 this[arrName
][i
][j
] = null;
679 this[arrName
] = ArrayFun
.init(this.size
.x
, this.size
.y
, null);
680 if (arrName
== "d_pieces")
681 this.marks
.forEach(([i
, j
]) => addPiece(i
, j
, arrName
, "mark"));
684 conditionalReset("d_pieces");
685 conditionalReset("g_pieces");
686 for (let i
=0; i
< this.size
.x
; i
++) {
687 for (let j
=0; j
< this.size
.y
; j
++) {
688 if (this.board
[i
][j
] != "") {
689 const color
= this.getColor(i
, j
);
690 const piece
= this.getPiece(i
, j
);
691 addPiece(i
, j
, "g_pieces", this.pieces(color
, i
, j
)[piece
]["class"]);
692 this.g_pieces
[i
][j
].classList
.add(C
.GetColorClass(color
));
693 if (this.enlightened
&& !this.enlightened
[i
][j
])
694 this.g_pieces
[i
][j
].classList
.add("hidden");
696 if (this.marks
&& this.d_pieces
[i
][j
]) {
697 let classes
= ["mark"];
698 if (this.board
[i
][j
] != "")
699 classes
.push("transparent");
700 addPiece(i
, j
, "d_pieces", classes
);
704 if (this.hasReserve
&& !this.isDiagram
)
705 this.re_drawReserve(['w', 'b'], r
);
708 // NOTE: assume this.reserve != null
709 re_drawReserve(colors
, r
) {
711 // Remove (old) reserve pieces
712 for (let c
of colors
) {
713 Object
.keys(this.r_pieces
[c
]).forEach(p
=> {
714 this.r_pieces
[c
][p
].remove();
715 delete this.r_pieces
[c
][p
];
716 const numId
= this.getReserveNumId(c
, p
);
717 document
.getElementById(numId
).remove();
722 this.r_pieces
= { w: {}, b: {} };
723 let container
= document
.getElementById(this.containerId
);
725 r
= container
.querySelector(".chessboard").getBoundingClientRect();
726 for (let c
of colors
) {
727 let reservesDiv
= document
.getElementById("reserves_" + c
);
729 reservesDiv
.remove();
730 if (!this.reserve
[c
])
732 const nbR
= this.getNbReservePieces(c
);
735 const sqResSize
= this.getReserveSquareSize(r
.width
, nbR
);
737 const vShift
= (c
== this.playerColor
? r
.height
+ 5 : -sqResSize
- 5);
738 const [i0
, j0
] = [r
.x
, r
.y
+ vShift
];
739 let rcontainer
= document
.createElement("div");
740 rcontainer
.id
= "reserves_" + c
;
741 rcontainer
.classList
.add("reserves");
742 rcontainer
.style
.left
= i0
+ "px";
743 rcontainer
.style
.top
= j0
+ "px";
744 // NOTE: +1 fix display bug on Firefox at least
745 rcontainer
.style
.width
= (nbR
* sqResSize
+ 1) + "px";
746 rcontainer
.style
.height
= sqResSize
+ "px";
747 container
.appendChild(rcontainer
);
748 for (let p
of Object
.keys(this.reserve
[c
])) {
749 if (this.reserve
[c
][p
] == 0)
751 let r_cell
= document
.createElement("div");
752 r_cell
.id
= this.coordsToId({x: c
, y: p
});
753 r_cell
.classList
.add("reserve-cell");
754 r_cell
.style
.width
= sqResSize
+ "px";
755 r_cell
.style
.height
= sqResSize
+ "px";
756 rcontainer
.appendChild(r_cell
);
757 let piece
= document
.createElement("piece");
758 C
.AddClass_es(piece
, this.pieces(c
, c
, p
)[p
]["class"]);
759 piece
.classList
.add(C
.GetColorClass(c
));
760 piece
.style
.width
= "100%";
761 piece
.style
.height
= "100%";
762 this.r_pieces
[c
][p
] = piece
;
763 r_cell
.appendChild(piece
);
764 let number
= document
.createElement("div");
765 number
.textContent
= this.reserve
[c
][p
];
766 number
.classList
.add("reserve-num");
767 number
.id
= this.getReserveNumId(c
, p
);
768 const fontSize
= "1.3em";
769 number
.style
.fontSize
= fontSize
;
770 number
.style
.fontSize
= fontSize
;
771 r_cell
.appendChild(number
);
777 updateReserve(color
, piece
, count
) {
778 if (this.options
["cannibal"] && C
.CannibalKings
[piece
])
779 piece
= "k"; //capturing cannibal king: back to king form
780 const oldCount
= this.reserve
[color
][piece
];
781 this.reserve
[color
][piece
] = count
;
782 // Redrawing is much easier if count==0
783 if ([oldCount
, count
].includes(0))
784 this.re_drawReserve([color
]);
786 const numId
= this.getReserveNumId(color
, piece
);
787 document
.getElementById(numId
).textContent
= count
;
791 // Resize board: no need to destroy/recreate pieces
793 const container
= document
.getElementById(this.containerId
);
794 let chessboard
= container
.querySelector(".chessboard");
795 const rc
= container
.getBoundingClientRect(),
796 r
= chessboard
.getBoundingClientRect();
797 const multFact
= (mode
== "up" ? 1.05 : 0.95);
798 let [newWidth
, newHeight
] = [multFact
* r
.width
, multFact
* r
.height
];
800 const vRatio
= this.size
.ratio
|| 1;
801 if (newWidth
> rc
.width
) {
803 newHeight
= newWidth
/ vRatio
;
805 if (newHeight
> rc
.height
) {
806 newHeight
= rc
.height
;
807 newWidth
= newHeight
* vRatio
;
809 chessboard
.style
.width
= newWidth
+ "px";
810 chessboard
.style
.height
= newHeight
+ "px";
811 const newX
= (rc
.width
- newWidth
) / 2;
812 chessboard
.style
.left
= newX
+ "px";
813 const newY
= (rc
.height
- newHeight
) / 2;
814 chessboard
.style
.top
= newY
+ "px";
815 const newR
= {x: newX
, y: newY
, width: newWidth
, height: newHeight
};
816 const pieceWidth
= this.getPieceWidth(newWidth
);
817 // NOTE: next "if" for variants which use squares filling
818 // instead of "physical", moving pieces
820 for (let i
=0; i
< this.size
.x
; i
++) {
821 for (let j
=0; j
< this.size
.y
; j
++) {
822 if (this.g_pieces
[i
][j
]) {
823 // NOTE: could also use CSS transform "scale"
824 this.g_pieces
[i
][j
].style
.width
= pieceWidth
+ "px";
825 this.g_pieces
[i
][j
].style
.height
= pieceWidth
+ "px";
826 const [ip
, jp
] = this.getPixelPosition(i
, j
, newR
);
827 // Translate coordinates to use chessboard as reference:
828 this.g_pieces
[i
][j
].style
.transform
=
829 `translate(${ip - newX}px,${jp - newY}px)`;
835 this.rescaleReserve(newR
);
839 for (let c
of ['w','b']) {
840 if (!this.reserve
[c
])
842 const nbR
= this.getNbReservePieces(c
);
845 // Resize container first
846 const sqResSize
= this.getReserveSquareSize(r
.width
, nbR
);
847 const vShift
= (c
== this.playerColor
? r
.height
+ 5 : -sqResSize
- 5);
848 const [i0
, j0
] = [r
.x
, r
.y
+ vShift
];
849 let rcontainer
= document
.getElementById("reserves_" + c
);
850 rcontainer
.style
.left
= i0
+ "px";
851 rcontainer
.style
.top
= j0
+ "px";
852 rcontainer
.style
.width
= (nbR
* sqResSize
+ 1) + "px";
853 rcontainer
.style
.height
= sqResSize
+ "px";
854 // And then reserve cells:
855 const rpieceWidth
= this.getReserveSquareSize(r
.width
, nbR
);
856 Object
.keys(this.reserve
[c
]).forEach(p
=> {
857 if (this.reserve
[c
][p
] == 0)
859 let r_cell
= document
.getElementById(this.coordsToId({x: c
, y: p
}));
860 r_cell
.style
.width
= sqResSize
+ "px";
861 r_cell
.style
.height
= sqResSize
+ "px";
866 // Return the absolute pixel coordinates given current position.
867 // Our coordinate system differs from CSS one (x <--> y).
868 // We return here the CSS coordinates (more useful).
869 getPixelPosition(i
, j
, r
) {
871 return [0, 0]; //piece vanishes
873 if (typeof i
== "string") {
874 // Reserves: need to know the rank of piece
875 const nbR
= this.getNbReservePieces(i
);
876 const rsqSize
= this.getReserveSquareSize(r
.width
, nbR
);
877 x
= this.getRankInReserve(i
, j
) * rsqSize
;
878 y
= (this.playerColor
== i
? y
= r
.height
+ 5 : - 5 - rsqSize
);
881 const sqSize
= r
.width
/ this.size
.y
;
882 const flipped
= (this.playerColor
== 'b');
883 x
= (flipped
? this.size
.y
- 1 - j : j
) * sqSize
;
884 y
= (flipped
? this.size
.x
- 1 - i : i
) * sqSize
;
886 return [r
.x
+ x
, r
.y
+ y
];
890 let container
= document
.getElementById(this.containerId
);
891 let chessboard
= container
.querySelector(".chessboard");
893 const getOffset
= e
=> {
896 return {x: e
.clientX
, y: e
.clientY
};
897 let touchLocation
= null;
898 if (e
.targetTouches
&& e
.targetTouches
.length
>= 1)
899 // Touch screen, dragstart
900 touchLocation
= e
.targetTouches
[0];
901 else if (e
.changedTouches
&& e
.changedTouches
.length
>= 1)
902 // Touch screen, dragend
903 touchLocation
= e
.changedTouches
[0];
905 return {x: touchLocation
.clientX
, y: touchLocation
.clientY
};
906 return {x: 0, y: 0}; //shouldn't reach here =)
909 const centerOnCursor
= (piece
, e
) => {
910 const centerShift
= this.getPieceWidth(r
.width
) / 2;
911 const offset
= getOffset(e
);
912 piece
.style
.left
= (offset
.x
- centerShift
) + "px";
913 piece
.style
.top
= (offset
.y
- centerShift
) + "px";
918 startPiece
, curPiece
= null,
920 const mousedown
= (e
) => {
921 // Disable zoom on smartphones:
922 if (e
.touches
&& e
.touches
.length
> 1)
924 r
= chessboard
.getBoundingClientRect();
925 pieceWidth
= this.getPieceWidth(r
.width
);
926 const cd
= this.idToCoords(e
.target
.id
);
928 const move = this.doClick(cd
);
930 this.buildMoveStack(move, r
);
931 else if (!this.clickOnly
) {
932 const [x
, y
] = Object
.values(cd
);
933 if (typeof x
!= "number")
934 startPiece
= this.r_pieces
[x
][y
];
936 startPiece
= this.g_pieces
[x
][y
];
937 if (startPiece
&& this.canIplay(x
, y
)) {
940 curPiece
= startPiece
.cloneNode();
941 curPiece
.style
.transform
= "none";
942 curPiece
.style
.zIndex
= 5;
943 curPiece
.style
.width
= pieceWidth
+ "px";
944 curPiece
.style
.height
= pieceWidth
+ "px";
945 centerOnCursor(curPiece
, e
);
946 container
.appendChild(curPiece
);
947 startPiece
.style
.opacity
= "0.4";
948 chessboard
.style
.cursor
= "none";
954 const mousemove
= (e
) => {
957 centerOnCursor(curPiece
, e
);
959 else if (e
.changedTouches
&& e
.changedTouches
.length
>= 1)
960 // Attempt to prevent horizontal swipe...
964 const mouseup
= (e
) => {
967 const [x
, y
] = [start
.x
, start
.y
];
970 chessboard
.style
.cursor
= "pointer";
971 startPiece
.style
.opacity
= "1";
972 const offset
= getOffset(e
);
973 const landingElt
= document
.elementFromPoint(offset
.x
, offset
.y
);
975 (landingElt
? this.idToCoords(landingElt
.id
) : undefined);
977 // NOTE: clearly suboptimal, but much easier, and not a big deal.
978 const potentialMoves
= this.getPotentialMovesFrom([x
, y
])
979 .filter(m
=> m
.end
.x
== cd
.x
&& m
.end
.y
== cd
.y
);
980 const moves
= this.filterValid(potentialMoves
);
981 if (moves
.length
>= 2)
982 this.showChoices(moves
, r
);
983 else if (moves
.length
== 1)
984 this.buildMoveStack(moves
[0], r
);
989 const resize
= (e
) => this.rescale(e
.deltaY
< 0 ? "up" : "down");
991 if ('onmousedown' in window
) {
992 this.mouseListeners
= [
993 {type: "mousedown", listener: mousedown
},
994 {type: "mousemove", listener: mousemove
},
995 {type: "mouseup", listener: mouseup
},
996 {type: "wheel", listener: resize
}
998 this.mouseListeners
.forEach(ml
=> {
999 document
.addEventListener(ml
.type
, ml
.listener
);
1002 if ('ontouchstart' in window
) {
1003 this.touchListeners
= [
1004 {type: "touchstart", listener: mousedown
},
1005 {type: "touchmove", listener: mousemove
},
1006 {type: "touchend", listener: mouseup
}
1008 this.touchListeners
.forEach(tl
=> {
1009 // https://stackoverflow.com/a/42509310/12660887
1010 document
.addEventListener(tl
.type
, tl
.listener
, {passive: false});
1013 // TODO: onpointerdown/move/up ? See reveal.js /controllers/touch.js
1017 let container
= document
.getElementById(this.containerId
);
1018 this.windowResizeObs
.unobserve(container
);
1020 return; //no listeners in this case
1021 if ('onmousedown' in window
) {
1022 this.mouseListeners
.forEach(ml
=> {
1023 document
.removeEventListener(ml
.type
, ml
.listener
);
1026 if ('ontouchstart' in window
) {
1027 this.touchListeners
.forEach(tl
=> {
1028 // https://stackoverflow.com/a/42509310/12660887
1029 document
.removeEventListener(tl
.type
, tl
.listener
);
1034 showChoices(moves
, r
) {
1035 let container
= document
.getElementById(this.containerId
);
1036 let chessboard
= container
.querySelector(".chessboard");
1037 let choices
= document
.createElement("div");
1038 choices
.id
= "choices";
1040 r
= chessboard
.getBoundingClientRect();
1041 choices
.style
.width
= r
.width
+ "px";
1042 choices
.style
.height
= r
.height
+ "px";
1043 choices
.style
.left
= r
.x
+ "px";
1044 choices
.style
.top
= r
.y
+ "px";
1045 chessboard
.style
.opacity
= "0.5";
1046 container
.appendChild(choices
);
1047 const squareWidth
= r
.width
/ this.size
.y
;
1048 const firstUpLeft
= (r
.width
- (moves
.length
* squareWidth
)) / 2;
1049 const firstUpTop
= (r
.height
- squareWidth
) / 2;
1050 const color
= moves
[0].appear
[0].c
;
1051 const callback
= (m
) => {
1052 chessboard
.style
.opacity
= "1";
1053 container
.removeChild(choices
);
1054 this.buildMoveStack(m
, r
);
1056 for (let i
=0; i
< moves
.length
; i
++) {
1057 let choice
= document
.createElement("div");
1058 choice
.classList
.add("choice");
1059 choice
.style
.width
= squareWidth
+ "px";
1060 choice
.style
.height
= squareWidth
+ "px";
1061 choice
.style
.left
= (firstUpLeft
+ i
* squareWidth
) + "px";
1062 choice
.style
.top
= firstUpTop
+ "px";
1063 choice
.style
.backgroundColor
= "lightyellow";
1064 choice
.onclick
= () => callback(moves
[i
]);
1065 const piece
= document
.createElement("piece");
1066 const cdisp
= moves
[i
].choice
|| moves
[i
].appear
[0].p
;
1067 C
.AddClass_es(piece
,
1068 this.pieces(color
, moves
[i
].end
.x
, moves
[i
].end
.y
)[cdisp
]["class"]);
1069 piece
.classList
.add(C
.GetColorClass(color
));
1070 piece
.style
.width
= "100%";
1071 piece
.style
.height
= "100%";
1072 choice
.appendChild(piece
);
1073 choices
.appendChild(choice
);
1080 updateEnlightened() {
1081 this.oldEnlightened
= this.enlightened
;
1082 this.enlightened
= ArrayFun
.init(this.size
.x
, this.size
.y
, false);
1083 // Add pieces positions + all squares reachable by moves (includes Zen):
1084 for (let x
=0; x
<this.size
.x
; x
++) {
1085 for (let y
=0; y
<this.size
.y
; y
++) {
1086 if (this.board
[x
][y
] != "" && this.getColor(x
, y
) == this.playerColor
)
1088 this.enlightened
[x
][y
] = true;
1089 this.getPotentialMovesFrom([x
, y
]).forEach(m
=> {
1090 this.enlightened
[m
.end
.x
][m
.end
.y
] = true;
1096 this.enlightEnpassant();
1099 // Include square of the en-passant capturing square:
1100 enlightEnpassant() {
1101 // NOTE: shortcut, pawn has only one attack type, doesn't depend on square
1102 const steps
= this.pieces(this.playerColor
)["p"].attack
[0].steps
;
1103 for (let step
of steps
) {
1104 const x
= this.epSquare
.x
- step
[0],
1105 y
= this.getY(this.epSquare
.y
- step
[1]);
1107 this.onBoard(x
, y
) &&
1108 this.getColor(x
, y
) == this.playerColor
&&
1109 this.getPieceType(x
, y
) == "p"
1111 this.enlightened
[x
][this.epSquare
.y
] = true;
1117 // Apply diff this.enlightened --> oldEnlightened on board
1118 graphUpdateEnlightened() {
1120 document
.getElementById(this.containerId
).querySelector(".chessboard");
1121 const r
= chessboard
.getBoundingClientRect();
1122 const pieceWidth
= this.getPieceWidth(r
.width
);
1123 for (let x
=0; x
<this.size
.x
; x
++) {
1124 for (let y
=0; y
<this.size
.y
; y
++) {
1125 if (!this.enlightened
[x
][y
] && this.oldEnlightened
[x
][y
]) {
1126 let elt
= document
.getElementById(this.coordsToId({x: x
, y: y
}));
1127 elt
.classList
.add("in-shadow");
1128 if (this.g_pieces
[x
][y
])
1129 this.g_pieces
[x
][y
].classList
.add("hidden");
1131 else if (this.enlightened
[x
][y
] && !this.oldEnlightened
[x
][y
]) {
1132 let elt
= document
.getElementById(this.coordsToId({x: x
, y: y
}));
1133 elt
.classList
.remove("in-shadow");
1134 if (this.g_pieces
[x
][y
])
1135 this.g_pieces
[x
][y
].classList
.remove("hidden");
1148 ratio: 1 //for rectangular board = y / x (optional, 1 = default)
1152 // Color of thing on square (i,j). '' if square is empty
1154 if (typeof i
== "string")
1155 return i
; //reserves
1156 return this.board
[i
][j
].charAt(0);
1159 static GetColorClass(c
) {
1164 return "other-color"; //unidentified color
1167 // Piece on i,j. '' if square is empty
1169 if (typeof j
== "string")
1170 return j
; //reserves
1171 return this.board
[i
][j
].charAt(1);
1174 // Piece type on square (i,j)
1175 getPieceType(x
, y
, p
) {
1177 p
= this.getPiece(x
, y
);
1178 return this.pieces()[p
].moveas
|| p
;
1183 p
= this.getPiece(x
, y
);
1184 if (!this.options
["cannibal"])
1186 return !!C
.CannibalKings
[p
];
1189 // Get opponent color
1190 static GetOppCol(color
) {
1191 return (color
== "w" ? "b" : "w");
1194 // Is (x,y) on the chessboard?
1196 return (x
>= 0 && x
< this.size
.x
&&
1197 y
>= 0 && y
< this.size
.y
);
1200 // Am I allowed to move thing at square x,y ?
1202 return (this.playerColor
== this.turn
&& this.getColor(x
, y
) == this.turn
);
1205 ////////////////////////
1206 // PIECES SPECIFICATIONS
1208 pieces(color
, x
, y
) {
1209 const pawnShift
= (color
== "w" ? -1 : 1);
1210 // NOTE: jump 2 squares from first rank (pawns can be here sometimes)
1211 const initRank
= ((color
== 'w' && x
>= 6) || (color
== 'b' && x
<= 1));
1217 steps: [[pawnShift
, 0]],
1218 range: (initRank
? 2 : 1)
1223 steps: [[pawnShift
, 1], [pawnShift
, -1]],
1231 {steps: [[0, 1], [0, -1], [1, 0], [-1, 0]]}
1239 [1, 2], [1, -2], [-1, 2], [-1, -2],
1240 [2, 1], [-2, 1], [2, -1], [-2, -1]
1249 {steps: [[1, 1], [1, -1], [-1, 1], [-1, -1]]}
1257 [0, 1], [0, -1], [1, 0], [-1, 0],
1258 [1, 1], [1, -1], [-1, 1], [-1, -1]
1268 [0, 1], [0, -1], [1, 0], [-1, 0],
1269 [1, 1], [1, -1], [-1, 1], [-1, -1]
1276 '!': {"class": "king-pawn", moveas: "p"},
1277 '#': {"class": "king-rook", moveas: "r"},
1278 '$': {"class": "king-knight", moveas: "n"},
1279 '%': {"class": "king-bishop", moveas: "b"},
1280 '*': {"class": "king-queen", moveas: "q"}
1284 // NOTE: using special symbols to not interfere with variants' pieces codes
1285 static get CannibalKings() {
1296 static get CannibalKingCode() {
1307 //////////////////////////
1308 // MOVES GENERATION UTILS
1310 // For Cylinder: get Y coordinate
1312 if (!this.options
["cylinder"])
1314 let res
= y
% this.size
.y
;
1320 getSegments(curSeg
, segStart
, segEnd
) {
1321 if (curSeg
.length
== 0)
1323 let segments
= JSON
.parse(JSON
.stringify(curSeg
)); //not altering
1324 segments
.push([[segStart
[0], segStart
[1]], [segEnd
[0], segEnd
[1]]]);
1328 getStepSpec(color
, x
, y
, piece
) {
1329 return this.pieces(color
, x
, y
)[piece
|| this.getPieceType(x
, y
)];
1332 // Can thing on square1 capture thing on square2?
1333 canTake([x1
, y1
], [x2
, y2
]) {
1334 return this.getColor(x1
, y1
) !== this.getColor(x2
, y2
);
1337 canStepOver(i
, j
, p
) {
1338 // In some variants, objects on boards don't stop movement (Chakart)
1339 return this.board
[i
][j
] == "";
1342 canDrop([c
, p
], [i
, j
]) {
1344 this.board
[i
][j
] == "" &&
1345 (!this.enlightened
|| this.enlightened
[i
][j
]) &&
1348 (c
== 'w' && i
< this.size
.x
- 1) ||
1355 // (redefined in Baroque etc, where Madrasi condition doesn't make sense)
1356 isImmobilized([x
, y
]) {
1357 if (!this.options
["madrasi"])
1359 const color
= this.getColor(x
, y
);
1360 const oppCol
= C
.GetOppCol(color
);
1361 const piece
= this.getPieceType(x
, y
);
1362 const stepSpec
= this.getStepSpec(color
, x
, y
, piece
);
1363 const attacks
= stepSpec
.attack
|| stepSpec
.moves
;
1364 for (let a
of attacks
) {
1365 outerLoop: for (let step
of a
.steps
) {
1366 let [i
, j
] = [x
+ step
[0], y
+ step
[1]];
1367 let stepCounter
= 1;
1368 while (this.onBoard(i
, j
) && this.board
[i
][j
] == "") {
1369 if (a
.range
<= stepCounter
++)
1372 j
= this.getY(j
+ step
[1]);
1375 this.onBoard(i
, j
) &&
1376 this.getColor(i
, j
) == oppCol
&&
1377 this.getPieceType(i
, j
) == piece
1386 // Stop at the first capture found
1387 atLeastOneCapture(color
) {
1388 const oppCol
= C
.GetOppCol(color
);
1389 const allowed
= (sq1
, sq2
) => {
1391 // NOTE: canTake is reversed for Zen.
1392 // Generally ok because of the symmetry. TODO?
1393 this.canTake(sq1
, sq2
) &&
1395 [this.getBasicMove(sq1
, sq2
)]).length
>= 1
1398 for (let i
=0; i
<this.size
.x
; i
++) {
1399 for (let j
=0; j
<this.size
.y
; j
++) {
1400 if (this.getColor(i
, j
) == color
) {
1403 !this.options
["zen"] &&
1404 this.findDestSquares(
1409 segments: this.options
["cylinder"]
1417 this.options
["zen"] &&
1418 this.findCapturesOn(
1422 segments: this.options
["cylinder"]
1437 compatibleStep([x1
, y1
], [x2
, y2
], step
, range
) {
1438 const epsilon
= 1e-7; //arbitrary small value
1440 if (this.options
["cylinder"])
1441 Array
.prototype.push
.apply(shifts
, [-this.size
.y
, this.size
.y
]);
1442 for (let sh
of shifts
) {
1443 const rx
= (x2
- x1
) / step
[0],
1444 ry
= (y2
+ sh
- y1
) / step
[1];
1446 // Zero step but non-zero interval => impossible
1447 (!Number
.isFinite(rx
) && !Number
.isNaN(rx
)) ||
1448 (!Number
.isFinite(ry
) && !Number
.isNaN(ry
)) ||
1449 // Negative number of step (impossible)
1450 (rx
< 0 || ry
< 0) ||
1451 // Not the same number of steps in both directions:
1452 (!Number
.isNaN(rx
) && !Number
.isNaN(ry
) && Math
.abs(rx
- ry
) > epsilon
)
1456 let distance
= (Number
.isNaN(rx
) ? ry : rx
);
1457 if (Math
.abs(distance
- Math
.round(distance
)) > epsilon
)
1459 distance
= Math
.round(distance
); //in case of (numerical...)
1460 if (!range
|| range
>= distance
)
1466 ////////////////////
1469 getDropMovesFrom([c
, p
]) {
1470 // NOTE: by design, this.reserve[c][p] >= 1 on user click
1471 // (but not necessarily otherwise: atLeastOneMove() etc)
1472 if (this.reserve
[c
][p
] == 0)
1475 for (let i
=0; i
<this.size
.x
; i
++) {
1476 for (let j
=0; j
<this.size
.y
; j
++) {
1477 if (this.canDrop([c
, p
], [i
, j
])) {
1479 start: {x: c
, y: p
},
1481 appear: [new PiPo({x: i
, y: j
, c: c
, p: p
})],
1484 if (this.board
[i
][j
] != "") {
1485 mv
.vanish
.push(new PiPo({
1488 c: this.getColor(i
, j
),
1489 p: this.getPiece(i
, j
)
1499 // All possible moves from selected square
1500 getPotentialMovesFrom([x
, y
], color
) {
1501 if (this.subTurnTeleport
== 2)
1503 if (typeof x
== "string")
1504 return this.getDropMovesFrom([x
, y
]);
1505 if (this.isImmobilized([x
, y
]))
1507 const piece
= this.getPieceType(x
, y
);
1508 let moves
= this.getPotentialMovesOf(piece
, [x
, y
]);
1509 if (piece
== "p" && this.hasEnpassant
&& this.epSquare
)
1510 Array
.prototype.push
.apply(moves
, this.getEnpassantCaptures([x
, y
]));
1512 this.isKing(0, 0, piece
) && this.hasCastle
&&
1513 this.castleFlags
[color
|| this.turn
].some(v
=> v
< this.size
.y
)
1515 Array
.prototype.push
.apply(moves
, this.getCastleMoves([x
, y
]));
1517 return this.postProcessPotentialMoves(moves
);
1520 postProcessPotentialMoves(moves
) {
1521 if (moves
.length
== 0)
1523 const color
= this.getColor(moves
[0].start
.x
, moves
[0].start
.y
);
1524 const oppCol
= C
.GetOppCol(color
);
1526 if (this.options
["capture"] && this.atLeastOneCapture(color
))
1527 moves
= this.capturePostProcess(moves
, oppCol
);
1529 if (this.options
["atomic"])
1530 this.atomicPostProcess(moves
, color
, oppCol
);
1534 this.getPieceType(moves
[0].start
.x
, moves
[0].start
.y
) == "p"
1536 this.pawnPostProcess(moves
, color
, oppCol
);
1539 if (this.options
["cannibal"] && this.options
["rifle"])
1540 // In this case a rifle-capture from last rank may promote a pawn
1541 this.riflePromotePostProcess(moves
, color
);
1546 capturePostProcess(moves
, oppCol
) {
1547 // Filter out non-capturing moves (not using m.vanish because of
1548 // self captures of Recycle and Teleport).
1549 return moves
.filter(m
=> {
1551 this.board
[m
.end
.x
][m
.end
.y
] != "" &&
1552 this.getColor(m
.end
.x
, m
.end
.y
) == oppCol
1557 atomicPostProcess(moves
, color
, oppCol
) {
1558 moves
.forEach(m
=> {
1560 this.board
[m
.end
.x
][m
.end
.y
] != "" &&
1561 this.getColor(m
.end
.x
, m
.end
.y
) == oppCol
1574 let mNext
= new Move({
1580 for (let step
of steps
) {
1581 let x
= m
.end
.x
+ step
[0];
1582 let y
= this.getY(m
.end
.y
+ step
[1]);
1584 this.onBoard(x
, y
) &&
1585 this.board
[x
][y
] != "" &&
1586 (x
!= m
.start
.x
|| y
!= m
.start
.y
) &&
1587 this.getPieceType(x
, y
) != "p"
1591 p: this.getPiece(x
, y
),
1592 c: this.getColor(x
, y
),
1599 if (!this.options
["rifle"]) {
1600 // The moving piece also vanish
1601 mNext
.vanish
.unshift(
1606 p: this.getPiece(m
.start
.x
, m
.start
.y
)
1615 pawnPostProcess(moves
, color
, oppCol
) {
1617 const lastRank
= (color
== "w" ? 0 : this.size
.x
- 1);
1618 const initPiece
= this.getPiece(moves
[0].start
.x
, moves
[0].start
.y
);
1619 moves
.forEach(m
=> {
1620 const [x1
, y1
] = [m
.start
.x
, m
.start
.y
];
1621 const [x2
, y2
] = [m
.end
.x
, m
.end
.y
];
1622 const promotionOk
= (
1624 (!this.options
["rifle"] || this.board
[x2
][y2
] == "")
1627 return; //nothing to do
1628 if (this.options
["pawnfall"]) {
1634 this.options
["cannibal"] &&
1635 this.board
[x2
][y2
] != "" &&
1636 this.getColor(x2
, y2
) == oppCol
1638 finalPieces
= [this.getPieceType(x2
, y2
)];
1641 finalPieces
= this.pawnPromotions
;
1642 m
.appear
[0].p
= finalPieces
[0];
1643 if (initPiece
== "!") //cannibal king-pawn
1644 m
.appear
[0].p
= C
.CannibalKingCode
[finalPieces
[0]];
1645 for (let i
=1; i
<finalPieces
.length
; i
++) {
1646 let newMove
= JSON
.parse(JSON
.stringify(m
));
1647 const piece
= finalPieces
[i
];
1648 m
.appear
[0].p
= (initPiece
!= "!" ? piece : C
.CannibalKingCode
[piece
]);
1649 moreMoves
.push(newMove
);
1652 Array
.prototype.push
.apply(moves
, moreMoves
);
1655 riflePromotePostProcess(moves
, color
) {
1656 const lastRank
= (color
== "w" ? 0 : this.size
.x
- 1);
1658 moves
.forEach(m
=> {
1660 m
.start
.x
== lastRank
&&
1661 m
.appear
.length
>= 1 &&
1662 m
.appear
[0].p
== "p" &&
1663 m
.appear
[0].x
== m
.start
.x
&&
1664 m
.appear
[0].y
== m
.start
.y
1666 m
.appear
[0].p
= this.pawnPromotions
[0];
1667 for (let i
=1; i
<this.pawnPromotions
.length
; i
++) {
1668 let newMv
= JSON
.parse(JSON
.stringify(m
));
1669 newMv
.appear
[0].p
= this.pawnSpecs
.promotions
[i
];
1670 newMoves
.push(newMv
);
1674 Array
.prototype.push
.apply(moves
, newMoves
);
1677 // Generic method to find possible moves of "sliding or jumping" pieces
1678 getPotentialMovesOf(piece
, [x
, y
]) {
1679 const color
= this.getColor(x
, y
);
1680 const stepSpec
= this.getStepSpec(color
, x
, y
, piece
);
1682 if (stepSpec
.attack
) {
1683 squares
= this.findDestSquares(
1687 segments: this.options
["cylinder"],
1690 ([i1
, j1
], [i2
, j2
]) => {
1692 (!this.options
["zen"] || this.isKing(i2
, j2
)) &&
1693 this.canTake([i1
, j1
], [i2
, j2
])
1698 const noSpecials
= this.findDestSquares(
1701 moveOnly: !!stepSpec
.attack
|| this.options
["zen"],
1702 segments: this.options
["cylinder"],
1706 Array
.prototype.push
.apply(squares
, noSpecials
);
1707 if (this.options
["zen"]) {
1708 let zenCaptures
= this.findCapturesOn(
1710 {}, //byCol: default is ok
1711 ([i1
, j1
], [i2
, j2
]) =>
1712 !this.isKing(i1
, j1
) && this.canTake([i2
, j2
], [i1
, j1
])
1714 // Technical step: segments (if any) are reversed
1715 if (this.options
["cylinder"]) {
1716 zenCaptures
.forEach(z
=> {
1717 z
.segments
= z
.segments
.reverse().map(s
=> s
.reverse())
1720 Array
.prototype.push
.apply(squares
, zenCaptures
);
1723 this.options
["recycle"] ||
1724 (this.options
["teleport"] && this.subTurnTeleport
== 1)
1726 const selfCaptures
= this.findDestSquares(
1730 segments: this.options
["cylinder"],
1733 ([i1
, j1
], [i2
, j2
]) =>
1734 this.getColor(i2
, j2
) == color
&& !this.isKing(i2
, j2
)
1736 Array
.prototype.push
.apply(squares
, selfCaptures
);
1738 return squares
.map(s
=> {
1739 let mv
= this.getBasicMove([x
, y
], s
.sq
);
1740 if (this.options
["cylinder"] && s
.segments
.length
>= 2)
1741 mv
.segments
= s
.segments
;
1746 findDestSquares([x
, y
], o
, allowed
) {
1748 allowed
= (sq1
, sq2
) => this.canTake(sq1
, sq2
);
1749 const apparentPiece
= this.getPiece(x
, y
); //how it looks
1751 // Next 3 for Cylinder mode: (unused if !o.segments)
1755 const addSquare
= ([i
, j
]) => {
1756 let elt
= {sq: [i
, j
]};
1758 elt
.segments
= this.getSegments(segments
, segStart
, end
);
1761 const exploreSteps
= (stepArray
) => {
1762 for (let s
of stepArray
) {
1763 outerLoop: for (let step
of s
.steps
) {
1768 let [i
, j
] = [x
, y
];
1769 let stepCounter
= 0;
1771 this.onBoard(i
, j
) &&
1772 ((i
== x
&& j
== y
) || this.canStepOver(i
, j
, apparentPiece
))
1774 if (!explored
[i
+ "." + j
] && (i
!= x
|| j
!= y
)) {
1775 explored
[i
+ "." + j
] = true;
1778 (o
.captureTarget
[0] == i
&& o
.captureTarget
[1] == j
)
1780 if (o
.one
&& !o
.attackOnly
)
1783 addSquare(!o
.captureTarget
? [i
, j
] : [x
, y
]);
1784 if (o
.captureTarget
)
1788 if (s
.range
<= stepCounter
++)
1790 const oldIJ
= [i
, j
];
1792 j
= this.getY(j
+ step
[1]);
1793 if (o
.segments
&& Math
.abs(j
- oldIJ
[1]) > 1) {
1794 // Boundary between segments (cylinder mode)
1795 segments
.push([[segStart
[0], segStart
[1]], oldIJ
]);
1799 if (!this.onBoard(i
, j
))
1801 const pieceIJ
= this.getPieceType(i
, j
);
1802 if (!explored
[i
+ "." + j
]) {
1803 explored
[i
+ "." + j
] = true;
1804 if (allowed([x
, y
], [i
, j
])) {
1805 if (o
.one
&& !o
.moveOnly
)
1808 addSquare(!o
.captureTarget
? [i
, j
] : [x
, y
]);
1811 o
.captureTarget
[0] == i
&& o
.captureTarget
[1] == j
1819 return undefined; //default, but let's explicit it
1821 if (o
.captureTarget
)
1822 return exploreSteps(o
.captureSteps
)
1825 o
.stepSpec
|| this.getStepSpec(this.getColor(x
, y
), x
, y
);
1827 if (!o
.attackOnly
|| !stepSpec
.attack
)
1828 outOne
= exploreSteps(stepSpec
.moves
);
1829 if (!outOne
&& !o
.moveOnly
&& !!stepSpec
.attack
) {
1830 o
.attackOnly
= true; //ok because o is always a temporary object
1831 outOne
= exploreSteps(stepSpec
.attack
);
1833 return (o
.one
? outOne : res
);
1837 // Search for enemy (or not) pieces attacking [x, y]
1838 findCapturesOn([x
, y
], o
, allowed
) {
1840 o
.byCol
= [C
.GetOppCol(this.getColor(x
, y
) || this.turn
)];
1842 for (let i
=0; i
<this.size
.x
; i
++) {
1843 for (let j
=0; j
<this.size
.y
; j
++) {
1844 const colIJ
= this.getColor(i
, j
);
1846 this.board
[i
][j
] != "" &&
1847 o
.byCol
.includes(colIJ
) &&
1848 !this.isImmobilized([i
, j
])
1850 const apparentPiece
= this.getPiece(i
, j
);
1851 // Quick check: does this potential attacker target x,y ?
1852 if (this.canStepOver(x
, y
, apparentPiece
))
1854 const stepSpec
= this.getStepSpec(colIJ
, i
, j
);
1855 const attacks
= stepSpec
.attack
|| stepSpec
.moves
;
1856 for (let a
of attacks
) {
1857 for (let s
of a
.steps
) {
1858 // Quick check: if step isn't compatible, don't even try
1859 if (!this.compatibleStep([i
, j
], [x
, y
], s
, a
.range
))
1861 // Finally verify that nothing stand in-between
1862 const out
= this.findDestSquares(
1865 captureTarget: [x
, y
],
1866 captureSteps: [{steps: [s
], range: a
.range
}],
1867 segments: o
.segments
,
1869 one: false //one and captureTarget are mutually exclusive
1883 return (o
.one
? false : res
);
1886 // Build a regular move from its initial and destination squares.
1887 // tr: transformation
1888 getBasicMove([sx
, sy
], [ex
, ey
], tr
) {
1889 const initColor
= this.getColor(sx
, sy
);
1890 const initPiece
= this.getPiece(sx
, sy
);
1891 const destColor
= (this.board
[ex
][ey
] != "" ? this.getColor(ex
, ey
) : "");
1895 start: {x: sx
, y: sy
},
1899 !this.options
["rifle"] ||
1900 this.board
[ex
][ey
] == "" ||
1901 destColor
== initColor
//Recycle, Teleport
1907 c: !!tr
? tr
.c : initColor
,
1908 p: !!tr
? tr
.p : initPiece
1920 if (this.board
[ex
][ey
] != "") {
1925 c: this.getColor(ex
, ey
),
1926 p: this.getPiece(ex
, ey
)
1929 if (this.options
["cannibal"] && destColor
!= initColor
) {
1930 const lastIdx
= mv
.vanish
.length
- 1; //think "Rifle+Cannibal"
1931 let trPiece
= mv
.vanish
[lastIdx
].p
;
1932 if (this.isKing(sx
, sy
))
1933 trPiece
= C
.CannibalKingCode
[trPiece
];
1934 if (mv
.appear
.length
>= 1)
1935 mv
.appear
[0].p
= trPiece
;
1936 else if (this.options
["rifle"]) {
1959 // En-passant square, if any
1960 getEpSquare(moveOrSquare
) {
1961 if (typeof moveOrSquare
=== "string") {
1962 const square
= moveOrSquare
;
1965 return C
.SquareToCoords(square
);
1967 // Argument is a move:
1968 const move = moveOrSquare
;
1969 const s
= move.start
,
1973 Math
.abs(s
.x
- e
.x
) == 2 &&
1974 // Next conditions for variants like Atomic or Rifle, Recycle...
1976 move.appear
.length
> 0 &&
1977 this.getPieceType(0, 0, move.appear
[0].p
) == 'p'
1981 move.vanish
.length
> 0 &&
1982 this.getPieceType(0, 0, move.vanish
[0].p
) == 'p'
1990 return undefined; //default
1993 // Special case of en-passant captures: treated separately
1994 getEnpassantCaptures([x
, y
]) {
1995 const color
= this.getColor(x
, y
);
1996 const shiftX
= (color
== 'w' ? -1 : 1);
1997 const oppCol
= C
.GetOppCol(color
);
2000 this.epSquare
.x
== x
+ shiftX
&&
2001 Math
.abs(this.getY(this.epSquare
.y
- y
)) == 1 &&
2002 // Doublemove (and Progressive?) guards:
2003 this.board
[this.epSquare
.x
][this.epSquare
.y
] == "" &&
2004 this.getColor(x
, this.epSquare
.y
) == oppCol
2006 const [epx
, epy
] = [this.epSquare
.x
, this.epSquare
.y
];
2007 this.board
[epx
][epy
] = oppCol
+ 'p';
2008 let enpassantMove
= this.getBasicMove([x
, y
], [epx
, epy
]);
2009 this.board
[epx
][epy
] = "";
2010 const lastIdx
= enpassantMove
.vanish
.length
- 1; //think Rifle
2011 enpassantMove
.vanish
[lastIdx
].x
= x
;
2012 return [enpassantMove
];
2017 getCastleMoves([x
, y
], finalSquares
, castleWith
) {
2018 const c
= this.getColor(x
, y
);
2021 const oppCol
= C
.GetOppCol(c
);
2025 finalSquares
|| [ [2, 3], [this.size
.y
- 2, this.size
.y
- 3] ];
2026 const castlingKing
= this.getPiece(x
, y
);
2027 castlingCheck: for (
2030 castleSide
++ //large, then small
2032 if (this.castleFlags
[c
][castleSide
] >= this.size
.y
)
2034 // If this code is reached, rook and king are on initial position
2036 // NOTE: in some variants this is not a rook
2037 const rookPos
= this.castleFlags
[c
][castleSide
];
2038 const castlingPiece
= this.getPiece(x
, rookPos
);
2040 this.board
[x
][rookPos
] == "" ||
2041 this.getColor(x
, rookPos
) != c
||
2042 (castleWith
&& !castleWith
.includes(castlingPiece
))
2044 // Rook is not here, or changed color (see Benedict)
2047 // Nothing on the path of the king ? (and no checks)
2048 const finDist
= finalSquares
[castleSide
][0] - y
;
2049 let step
= finDist
/ Math
.max(1, Math
.abs(finDist
));
2053 // NOTE: next weird test because underCheck() verification
2054 // will be executed in filterValid() later.
2056 i
!= finalSquares
[castleSide
][0] &&
2057 this.underCheck([x
, i
], oppCol
)
2061 this.board
[x
][i
] != "" &&
2062 // NOTE: next check is enough, because of chessboard constraints
2063 (this.getColor(x
, i
) != c
|| ![rookPos
, y
].includes(i
))
2066 continue castlingCheck
;
2069 } while (i
!= finalSquares
[castleSide
][0]);
2070 // Nothing on the path to the rook?
2071 step
= (castleSide
== 0 ? -1 : 1);
2072 for (i
= y
+ step
; i
!= rookPos
; i
+= step
) {
2073 if (this.board
[x
][i
] != "")
2074 continue castlingCheck
;
2077 // Nothing on final squares, except maybe king and castling rook?
2078 for (i
= 0; i
< 2; i
++) {
2080 finalSquares
[castleSide
][i
] != rookPos
&&
2081 this.board
[x
][finalSquares
[castleSide
][i
]] != "" &&
2083 finalSquares
[castleSide
][i
] != y
||
2084 this.getColor(x
, finalSquares
[castleSide
][i
]) != c
2087 continue castlingCheck
;
2091 // If this code is reached, castle is potentially valid
2097 y: finalSquares
[castleSide
][0],
2103 y: finalSquares
[castleSide
][1],
2109 // King might be initially disguised (Titan...)
2110 new PiPo({ x: x
, y: y
, p: castlingKing
, c: c
}),
2111 new PiPo({ x: x
, y: rookPos
, p: castlingPiece
, c: c
})
2114 Math
.abs(y
- rookPos
) <= 2
2115 ? {x: x
, y: rookPos
}
2116 : {x: x
, y: y
+ 2 * (castleSide
== 0 ? -1 : 1)}
2124 ////////////////////
2127 // Is piece (or square) at given position attacked by "oppCol" ?
2128 underAttack([x
, y
], oppCol
) {
2129 // An empty square is considered as king,
2130 // since it's used only in getCastleMoves (TODO?)
2131 const king
= this.board
[x
][y
] == "" || this.isKing(x
, y
);
2134 (!this.options
["zen"] || king
) &&
2135 this.findCapturesOn(
2139 segments: this.options
["cylinder"],
2146 (!!this.options
["zen"] && !king
) &&
2147 this.findDestSquares(
2151 segments: this.options
["cylinder"],
2154 ([i1
, j1
], [i2
, j2
]) => this.getColor(i2
, j2
) == oppCol
2160 // Argument is (very generally) an array of squares (= arrays)
2161 underCheck(square_s
, oppCol
) {
2162 if (this.options
["taking"] || this.options
["dark"])
2164 if (!Array
.isArray(square_s
[0]))
2165 square_s
= [square_s
];
2166 return square_s
.some(sq
=> this.underAttack(sq
, oppCol
));
2169 // Scan board for king(s)
2170 searchKingPos(color
) {
2172 for (let i
=0; i
< this.size
.x
; i
++) {
2173 for (let j
=0; j
< this.size
.y
; j
++) {
2174 if (this.getColor(i
, j
) == color
&& this.isKing(i
, j
))
2181 // 'color' arg because some variants (e.g. Refusal) check opponent moves
2182 filterValid(moves
, color
) {
2185 const oppCol
= C
.GetOppCol(color
);
2186 let kingPos
= this.searchKingPos(color
);
2187 let filtered
= {}; //avoid re-checking similar moves (promotions...)
2188 return moves
.filter(m
=> {
2189 const key
= m
.start
.x
+ m
.start
.y
+ '.' + m
.end
.x
+ m
.end
.y
;
2190 if (!filtered
[key
]) {
2191 this.playOnBoard(m
);
2192 let newKingPP
= null,
2194 res
= true; //a priori valid
2196 m
.vanish
.find(v
=> this.isKing(0, 0, v
.p
) && v
.c
== color
);
2198 // Search king in appear array:
2200 m
.appear
.find(a
=> this.isKing(0, 0, a
.p
) && a
.c
== color
);
2202 sqIdx
= kingPos
.findIndex(kp
=>
2203 kp
[0] == oldKingPP
.x
&& kp
[1] == oldKingPP
.y
);
2204 kingPos
[sqIdx
] = [newKingPP
.x
, newKingPP
.y
];
2207 res
= false; //king vanished
2209 res
&&= !this.underCheck(kingPos
, oppCol
);
2210 if (oldKingPP
&& newKingPP
)
2211 kingPos
[sqIdx
] = [oldKingPP
.x
, oldKingPP
.y
];
2212 this.undoOnBoard(m
);
2213 filtered
[key
] = res
;
2216 return filtered
[key
];
2223 // Apply a move on board
2225 for (let psq
of move.vanish
)
2226 this.board
[psq
.x
][psq
.y
] = "";
2227 for (let psq
of move.appear
)
2228 this.board
[psq
.x
][psq
.y
] = psq
.c
+ psq
.p
;
2230 // Un-apply the played move
2232 for (let psq
of move.appear
)
2233 this.board
[psq
.x
][psq
.y
] = "";
2234 for (let psq
of move.vanish
)
2235 this.board
[psq
.x
][psq
.y
] = psq
.c
+ psq
.p
;
2238 updateCastleFlags(move) {
2239 // Update castling flags if start or arrive from/at rook/king locations
2240 move.appear
.concat(move.vanish
).forEach(psq
=> {
2241 if (this.isKing(0, 0, psq
.p
))
2242 this.castleFlags
[psq
.c
] = [this.size
.y
, this.size
.y
];
2243 // NOTE: not "else if" because king can capture enemy rook...
2247 else if (psq
.x
== this.size
.x
- 1)
2250 const fidx
= this.castleFlags
[c
].findIndex(f
=> f
== psq
.y
);
2252 this.castleFlags
[c
][fidx
] = this.size
.y
;
2260 // If flags already off, no need to re-check:
2261 Object
.values(this.castleFlags
).some(cvals
=>
2262 cvals
.some(val
=> val
< this.size
.y
))
2264 this.updateCastleFlags(move);
2266 if (this.options
["crazyhouse"]) {
2267 move.vanish
.forEach(v
=> {
2268 const square
= C
.CoordsToSquare({x: v
.x
, y: v
.y
});
2269 if (this.ispawn
[square
])
2270 delete this.ispawn
[square
];
2272 if (move.appear
.length
> 0 && move.vanish
.length
> 0) {
2273 // Assumption: something is moving
2274 const initSquare
= C
.CoordsToSquare(move.start
);
2275 const destSquare
= C
.CoordsToSquare(move.end
);
2277 this.ispawn
[initSquare
] ||
2278 (move.vanish
[0].p
== 'p' && move.appear
[0].p
!= 'p')
2280 this.ispawn
[destSquare
] = true;
2283 this.ispawn
[destSquare
] &&
2284 this.getColor(move.end
.x
, move.end
.y
) != move.vanish
[0].c
2286 move.vanish
[1].p
= 'p';
2287 delete this.ispawn
[destSquare
];
2291 const minSize
= Math
.min(move.appear
.length
, move.vanish
.length
);
2294 // Warning; atomic pawn removal isn't a capture
2295 (!this.options
["atomic"] || !this.rempawn
|| this.movesCount
>= 1)
2297 const color
= this.turn
;
2298 for (let i
=minSize
; i
<move.appear
.length
; i
++) {
2299 // Something appears = dropped on board (some exceptions, Chakart...)
2300 if (move.appear
[i
].c
== color
) {
2301 const piece
= move.appear
[i
].p
;
2302 this.updateReserve(color
, piece
, this.reserve
[color
][piece
] - 1);
2305 for (let i
=minSize
; i
<move.vanish
.length
; i
++) {
2306 // Something vanish: add to reserve except if recycle & opponent
2308 this.options
["crazyhouse"] ||
2309 (this.options
["recycle"] && move.vanish
[i
].c
== color
)
2311 const piece
= move.vanish
[i
].p
;
2312 this.updateReserve(color
, piece
, this.reserve
[color
][piece
] + 1);
2320 if (this.hasEnpassant
)
2321 this.epSquare
= this.getEpSquare(move);
2322 this.playOnBoard(move);
2323 this.postPlay(move);
2327 const color
= this.turn
;
2328 if (this.options
["dark"])
2329 this.updateEnlightened();
2330 if (this.options
["teleport"]) {
2332 this.subTurnTeleport
== 1 &&
2333 move.vanish
.length
> move.appear
.length
&&
2334 move.vanish
[1].c
== color
2336 const v
= move.vanish
[move.vanish
.length
- 1];
2337 this.captured
= {x: v
.x
, y: v
.y
, c: v
.c
, p: v
.p
};
2338 this.subTurnTeleport
= 2;
2341 this.subTurnTeleport
= 1;
2342 this.captured
= null;
2344 if (this.isLastMove(move)) {
2345 this.turn
= C
.GetOppCol(color
);
2349 else if (!move.next
)
2356 const color
= this.turn
;
2357 const oppKingPos
= this.searchKingPos(C
.GetOppCol(color
));
2358 if (oppKingPos
.length
== 0 || this.underCheck(oppKingPos
, color
))
2362 !this.options
["balance"] ||
2363 ![1, 2].includes(this.movesCount
) ||
2368 !this.options
["doublemove"] ||
2369 this.movesCount
== 0 ||
2374 !this.options
["progressive"] ||
2375 this.subTurn
== this.movesCount
+ 1
2380 // "Stop at the first move found"
2381 atLeastOneMove(color
) {
2382 for (let i
= 0; i
< this.size
.x
; i
++) {
2383 for (let j
= 0; j
< this.size
.y
; j
++) {
2384 if (this.board
[i
][j
] != "" && this.getColor(i
, j
) == color
) {
2385 // NOTE: in fact searching for all potential moves from i,j.
2386 // I don't believe this is an issue, for now at least.
2387 const moves
= this.getPotentialMovesFrom([i
, j
]);
2388 if (moves
.some(m
=> this.filterValid([m
]).length
>= 1))
2393 if (this.hasReserve
&& this.reserve
[color
]) {
2394 for (let p
of Object
.keys(this.reserve
[color
])) {
2395 const moves
= this.getDropMovesFrom([color
, p
]);
2396 if (moves
.some(m
=> this.filterValid([m
]).length
>= 1))
2403 // What is the score ? (Interesting if game is over)
2404 getCurrentScore(move) {
2405 const color
= this.turn
;
2406 const oppCol
= C
.GetOppCol(color
);
2408 [color
]: this.searchKingPos(color
),
2409 [oppCol
]: this.searchKingPos(oppCol
)
2411 if (kingPos
[color
].length
== 0 && kingPos
[oppCol
].length
== 0)
2413 if (kingPos
[color
].length
== 0)
2414 return (color
== "w" ? "0-1" : "1-0");
2415 if (kingPos
[oppCol
].length
== 0)
2416 return (color
== "w" ? "1-0" : "0-1");
2417 if (this.atLeastOneMove(color
))
2419 // No valid move: stalemate or checkmate?
2420 if (!this.underCheck(kingPos
[color
], oppCol
))
2423 return (color
== "w" ? "0-1" : "1-0");
2426 playVisual(move, r
) {
2427 move.vanish
.forEach(v
=> {
2428 this.g_pieces
[v
.x
][v
.y
].remove();
2429 this.g_pieces
[v
.x
][v
.y
] = null;
2432 document
.getElementById(this.containerId
).querySelector(".chessboard");
2434 r
= chessboard
.getBoundingClientRect();
2435 const pieceWidth
= this.getPieceWidth(r
.width
);
2436 move.appear
.forEach(a
=> {
2437 this.g_pieces
[a
.x
][a
.y
] = document
.createElement("piece");
2438 C
.AddClass_es(this.g_pieces
[a
.x
][a
.y
],
2439 this.pieces(a
.c
, a
.x
, a
.y
)[a
.p
]["class"]);
2440 this.g_pieces
[a
.x
][a
.y
].classList
.add(C
.GetColorClass(a
.c
));
2441 this.g_pieces
[a
.x
][a
.y
].style
.width
= pieceWidth
+ "px";
2442 this.g_pieces
[a
.x
][a
.y
].style
.height
= pieceWidth
+ "px";
2443 const [ip
, jp
] = this.getPixelPosition(a
.x
, a
.y
, r
);
2444 // Translate coordinates to use chessboard as reference:
2445 this.g_pieces
[a
.x
][a
.y
].style
.transform
=
2446 `translate(${ip - r.x}px,${jp - r.y}px)`;
2447 if (this.enlightened
&& !this.enlightened
[a
.x
][a
.y
])
2448 this.g_pieces
[a
.x
][a
.y
].classList
.add("hidden");
2449 chessboard
.appendChild(this.g_pieces
[a
.x
][a
.y
]);
2451 if (this.options
["dark"])
2452 this.graphUpdateEnlightened();
2455 // TODO: send stack receive stack, or allow incremental? (good/bad points)
2456 buildMoveStack(move, r
) {
2457 this.moveStack
.push(move);
2458 this.computeNextMove(move);
2460 const newTurn
= this.turn
;
2461 if (this.moveStack
.length
== 1)
2462 this.playVisual(move, r
);
2466 board: JSON
.parse(JSON
.stringify(this.board
)) //easier
2468 this.buildMoveStack(move.next
, r
);
2471 if (this.moveStack
.length
== 1) {
2472 // Usual case (one normal move)
2473 this.afterPlay(this.moveStack
, newTurn
, {send: true, res: true});
2477 this.afterPlay(this.moveStack
, newTurn
, {send: true, res: false});
2478 this.re_initFromFen(this.gameState
.fen
, this.gameState
.board
);
2479 this.playReceivedMove(this.moveStack
.slice(1), () => {
2480 this.afterPlay(this.moveStack
, newTurn
, {send: false, res: true});
2487 // Implemented in variants using (automatic) moveStack
2488 computeNextMove(move) {}
2490 animateMoving(start
, end
, drag
, segments
, cb
) {
2491 let initPiece
= this.getDomPiece(start
.x
, start
.y
);
2492 // NOTE: cloning often not required, but light enough, and simpler
2493 let movingPiece
= initPiece
.cloneNode();
2494 initPiece
.style
.opacity
= "0";
2496 document
.getElementById(this.containerId
)
2497 const r
= container
.querySelector(".chessboard").getBoundingClientRect();
2498 if (typeof start
.x
== "string") {
2499 // Need to bound width/height (was 100% for reserve pieces)
2500 const pieceWidth
= this.getPieceWidth(r
.width
);
2501 movingPiece
.style
.width
= pieceWidth
+ "px";
2502 movingPiece
.style
.height
= pieceWidth
+ "px";
2504 const maxDist
= this.getMaxDistance(r
);
2505 const apparentColor
= this.getColor(start
.x
, start
.y
);
2506 const pieces
= this.pieces(apparentColor
, start
.x
, start
.y
);
2508 const startCode
= this.getPiece(start
.x
, start
.y
);
2509 C
.RemoveClass_es(movingPiece
, pieces
[startCode
]["class"]);
2510 C
.AddClass_es(movingPiece
, pieces
[drag
.p
]["class"]);
2511 if (apparentColor
!= drag
.c
) {
2512 movingPiece
.classList
.remove(C
.GetColorClass(apparentColor
));
2513 movingPiece
.classList
.add(C
.GetColorClass(drag
.c
));
2516 container
.appendChild(movingPiece
);
2517 const animateSegment
= (index
, cb
) => {
2518 // NOTE: move.drag could be generalized per-segment (usage?)
2519 const [i1
, j1
] = segments
[index
][0];
2520 const [i2
, j2
] = segments
[index
][1];
2521 const dep
= this.getPixelPosition(i1
, j1
, r
);
2522 const arr
= this.getPixelPosition(i2
, j2
, r
);
2523 movingPiece
.style
.transitionDuration
= "0s";
2524 movingPiece
.style
.transform
= `translate(${dep[0]}px, ${dep[1]}px)`;
2526 Math
.sqrt((arr
[0] - dep
[0]) ** 2 + (arr
[1] - dep
[1]) ** 2);
2527 const duration
= 0.2 + (distance
/ maxDist
) * 0.3;
2528 // TODO: unclear why we need this new delay below:
2530 movingPiece
.style
.transitionDuration
= duration
+ "s";
2531 // movingPiece is child of container: no need to adjust coordinates
2532 movingPiece
.style
.transform
= `translate(${arr[0]}px, ${arr[1]}px)`;
2533 setTimeout(cb
, duration
* 1000);
2537 const animateSegmentCallback
= () => {
2538 if (index
< segments
.length
)
2539 animateSegment(index
++, animateSegmentCallback
);
2541 movingPiece
.remove();
2542 initPiece
.style
.opacity
= "1";
2546 animateSegmentCallback();
2549 // Input array of objects with at least fields x,y (e.g. PiPo)
2550 animateFading(arr
, cb
) {
2551 const animLength
= 350; //TODO: 350ms? More? Less?
2553 let fadingPiece
= this.getDomPiece(v
.x
, v
.y
);
2554 fadingPiece
.style
.transitionDuration
= (animLength
/ 1000) + "s";
2555 fadingPiece
.style
.opacity
= "0";
2557 setTimeout(cb
, animLength
);
2560 animate(move, callback
) {
2561 if (this.noAnimate
|| move.noAnimate
) {
2565 let segments
= move.segments
;
2567 segments
= [ [[move.start
.x
, move.start
.y
], [move.end
.x
, move.end
.y
]] ];
2568 let targetObj
= new TargetObj(callback
);
2569 if (move.start
.x
!= move.end
.x
|| move.start
.y
!= move.end
.y
) {
2571 this.animateMoving(move.start
, move.end
, move.drag
, segments
,
2572 () => targetObj
.increment());
2574 if (move.vanish
.length
> move.appear
.length
) {
2575 const arr
= move.vanish
.slice(move.appear
.length
)
2576 // Ignore disappearing pieces hidden by some appearing ones:
2577 .filter(v
=> move.appear
.every(a
=> a
.x
!= v
.x
|| a
.y
!= v
.y
));
2578 if (arr
.length
> 0) {
2580 this.animateFading(arr
, () => targetObj
.increment());
2584 this.tryAnimateCastle(move, () => targetObj
.increment());
2586 this.customAnimate(move, segments
, () => targetObj
.increment());
2587 if (targetObj
.target
== 0)
2591 tryAnimateCastle(move, cb
) {
2594 move.vanish
.length
== 2 &&
2595 move.appear
.length
== 2 &&
2596 this.isKing(0, 0, move.vanish
[0].p
) &&
2597 this.isKing(0, 0, move.appear
[0].p
)
2599 const start
= {x: move.vanish
[1].x
, y: move.vanish
[1].y
},
2600 end
= {x: move.appear
[1].x
, y: move.appear
[1].y
};
2601 const segments
= [ [[start
.x
, start
.y
], [end
.x
, end
.y
]] ];
2602 this.animateMoving(start
, end
, null, segments
, cb
);
2608 // Potential other animations (e.g. for Suction variant)
2609 customAnimate(move, segments
, cb
) {
2610 return 0; //nb of targets
2613 playReceivedMove(moves
, callback
) {
2614 const launchAnimation
= () => {
2615 const r
= container
.querySelector(".chessboard").getBoundingClientRect();
2616 const animateRec
= i
=> {
2617 this.animate(moves
[i
], () => {
2618 this.play(moves
[i
]);
2619 this.playVisual(moves
[i
], r
);
2620 if (i
< moves
.length
- 1)
2621 setTimeout(() => animateRec(i
+1), 300);
2628 // Delay if user wasn't focused:
2629 const checkDisplayThenAnimate
= (delay
) => {
2630 if (container
.style
.display
== "none") {
2631 alert("New move! Let's go back to game...");
2632 document
.getElementById("gameInfos").style
.display
= "none";
2633 container
.style
.display
= "block";
2634 setTimeout(launchAnimation
, 700);
2637 setTimeout(launchAnimation
, delay
|| 0);
2639 let container
= document
.getElementById(this.containerId
);
2640 if (document
.hidden
) {
2641 document
.onvisibilitychange
= () => {
2642 document
.onvisibilitychange
= undefined;
2643 checkDisplayThenAnimate(700);
2647 checkDisplayThenAnimate();