X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=6d05a2a6393d557d10d3c38f313843d245d610e0;hb=6752407b88b6d7678b9b19df4ffe1224d17625d7;hp=1b216efae937c63afda5cc41cdd17dbd0110b2c0;hpb=3c09dc498791ac478679bf2f42f441342c4fa22c;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 1b216efa..6d05a2a6 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -17,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; });
@@ -127,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) + "%",
@@ -137,7 +141,7 @@ Vue.component('my-game', {
 							{
 								attrs: { "src": '/images/pieces/' +
 									VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
-								'class': { 'choice-piece': true, 'board': true },
+								'class': { 'choice-piece': true },
 								on: { "click": e => { this.play(m); this.choices=[]; } },
 							})
 						]
@@ -204,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,
@@ -235,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',
@@ -581,7 +640,6 @@ Vue.component('my-game', {
 			this.newGame("computer");
 		},
 		newGame: function(mode, fenInit, color, oppId, moves, continuation) {
-			//const fen = "1n2T1n0/p2pO2p/1s1k1s2/8/3S2p1/2U2cO1/P3PuPP/3K1BR1 0100";
 			const fen = fenInit || VariantRules.GenRandInitFen();
 			console.log(fen); //DEBUG
 			this.score = "*";
@@ -610,6 +668,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;
@@ -650,8 +710,11 @@ 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;
@@ -692,6 +755,8 @@ Vue.component('my-game', {
 				this.possibleMoves = this.mode!="idle" && this.vr.canIplay(this.mycolor,startSquare)
 					? this.vr.getPossibleMovesFrom(startSquare)
 					: [];
+				console.log(this.possibleMoves);
+				console.log(this.vr.promoted);
 				e.target.parentNode.appendChild(this.selectedPiece);
 			}
 		},