- // https://minicss.org/docs#forms-and-input
- h('p', { domProps: { innerHTML: "TODO: hints" } }),
- h('p', { domProps: { innerHTML: "TODO: board(color)" } }),
- h('p', { domProps: { innerHTML: "TODO: sound(level)" } }),
+ h('fieldset',
+ { },
+ [
+ h('label',
+ {
+ attrs: { for: "nameSetter" },
+ domProps: { innerHTML: translations["My name is..."] },
+ },
+ ),
+ h('input',
+ {
+ attrs: {
+ "id": "nameSetter",
+ type: "text",
+ value: this.myname,
+ },
+ on: { "change": this.setMyname },
+ }
+ ),
+ ]
+ ),
+ h('fieldset',
+ { },
+ [
+ h('label',
+ {
+ attrs: { for: "setHints" },
+ domProps: { innerHTML: translations["Show hints?"] },
+ },
+ ),
+ h('input',
+ {
+ attrs: {
+ "id": "setHints",
+ type: "checkbox",
+ checked: this.hints,
+ },
+ on: { "change": this.toggleHints },
+ }
+ ),
+ ]
+ ),
+ h('fieldset',
+ { },
+ [
+ h('label',
+ {
+ attrs: { for: "selectColor" },
+ domProps: { innerHTML: translations["Board colors"] },
+ },
+ ),
+ h("select",
+ {
+ attrs: { "id": "selectColor" },
+ on: { "change": this.setBoardColor },
+ },
+ [
+ h("option",
+ {
+ domProps: {
+ "value": "lichess",
+ innerHTML: translations["brown"]
+ },
+ attrs: { "selected": this.color=="lichess" },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "chesscom",
+ innerHTML: translations["green"]
+ },
+ attrs: { "selected": this.color=="chesscom" },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "chesstempo",
+ innerHTML: translations["blue"]
+ },
+ attrs: { "selected": this.color=="chesstempo" },
+ }
+ ),
+ ],
+ ),
+ ]
+ ),
+ h('fieldset',
+ { },
+ [
+ h('label',
+ {
+ attrs: { for: "selectSound" },
+ domProps: { innerHTML: translations["Play sounds?"] },
+ },
+ ),
+ h("select",
+ {
+ attrs: { "id": "selectSound" },
+ on: { "change": this.setSound },
+ },
+ [
+ h("option",
+ {
+ domProps: {
+ "value": "0",
+ innerHTML: translations["None"]
+ },
+ attrs: { "selected": this.sound==0 },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "1",
+ innerHTML: translations["New game"]
+ },
+ attrs: { "selected": this.sound==1 },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "2",
+ innerHTML: translations["All"]
+ },
+ attrs: { "selected": this.sound==2 },
+ }
+ ),
+ ],
+ ),
+ ]
+ ),