import { store } from "@/store";
export default {
name: "my-board",
- // Last move cannot be guessed from here, and is required to highlight squares
+ // Last move cannot be guessed from here, and is required for highlights.
// vr: object to check moves, print board...
// userColor is left undefined for an external observer
props: [
"in-shadow": inShadow(ci, cj),
"highlight-light": inHighlight(ci, cj) && lightSquare,
"highlight-dark": inHighlight(ci, cj) && !lightSquare,
- "incheck-light": showCheck && lightSquare && incheckSq[ci][cj],
- "incheck-dark": showCheck && !lightSquare && incheckSq[ci][cj]
+ "incheck-light":
+ showCheck && lightSquare && incheckSq[ci][cj],
+ "incheck-dark":
+ showCheck && !lightSquare && incheckSq[ci][cj]
},
attrs: {
id: getSquareId({ x: ci, y: cj })
mousedown: function(e) {
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;
+ const withPiece = e.target.classList[0] == "piece";
+ // Emit the click event which could be used by some variants
+ this.$emit(
+ "click-square",
+ getSquareFromId(withPiece ? e.target.parentNode.id : e.target.id)
+ );
+ // Start square must contain a piece.
+ if (!withPiece) return;
let parent = e.target.parentNode; //surrounding square
// Show possible moves if current player allowed to play
const startSquare = getSquareFromId(parent.id);