- if (this.vr.canIplay(color, startSquare))
- this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
- else return;
- // For potential drag'n drop, remember start coordinates
- // (to center the piece on mouse cursor)
- const 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
+ if (this.vr.canIplay(color, startSquare)) {
+ // Emit the click event which could be used by some variants
+ const targetId =
+ (withPiece ? e.target.parentNode.id : e.target.id);
+ this.$emit("click-square", getSquareFromId(targetId));
+ if (withPiece) {
+ this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
+ // For potential drag'n drop, remember start coordinates
+ // (to center the piece on mouse cursor)
+ let parent = e.target.parentNode; //surrounding square
+ const 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);