X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=b45280821e91119e533e00ca046206780df93b79;hb=cdab566355412821c9187078ee0864ceb30545de;hp=1d650ac034d9ccb808170a8ab03bcabd4936768b;hpb=9a7a1ccca45d083f50d92bc15cd389c14149b50a;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 1d650ac0..b4528082 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -365,7 +365,7 @@ export default { const squareWidth = boardElt.offsetWidth / sizeY; const offset = [boardElt.offsetTop, boardElt.offsetLeft]; const maxNbeltsPerRow = Math.min(this.choices.length, sizeY); - let topOffset = offset[0] + (sizeY / 2) * squareWidth - squareWidth / 2; + let topOffset = offset[0] + ((sizeX - 1) / 2) * squareWidth; let choicesHeight = squareWidth; if (this.choices.length >= sizeY) { // A second row is required (Eightpieces variant) @@ -402,10 +402,12 @@ export default { this.choices = []; this.play(m); }; + const stopPropagation = (e) => { e.stopPropagation(); } const onClick = this.mobileBrowser - ? { touchend: applyMove } - : { mouseup: applyMove }; + // Must cancel mousedown logic: + ? { touchstart: stopPropagation, touchend: applyMove } + : { mousedown: stopPropagation, mouseup: applyMove }; return h( "div", { @@ -423,7 +425,7 @@ export default { attrs: { src: "/images/pieces/" + - // orientation: extra arg useful for some variants: + // orientation: extra arg useful for some variants this.vr.getPPpath(m, this.orientation) + V.IMAGE_EXTENSION }, @@ -657,30 +659,33 @@ export default { // 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) { + const sq = getSquareFromId(targetId); + this.$emit("click-square", sq); + if (withPiece && !this.vr.onlyClick(sq)) { 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); + 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); + } } } }