color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo
// sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
sound: parseInt(getCookie("sound", "2")),
+ // Web worker to play computer moves without freezing interface:
+ compWorker: new Worker('/javascripts/playCompMove.js'),
+ timeStart: undefined, //time when computer starts thinking
};
},
watch: {
'class': {
"tooltip": true,
"topindicator": true,
- "indic-right": true,
+ "indic-left": true,
"settings-btn": !smallScreen,
"settings-btn-small": smallScreen,
},
]
);
}
- if (this.mode == "friend")
+ if (["friend","problem"].includes(this.mode))
{
actionArray = actionArray.concat(
[
h('h3',
{
domProps: { innerHTML: "Show solution" },
- on: { click: "toggleShowSolution" }
+ on: { click: this.toggleShowSolution },
}
),
h('p',
this.play();
}
};
+ // Computer moves web worker logic:
+ this.compWorker.postMessage(["scripts",variant]);
+ const self = this;
+ this.compWorker.onmessage = function(e) {
+ const compMove = e.data;
+ // (first move) HACK: small delay to avoid selecting elements
+ // before they appear on page:
+ const delay = Math.max(500-(Date.now()-self.timeStart), 0);
+ setTimeout(() => {
+ if (self.mode == "computer") //Warning: mode could have changed!
+ self.play(compMove, "animate")
+ }, delay);
+ }
},
methods: {
toggleShowSolution: function() {
let problemSolution = document.getElementById("problem-solution");
- problemSolution.style.display = problemSolution.style.display == "none"
- ? "block"
- : "none";
+ problemSolution.style.display =
+ !problemSolution.style.display || problemSolution.style.display == "none"
+ ? "block"
+ : "none";
},
download: function() {
let content = document.getElementById("pgn-game").innerHTML;
this.fenStart = localStorage.getItem(prefix+"fenStart");
}
else
- this.fenStart = fen;
+ this.fenStart = V.ParseFen(fen).position; //this is enough
if (mode=="human")
{
// Opponent found!
}
else if (mode == "computer")
{
+ this.compWorker.postMessage(["init",this.vr.getFen()]);
this.mycolor = Math.random() < 0.5 ? 'w' : 'b';
if (this.mycolor == 'b')
this.playComputerMove();
//else: against a (IRL) friend or problem solving: nothing more to do
},
playComputerMove: function() {
- const timeStart = Date.now();
- const compMove = this.vr.getComputerMove();
- // (first move) HACK: avoid selecting elements before they appear on page:
- const delay = Math.max(500-(Date.now()-timeStart), 0);
- setTimeout(() => {
- if (this.mode == "computer") //Warning: mode could have changed!
- this.play(compMove, "animate")
- }, delay);
+ this.timeStart = Date.now();
+ this.compWorker.postMessage(["askmove"]);
},
// Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
getSquareId: function(o) {
{
this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
this.vr.play(move, "ingame");
+ if (this.mode == "computer")
+ {
+ // Send the move to web worker
+ this.compWorker.postMessage(["newmove",move]);
+ }
}
else
{
}
}
if (this.mode == "computer" && this.vr.turn != this.mycolor)
- this.playComputerMove;
+ this.playComputerMove();
},
undo: function() {
// Navigate after game is over
undoInGame: function() {
const lm = this.vr.lastMove;
if (!!lm)
+ {
this.vr.undo(lm);
+ const lmBefore = this.vr.lastMove;
+ if (!!lmBefore)
+ {
+ this.vr.undo(lmBefore);
+ this.incheck = this.vr.getCheckSquares(lmBefore);
+ this.vr.play(lmBefore, "ingame");
+ }
+ else
+ this.incheck = [];
+ }
},
},
})