X-Git-Url: https://git.auder.net/variants/Dynamo/complete_rules.html?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=c7ec715af2d6e5e526ac184765477a1c7a5ecddb;hb=130db3eff9afbf58b30287d06f3a2360fe652e97;hp=021fa97873adbac2340c947c99634753674d14c6;hpb=a897b421785af1c4e04f50995dca0f99da065ec6;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 021fa978..c7ec715a 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -141,6 +141,7 @@ Vue.component('my-game', {
 						"topindicator": true,
 						"indic-right": true,
 						"settings-btn": true,
+						"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',
 								{
@@ -435,7 +436,7 @@ Vue.component('my-game', {
 			];
 			elementArray = elementArray.concat(modalEog);
 		}
-		// TODO: next 3 modals in (pug) view directly?!
+		// NOTE: this modal could be in Pug view (no usage of Vue functions or variables)
 		const modalNewgame = [
 			h('input',
 				{
@@ -570,26 +571,117 @@ Vue.component('my-game', {
 									domProps: { innerHTML: "Preferences" },
 								}
 							),
-							// https://minicss.org/docs#forms-and-input
-							h('input',
-								{
-									attrs: {
-										"id": "setHints",
-										type: "checkbox",
-										checked: this.hints,
-									},
-								}
+							h('fieldset',
+							  { },
+								[
+									//h('legend', { domProps: { innerHTML: "Legend title" } }),
+									h('label',
+										{
+											attrs: { for: "setHints" },
+											domProps: { innerHTML: "Show hints?" },
+										},
+									),
+									h('input',
+										{
+											attrs: {
+												"id": "setHints",
+												type: "checkbox",
+												checked: this.hints,
+											},
+											on: { "change": this.toggleHints },
+										}
+									),
+								]
 							),
-							h('label',
-								{
-									attrs: {
-										for: "setHints",
-									},
-									domProps: { innerHTML: "Show hints?" },
-								},
+							h('fieldset',
+								{ },
+								[
+									h('label',
+										{
+											attrs: { for: "selectColor" },
+											domProps: { innerHTML: "Board colors" },
+										},
+									),
+									h("select",
+										{
+											attrs: { "id": "selectColor" },
+											on: { "change": this.setColor },
+										},
+										[
+											h("option",
+												{
+													domProps: {
+														"value": "lichess",
+														innerHTML: "brown"
+													},
+													attrs: { "selected": this.color=="lichess" },
+												}
+											),
+											h("option",
+												{
+													domProps: {
+														"value": "chesscom",
+														innerHTML: "green"
+													},
+													attrs: { "selected": this.color=="chesscom" },
+												}
+											),
+											h("option",
+												{
+													domProps: {
+														"value": "chesstempo",
+														innerHTML: "blue"
+													},
+													attrs: { "selected": this.color=="chesstempo" },
+												}
+											),
+										],
+									),
+								]
+							),
+							h('fieldset',
+								{ },
+								[
+									h('label',
+										{
+											attrs: { for: "selectSound" },
+											domProps: { innerHTML: "Play sounds?" },
+										},
+									),
+									h("select",
+										{
+											attrs: { "id": "selectSound" },
+											on: { "change": this.setSound },
+										},
+										[
+											h("option",
+												{
+													domProps: {
+														"value": "0",
+														innerHTML: "None"
+													},
+												}
+											),
+											h("option",
+												{
+													domProps: {
+														"value": "1",
+														innerHTML: "Newgame"
+													},
+												}
+											),
+											h("option",
+												{
+													domProps: {
+														"value": "2",
+														innerHTML: "All"
+													},
+												}
+											),
+										],
+									),
+								]
 							),
-							h('p', { domProps: { innerHTML: "TODO: board(color)" } }),
-							h('p', { domProps: { innerHTML: "TODO: sound(level)" } }),
 						]
 					)
 				]
@@ -857,6 +949,14 @@ Vue.component('my-game', {
 			this.hints = !this.hints;
 			setCookie("hints", this.hints ? "1" : "0");
 		},
+		setColor: function(e) {
+			this.color = e.target.options[e.target.selectedIndex].value;
+			setCookie("color", this.color);
+		},
+		setSound: function(e) {
+			this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
+			setCookie("sound", this.sound);
+		},
 		clickGameSeek: function(e) {
 			this.getRidOfTooltip(e.currentTarget);
 			if (this.mode == "human")
@@ -929,10 +1029,10 @@ Vue.component('my-game', {
 			if (mode=="human")
 			{
 				// Opponent found!
-				if (!continuation)
+				if (!continuation) //not playing sound on game continuation
 				{
-					// Not playing sound on game continuation:
-					new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {});
+					if (this.sound >= 1)
+						new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {});
 					document.getElementById("modal-newgame").checked = false;
 				}
 				this.oppid = oppId;
@@ -1112,7 +1212,8 @@ Vue.component('my-game', {
 			// 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}));
-			new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
+			if (this.sound == 2)
+				new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
 			if (this.mode != "idle")
 			{
 				this.incheck = this.vr.getCheckSquares(move); //is opponent in check?