+ const modalFenEdit = [
+ h('input',
+ {
+ attrs: { "id": "modal-fenedit", type: "checkbox" },
+ "class": { "modal": true },
+ }),
+ h('div',
+ {
+ attrs: { "role": "dialog", "aria-labelledby": "titleFenedit" },
+ },
+ [
+ h('div',
+ {
+ "class": { "card": true, "smallpad": true },
+ },
+ [
+ h('label',
+ {
+ attrs: { "id": "close-fenedit", "for": "modal-fenedit" },
+ "class": { "modal-close": true },
+ }
+ ),
+ h('h3',
+ {
+ attrs: { "id": "titleFenedit" },
+ "class": { "section": true },
+ domProps: { innerHTML: "Position + flags (FEN):" },
+ }
+ ),
+ h('input',
+ {
+ attrs: {
+ "id": "input-fen",
+ type: "text",
+ value: VariantRules.GenRandInitFen(),
+ },
+ }
+ ),
+ h('button',
+ {
+ on: { click:
+ () => {
+ const fen = document.getElementById("input-fen").value;
+ document.getElementById("modal-fenedit").checked = false;
+ this.newGame("friend", fen);
+ }
+ },
+ domProps: { innerHTML: "Ok" },
+ }
+ ),
+ h('button',
+ {
+ on: { click:
+ () => {
+ document.getElementById("input-fen").value =
+ VariantRules.GenRandInitFen();
+ }
+ },
+ domProps: { innerHTML: "Random" },
+ }
+ ),
+ ]
+ )
+ ]
+ )
+ ];
+ elementArray = elementArray.concat(modalFenEdit);
+ const modalSettings = [
+ h('input',
+ {
+ attrs: { "id": "modal-settings", type: "checkbox" },
+ "class": { "modal": true },
+ }),
+ h('div',
+ {
+ attrs: { "role": "dialog", "aria-labelledby": "settingsTitle" },
+ },
+ [
+ h('div',
+ {
+ "class": { "card": true, "smallpad": true },
+ },
+ [
+ h('label',
+ {
+ attrs: { "id": "close-settings", "for": "modal-settings" },
+ "class": { "modal-close": true },
+ }
+ ),
+ h('h3',
+ {
+ attrs: { "id": "settingsTitle" },
+ "class": { "section": true },
+ domProps: { innerHTML: "Preferences" },
+ }
+ ),
+ h('fieldset',
+ { },
+ [
+ h('label',
+ {
+ attrs: { for: "nameSetter" },
+ domProps: { innerHTML: "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: "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: "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"
+ },
+ attrs: { "selected": this.sound==0 },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "1",
+ innerHTML: "Newgame"
+ },
+ attrs: { "selected": this.sound==1 },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "2",
+ innerHTML: "All"
+ },
+ attrs: { "selected": this.sound==2 },
+ }
+ ),
+ ],
+ ),
+ ]
+ ),
+ ]
+ )
+ ]
+ )
+ ];
+ elementArray = elementArray.concat(modalSettings);
+ let chatEltsArray =
+ [
+ h('label',
+ {
+ attrs: { "id": "close-chat", "for": "modal-chat" },
+ "class": { "modal-close": true },
+ }
+ ),
+ h('h3',
+ {
+ attrs: { "id": "titleChat" },
+ "class": { "section": true },
+ domProps: { innerHTML: "Chat with " + this.oppName },
+ }
+ )
+ ];
+ for (let chat of this.chats)
+ {
+ chatEltsArray.push(
+ h('p',
+ {
+ "class": {
+ "my-chatmsg": chat.author==this.myid,
+ "opp-chatmsg": chat.author==this.oppid,
+ },
+ domProps: { innerHTML: chat.msg }
+ }
+ )
+ );
+ }
+ chatEltsArray = chatEltsArray.concat([
+ h('input',
+ {
+ attrs: {
+ "id": "input-chat",
+ type: "text",
+ placeholder: "Type here",
+ },
+ on: { keyup: this.trySendChat }, //if key is 'enter'
+ }
+ ),
+ h('button',
+ {
+ on: { click: this.sendChat },
+ domProps: { innerHTML: "Send" },
+ }
+ )
+ ]);
+ const modalChat = [
+ h('input',
+ {
+ attrs: { "id": "modal-chat", type: "checkbox" },
+ "class": { "modal": true },
+ }),
+ h('div',
+ {
+ attrs: { "role": "dialog", "aria-labelledby": "titleChat" },
+ },
+ [
+ h('div',
+ {
+ "class": { "card": true, "smallpad": true },
+ },
+ chatEltsArray
+ )
+ ]
+ )
+ ];
+ elementArray = elementArray.concat(modalChat);