+ },
+ computeEndArrow: function(start, end, top, left, squareWidth) {
+ const endCoords = this.coordsToXY(end, top, left, squareWidth);
+ const delta = [endCoords.x - start.x, endCoords.y - start.y];
+ const dist = Math.sqrt(delta[0] * delta[0] + delta[1] * delta[1]);
+ // Simple heuristic for now, just remove 1/3 square.
+ // TODO: should depend on the orientation.
+ const fracSqWidth = squareWidth / 3;
+ return {
+ x: endCoords.x - delta[0] * fracSqWidth / dist,
+ y: endCoords.y - delta[1] * fracSqWidth / dist
+ };
+ },
+ drawCurrentArrow: function() {
+ const boardElt = document.getElementById("gamePosition");
+ const squareWidth = boardElt.offsetWidth / V.size.y;
+ const bPos = boardElt.getBoundingClientRect();
+ const aStart =
+ this.coordsToXY(
+ [this.startArrow[0] + 0.5, this.startArrow[1] + 0.5],
+ bPos.top, bPos.left, squareWidth);
+ const aEnd =
+ this.computeEndArrow(
+ aStart, [this.movingArrow[0] + 0.5, this.movingArrow[1] + 0.5],
+ bPos.top, bPos.left, squareWidth);
+ let currentArrow = document.getElementById("currentArrow");
+ const d =
+ "M" + aStart.x + "," + aStart.y + " " + "L" + aEnd.x + "," + aEnd.y;
+ const arrowWidth = squareWidth / 4;
+ if (!!currentArrow) currentArrow.setAttribute("d", d);
+ else {
+ let domArrow =
+ document.createElementNS("http://www.w3.org/2000/svg", "path");
+ domArrow.classList.add("svg-arrow");
+ domArrow.id = "currentArrow";
+ domArrow.setAttribute("d", d);
+ domArrow.style = "stroke-width:" + arrowWidth + "px";
+ document.getElementById("arrowCanvas")
+ .insertAdjacentElement("beforeend", domArrow);
+ }
+ },
+ addArrow: function(arrow) {
+ const arrowIdx = this.arrows.findIndex(a => {
+ return (
+ a.start[0] == arrow.start[0] && a.start[1] == arrow.start[1] &&
+ a.end[0] == arrow.end[0] && a.end[1] == arrow.end[1]
+ );
+ });
+ if (arrowIdx >= 0)
+ // Erase the arrow
+ this.arrows.splice(arrowIdx, 1);
+ else
+ // Add to arrows vector:
+ this.arrows.push(arrow);
+ // NOTE: no need to draw here, will be re-draw
+ // by updated() hook callong re_setDrawings()
+ },
+ getSvgArrow: function(arrow, top, left, squareWidth) {
+ const aStart =
+ this.coordsToXY(
+ [arrow.start[0] + 0.5, arrow.start[1] + 0.5],
+ top, left, squareWidth);
+ const aEnd =
+ this.computeEndArrow(
+ aStart, [arrow.end[0] + 0.5, arrow.end[1] + 0.5],
+ top, left, squareWidth);
+ const arrowWidth = squareWidth / 4;
+ let path =
+ document.createElementNS("http://www.w3.org/2000/svg", "path");
+ path.classList.add("svg-arrow");
+ path.setAttribute(
+ "d",
+ "M" + aStart.x + "," + aStart.y + " " + "L" + aEnd.x + "," + aEnd.y
+ );
+ path.style = "stroke-width:" + arrowWidth + "px";
+ return path;
+ },
+ re_setDrawings: function() {
+ // Add some drawing on board (for some variants + arrows and circles)
+ const boardElt = document.getElementById("gamePosition");
+ if (!boardElt) return;
+ // Remove current canvas, if any
+ const curCanvas = document.getElementById("arrowCanvas");
+ if (!!curCanvas) curCanvas.parentNode.removeChild(curCanvas);
+ const squareWidth = boardElt.offsetWidth / V.size.y;
+ const bPos = boardElt.getBoundingClientRect();
+ let svgArrows = [];
+ this.arrows.forEach(a => {
+ svgArrows.push(this.getSvgArrow(a, bPos.top, bPos.left, squareWidth));
+ });
+ let vLines = [];
+ if (!!V.Lines) {
+ V.Lines.forEach(line => {
+ const lStart =
+ this.coordsToXY(line[0], bPos.top, bPos.left, squareWidth);
+ const lEnd =
+ this.coordsToXY(line[1], bPos.top, bPos.left, squareWidth);
+ let path =
+ document.createElementNS("http://www.w3.org/2000/svg", "path");
+ if (line[0][0] == line[1][0] || line[0][1] == line[1][1])
+ path.classList.add("svg-line");
+ else
+ // "Diagonals" are drawn with a lighter color (TODO: generalize)
+ path.classList.add("svg-diag");
+ path.setAttribute(
+ "d",
+ "M" + lStart.x + "," + lStart.y + " " +
+ "L" + lEnd.x + "," + lEnd.y
+ );
+ vLines.push(path);
+ });
+ }
+ let arrowCanvas =
+ document.createElementNS("http://www.w3.org/2000/svg", "svg");
+ arrowCanvas.id = "arrowCanvas";
+ arrowCanvas.setAttribute("stroke", "none");
+ let defs =
+ document.createElementNS("http://www.w3.org/2000/svg", "defs");
+ const arrowWidth = squareWidth / 4;
+ let marker =
+ document.createElementNS("http://www.w3.org/2000/svg", "marker");
+ marker.id = "arrow";
+ marker.setAttribute("markerWidth", (2 * arrowWidth) + "px");
+ marker.setAttribute("markerHeight", (3 * arrowWidth) + "px");
+ marker.setAttribute("markerUnits", "userSpaceOnUse");
+ marker.setAttribute("refX", "0");
+ marker.setAttribute("refY", (1.5 * arrowWidth) + "px");
+ marker.setAttribute("orient", "auto");
+ let head =
+ document.createElementNS("http://www.w3.org/2000/svg", "path");
+ head.classList.add("arrow-head");
+ head.setAttribute(
+ "d",
+ "M0,0 L0," + (3 * arrowWidth) + " L" +
+ (2 * arrowWidth) + "," + (1.5 * arrowWidth) + " z"
+ );
+ marker.appendChild(head);
+ defs.appendChild(marker);
+ arrowCanvas.appendChild(defs);
+ svgArrows.concat(vLines).forEach(av => arrowCanvas.appendChild(av));
+ document.getElementById("rootBoardElement").appendChild(arrowCanvas);
+ },
+ mousedown: function(e) {
+ e.preventDefault();
+ if (!this.mobileBrowser && e.which != 3)
+ // Cancel current drawing and circles, if any
+ this.cancelResetArrows();
+ if (this.mobileBrowser || e.which == 1) {
+ // Mouse left button
+ if (!this.start) {
+ this.containerPos =
+ document.getElementById("boardContainer").getBoundingClientRect();
+ // NOTE: classList[0] is enough: 'piece' is the first assigned class
+ const withPiece = (e.target.classList[0] == "piece");
+ // Show possible moves if current player allowed to play
+ const startSquare =
+ getSquareFromId(withPiece ? e.target.parentNode.id : e.target.id);
+ this.possibleMoves = [];
+ const color = this.analyze ? this.vr.turn : this.userColor;
+ 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);
+ const sq = getSquareFromId(targetId);
+ this.$emit("click-square", sq);
+ if (withPiece && !this.vr.onlyClick(sq)) {
+ this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
+ if (this.possibleMoves.length > 0) {
+ // 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);
+ }
+ }
+ }
+ }
+ else this.processMoveAttempt(e);
+ }
+ else if (e.which == 3) {
+ // Mouse right button
+ this.containerPos =
+ document.getElementById("gamePosition").getBoundingClientRect();
+ let elem = e.target;
+ // Next loop because of potential marks
+ while (elem.tagName == "IMG") elem = elem.parentNode;
+ this.startArrow = getSquareFromId(elem.id);
+ }