X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=208e04824cfda2b5e37c8f8570b97b23e6d711f1;hb=331fc58c932d6d7055b202d0c6dc0d77212a89f8;hp=860bab0c934eb34633271d9ef8c8b0bf60f9b2c4;hpb=2812515a10843e74d67cb755cb9aeeb8417e4a88;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 860bab0c..208e0482 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -20,7 +20,7 @@ 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) {
@@ -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,7 +140,8 @@ Vue.component('my-game', {
 						"tooltip": true,
 						"topindicator": true,
 						"indic-right": true,
-						"settings-btn": true,
+						"settings-btn": !smallScreen,
+						"settings-btn-small": smallScreen,
 					},
 				},
 				[h('i', { 'class': { "material-icons": true } }, "settings")]
@@ -181,6 +182,9 @@ Vue.component('my-game', {
 				})
 			);
 			// Create board element (+ reserves if needed by variant or mode)
+			const lm = this.vr.lastMove;
+			const showLight = this.hints &&
+				(this.mode!="idle" || this.cursor==this.vr.moves.length);
 			let gameDiv = h('div',
 				{
 					'class': { 'game': true },
@@ -233,9 +237,6 @@ Vue.component('my-game', {
 									)
 								);
 							}
-							const lm = this.vr.lastMove;
-							const showLight = this.hints &&
-								(this.mode!="idle" || this.cursor==this.vr.moves.length);
 							return h(
 								'div',
 								{
@@ -644,7 +645,7 @@ Vue.component('my-game', {
 									h('label',
 										{
 											attrs: { for: "selectSound" },
-											domProps: { innerHTML: "Sound level" },
+											domProps: { innerHTML: "Play sounds?" },
 										},
 									),
 									h("select",
@@ -657,24 +658,27 @@ Vue.component('my-game', {
 												{
 													domProps: {
 														"value": "0",
-														innerHTML: "No sound"
+														innerHTML: "None"
 													},
+													attrs: { "selected": this.sound==0 },
 												}
 											),
 											h("option",
 												{
 													domProps: {
 														"value": "1",
-														innerHTML: "Newgame sound"
+														innerHTML: "Newgame"
 													},
+													attrs: { "selected": this.sound==1 },
 												}
 											),
 											h("option",
 												{
 													domProps: {
 														"value": "2",
-														innerHTML: "All sounds"
+														innerHTML: "All"
 													},
+													attrs: { "selected": this.sound==2 },
 												}
 											),
 										],
@@ -699,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',
 							{
@@ -712,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" },
+							}
+						),
 					]
 				)
 			);
@@ -725,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',
 							{
@@ -953,7 +969,7 @@ Vue.component('my-game', {
 			setCookie("color", this.color);
 		},
 		setSound: function(e) {
-			this.sound = e.target.options[e.target.selectedIndex].value;
+			this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
 			setCookie("sound", this.sound);
 		},
 		clickGameSeek: function(e) {