X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=14d3007a190ae5c27e1e6ec6acf55b32291a6e03;hb=15952ada1d73262371654351ab8a4471f64010fd;hp=18632858d6e653a9d74bf71e3c6b1a44119064b5;hpb=204e289bbcddc69e2d81aef492dbea6db9e31188;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 18632858..14d3007a 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -1,4 +1,3 @@
-// TODO: use indexedDB instead of localStorage? (more flexible: allow several games)
 Vue.component('my-game', {
 	data: function() {
 		return {
@@ -18,10 +17,11 @@ Vue.component('my-game', {
 			incheck: [],
 			pgnTxt: "",
 			expert: document.cookie.length>0 ? document.cookie.substr(-1)=="1" : false,
+			gameId: "", //used to limit computer moves' time
 		};
 	},
 	render(h) {
-		let [sizeX,sizeY] = VariantRules.size;
+		const [sizeX,sizeY] = VariantRules.size;
 		// Precompute hints squares to facilitate rendering
 		let hintSquares = doubleArray(sizeX, sizeY, false);
 		this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
@@ -128,7 +128,10 @@ Vue.component('my-game', {
 				this.choices.map( m => { //a "choice" is a move
 					return h('div',
 						{
-							'class': { 'board': true },
+							'class': {
+								'board': true,
+								['board'+sizeY]: true,
+							},
 							style: {
 								'width': (100/this.choices.length) + "%",
 								'padding-bottom': (100/this.choices.length) + "%",
@@ -136,8 +139,9 @@ Vue.component('my-game', {
 						},
 						[h('img',
 							{
-								attrs: { "src": '/images/pieces/' + VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
-								'class': { 'choice-piece': true, 'board': true },
+								attrs: { "src": '/images/pieces/' +
+									VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
+								'class': { 'choice-piece': true },
 								on: { "click": e => { this.play(m); this.choices=[]; } },
 							})
 						]
@@ -170,10 +174,12 @@ Vue.component('my-game', {
 										{
 											'class': {
 												'piece': true,
-												'ghost': !!this.selectedPiece && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
+												'ghost': !!this.selectedPiece
+													&& this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
 											},
 											attrs: {
-												src: "/images/pieces/" + VariantRules.getPpath(this.vr.board[ci][cj]) + ".svg",
+												src: "/images/pieces/" +
+													VariantRules.getPpath(this.vr.board[ci][cj]) + ".svg",
 											},
 										}
 									)
@@ -202,6 +208,7 @@ Vue.component('my-game', {
 								{
 									'class': {
 										'board': true,
+										['board'+sizeY]: true,
 										'light-square': (i+j)%2==0 && (this.expert || !highlight),
 										'dark-square': (i+j)%2==1 && (this.expert || !highlight),
 										'highlight': !this.expert && highlight,
@@ -233,23 +240,77 @@ Vue.component('my-game', {
 				);
 			}
 			elementArray.push(gameDiv);
-	//			if (!!vr.reserve)
-	//			{
-	//				let reserve = h('div',
-	//					{'class':{'game':true}}, [
-	//						h('div',
-	//							{ 'class': { 'row': true }},
-	//							[
-	//								h('div',
-	//									{'class':{'board':true}},
-	//									[h('img',{'class':{"piece":true},attrs:{"src":"/images/pieces/wb.svg"}})]
-	//								)
-	//							]
-	//						)
-	//					],
-	//				);
-	//				elementArray.push(reserve);
-	//			}
+			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+shiftIdx,y:i}) }
+					},
+					[
+						h('img',
+						{
+							'class': {"piece":true},
+							attrs: {
+								"src": "/images/pieces/" +
+									this.vr.getReservePpath(this.mycolor,i) + ".svg",
+							}
+						}),
+						h('sup',
+							{style: { "padding-left":"40%"} },
+							[ this.vr.reserve[this.mycolor][VariantRules.RESERVE_PIECES[i]] ]
+						)
+					]));
+				}
+				let oppReservePiecesArray = [];
+				const oppCol = this.vr.getOppCol(this.mycolor);
+				for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
+				{
+					oppReservePiecesArray.push(h('div',
+					{
+						'class': {'board':true, ['board'+sizeY]:true},
+						attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
+					},
+					[
+						h('img',
+						{
+							'class': {"piece":true},
+							attrs: {
+								"src": "/images/pieces/" +
+									this.vr.getReservePpath(oppCol,i) + ".svg",
+							}
+						}),
+						h('sup',
+							{style: { "padding-left":"40%"} },
+							[ this.vr.reserve[oppCol][VariantRules.RESERVE_PIECES[i]] ]
+						)
+					]));
+				}
+				let reserves = h('div',
+					{
+						'class':{'game':true},
+						style: {"margin-bottom": "20px"},
+					},
+					[
+						h('div',
+							{
+								'class': { 'row': true },
+								style: {"margin-bottom": "15px"},
+							},
+							myReservePiecesArray
+						),
+						h('div',
+							{ 'class': { 'row': true }},
+							oppReservePiecesArray
+						)
+					]
+				);
+				elementArray.push(reserves);
+			}
 			const eogMessage = this.getEndgameMessage(this.score);
 			const modalEog = [
 				h('input',
@@ -352,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() }
 							}
 						)
 					]
@@ -371,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
@@ -391,6 +467,11 @@ Vue.component('my-game', {
 			? localStorage.getItem("myid")
 			// random enough (TODO: function)
 			: (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase();
+		if (!continuation)
+		{
+			// HACK: play a small silent sound to allow "new game" sound later if tab not focused
+			new Audio("/sounds/silent.mp3").play().then(() => {}).catch(err => {});
+		}
 		this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
 		const socketOpenListener = () => {
 			if (continuation)
@@ -412,7 +493,6 @@ Vue.component('my-game', {
 		};
 		const socketMessageListener = msg => {
 			const data = JSON.parse(msg.data);
-			console.log("Receive message: " + data.code);
 			switch (data.code)
 			{
 				case "newgame": //opponent found
@@ -603,6 +683,8 @@ Vue.component('my-game', {
 				}
 				return;
 			}
+			// random enough (TODO: function)
+			this.gameId = (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase();
 			this.vr = new VariantRules(fen, moves || []);
 			this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
 			this.mode = mode;
@@ -641,9 +723,21 @@ Vue.component('my-game', {
 			}
 		},
 		playComputerMove: function() {
+			const timeStart = Date.now();
+			const nbMoves = this.vr.moves.length; //using played moves to know if search finished
+			const gameId = this.gameId; //to know if game was reset before timer end
+			setTimeout(
+				() => {
+					if (gameId != this.gameId)
+						return; //game stopped
+					const L = this.vr.moves.length;
+					if (nbMoves == L || !this.vr.moves[L-1].notation) //move search didn't finish
+						this.vr.shouldReturn = true;
+				}, 5000);
 			const compMove = this.vr.getComputerMove();
-			// HACK: avoid selecting elements before they appear on page:
-			setTimeout(() => this.play(compMove, "animate"), 500);
+			// (first move) HACK: avoid selecting elements before they appear on page:
+			const delay = Math.max(500-(Date.now()-timeStart), 0);
+			setTimeout(() => this.play(compMove, "animate"), delay);
 		},
 		// Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
 		getSquareId: function(o) {
@@ -657,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"))
 			{
@@ -676,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) {
@@ -686,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) {
@@ -696,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;
@@ -730,8 +844,9 @@ Vue.component('my-game', {
 			let rectStart = startSquare.getBoundingClientRect();
 			let rectEnd = endSquare.getBoundingClientRect();
 			let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y};
-			let movingPiece = document.querySelector("#" + this.getSquareId(move.start) + " > img.piece");
-			// HACK for animation (otherwise with positive translate, image slides "under background"...)
+			let movingPiece =
+				document.querySelector("#" + this.getSquareId(move.start) + " > img.piece");
+			// HACK for animation (with positive translate, image slides "under background"...)
 			// Possible improvement: just alter squares on the piece's way...
 			squares = document.getElementsByClassName("board");
 			for (let i=0; i<squares.length; i++)