From: Benjamin Auder <benjamin.auder@somewhere>
Date: Tue, 11 Dec 2018 11:41:01 +0000 (+0100)
Subject: Add basic sound and color selection (not reactive yet)
X-Git-Url: https://git.auder.net/assets/img/css/rpsls.css?a=commitdiff_plain;h=12b46d8f437967ecab12791298749d28ed99dce3;p=vchess.git

Add basic sound and color selection (not reactive yet)
---

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 021fa978..80dd35de 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -435,7 +435,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 +570,123 @@ 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: "Show " } }),
+									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: "lichess"
+													},
+													attrs: { "selected": this.color=="lichess" },
+												}
+											),
+											h("option",
+												{
+													domProps: {
+														"value": "chesscom",
+														innerHTML: "chess.com"
+													},
+													attrs: { "selected": this.color=="chesscom" },
+												}
+											),
+											h("option",
+												{
+													domProps: {
+														"value": "chesstempo",
+														innerHTML: "chesstempo"
+													},
+													attrs: { "selected": this.color=="chesstempo" },
+												}
+											),
+										],
+									),
+								]
+							),
+							h('fieldset',
+								{ },
+								[
+									h('label',
+										{
+											attrs: {
+												for: "selectSound",
+											},
+											domProps: { innerHTML: "Sound level" },
+										},
+									),
+									h("select",
+										{
+											attrs: { "id": "selectSound" },
+											on: { "change": this.setSound },
+										},
+										[
+											h("option",
+												{
+													domProps: {
+														"value": "0",
+														innerHTML: "No sound"
+													},
+												}
+											),
+											h("option",
+												{
+													domProps: {
+														"value": "1",
+														innerHTML: "Newgame sound"
+													},
+												}
+											),
+											h("option",
+												{
+													domProps: {
+														"value": "2",
+														innerHTML: "All sounds"
+													},
+												}
+											),
+										],
+									),
+								]
 							),
-							h('p', { domProps: { innerHTML: "TODO: board(color)" } }),
-							h('p', { domProps: { innerHTML: "TODO: sound(level)" } }),
 						]
 					)
 				]
@@ -857,6 +954,13 @@ Vue.component('my-game', {
 			this.hints = !this.hints;
 			setCookie("hints", this.hints ? "1" : "0");
 		},
+		// TODO:
+		setColor: function() {
+			alert("Change");
+		},
+		setSound: function() {
+			alert("Change");
+		},
 		clickGameSeek: function(e) {
 			this.getRidOfTooltip(e.currentTarget);
 			if (this.mode == "human")