X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=aaef522ba40375ed3524200c446fe06152e85902;hb=8a196305a09269888497995373658f953b9b5bf8;hp=5690eb14e96ccd8df485e5131b42c338ea2fa1f2;hpb=f3c10e18c1585f043e22b875e9755814fa9218d7;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 5690eb14..aaef522b 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 {
@@ -21,7 +20,7 @@ Vue.component('my-game', {
 		};
 	},
 	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 +127,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 +138,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 +173,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 +207,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,
@@ -391,6 +397,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)
@@ -574,6 +585,7 @@ 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 = "*";
@@ -640,9 +652,18 @@ Vue.component('my-game', {
 			}
 		},
 		playComputerMove: function() {
+			const timeStart = Date.now();
+			const nbMoves = this.vr.moves.length; //using played moves to know if search finished
+			setTimeout(
+				() => {
+					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) {
@@ -675,7 +696,6 @@ Vue.component('my-game', {
 				this.possibleMoves = this.mode!="idle" && this.vr.canIplay(this.mycolor,startSquare)
 					? this.vr.getPossibleMovesFrom(startSquare)
 					: [];
-				console.log(this.possibleMoves);
 				e.target.parentNode.appendChild(this.selectedPiece);
 			}
 		},
@@ -730,8 +750,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++)