X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=56f34880e93dcfd75744a1d68bcb9680382518ae;hb=1ef65040168ab7d55ce921abc9d63644a937d689;hp=cf0a70c7e0dadb292642c801b3a4cf66e2642a80;hpb=cd049aa1928888cc2a87e740930552eabe748b96;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index cf0a70c7..56f34880 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -303,9 +303,9 @@ export default { elementArray.push(gameDiv); if (!!this.vr.reserve) elementArray.push(reserveBottom); const boardElt = document.querySelector(".game"); - // Square width might be undefine (at first drawing), + // boardElt might be undefine (at first drawing), // but it won't be used in this case. - const squareWidth = boardElt.offsetWidth / sizeY; + const squareWidth = (!!boardElt ? boardElt.offsetWidth / sizeY : 42); if (this.choices.length > 0 && !!boardElt) { // No choices to show at first drawing const offset = [boardElt.offsetTop, boardElt.offsetLeft]; @@ -446,10 +446,10 @@ export default { attrs: { id: "arrow", markerWidth: (2 * arrowWidth) + "px", - markerHeight: (2 * arrowWidth) + "px", + markerHeight: (3 * arrowWidth) + "px", markerUnits: "userSpaceOnUse", refX: "0", - refY: arrowWidth + "px", + refY: (1.5 * arrowWidth) + "px", orient: "auto" } }, @@ -460,8 +460,8 @@ export default { "class": { "arrow-head": true }, attrs: { d: ( - "M0,0 L0," + (2 * arrowWidth) + " " + - "L" + (2 * arrowWidth) + "," + arrowWidth + " z" + "M0,0 L0," + (3 * arrowWidth) + " L" + + (2 * arrowWidth) + "," + (1.5 * arrowWidth) + " z" ) } } @@ -519,12 +519,11 @@ export default { }; }, mousedown: function(e) { - if (!([1, 3].includes(e.which))) return; e.preventDefault(); - if (e.which != 3) + if (!this.mobileBrowser && e.which != 3) // Cancel current drawing and circles, if any this.cancelResetArrows(); - if (e.which == 1 || this.mobileBrowser) { + if (this.mobileBrowser || e.which == 1) { // Mouse left button if (!this.start) { // NOTE: classList[0] is enough: 'piece' is the first assigned class @@ -566,8 +565,8 @@ export default { } else { this.processMoveAttempt(e); } - } else { - // e.which == 3 : mouse right button + } else if (e.which == 3) { + // Mouse right button let elem = e.target; // Next loop because of potential marks while (elem.tagName == "IMG") elem = elem.parentNode; @@ -612,17 +611,16 @@ export default { } }, mouseup: function(e) { - if (!([1, 3].includes(e.which))) return; e.preventDefault(); - if (e.which == 1) { + if (this.mobileBrowser || e.which == 1) { if (!this.selectedPiece) return; // Drag'n drop. Selected piece is no longer needed: this.selectedPiece.parentNode.removeChild(this.selectedPiece); delete this.selectedPiece; this.selectedPiece = null; this.processMoveAttempt(e); - } else { - // Mouse right button (e.which == 3) + } else if (e.which == 3) { + // Mouse right button this.movingArrow = { x: -1, y: -1 }; this.processArrowAttempt(e); }