X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=829beaaddc4543cc9f24c832b864d2e251440585;hb=bdb1f12dbb7e2d72ce3a0803a0cf2626e1f821e0;hp=ab8605727efef0b288095b2b55d4f210d12ee584;hpb=cd4cad0468612cf00c6e6879554e3cee58d4b1f9;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index ab860572..829beaad 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -27,10 +27,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 = [
@@ -40,6 +36,7 @@ Vue.component('my-game', {
 					attrs: { "aria-label": 'New game VS human' },
 					'class': {
 						"tooltip": true,
+						"bottom": true, //display below
 						"seek": this.seek,
 						"playing": playingHuman,
 					},
@@ -51,6 +48,7 @@ Vue.component('my-game', {
 					attrs: { "aria-label": 'New game VS computer' },
 					'class': {
 						"tooltip":true,
+						"bottom": true,
 						"playing": playingComp,
 					},
 				},
@@ -58,25 +56,51 @@ 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 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",
@@ -180,7 +204,10 @@ Vue.component('my-game', {
 					{
 						on: { click: this.resign },
 						attrs: { "aria-label": 'Resign' },
-						'class': { "tooltip":true },
+						'class': {
+							"tooltip":true,
+							"bottom": true,
+						},
 					},
 					[h('i', { 'class': { "material-icons": true } }, "flag")])
 			);
@@ -203,32 +230,6 @@ Vue.component('my-game', {
 	//				elementArray.push(reserve);
 	//			}
 			const eogMessage = this.getEndgameMessage(this.score);
-			let elemsOfEog =
-			[
-				h('label',
-					{
-						attrs: { "for": "modal-eog" },
-						"class": { "modal-close": true },
-					}
-				),
-				h('h3',
-					{
-						"class": { "section": true },
-						domProps: { innerHTML: eogMessage },
-					}
-				)
-			];
-			if (this.score != "*")
-			{
-				elemsOfEog.push(
-					h('p', //'textarea', //TODO: selectable!
-						{
-							domProps: { innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart) },
-							//attrs: { "readonly": true },
-						}
-					)
-				);
-			}
 			const modalEog = [
 				h('input',
 					{
@@ -244,7 +245,20 @@ Vue.component('my-game', {
 							{
 								"class": { "card": true, "smallpad": true },
 							},
-							elemsOfEog
+							[
+								h('label',
+									{
+										attrs: { "for": "modal-eog" },
+										"class": { "modal-close": true },
+									}
+								),
+								h('h3',
+									{
+										"class": { "section": true },
+										domProps: { innerHTML: eogMessage },
+									}
+								)
+							]
 						)
 					]
 				)
@@ -299,6 +313,23 @@ Vue.component('my-game', {
 			actionArray
 		);
 		elementArray.push(actions);
+		if (this.score != "*")
+		{
+			elementArray.push(
+				h('div',
+					{ },
+					[
+						h('p',
+							{
+								domProps: {
+									innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode)
+								}
+							}
+						)
+					]
+				)
+			);
+		}
 		return h(
 			'div',
 			{
@@ -426,7 +457,7 @@ Vue.component('my-game', {
 			this.score = score;
 			let modalBox = document.getElementById("modal-eog");
 			modalBox.checked = true;
-			//setTimeout(() => { modalBox.checked = false; }, 2000); //disabled, to show PGN
+			setTimeout(() => { modalBox.checked = false; }, 2000);
 			if (this.mode == "human")
 				this.clearStorage();
 			this.mode = "idle";
@@ -485,13 +516,12 @@ Vue.component('my-game', {
 			if (this.mode == "human")
 				return; //no newgame while playing
 			if (this.seek)
+			{
 				delete localStorage["newgame"]; //cancel game seek
+				this.seek = false;
+			}
 			else
-			{
-				localStorage["newgame"] = variant;
 				this.newGame("human");
-			}
-			this.seek = !this.seek;
 		},
 		clickComputerGame: function() {
 			if (this.mode == "human")
@@ -507,11 +537,12 @@ Vue.component('my-game', {
 				const storageVariant = localStorage.getItem("variant");
 				if (!!storageVariant && storageVariant !== variant)
 				{
-					// TODO: find a better way to ensure this. Newgame system is currently a mess.
 					alert("Finish your " + storageVariant + " game first!");
 					return;
 				}
 				// Send game request and wait..
+				localStorage["newgame"] = variant;
+				this.seek = true;
 				this.clearStorage(); //in case of
 				try {
 					this.conn.send(JSON.stringify({code:"newgame", fen:fen}));