X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=cf3d3e68020ae940d4669bd125688d224532fe06;hp=86c2accac390003759c62b43686388647a46c229;hb=cafe016679ee9c14bf7bf0a37104ade7f74aff89;hpb=584f81b93154313a3856112400b7df98e0eb2632 diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 86c2acca..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) @@ -292,7 +293,7 @@ export default { } let onEvents = {}; // NOTE: click = mousedown + mouseup - if ("ontouchstart" in window) { + if (this.mobileBrowser) { onEvents = { on: { touchstart: this.mousedown, @@ -343,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"; }, @@ -353,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