X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=8e8e277009e1a95f26f2ad861b3f5832b4edf303;hb=46302e643947a66a5593a8eb1140d314effcea95;hp=30ed7e0b910606fa64755b7ff64b7e5ef13e2fab;hpb=0706ea91c99bc75c526fc9ac1ab62fe7999c7069;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 30ed7e0b..8e8e2770 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -16,6 +16,7 @@ Vue.component('my-game', {
 			seek: false,
 			fenStart: "",
 			incheck: [],
+			expert: document.cookie.length>0 ? document.cookie.substr(-1)=="1" : false,
 		};
 	},
 	render(h) {
@@ -27,10 +28,6 @@ Vue.component('my-game', {
 		let incheckSq = doubleArray(sizeX, sizeY, false);
 		this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
 		let elementArray = [];
-		let square00 = document.getElementById("sq-0-0");
-		let squareWidth = !!square00
-			? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
-			: 0;
 		const playingHuman = (this.mode == "human");
 		const playingComp = (this.mode == "computer");
 		let actionArray = [
@@ -60,25 +57,67 @@ Vue.component('my-game', {
 		];
 		if (!!this.vr)
 		{
+			const square00 = document.getElementById("sq-0-0");
+			const squareWidth = !!square00
+				? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
+				: 0;
+			const indicWidth = (squareWidth>0 ? squareWidth/2 : 20);
 			if (this.mode == "human")
 			{
 				let connectedIndic = h(
 					'div',
 					{
 						"class": {
+							"topindicator": true,
+							"indic-left": true,
 							"connected": this.oppConnected,
 							"disconnected": !this.oppConnected,
 						},
+						style: {
+							"width": indicWidth + "px",
+							"height": indicWidth + "px",
+						},
 					}
 				);
 				elementArray.push(connectedIndic);
 			}
+			let turnIndic = h(
+				'div',
+				{
+					"class": {
+						"topindicator": true,
+						"indic-right": true,
+						"white-turn": this.vr.turn=="w",
+						"black-turn": this.vr.turn=="b",
+					},
+					style: {
+						"width": indicWidth + "px",
+						"height": indicWidth + "px",
+					},
+				}
+			);
+			elementArray.push(turnIndic);
+			let expertSwitch = h(
+				'button',
+				{
+					on: { click: this.toggleExpertMode },
+					attrs: { "aria-label": 'Toggle expert mode' },
+					'class': {
+						"tooltip":true,
+						"topindicator": true,
+						"indic-right": true,
+						"expert-switch": true,
+						"expert-mode": this.expert,
+					},
+				},
+				[h('i', { 'class': { "material-icons": true } }, "remove_red_eye")]
+			);
+			elementArray.push(expertSwitch);
 			let choices = h('div',
 				{
 					attrs: { "id": "choices" },
 					'class': { 'row': true },
 					style: {
-						//"position": "relative",
 						"display": this.choices.length>0?"block":"none",
 						"top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
 						"width": (this.choices.length * squareWidth) + "px",
@@ -139,7 +178,7 @@ Vue.component('my-game', {
 									)
 								);
 							}
-							if (hintSquares[ci][cj])
+							if (!this.expert && hintSquares[ci][cj])
 							{
 								elems.push(
 									h(
@@ -162,10 +201,10 @@ Vue.component('my-game', {
 								{
 									'class': {
 										'board': true,
-										'light-square': !highlight && (i+j)%2==0,
-										'dark-square': !highlight && (i+j)%2==1,
-										'highlight': highlight,
-										'incheck': incheckSq[ci][cj],
+										'light-square': (i+j)%2==0 && (this.expert || !highlight),
+										'dark-square': (i+j)%2==1 && (this.expert || !highlight),
+										'highlight': !this.expert && highlight,
+										'incheck': !this.expert && incheckSq[ci][cj],
 									},
 									attrs: {
 										id: this.getSquareId({x:ci,y:cj}),
@@ -295,10 +334,20 @@ Vue.component('my-game', {
 		{
 			elementArray.push(
 				h('div',
-					{ },
+					{ attrs: { id: "pgn-div" } },
 					[
+						h('a',
+							{
+								attrs: {
+									id: "download",
+									href: "#",
+								}
+							}
+						),
 						h('p',
 							{
+								attrs: { id: "pgn-game" },
+								on: { click: this.download },
 								domProps: {
 									innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode)
 								}
@@ -431,6 +480,15 @@ Vue.component('my-game', {
 		this.conn.onclose = socketCloseListener;
 	},
 	methods: {
+		download: function() {
+			let content = document.getElementById("pgn-game").innerHTML;
+			content = content.replace(/<br>/g, "\n");
+			// Prepare and trigger download link
+			let downloadAnchor = document.getElementById("download");
+			downloadAnchor.setAttribute("download", "game.pgn");
+			downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
+			downloadAnchor.click();
+		},
 		endGame: function(score) {
 			this.score = score;
 			let modalBox = document.getElementById("modal-eog");
@@ -457,6 +515,10 @@ Vue.component('my-game', {
 			}
 			return eogMessage;
 		},
+		toggleExpertMode: function() {
+			this.expert = !this.expert;
+			document.cookie = "expert=" + (this.expert ? "1" : "0");
+		},
 		resign: function() {
 			if (this.mode == "human" && this.oppConnected)
 			{
@@ -556,10 +618,9 @@ Vue.component('my-game', {
 				this.seek = false;
 				if (!!moves && moves.length > 0) //imply continuation
 				{
-					const oppCol = this.vr.turn;
 					const lastMove = moves[moves.length-1];
 					this.vr.undo(lastMove);
-					this.incheck = this.vr.getCheckSquares(lastMove, oppCol);
+					this.incheck = this.vr.getCheckSquares(lastMove);
 					this.vr.play(lastMove, "ingame");
 				}
 				delete localStorage["newgame"];
@@ -573,8 +634,7 @@ Vue.component('my-game', {
 			}
 		},
 		playComputerMove: function() {
-			const compColor = this.mycolor=='w' ? 'b' : 'w';
-			const compMove = this.vr.getComputerMove(compColor);
+			const compMove = this.vr.getComputerMove();
 			// HACK: avoid selecting elements before they appear on page:
 			setTimeout(() => this.play(compMove, "animate"), 500);
 		},
@@ -606,7 +666,7 @@ Vue.component('my-game', {
 				this.selectedPiece.style.display = "inline-block";
 				this.selectedPiece.style.zIndex = 3000;
 				let startSquare = this.getSquareFromId(e.target.parentNode.id);
-				this.possibleMoves = this.vr.canIplay(this.mycolor,startSquare)
+				this.possibleMoves = this.mode!="idle" && this.vr.canIplay(this.mycolor,startSquare)
 					? this.vr.getPossibleMovesFrom(startSquare)
 					: [];
 				e.target.parentNode.appendChild(this.selectedPiece);
@@ -689,8 +749,7 @@ Vue.component('my-game', {
 				this.animateMove(move);
 				return;
 			}
-			const oppCol = this.vr.getOppCol(this.vr.turn);
-			this.incheck = this.vr.getCheckSquares(move, oppCol); //is opponent in check?
+			this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
 			// Not programmatic, or animation is over
 			if (this.mode == "human" && this.vr.turn == this.mycolor)
 				this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
@@ -698,7 +757,7 @@ Vue.component('my-game', {
 			this.vr.play(move, "ingame");
 			if (this.mode == "human")
 				this.updateStorage(); //after our moves and opponent moves
-			const eog = this.vr.checkGameOver(this.vr.turn);
+			const eog = this.vr.checkGameOver();
 			if (eog != "*")
 				this.endGame(eog);
 			else if (this.mode == "computer" && this.vr.turn != this.mycolor)