X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=799185e46113be5d1e83b2eaa18f0b75fbf156f8;hb=d5af4af2ac7d86bed9166916eb1610736647df0a;hp=0430c68fe2c2e528b7323ed59bde9e71109997b8;hpb=1e8a838649e16509c80c9933d99d78856e11b5c2;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 0430c68f..799185e4 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -171,7 +171,11 @@ export default { }) ); } - const lightSquare = (ci + cj) % 2 == lightSquareMod; + const oddity = (ci + cj) % 2; + const lightSquare = ( + (!V.DarkBottomRight && oddity == lightSquareMod) || + (V.DarkBottomRight && oddity != lightSquareMod) + ); return h( "div", { @@ -190,7 +194,9 @@ export default { showCheck && lightSquare && incheckSq[ci][cj], "incheck-dark": showCheck && !lightSquare && incheckSq[ci][cj], - "hover-highlight": this.vr.hoverHighlight(ci, cj) + "hover-highlight": + this.vr.hoverHighlight( + [ci, cj], !this.analyze ? this.userColor : null) }, attrs: { id: getSquareId({ x: ci, y: cj }) @@ -293,7 +299,8 @@ export default { (!myReserveTop && !!this.vr.reserve[playingColor]) ); // Center reserves, assuming same number of pieces for each side: - const nbReservePieces = myReservePiecesArray.length; + const nbReservePieces = + Math.max(myReservePiecesArray.length, oppReservePiecesArray.length); const marginLeft = ((100 - nbReservePieces * (100 / reserveSquareNb)) / 2) + "%"; if (hasReserveTop) { @@ -361,7 +368,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) @@ -398,10 +405,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", { @@ -419,7 +428,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 }, @@ -538,15 +547,20 @@ export default { } }, addArrow: function(arrow) { - this.arrows.push(arrow); - // Also add to DOM: - const boardElt = document.getElementById("gamePosition"); - const squareWidth = boardElt.offsetWidth / V.size.y; - const bPos = boardElt.getBoundingClientRect(); - const newArrow = - this.getSvgArrow(arrow, bPos.top, bPos.left, squareWidth); - document.getElementById("arrowCanvas") - .insertAdjacentElement("beforeend", newArrow); + 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 = @@ -569,11 +583,12 @@ export default { 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); - // Add some drawing on board (for some variants + arrows and circles) - const boardElt = document.getElementById("gamePosition"); const squareWidth = boardElt.offsetWidth / V.size.y; const bPos = boardElt.getBoundingClientRect(); let svgArrows = []; @@ -644,45 +659,48 @@ export default { document.getElementById("boardContainer").getBoundingClientRect(); // NOTE: classList[0] is enough: 'piece' is the first assigned class 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); + 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)) - this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare); - else return; - // For potential drag'n drop, remember start coordinates - // (to center the piece on mouse cursor) - 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 + 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); + } } - ); - parent.insertBefore(this.selectedPiece, e.target.nextSibling); - } else { - this.processMoveAttempt(e); + } } - } else if (e.which == 3) { + else this.processMoveAttempt(e); + } + else if (e.which == 3) { // Mouse right button this.containerPos = document.getElementById("gamePosition").getBoundingClientRect();