+ const modalSettings = [
+ h('input',
+ {
+ attrs: { "id": "modal-settings", type: "checkbox" },
+ "class": { "modal": true },
+ }),
+ h('div',
+ {
+ attrs: { "role": "dialog", "aria-labelledby": "modal-settings" },
+ },
+ [
+ h('div',
+ {
+ "class": { "card": true, "smallpad": true },
+ },
+ [
+ h('label',
+ {
+ attrs: { "id": "close-settings", "for": "modal-settings" },
+ "class": { "modal-close": true },
+ }
+ ),
+ h('h3',
+ {
+ "class": { "section": true },
+ domProps: { innerHTML: "Preferences" },
+ }
+ ),
+ // https://minicss.org/docs#forms-and-input
+ h('input',
+ {
+ attrs: {
+ "id": "setHints",
+ type: "checkbox",
+ checked: this.hints,
+ },
+ }
+ ),
+ h('label',
+ {
+ attrs: {
+ for: "setHints",
+ },
+ domProps: { innerHTML: "Show hints?" },
+ },
+ ),
+ h('p', { domProps: { innerHTML: "TODO: board(color)" } }),
+ h('p', { domProps: { innerHTML: "TODO: sound(level)" } }),
+ ]
+ )
+ ]
+ )
+ ];
+ elementArray = elementArray.concat(modalSettings);