+ if (this.mode == "chat")
+ {
+ const chatButton = h(
+ 'button',
+ {
+ on: { click: this.startChat },
+ attrs: {
+ "aria-label": 'Start chat',
+ "id": "chatBtn",
+ },
+ 'class': {
+ "tooltip": true,
+ "topindicator": true,
+ "indic-left": true,
+ "settings-btn": !smallScreen,
+ "settings-btn-small": smallScreen,
+ },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "chat")]
+ );
+ elementArray.push(chatButton);
+ }
+ else if (this.mode == "computer")
+ {
+ const clearButton = h(
+ 'button',
+ {
+ on: { click: this.clearComputerGame },
+ attrs: {
+ "aria-label": 'Clear computer game',
+ "id": "clearBtn",
+ },
+ 'class': {
+ "tooltip": true,
+ "topindicator": true,
+ "indic-left": true,
+ "settings-btn": !smallScreen,
+ "settings-btn-small": smallScreen,
+ },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "clear")]
+ );
+ elementArray.push(clearButton);
+ }
+ const turnIndic = h(
+ 'div',
+ {
+ "class": {
+ "topindicator": true,
+ "indic-right": true,
+ "white-turn": this.vr.turn=="w",
+ "black-turn": this.vr.turn=="b",
+ },
+ style: {
+ "width": indicWidth + "px",
+ "height": indicWidth + "px",
+ },
+ }
+ );
+ elementArray.push(turnIndic);
+ const settingsBtn = h(
+ 'button',
+ {
+ on: { click: this.showSettings },
+ attrs: {
+ "aria-label": 'Settings',
+ "id": "settingsBtn",
+ },
+ 'class': {
+ "tooltip": true,
+ "topindicator": true,
+ "indic-right": true,
+ "settings-btn": !smallScreen,
+ "settings-btn-small": smallScreen,
+ },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "settings")]
+ );
+ elementArray.push(settingsBtn);
+ 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 }
+ }
+ )
+ ]
+ )
+ );
+ }
+ const choices = h('div',