X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=deccd5da0c6bd5686b914ad8f614682c157bf9db;hb=523da5d5adeb4abd8b165158485314d0e7de9cf4;hp=c7ec715af2d6e5e526ac184765477a1c7a5ecddb;hpb=130db3eff9afbf58b30287d06f3a2360fe652e97;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index c7ec715a..deccd5da 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -20,12 +20,12 @@ Vue.component('my-game', {
 			hints: (getCookie("hints") === "1" ? true : false),
 			color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo
 			// sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
-			sound: getCookie("sound", "2"),
+			sound: parseInt(getCookie("sound", "2")),
 		};
 	},
 	render(h) {
 		const [sizeX,sizeY] = VariantRules.size;
-		const smallScreen = (screen.width <= 420);
+		const smallScreen = (window.innerWidth <= 420);
 		// Precompute hints squares to facilitate rendering
 		let hintSquares = doubleArray(sizeX, sizeY, false);
 		this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
@@ -92,7 +92,7 @@ Vue.component('my-game', {
 			const settingsBtnElt = document.getElementById("settingsBtn");
 			const indicWidth = !!settingsBtnElt //-2 for border:
 				? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
-				: 37; //TODO: always 37?
+				: (smallScreen ? 31 : 37);
 			if (this.mode == "human")
 			{
 				let connectedIndic = h(
@@ -140,8 +140,8 @@ Vue.component('my-game', {
 						"tooltip": true,
 						"topindicator": true,
 						"indic-right": true,
-						"settings-btn": true,
-						"small": smallScreen,
+						"settings-btn": !smallScreen,
+						"settings-btn-small": smallScreen,
 					},
 				},
 				[h('i', { 'class': { "material-icons": true } }, "settings")]
@@ -660,6 +660,7 @@ Vue.component('my-game', {
 														"value": "0",
 														innerHTML: "None"
 													},
+													attrs: { "selected": this.sound==0 },
 												}
 											),
 											h("option",
@@ -668,6 +669,7 @@ Vue.component('my-game', {
 														"value": "1",
 														innerHTML: "Newgame"
 													},
+													attrs: { "selected": this.sound==1 },
 												}
 											),
 											h("option",
@@ -676,6 +678,7 @@ Vue.component('my-game', {
 														"value": "2",
 														innerHTML: "All"
 													},
+													attrs: { "selected": this.sound==2 },
 												}
 											),
 										],
@@ -700,7 +703,10 @@ Vue.component('my-game', {
 		{
 			elementArray.push(
 				h('div',
-					{ attrs: { id: "pgn-div" } },
+					{
+						attrs: { id: "pgn-div" },
+						"class": { "section-content": true },
+					},
 					[
 						h('a',
 							{
@@ -713,10 +719,16 @@ Vue.component('my-game', {
 						h('p',
 							{
 								attrs: { id: "pgn-game" },
-								on: { click: this.download },
 								domProps: { innerHTML: this.pgnTxt }
 							}
-						)
+						),
+						h('button',
+							{
+								attrs: { "id": "downloadBtn" },
+								on: { click: this.download },
+								domProps: { innerHTML: "Download game" },
+							}
+						),
 					]
 				)
 			);
@@ -726,7 +738,10 @@ Vue.component('my-game', {
 			// Show current FEN
 			elementArray.push(
 				h('div',
-					{ attrs: { id: "fen-div" } },
+					{
+						attrs: { id: "fen-div" },
+						"class": { "section-content": true },
+					},
 					[
 						h('p',
 							{
@@ -764,7 +779,7 @@ Vue.component('my-game', {
 	created: function() {
 		const url = socketUrl;
 		const continuation = (localStorage.getItem("variant") === variant);
-		this.myid = continuation ? localStorage.getItem("myid") : getRandString();
+		this.myid = (continuation ? localStorage.getItem("myid") : getRandString());
 		if (!continuation)
 		{
 			// HACK: play a small silent sound to allow "new game" sound later
@@ -793,6 +808,12 @@ Vue.component('my-game', {
 			const data = JSON.parse(msg.data);
 			switch (data.code)
 			{
+				case "duplicate":
+					// We opened another tab on the same game
+					this.mode = "idle";
+					this.vr = null;
+					alert("Already playing a game in this variant on another tab!");
+					break;
 				case "newgame": //opponent found
 					// oppid: opponent socket ID
 					this.newGame("human", data.fen, data.color, data.oppid);
@@ -1036,7 +1057,7 @@ Vue.component('my-game', {
 					document.getElementById("modal-newgame").checked = false;
 				}
 				this.oppid = oppId;
-				this.oppConnected = true;
+				this.oppConnected = !continuation;
 				this.mycolor = color;
 				this.seek = false;
 				if (!!moves && moves.length > 0) //imply continuation