X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=cf3d3e68020ae940d4669bd125688d224532fe06;hb=cafe016679ee9c14bf7bf0a37104ade7f74aff89;hp=640ccca1e26345137c607e94fc96d372aaef32eb;hpb=311cba767e3c461edb0c8c758bfb193ef670a68f;p=vchess.git diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 640ccca1..cf3d3e68 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -19,6 +19,7 @@ export default { ], data: function() { return { + mobileBrowser: ("ontouchstart" in window), possibleMoves: [], //filled after each valid click/dragstart choices: [], //promotion pieces, or checkered captures... (as moves) selectedPiece: null, //moving piece (or clicked piece) @@ -48,7 +49,10 @@ export default { }); const lm = this.lastMove; - const showLight = this.settings.highlight && V.ShowMoves == "all"; + const showLight = ( + this.settings.highlight && + ["all","highlight"].includes(V.ShowMoves) + ); const orientation = !V.CanFlip ? "w" : this.orientation; // Ensure that squares colors do not change when board is flipped const lightSquareMod = (sizeX + sizeY) % 2; @@ -289,7 +293,7 @@ export default { } let onEvents = {}; // NOTE: click = mousedown + mouseup - if ("ontouchstart" in window) { + if (this.mobileBrowser) { onEvents = { on: { touchstart: this.mousedown, @@ -340,9 +344,10 @@ export default { mousemove: function(e) { if (!this.selectedPiece) return; // There is an active element: move it around - const [offsetX, offsetY] = e.clientX - ? [e.clientX, e.clientY] //desktop browser - : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone + const [offsetX, offsetY] = + this.mobileBrowser + ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY] + : [e.clientX, e.clientY]; this.selectedPiece.style.left = offsetX - this.start.x + "px"; this.selectedPiece.style.top = offsetY - this.start.y + "px"; }, @@ -350,9 +355,10 @@ export default { if (!this.selectedPiece) return; // There is an active element: obtain the move from start and end squares this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords - const [offsetX, offsetY] = e.clientX - ? [e.clientX, e.clientY] - : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; + const [offsetX, offsetY] = + this.mobileBrowser + ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY] + : [e.clientX, e.clientY]; let landing = document.elementFromPoint(offsetX, offsetY); this.selectedPiece.style.zIndex = 3000; // Next condition: classList.contains(piece) fails because of marks