From: Benjamin Auder <benjamin.auder@somewhere>
Date: Thu, 6 Dec 2018 15:20:27 +0000 (+0100)
Subject: Allow smartphone users to drag and drop pieces
X-Git-Url: https://git.auder.net/assets/doc/html/rpsls.js?a=commitdiff_plain;h=ffea77d94c1fa041a3cec774950b361a44baea71;p=vchess.git

Allow smartphone users to drag and drop pieces
---

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 1e8d9fd2..14d3007a 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -452,9 +452,9 @@ Vue.component('my-game', {
 					mousedown: this.mousedown,
 					mousemove: this.mousemove,
 					mouseup: this.mouseup,
-//					touchstart: this.mousedown, //TODO...
-//					touchmove: this.mousemove,
-//					touchend: this.mouseup,
+					touchstart: this.mousedown,
+					touchmove: this.mousemove,
+					touchend: this.mouseup,
 				},
 			},
 			elementArray
@@ -794,8 +794,11 @@ Vue.component('my-game', {
 			// If there is an active element, move it around
 			if (!!this.selectedPiece)
 			{
-				this.selectedPiece.style.left = (e.clientX-this.start.x) + "px";
-				this.selectedPiece.style.top = (e.clientY-this.start.y) + "px";
+				const [offsetX,offsetY] = !!e.clientX
+					? [e.clientX,e.clientY] //desktop browser
+					: [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone
+				this.selectedPiece.style.left = (offsetX-this.start.x) + "px";
+				this.selectedPiece.style.top = (offsetY-this.start.y) + "px";
 			}
 		},
 		mouseup: function(e) {
@@ -804,7 +807,10 @@ Vue.component('my-game', {
 			e = e || window.event;
 			// Read drop target (or parentElement, parentNode... if type == "img")
 			this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coordinates
-			let landing = document.elementFromPoint(e.clientX, e.clientY);
+			const [offsetX,offsetY] = !!e.clientX
+				? [e.clientX,e.clientY]
+				: [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
+			let landing = document.elementFromPoint(offsetX, offsetY);
 			this.selectedPiece.style.zIndex = 3000;
 			while (landing.tagName == "IMG") //classList.contains(piece) fails because of mark/highlight
 				landing = landing.parentNode;