+ aboveBoardElts.push(connectedIndic);
+ }
+ if (this.mode == "human" && this.score != "*")
+ {
+ const chatButton = h(
+ 'button',
+ {
+ on: { click: this.startChat },
+ attrs: {
+ "aria-label": translations['Start chat'],
+ "id": "chatBtn",
+ },
+ 'class': {
+ "tooltip": true,
+ "play": true,
+ "above-board": true,
+ "indic-left": true,
+ },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "chat")]
+ );
+ aboveBoardElts.push(chatButton);
+ }
+ if (["human","computer","friend"].includes(this.mode))
+ {
+ const clearButton = h(
+ 'button',
+ {
+ on: { click: this.clearCurrentGame },
+ attrs: {
+ "aria-label": translations['Clear current game'],
+ "id": "clearBtn",
+ },
+ 'class': {
+ "tooltip": true,
+ "play": true,
+ "above-board": true,
+ "indic-left": true,
+ },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "clear")]
+ );
+ aboveBoardElts.push(clearButton);
+ }
+ const turnIndic = h(
+ 'div',
+ {
+ "class": {
+ "indic-right": true,
+ "white-turn": this.vr.turn=="w",
+ "black-turn": this.vr.turn=="b",
+ },
+ style: {
+ "width": indicWidth + "px",
+ "height": indicHeight + "px",
+ },
+ }
+ );
+ aboveBoardElts.push(turnIndic);
+ const settingsBtn = h(
+ 'button',
+ {
+ on: { click: this.showSettings },
+ attrs: {
+ "aria-label": translations['Settings'],
+ "id": "settingsBtn",
+ },
+ 'class': {
+ "tooltip": true,
+ "play": true,
+ "above-board": true,
+ "indic-right": true,
+ },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "settings")]
+ );
+ aboveBoardElts.push(settingsBtn);
+ elementArray.push(
+ h('div',
+ { "class": { "aboveboard-wrapper": true } },
+ aboveBoardElts
+ )
+ );
+ if (this.mode == "problem")
+ {
+ // Show problem instructions
+ elementArray.push(
+ h('div',
+ {
+ attrs: { id: "instructions-div" },
+ "class": {
+ "clearer": true,
+ "section-content": true,
+ },
+ },
+ [
+ h('p',
+ {
+ attrs: { id: "problem-instructions" },
+ domProps: { innerHTML: this.problem.instructions }
+ }
+ )
+ ]
+ )
+ );