client/src/components/Board.vue

   1 <script>
   2 import { getSquareId, getSquareFromId } from "@/utils/squareId";
   3 import { ArrayFun } from "@/utils/array";
   4 import { store } from "@/store";
   5 export default {
   6   name: "my-board",
   7   // Last move cannot be guessed from here, and is required for highlights.
   8   // vr: object to check moves, print board...
   9   // userColor is left undefined for an external observer
  10   props: [
  11     "vr",
  12     "lastMove",
  13     "analyze",
  14     "score",
  15     "incheck",
  16     "orientation",
  17     "userColor",
  18     "vname"
  19   ],
  20   data: function() {
  21     return {
  22       mobileBrowser: ("ontouchstart" in window),
  23       possibleMoves: [], //filled after each valid click/dragstart
  24       choices: [], //promotion pieces, or checkered captures... (as moves)
  25       containerPos: null,
  26       selectedPiece: null, //moving piece (or clicked piece)
  27       start: null, //pixels coordinates + id of starting square (click or drag)
  28       startArrow: null,
  29       movingArrow: null,
  30       arrows: [], //object of {start: x,y / end: x,y}
  31       circles: {}, //object of squares' ID --> true (TODO: use a set?)
  32       click: "",
  33       clickTime: 0,
  34       settings: store.state.settings
  35     };
  36   },
  37   render(h) {
  38     if (!this.vr) {
  39       // Return empty div of class 'game' to avoid error when setting size
  40       return h(
  41         "div",
  42         { "class": { game: true } }
  43       );
  44     }
  45     const [sizeX, sizeY] = [V.size.x, V.size.y];
  46     // Precompute hints squares to facilitate rendering
  47     let hintSquares = ArrayFun.init(sizeX, sizeY, false);
  48     this.possibleMoves.forEach(m => {
  49       hintSquares[m.end.x][m.end.y] = true;
  50     });
  51     // Also precompute in-check squares
  52     let incheckSq = ArrayFun.init(sizeX, sizeY, false);
  53     this.incheck.forEach(sq => {
  54       incheckSq[sq[0]][sq[1]] = true;
  55     });
  56
  57     let lm = this.lastMove;
  58     // Precompute lastMove highlighting squares
  59     const lmHighlights = {};
  60     if (!!lm) {
  61       if (!Array.isArray(lm)) lm = [lm];
  62       lm.forEach(m => {
  63         if (V.OnBoard(m.start.x, m.start.y))
  64           lmHighlights[m.start.x + sizeX * m.start.y] = true;
  65         if (V.OnBoard(m.end.x, m.end.y))
  66           lmHighlights[m.end.x + sizeX * m.end.y] = true;
  67       });
  68     }
  69     const showLight = (
  70       this.settings.highlight &&
  71       ["all","highlight"].includes(V.ShowMoves)
  72     );
  73     const showCheck = (
  74       this.settings.highlight &&
  75       ["all","highlight","byrow"].includes(V.ShowMoves)
  76     );
  77     const orientation = !V.CanFlip ? "w" : this.orientation;
  78     // Ensure that squares colors do not change when board is flipped
  79     const lightSquareMod = (sizeX + sizeY) % 2;
  80     const showPiece = (x, y) => {
  81       return (
  82         this.vr.board[x][y] != V.EMPTY &&
  83         (!this.vr.enlightened || this.analyze || this.score != "*" ||
  84           (!!this.userColor && this.vr.enlightened[this.userColor][x][y]))
  85       );
  86     };
  87     const inHighlight = (x, y) => {
  88       return showLight && !!lmHighlights[x + sizeX * y];
  89     };
  90     const inShadow = (x, y) => {
  91       return (
  92         !this.analyze &&
  93         this.score == "*" &&
  94         this.vr.enlightened &&
  95         (!this.userColor || !this.vr.enlightened[this.userColor][x][y])
  96       );
  97     };
  98     // Create board element (+ reserves if needed by variant)
  99     let elementArray = [];
 100     const gameDiv = h(
 101       "div",
 102       {
 103         attrs: { id: "gamePosition" },
 104         "class": {
 105           game: true,
 106           clearer: true
 107         }
 108       },
 109       [...Array(sizeX).keys()].map(i => {
 110         const ci = orientation == "w" ? i : sizeX - i - 1;
 111         return h(
 112           "div",
 113           {
 114             "class": {
 115               row: true
 116             },
 117             style: { opacity: this.choices.length > 0 ? "0.5" : "1" }
 118           },
 119           [...Array(sizeY).keys()].map(j => {
 120             const cj = orientation == "w" ? j : sizeY - j - 1;
 121             const squareId = "sq-" + ci + "-" + cj;
 122             let elems = [];
 123             if (showPiece(ci, cj)) {
 124               elems.push(
 125                 h("img", {
 126                   "class": {
 127                     piece: true,
 128                     ghost:
 129                       !!this.selectedPiece &&
 130                       this.selectedPiece.parentNode.id == squareId
 131                   },
 132                   attrs: {
 133                     src:
 134                       "/images/pieces/" +
 135                       this.vr.getPpath(
 136                         this.vr.board[ci][cj],
 137                         // Extra args useful for some variants:
 138                         this.userColor,
 139                         this.score,
 140                         this.orientation) +
 141                       V.IMAGE_EXTENSION
 142                   }
 143                 })
 144               );
 145             }
 146             if (this.settings.hints && hintSquares[ci][cj]) {
 147               elems.push(
 148                 h("img", {
 149                   "class": {
 150                     "mark-square": true
 151                   },
 152                   attrs: {
 153                     src: "/images/mark.svg"
 154                   }
 155                 })
 156               );
 157             }
 158             if (!!this.circles[squareId]) {
 159               elems.push(
 160                 h("img", {
 161                   "class": {
 162                     "circle-square": true
 163                   },
 164                   attrs: {
 165                     src: "/images/circle.svg"
 166                   }
 167                 })
 168               );
 169             }
 170             const lightSquare = (ci + cj) % 2 == lightSquareMod;
 171             return h(
 172               "div",
 173               {
 174                 "class": {
 175                   board: true,
 176                   ["board" + sizeY]: true,
 177                   "light-square": lightSquare && !V.Monochrome,
 178                   "dark-square": !lightSquare || !!V.Monochrome,
 179                   [this.settings.bcolor]: true,
 180                   "in-shadow": inShadow(ci, cj),
 181                   "highlight-light": inHighlight(ci, cj) && lightSquare,
 182                   "highlight-dark": inHighlight(ci, cj) && !lightSquare,
 183                   "incheck-light":
 184                     showCheck && lightSquare && incheckSq[ci][cj],
 185                   "incheck-dark":
 186                     showCheck && !lightSquare && incheckSq[ci][cj]
 187                 },
 188                 attrs: {
 189                   id: getSquareId({ x: ci, y: cj })
 190                 }
 191               },
 192               elems
 193             );
 194           })
 195         );
 196       })
 197     );
 198     if (!!this.vr.reserve) {
 199       const playingColor = this.userColor || "w"; //default for an observer
 200       const shiftIdx = playingColor == "w" ? 0 : 1;
 201       // Some variants have more than sizeY reserve pieces (Clorange: 10)
 202       const reserveSquareNb = Math.max(sizeY, V.RESERVE_PIECES.length);
 203       let myReservePiecesArray = [];
 204       for (let i = 0; i < V.RESERVE_PIECES.length; i++) {
 205         const qty = this.vr.reserve[playingColor][V.RESERVE_PIECES[i]];
 206         myReservePiecesArray.push(
 207           h(
 208             "div",
 209             {
 210               "class": { board: true, ["board" + reserveSquareNb]: true },
 211               attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) },
 212               style: { opacity: qty > 0 ? 1 : 0.35 }
 213             },
 214             [
 215               h("img", {
 216                 "class": { piece: true, reserve: true },
 217                 attrs: {
 218                   src:
 219                     "/images/pieces/" +
 220                     this.vr.getReservePpath(i, playingColor, orientation) +
 221                     ".svg"
 222                 }
 223               }),
 224               h("sup", { "class": { "reserve-count": true } }, [ qty ])
 225             ]
 226           )
 227         );
 228       }
 229       let oppReservePiecesArray = [];
 230       const oppCol = V.GetOppCol(playingColor);
 231       for (let i = 0; i < V.RESERVE_PIECES.length; i++) {
 232         const qty = this.vr.reserve[oppCol][V.RESERVE_PIECES[i]];
 233         oppReservePiecesArray.push(
 234           h(
 235             "div",
 236             {
 237               "class": { board: true, ["board" + reserveSquareNb]: true },
 238               attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) },
 239               style: { opacity: qty > 0 ? 1 : 0.35 }
 240             },
 241             [
 242               h("img", {
 243                 "class": { piece: true, reserve: true },
 244                 attrs: {
 245                   src:
 246                     "/images/pieces/" +
 247                     this.vr.getReservePpath(i, oppCol, orientation) +
 248                     ".svg"
 249                 }
 250               }),
 251               h("sup", { "class": { "reserve-count": true } }, [ qty ])
 252             ]
 253           )
 254         );
 255       }
 256       const myReserveTop = (
 257         (playingColor == 'w' && orientation == 'b') ||
 258         (playingColor == 'b' && orientation == 'w')
 259       );
 260       // Center reserves, assuming same number of pieces for each side:
 261       const nbReservePieces = myReservePiecesArray.length;
 262       const marginLeft =
 263         ((100 - nbReservePieces * (100 / reserveSquareNb)) / 2) + "%";
 264       const reserveTop =
 265         h(
 266           "div",
 267           {
 268             "class": {
 269               game: true,
 270               "reserve-div": true
 271             },
 272             style: {
 273               "margin-left": marginLeft
 274             }
 275           },
 276           [
 277             h(
 278               "div",
 279               {
 280                 "class": {
 281                   row: true,
 282                   "reserve-row": true
 283                 }
 284               },
 285               myReserveTop ? myReservePiecesArray : oppReservePiecesArray
 286             )
 287           ]
 288         );
 289       var reserveBottom =
 290         h(
 291           "div",
 292           {
 293             "class": {
 294               game: true,
 295               "reserve-div": true
 296             },
 297             style: {
 298               "margin-left": marginLeft
 299             }
 300           },
 301           [
 302             h(
 303               "div",
 304               {
 305                 "class": {
 306                   row: true,
 307                   "reserve-row": true
 308                 }
 309               },
 310               myReserveTop ? oppReservePiecesArray : myReservePiecesArray
 311             )
 312           ]
 313         );
 314       elementArray.push(reserveTop);
 315     }
 316     elementArray.push(gameDiv);
 317     if (!!this.vr.reserve) elementArray.push(reserveBottom);
 318     const boardElt = document.getElementById("gamePosition");
 319     // boardElt might be undefine (at first drawing)
 320     if (this.choices.length > 0 && !!boardElt) {
 321       const squareWidth = boardElt.offsetWidth / sizeY;
 322       const offset = [boardElt.offsetTop, boardElt.offsetLeft];
 323       const maxNbeltsPerRow = Math.min(this.choices.length, sizeY);
 324       let topOffset = offset[0] + (sizeY / 2) * squareWidth - squareWidth / 2;
 325       let choicesHeight = squareWidth;
 326       if (this.choices.length >= sizeY) {
 327         // A second row is required (Eightpieces variant)
 328         topOffset -= squareWidth / 2;
 329         choicesHeight *= 2;
 330       }
 331       const choices = h(
 332         "div",
 333         {
 334           attrs: { id: "choices" },
 335           "class": { row: true },
 336           style: {
 337             top: topOffset + "px",
 338             left:
 339               offset[1] +
 340               (squareWidth * Math.max(sizeY - this.choices.length, 0)) / 2 +
 341               "px",
 342             width: (maxNbeltsPerRow * squareWidth) + "px",
 343             height: choicesHeight + "px"
 344           }
 345         },
 346         [ h(
 347           "div",
 348           {
 349             "class": { "full-width": true }
 350           },
 351           this.choices.map(m => {
 352             // A "choice" is a move
 353             const applyMove = (e) => {
 354               e.stopPropagation();
 355               // Force a delay between move is shown and clicked
 356               // (otherwise a "double-click" bug might occur)
 357               if (Date.now() - this.clickTime < 200) return;
 358               this.choices = [];
 359               this.play(m);
 360             };
 361             const onClick =
 362               this.mobileBrowser
 363                 ? { touchend: applyMove }
 364                 : { mouseup: applyMove };
 365             return h(
 366               "div",
 367               {
 368                 "class": {
 369                   board: true,
 370                   ["board" + sizeY]: true
 371                 },
 372                 style: {
 373                   width: (100 / maxNbeltsPerRow) + "%",
 374                   "padding-bottom": (100 / maxNbeltsPerRow) + "%"
 375                 }
 376               },
 377               [
 378                 h("img", {
 379                   attrs: {
 380                     src:
 381                       "/images/pieces/" +
 382                       // orientation: extra arg useful for some variants:
 383                       this.vr.getPPpath(m, this.orientation) +
 384                       V.IMAGE_EXTENSION
 385                   },
 386                   "class": { "choice-piece": true },
 387                   on: onClick
 388                 })
 389               ]
 390             );
 391           })
 392         ) ]
 393       );
 394       elementArray.unshift(choices);
 395     }
 396     let onEvents = {};
 397     // NOTE: click = mousedown + mouseup
 398     if (this.mobileBrowser) {
 399       onEvents = {
 400         on: {
 401           touchstart: this.mousedown,
 402           touchmove: this.mousemove,
 403           touchend: this.mouseup
 404         }
 405       };
 406     } else {
 407       onEvents = {
 408         on: {
 409           mousedown: this.mousedown,
 410           mousemove: this.mousemove,
 411           mouseup: this.mouseup,
 412           contextmenu: this.blockContextMenu
 413         }
 414       };
 415     }
 416     return (
 417       h(
 418         "div",
 419         Object.assign({ attrs: { id: "rootBoardElement" } }, onEvents),
 420         elementArray
 421       )
 422     );
 423   },
 424   updated: function() {
 425     this.re_setDrawings();
 426   },
 427   methods: {
 428     blockContextMenu: function(e) {
 429       e.preventDefault();
 430       e.stopPropagation();
 431       return false;
 432     },
 433     cancelResetArrows: function() {
 434       this.startArrow = null;
 435       this.arrows = [];
 436       this.circles = {};
 437       const curCanvas = document.getElementById("arrowCanvas");
 438       if (!!curCanvas) curCanvas.parentNode.removeChild(curCanvas);
 439     },
 440     coordsToXY: function(coords, top, left, squareWidth) {
 441       return {
 442         // [1] for x and [0] for y because conventions in rules are inversed.
 443         x: (
 444           left + window.scrollX +
 445           (
 446             squareWidth *
 447             (this.orientation == 'w' ? coords[1] : (V.size.y - coords[1]))
 448           )
 449         ),
 450         y: (
 451           top + window.scrollY +
 452           (
 453             squareWidth *
 454             (this.orientation == 'w' ? coords[0] : (V.size.x - coords[0]))
 455           )
 456         )
 457       };
 458     },
 459     computeEndArrow: function(start, end, top, left, squareWidth) {
 460       const endCoords = this.coordsToXY(end, top, left, squareWidth);
 461       const delta = [endCoords.x - start.x, endCoords.y - start.y];
 462       const dist = Math.sqrt(delta[0] * delta[0] + delta[1] * delta[1]);
 463       // Simple heuristic for now, just remove 1/3 square.
 464       // TODO: should depend on the orientation.
 465       const fracSqWidth = squareWidth / 3;
 466       return {
 467         x: endCoords.x - delta[0] * fracSqWidth / dist,
 468         y: endCoords.y - delta[1] * fracSqWidth / dist
 469       };
 470     },
 471     drawCurrentArrow: function() {
 472       const boardElt = document.getElementById("gamePosition");
 473       const squareWidth = boardElt.offsetWidth / V.size.y;
 474       const bPos = boardElt.getBoundingClientRect();
 475       const aStart =
 476         this.coordsToXY(
 477           [this.startArrow[0] + 0.5, this.startArrow[1] + 0.5],
 478           bPos.top, bPos.left, squareWidth);
 479       const aEnd =
 480         this.computeEndArrow(
 481           aStart, [this.movingArrow[0] + 0.5, this.movingArrow[1] + 0.5],
 482           bPos.top, bPos.left, squareWidth);
 483       let currentArrow = document.getElementById("currentArrow");
 484       const d =
 485         "M" + aStart.x + "," + aStart.y + " " + "L" + aEnd.x + "," + aEnd.y;
 486       const arrowWidth = squareWidth / 4;
 487       if (!!currentArrow) currentArrow.setAttribute("d", d);
 488       else {
 489         let domArrow =
 490           document.createElementNS("http://www.w3.org/2000/svg", "path");
 491         domArrow.classList.add("svg-arrow");
 492         domArrow.id = "currentArrow";
 493         domArrow.setAttribute("d", d);
 494         domArrow.style = "stroke-width:" + arrowWidth + "px";
 495         document.getElementById("arrowCanvas")
 496           .insertAdjacentElement("beforeend", domArrow);
 497       }
 498     },
 499     addArrow: function(arrow) {
 500       this.arrows.push(arrow);
 501       // Also add to DOM:
 502       const boardElt = document.getElementById("gamePosition");
 503       const squareWidth = boardElt.offsetWidth / V.size.y;
 504       const bPos = boardElt.getBoundingClientRect();
 505       const newArrow =
 506         this.getSvgArrow(arrow, bPos.top, bPos.left, squareWidth);
 507       document.getElementById("arrowCanvas")
 508         .insertAdjacentElement("beforeend", newArrow);
 509     },
 510     getSvgArrow: function(arrow, top, left, squareWidth) {
 511       const aStart =
 512         this.coordsToXY(
 513           [arrow.start[0] + 0.5, arrow.start[1] + 0.5],
 514           top, left, squareWidth);
 515       const aEnd =
 516         this.computeEndArrow(
 517           aStart, [arrow.end[0] + 0.5, arrow.end[1] + 0.5],
 518           top, left, squareWidth);
 519       const arrowWidth = squareWidth / 4;
 520       let path =
 521         document.createElementNS("http://www.w3.org/2000/svg", "path");
 522       path.classList.add("svg-arrow");
 523       path.setAttribute(
 524         "d",
 525         "M" + aStart.x + "," + aStart.y + " " + "L" + aEnd.x + "," + aEnd.y
 526       );
 527       path.style = "stroke-width:" + arrowWidth + "px";
 528       return path;
 529     },
 530     re_setDrawings: function() {
 531       // Remove current canvas, if any
 532       const curCanvas = document.getElementById("arrowCanvas");
 533       if (!!curCanvas) curCanvas.parentNode.removeChild(curCanvas);
 534       // Add some drawing on board (for some variants + arrows and circles)
 535       const boardElt = document.getElementById("gamePosition");
 536       const squareWidth = boardElt.offsetWidth / V.size.y;
 537       const bPos = boardElt.getBoundingClientRect();
 538       let svgArrows = [];
 539       this.arrows.forEach(a => {
 540         svgArrows.push(this.getSvgArrow(a, bPos.top, bPos.left, squareWidth));
 541       });
 542       let vLines = [];
 543       if (!!V.Lines) {
 544         V.Lines.forEach(line => {
 545           const lStart =
 546             this.coordsToXY(line[0], bPos.top, bPos.left, squareWidth);
 547           const lEnd =
 548             this.coordsToXY(line[1], bPos.top, bPos.left, squareWidth);
 549           let path =
 550             document.createElementNS("http://www.w3.org/2000/svg", "path");
 551           path.classList.add("svg-line");
 552           path.setAttribute(
 553             "d",
 554             "M" + lStart.x + "," + lStart.y + " " +
 555               "L" + lEnd.x + "," + lEnd.y
 556           );
 557           vLines.push(path);
 558         });
 559       }
 560       let arrowCanvas =
 561         document.createElementNS("http://www.w3.org/2000/svg", "svg");
 562       arrowCanvas.id = "arrowCanvas";
 563       arrowCanvas.setAttribute("stroke", "none");
 564       let defs =
 565         document.createElementNS("http://www.w3.org/2000/svg", "defs");
 566       const arrowWidth = squareWidth / 4;
 567       let marker =
 568         document.createElementNS("http://www.w3.org/2000/svg", "marker");
 569       marker.id = "arrow";
 570       marker.setAttribute("markerWidth", (2 * arrowWidth) + "px");
 571       marker.setAttribute("markerHeight", (3 * arrowWidth) + "px");
 572       marker.setAttribute("markerUnits", "userSpaceOnUse");
 573       marker.setAttribute("refX", "0");
 574       marker.setAttribute("refY", (1.5 * arrowWidth) + "px");
 575       marker.setAttribute("orient", "auto");
 576       let head =
 577         document.createElementNS("http://www.w3.org/2000/svg", "path");
 578       head.classList.add("arrow-head");
 579       head.setAttribute(
 580         "d",
 581         "M0,0 L0," + (3 * arrowWidth) + " L" +
 582           (2 * arrowWidth) + "," + (1.5 * arrowWidth) + " z"
 583       );
 584       marker.appendChild(head);
 585       defs.appendChild(marker);
 586       arrowCanvas.appendChild(defs);
 587       svgArrows.concat(vLines).forEach(av => arrowCanvas.appendChild(av));
 588       document.getElementById("rootBoardElement").appendChild(arrowCanvas);
 589     },
 590     mousedown: function(e) {
 591       e.preventDefault();
 592       if (!this.mobileBrowser && e.which != 3)
 593         // Cancel current drawing and circles, if any
 594         this.cancelResetArrows();
 595       this.containerPos =
 596         document.getElementById("boardContainer").getBoundingClientRect();
 597       if (this.mobileBrowser || e.which == 1) {
 598         // Mouse left button
 599         if (!this.start) {
 600           // NOTE: classList[0] is enough: 'piece' is the first assigned class
 601           const withPiece = (e.target.classList[0] == "piece");
 602           // Emit the click event which could be used by some variants
 603           this.$emit(
 604             "click-square",
 605             getSquareFromId(withPiece ? e.target.parentNode.id : e.target.id)
 606           );
 607           // Start square must contain a piece.
 608           if (!withPiece) return;
 609           let parent = e.target.parentNode; //surrounding square
 610           // Show possible moves if current player allowed to play
 611           const startSquare = getSquareFromId(parent.id);
 612           this.possibleMoves = [];
 613           const color = this.analyze ? this.vr.turn : this.userColor;
 614           if (this.vr.canIplay(color, startSquare))
 615             this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
 616           // For potential drag'n drop, remember start coordinates
 617           // (to center the piece on mouse cursor)
 618           const rect = parent.getBoundingClientRect();
 619           this.start = {
 620             x: rect.x + rect.width / 2,
 621             y: rect.y + rect.width / 2,
 622             id: parent.id
 623           };
 624           // Add the moving piece to the board, just after current image
 625           this.selectedPiece = e.target.cloneNode();
 626           Object.assign(
 627             this.selectedPiece.style,
 628             {
 629               position: "absolute",
 630               top: 0,
 631               display: "inline-block",
 632               zIndex: 3000
 633             }
 634           );
 635           parent.insertBefore(this.selectedPiece, e.target.nextSibling);
 636         } else {
 637           this.processMoveAttempt(e);
 638         }
 639       } else if (e.which == 3) {
 640         // Mouse right button
 641         let elem = e.target;
 642         // Next loop because of potential marks
 643         while (elem.tagName == "IMG") elem = elem.parentNode;
 644         this.startArrow = getSquareFromId(elem.id);
 645       }
 646     },
 647     mousemove: function(e) {
 648       if (!this.selectedPiece && !this.startArrow) return;
 649       // Cancel if off boardContainer
 650       const [offsetX, offsetY] =
 651         this.mobileBrowser
 652           ?
 653             [
 654               e.changedTouches[0].pageX,
 655               // TODO: fixing attempt for smartphones, removing window.scrollY
 656               e.changedTouches[0].pageY - window.scrollY
 657             ]
 658           : [e.clientX, e.clientY];
 659       if (
 660         offsetX < this.containerPos.left ||
 661         offsetX > this.containerPos.right ||
 662         offsetY < this.containerPos.top ||
 663         offsetY > this.containerPos.bottom
 664       ) {
 665         this.selectedPiece = null;
 666         this.startArrow = null;
 667         return;
 668       }
 669       e.preventDefault();
 670       if (!!this.selectedPiece) {
 671         // There is an active element: move it around
 672         Object.assign(
 673           this.selectedPiece.style,
 674           {
 675             left: offsetX - this.start.x + "px",
 676             top: offsetY - this.start.y + "px"
 677           }
 678         );
 679       }
 680       else {
 681         let elem = e.target;
 682         // Next loop because of potential marks
 683         while (elem.tagName == "IMG") elem = elem.parentNode;
 684         // To center the arrow in square:
 685         const movingCoords = getSquareFromId(elem.id);
 686         if (
 687           movingCoords[0] != this.startArrow[0] ||
 688           movingCoords[1] != this.startArrow[1]
 689         ) {
 690           this.movingArrow = movingCoords;
 691           this.drawCurrentArrow();
 692         }
 693       }
 694     },
 695     mouseup: function(e) {
 696       e.preventDefault();
 697       if (this.mobileBrowser || e.which == 1) {
 698         if (!this.selectedPiece) return;
 699         // Drag'n drop. Selected piece is no longer needed:
 700         this.selectedPiece.parentNode.removeChild(this.selectedPiece);
 701         delete this.selectedPiece;
 702         this.selectedPiece = null;
 703         this.processMoveAttempt(e);
 704       } else if (e.which == 3) {
 705         // Mouse right button
 706         this.movingArrow = null;
 707         this.processArrowAttempt(e);
 708       }
 709     },
 710     // Called by BaseGame after partially undoing multi-moves:
 711     resetCurrentAttempt: function() {
 712       this.possibleMoves = [];
 713       this.start = null;
 714       this.click = "";
 715       this.selectedPiece = null;
 716     },
 717     processMoveAttempt: function(e) {
 718       // Obtain the move from start and end squares
 719       const [offsetX, offsetY] =
 720         this.mobileBrowser
 721           ?
 722             [
 723               e.changedTouches[0].pageX,
 724               e.changedTouches[0].pageY - window.scrollY
 725             ]
 726           : [e.clientX, e.clientY];
 727       let landing = document.elementFromPoint(offsetX, offsetY);
 728       // Next condition: classList.contains(piece) fails because of marks
 729       while (landing.tagName == "IMG") landing = landing.parentNode;
 730       if (this.start.id == landing.id) {
 731         if (this.click == landing.id) {
 732           // Second click on same square: cancel current move
 733           this.possibleMoves = [];
 734           this.start = null;
 735           this.click = "";
 736         } else this.click = landing.id;
 737         return;
 738       }
 739       this.start = null;
 740       // OK: process move attempt, landing is a square node
 741       let endSquare = getSquareFromId(landing.id);
 742       let moves = this.findMatchingMoves(endSquare);
 743       this.possibleMoves = [];
 744       if (moves.length > 1) {
 745         this.clickTime = Date.now();
 746         this.choices = moves;
 747       } else if (moves.length == 1) this.play(moves[0]);
 748       // else: forbidden move attempt
 749     },
 750     processArrowAttempt: function(e) {
 751       // Obtain the arrow from start and end squares
 752       const [offsetX, offsetY] = [e.clientX, e.clientY];
 753       let landing = document.elementFromPoint(offsetX, offsetY);
 754       // Next condition: classList.contains(piece) fails because of marks
 755       while (landing.tagName == "IMG") landing = landing.parentNode;
 756       const landingCoords = getSquareFromId(landing.id);
 757       if (
 758         this.startArrow[0] == landingCoords[0] &&
 759         this.startArrow[1] == landingCoords[1]
 760       ) {
 761         // Draw (or erase) a circle
 762         this.$set(this.circles, landing.id, !this.circles[landing.id]);
 763       }
 764       else {
 765         // OK: add arrow, landing is a new square
 766         const currentArrow = document.getElementById("currentArrow");
 767         currentArrow.parentNode.removeChild(currentArrow);
 768         this.addArrow({
 769           start: this.startArrow,
 770           end: landingCoords
 771         });
 772       }
 773       this.startArrow = null;
 774     },
 775     findMatchingMoves: function(endSquare) {
 776       // Run through moves list and return the matching set (if promotions...)
 777       return (
 778         this.possibleMoves.filter(m => {
 779           return (endSquare[0] == m.end.x && endSquare[1] == m.end.y);
 780         })
 781       );
 782     },
 783     play: function(move) {
 784       this.$emit("play-move", move);
 785     }
 786   }
 787 };
 788 </script>
 789
 790 <style lang="sass">
 791 // SVG dynamically added, so not scoped
 792 #arrowCanvas
 793   pointer-events: none
 794   position: absolute
 795   top: 0
 796   left: 0
 797   width: 100%
 798   height: 100%
 799
 800 .svg-arrow
 801   opacity: 0.65
 802   stroke: #5f0e78
 803   fill: none
 804   marker-end: url(#arrow)
 805
 806 .svg-line
 807   stroke: black
 808
 809 .arrow-head
 810   fill: #5f0e78
 811 </style>
 812
 813 <style lang="sass" scoped>
 814 @import "@/styles/_board_squares_img.sass";
 815
 816 // NOTE: no variants with reserve of size != 8
 817 .game.reserve-div
 818   margin-bottom: 18px
 819 .reserve-count
 820   padding-left: 40%
 821 .reserve-row
 822   margin-bottom: 15px
 823
 824 .full-width
 825   width: 100%
 826
 827 .game
 828   user-select: none
 829   width: 100%
 830   margin: 0
 831   .board
 832     cursor: pointer
 833
 834 #choices
 835   user-select: none
 836   margin: 0
 837   position: absolute
 838   z-index: 300
 839   overflow-y: inherit
 840   background-color: rgba(0,0,0,0)
 841   img
 842     cursor: pointer
 843     background-color: #e6ee9c
 844     &:hover
 845       background-color: skyblue
 846     &.choice-piece
 847       width: 100%
 848       height: auto
 849       display: block
 850
 851 img.ghost
 852   position: absolute
 853   opacity: 0.5
 854   top: 0
 855
 856 .incheck-light
 857   background-color: rgba(204, 51, 0, 0.7) !important
 858 .incheck-dark
 859   background-color: rgba(204, 51, 0, 0.9) !important
 860
 861 .light-square.lichess
 862   background-color: #f0d9b5;
 863 .dark-square.lichess
 864   background-color: #b58863;
 865
 866 .light-square.chesscom
 867   background-color: #e5e5ca;
 868 .dark-square.chesscom
 869   background-color: #6f8f57;
 870
 871 .light-square.chesstempo
 872   background-color: #dfdfdf;
 873 .dark-square.chesstempo
 874   background-color: #7287b6;
 875
 876 // TODO: no predefined highlight colors, but layers. How?
 877
 878 .light-square.lichess.highlight-light
 879   background-color: #cdd26a
 880 .dark-square.lichess.highlight-dark
 881   background-color: #aaa23a
 882
 883 .light-square.chesscom.highlight-light
 884   background-color: #f7f783
 885 .dark-square.chesscom.highlight-dark
 886   background-color: #bacb44
 887
 888 .light-square.chesstempo.highlight-light
 889   background-color: #9f9fff
 890 .dark-square.chesstempo.highlight-dark
 891   background-color: #557fff
 892 </style>