seek: false,
fenStart: "",
incheck: [],
+ expert: document.cookie.length>0 ? document.cookie.substr(-1)=="1" : false,
};
},
render(h) {
let incheckSq = doubleArray(sizeX, sizeY, false);
this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
let elementArray = [];
- let square00 = document.getElementById("sq-0-0");
- let squareWidth = !!square00
- ? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
- : 0;
const playingHuman = (this.mode == "human");
const playingComp = (this.mode == "computer");
let actionArray = [
];
if (!!this.vr)
{
+ const square00 = document.getElementById("sq-0-0");
+ const squareWidth = !!square00
+ ? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
+ : 0;
+ const indicWidth = (squareWidth>0 ? squareWidth/2 : 20);
if (this.mode == "human")
{
let connectedIndic = h(
'div',
{
"class": {
+ "topindicator": true,
+ "indic-left": true,
"connected": this.oppConnected,
"disconnected": !this.oppConnected,
},
+ style: {
+ "width": indicWidth + "px",
+ "height": indicWidth + "px",
+ },
}
);
elementArray.push(connectedIndic);
}
+ let 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);
+ let expertSwitch = h(
+ 'button',
+ {
+ on: { click: this.toggleExpertMode },
+ attrs: { "aria-label": 'Toggle expert mode' },
+ 'class': {
+ "tooltip":true,
+ "topindicator": true,
+ "indic-right": true,
+ "expert-switch": true,
+ "expert-mode": this.expert,
+ },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "remove_red_eye")]
+ );
+ elementArray.push(expertSwitch);
let choices = h('div',
{
attrs: { "id": "choices" },
'class': { 'row': true },
style: {
- //"position": "relative",
"display": this.choices.length>0?"block":"none",
"top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
"width": (this.choices.length * squareWidth) + "px",
)
);
}
- if (hintSquares[ci][cj])
+ if (!this.expert && hintSquares[ci][cj])
{
elems.push(
h(
{
'class': {
'board': true,
- 'light-square': !highlight && (i+j)%2==0,
- 'dark-square': !highlight && (i+j)%2==1,
- 'highlight': highlight,
- 'incheck': incheckSq[ci][cj],
+ 'light-square': (i+j)%2==0 && (this.expert || !highlight),
+ 'dark-square': (i+j)%2==1 && (this.expert || !highlight),
+ 'highlight': !this.expert && highlight,
+ 'incheck': !this.expert && incheckSq[ci][cj],
},
attrs: {
id: this.getSquareId({x:ci,y:cj}),
}
return eogMessage;
},
+ toggleExpertMode: function() {
+ this.expert = !this.expert;
+ document.cookie = "expert=" + (this.expert ? "1" : "0");
+ },
resign: function() {
if (this.mode == "human" && this.oppConnected)
{