X-Git-Url: https://git.auder.net/img/rock_paper_scissors_lizard_spock.gif?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=14d3007a190ae5c27e1e6ec6acf55b32291a6e03;hb=15952ada1d73262371654351ab8a4471f64010fd;hp=f5bef8effdeae9f4340862e8c0783302a7ff8054;hpb=5c42c64e0b43ad4d687c58a6b7e9b9ac5d212e17;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index f5bef8ef..14d3007a 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -242,13 +242,14 @@ Vue.component('my-game', {
 			elementArray.push(gameDiv);
 			if (!!this.vr.reserve)
 			{
+				const shiftIdx = (this.mycolor=="w" ? 0 : 1);
 				let myReservePiecesArray = [];
 				for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
 				{
 					myReservePiecesArray.push(h('div',
 					{
 						'class': {'board':true, ['board'+sizeY]:true},
-						attrs: { id: this.getSquareId({x:sizeX,y:i}) }
+						attrs: { id: this.getSquareId({x:sizeX+shiftIdx,y:i}) }
 					},
 					[
 						h('img',
@@ -272,7 +273,7 @@ Vue.component('my-game', {
 					oppReservePiecesArray.push(h('div',
 					{
 						'class': {'board':true, ['board'+sizeY]:true},
-						attrs: { id: this.getSquareId({x:sizeX,y:i}) }
+						attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
 					},
 					[
 						h('img',
@@ -412,9 +413,24 @@ Vue.component('my-game', {
 							{
 								attrs: { id: "pgn-game" },
 								on: { click: this.download },
-								domProps: {
-									innerHTML: this.pgnTxt
-								}
+								domProps: { innerHTML: this.pgnTxt }
+							}
+						)
+					]
+				)
+			);
+		}
+		else if (this.mode != "idle")
+		{
+			// Show current FEN (at least for debug)
+			elementArray.push(
+				h('div',
+					{ attrs: { id: "fen-div" } },
+					[
+						h('p',
+							{
+								attrs: { id: "fen-string" },
+								domProps: { innerHTML: this.vr.getBaseFen() }
 							}
 						)
 					]
@@ -431,14 +447,14 @@ Vue.component('my-game', {
 					"col-lg-6":true,
 					"col-lg-offset-3":true,
 				},
-				// NOTE: click = mousedown + mouseup --> what about smartphone?!
+				// NOTE: click = mousedown + mouseup
 				on: {
 					mousedown: this.mousedown,
 					mousemove: this.mousemove,
 					mouseup: this.mouseup,
-					touchdown: this.mousedown,
+					touchstart: this.mousedown,
 					touchmove: this.mousemove,
-					touchup: this.mouseup,
+					touchend: this.mouseup,
 				},
 			},
 			elementArray
@@ -735,6 +751,19 @@ Vue.component('my-game', {
 		},
 		mousedown: function(e) {
 			e = e || window.event;
+			let ingame = false;
+			let elem = e.target;
+			while (!ingame && elem !== null)
+			{
+				if (elem.classList.contains("game"))
+				{
+					ingame = true;
+					break;
+				}
+				elem = elem.parentElement;
+			}
+			if (!ingame) //let default behavior (click on button...)
+				return;
 			e.preventDefault(); //disable native drag & drop
 			if (!this.selectedPiece && e.target.classList.contains("piece"))
 			{
@@ -754,7 +783,8 @@ Vue.component('my-game', {
 				this.possibleMoves = this.mode!="idle" && this.vr.canIplay(this.mycolor,startSquare)
 					? this.vr.getPossibleMovesFrom(startSquare)
 					: [];
-				e.target.parentNode.appendChild(this.selectedPiece);
+				// Next line add moving piece just after current image (required for Crazyhouse reserve)
+				e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
 			}
 		},
 		mousemove: function(e) {
@@ -764,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) {
@@ -774,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;