- // Abort if a piece is already being processed, or target is not a piece.
- // NOTE: just looking at classList[0] because piece is the first assigned class
- if (!!this.selectedPiece || e.target.classList[0] != "piece") return;
- e.preventDefault(); //disable native drag & drop
- let parent = e.target.parentNode; //the surrounding square
- // Next few lines to center the piece on mouse cursor
- let rect = parent.getBoundingClientRect();
- this.start = {
- x: rect.x + rect.width / 2,
- y: rect.y + rect.width / 2,
- id: parent.id
- };
- this.selectedPiece = e.target.cloneNode();
- let spStyle = this.selectedPiece.style;
- spStyle.position = "absolute";
- spStyle.top = 0;
- spStyle.display = "inline-block";
- spStyle.zIndex = 3000;
- const startSquare = getSquareFromId(parent.id);
- this.possibleMoves = [];
- const color = this.analyze ? this.vr.turn : this.userColor;
- if (this.vr.canIplay(color, startSquare))
- this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
- // Next line add moving piece just after current image
- // (required for Crazyhouse reserve)
- parent.insertBefore(this.selectedPiece, e.target.nextSibling);
+ e.preventDefault();
+ if (!this.start) {
+ // Start square must contain a piece.
+ // NOTE: classList[0] is enough: 'piece' is the first assigned class
+ if (e.target.classList[0] != "piece") return;
+ let parent = e.target.parentNode; //surrounding square
+ // Show possible moves if current player allowed to play
+ const startSquare = getSquareFromId(parent.id);
+ this.possibleMoves = [];
+ const color = this.analyze ? this.vr.turn : this.userColor;
+ if (this.vr.canIplay(color, startSquare))
+ this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
+ // For potential drag'n drop, remember start coordinates
+ // (to center the piece on mouse cursor)
+ let rect = parent.getBoundingClientRect();
+ this.start = {
+ x: rect.x + rect.width / 2,
+ y: rect.y + rect.width / 2,
+ id: parent.id
+ };
+ // Add the moving piece to the board, just after current image
+ this.selectedPiece = e.target.cloneNode();
+ Object.assign(
+ this.selectedPiece.style,
+ {
+ position: "absolute",
+ top: 0,
+ display: "inline-block",
+ zIndex: 3000
+ }
+ );
+ parent.insertBefore(this.selectedPiece, e.target.nextSibling);
+ } else {
+ this.processMoveAttempt(e);
+ }