X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=5a21771db5075458c97a748a53f3999e0b46edc1;hb=baa6f86f72e3b697ec2fcd34913986b2fa5f02eb;hp=29c00645ad0c0211fe8cd1cebe8e756a748d6205;hpb=107dc1bd5361e2538b1551bdcc37c1e90a444b83;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 29c00645..5a21771d 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -68,11 +68,11 @@ export default { } const showLight = ( this.settings.highlight && - ["all","highlight"].includes(V.ShowMoves) + ["all", "highlight"].includes(V.ShowMoves) ); const showCheck = ( this.settings.highlight && - ["all","highlight","byrow"].includes(V.ShowMoves) + ["all", "highlight", "byrow"].includes(V.ShowMoves) ); const orientation = !V.CanFlip ? "w" : this.orientation; // Ensure that squares colors do not change when board is flipped @@ -121,27 +121,28 @@ export default { const squareId = "sq-" + ci + "-" + cj; let elems = []; if (showPiece(ci, cj)) { - elems.push( - h("img", { - "class": { - piece: true, - ghost: - !!this.selectedPiece && - this.selectedPiece.parentNode.id == squareId - }, - attrs: { - src: - "/images/pieces/" + - this.vr.getPpath( - this.vr.board[ci][cj], - // Extra args useful for some variants: - this.userColor, - this.score, - this.orientation) + - V.IMAGE_EXTENSION - } - }) - ); + let pieceSpecs = { + "class": { + piece: true, + ghost: + !!this.selectedPiece && + this.selectedPiece.parentNode.id == squareId + }, + attrs: { + src: + "/images/pieces/" + + this.vr.getPpath( + this.vr.board[ci][cj], + // Extra args useful for some variants: + this.userColor, + this.score, + this.orientation) + + V.IMAGE_EXTENSION + } + }; + if (this.arrows.length == 0) + pieceSpecs["style"] = { position: "absolute" }; + elems.push(h("img", pieceSpecs)); } if (this.settings.hints && hintSquares[ci][cj]) { elems.push( @@ -174,12 +175,16 @@ export default { "class": { board: true, ["board" + sizeY]: true, - "light-square": lightSquare && !V.Monochrome, - "dark-square": !lightSquare || !!V.Monochrome, + "light-square": + !V.Notoodark && lightSquare && !V.Monochrome, + "dark-square": + !V.Notoodark && (!lightSquare || !!V.Monochrome), + "middle-square": V.Notoodark, [this.settings.bcolor]: true, "in-shadow": inShadow(ci, cj), "highlight-light": inHighlight(ci, cj) && lightSquare, - "highlight-dark": inHighlight(ci, cj) && !lightSquare, + "highlight-dark": + inHighlight(ci, cj) && (V.Monochrome || !lightSquare), "incheck-light": showCheck && lightSquare && incheckSq[ci][cj], "incheck-dark": @@ -213,6 +218,7 @@ export default { }, [ h("img", { + // NOTE: class "reserve" not used currently "class": { piece: true, reserve: true }, attrs: { src: @@ -221,7 +227,14 @@ export default { ".svg" } }), - h("sup", { "class": { "reserve-count": true } }, [ qty ]) + h( + "sup", + { + "class": { "reserve-count": true }, + style: { top: "calc(100% + 5px)" } + }, + [ qty ] + ) ] ) ); @@ -248,7 +261,14 @@ export default { ".svg" } }), - h("sup", { "class": { "reserve-count": true } }, [ qty ]) + h( + "sup", + { + "class": { "reserve-count": true }, + style: { top: "calc(100% + 5px)" } + }, + [ qty ] + ) ] ) ); @@ -548,7 +568,11 @@ export default { this.coordsToXY(line[1], bPos.top, bPos.left, squareWidth); let path = document.createElementNS("http://www.w3.org/2000/svg", "path"); - path.classList.add("svg-line"); + 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 + " " + @@ -592,11 +616,11 @@ export default { if (!this.mobileBrowser && e.which != 3) // Cancel current drawing and circles, if any this.cancelResetArrows(); - this.containerPos = - document.getElementById("boardContainer").getBoundingClientRect(); 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"); // Emit the click event which could be used by some variants @@ -638,6 +662,8 @@ export default { } } 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; @@ -649,12 +675,7 @@ export default { // Cancel if off boardContainer const [offsetX, offsetY] = this.mobileBrowser - ? - [ - e.changedTouches[0].pageX, - // TODO: fixing attempt for smartphones, removing window.scrollY - e.changedTouches[0].pageY - window.scrollY - ] + ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] : [e.clientX, e.clientY]; if ( offsetX < this.containerPos.left || @@ -662,8 +683,23 @@ export default { offsetY < this.containerPos.top || offsetY > this.containerPos.bottom ) { - this.selectedPiece = null; - this.startArrow = null; + if (!!this.selectedPiece) { + this.selectedPiece.parentNode.removeChild(this.selectedPiece); + delete this.selectedPiece; + this.selectedPiece = null; + this.start = null; + this.possibleMoves = []; //in case of + this.click = ""; + let selected = document.querySelector(".ghost"); + if (!!selected) selected.classList.remove("ghost"); + } + else { + this.startArrow = null; + this.movingArrow = null; + const currentArrow = document.getElementById("currentArrow"); + if (!!currentArrow) + currentArrow.parentNode.removeChild(currentArrow); + } return; } e.preventDefault(); @@ -702,6 +738,7 @@ export default { this.selectedPiece = null; this.processMoveAttempt(e); } else if (e.which == 3) { + if (!this.startArrow) return; // Mouse right button this.movingArrow = null; this.processArrowAttempt(e); @@ -718,11 +755,7 @@ export default { // Obtain the move from start and end squares const [offsetX, offsetY] = this.mobileBrowser - ? - [ - e.changedTouches[0].pageX, - e.changedTouches[0].pageY - window.scrollY - ] + ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] : [e.clientX, e.clientY]; let landing = document.elementFromPoint(offsetX, offsetY); // Next condition: classList.contains(piece) fails because of marks @@ -806,6 +839,9 @@ export default { .svg-line stroke: black +.svg-diag + stroke: grey + .arrow-head fill: #5f0e78 @@ -813,11 +849,15 @@ export default {