"tooltip": true,
"play": true,
"seek": this.seek,
- "playing": this.mode == "human",
+ "playing": this.mode == "human" && this.score == "*",
},
},
[h('i', { 'class': { "material-icons": true } }, "accessibility")])
'class': {
"tooltip":true,
"play": true,
- "playing": this.mode == "computer",
+ "playing": this.mode == "computer" && this.score == "*",
"spaceleft": true,
},
},
}
);
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 } },
)
];
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: translations["Preferences"] },
- }
- ),
- h('fieldset',
- { },
- [
- h('label',
- {
- attrs: { for: "nameSetter" },
- domProps: { innerHTML: translations["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: translations["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: translations["Board colors"] },
- },
- ),
- h("select",
- {
- attrs: { "id": "selectColor" },
- on: { "change": this.setBoardColor },
- },
- [
- h("option",
- {
- domProps: {
- "value": "lichess",
- innerHTML: translations["brown"]
- },
- attrs: { "selected": this.color=="lichess" },
- }
- ),
- h("option",
- {
- domProps: {
- "value": "chesscom",
- innerHTML: translations["green"]
- },
- attrs: { "selected": this.color=="chesscom" },
- }
- ),
- h("option",
- {
- domProps: {
- "value": "chesstempo",
- innerHTML: translations["blue"]
- },
- attrs: { "selected": this.color=="chesstempo" },
- }
- ),
- ],
- ),
- ]
- ),
- h('fieldset',
- { },
- [
- h('label',
- {
- attrs: { for: "selectSound" },
- domProps: { innerHTML: translations["Play sounds?"] },
- },
- ),
- h("select",
- {
- attrs: { "id": "selectSound" },
- on: { "change": this.setSound },
- },
- [
- h("option",
- {
- domProps: {
- "value": "0",
- innerHTML: translations["None"]
- },
- attrs: { "selected": this.sound==0 },
- }
- ),
- h("option",
- {
- domProps: {
- "value": "1",
- innerHTML: translations["New game"]
- },
- attrs: { "selected": this.sound==1 },
- }
- ),
- h("option",
- {
- domProps: {
- "value": "2",
- innerHTML: translations["All"]
- },
- attrs: { "selected": this.sound==2 },
- }
- ),
- ],
- ),
- ]
- ),
- ]
- )
- ]
- )
- ];
- elementArray = elementArray.concat(modalSettings);
let chatEltsArray =
[
h('label',
actionArray
);
elementArray.push(actions);
- if (this.score != "*" && this.pgnTxt.length > 0)
- {
- elementArray.push(
- h('div',
- {
- attrs: { id: "pgn-div" },
- "class": { "section-content": true },
- },
- [
- h('a',
- {
- attrs: {
- id: "download",
- href: "#",
- }
- }
- ),
- h('p',
- {
- attrs: { id: "pgn-game" },
- domProps: { innerHTML: this.pgnTxt }
- }
- ),
- h('button',
- {
- attrs: { "id": "downloadBtn" },
- on: { click: this.download },
- domProps: { innerHTML: translations["Download game"] },
- }
- ),
- ]
- )
- );
- }
- else if (this.mode != "idle")
+ if (!!this.vr)
{
if (this.mode == "problem")
{
)
);
}
+ elementArray.push(
+ h('div',
+ {
+ attrs: { id: "pgn-div" },
+ "class": { "section-content": true },
+ },
+ [
+ h('a',
+ {
+ attrs: {
+ id: "download",
+ href: "#",
+ }
+ }
+ ),
+ h('button',
+ {
+ attrs: { "id": "downloadBtn" },
+ on: { click: this.download },
+ domProps: { innerHTML: translations["Download PGN"] },
+ }
+ ),
+ ]
+ )
+ );
}
return h(
'div',
};
const socketMessageListener = msg => {
const data = JSON.parse(msg.data);
- const L = (!!this.vr ? this.vr.moves.length : 0);
+ let L = undefined;
switch (data.code)
{
case "oppname":
break;
case "newgame": //opponent found
// oppid: opponent socket ID
- this.newGame("human", data.fen, data.color, data.oppid);
+ this.newGame("human", data.fen, data.color, data.oppid, data.gameid);
break;
case "newmove": //..he played!
this.play(data.move, (variant!="Dark" ? "animate" : null));
break; //games IDs don't match: definitely over...
this.oppConnected = true;
// Send our "last state" informations to opponent
+ L = this.vr.moves.length;
this.conn.send(JSON.stringify({
code: "lastate",
oppid: this.oppid,
}));
break;
case "lastate": //got opponent infos about last move
+ L = this.vr.moves.length;
if (this.gameId != data.gameId)
break; //games IDs don't match: nothing we can do...
// OK, opponent still in game (which might be over)
- if (this.mode != "human")
+ if (this.score != "*")
{
// We finished the game (any result possible)
this.conn.send(JSON.stringify({
this.conn.send(JSON.stringify({
code: "lastate",
oppid: this.oppid,
+ gameId: this.gameId,
lastMove: this.vr.moves[L-1],
movesCount: L,
}));
: "none";
},
download: function() {
- let content = document.getElementById("pgn-game").innerHTML;
- content = content.replace(/<br>/g, "\n");
+ // Variants may have special PGN structure (so next function isn't defined here)
+ const content = this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode);
// Prepare and trigger download link
let downloadAnchor = document.getElementById("download");
downloadAnchor.setAttribute("download", "game.pgn");
- downloadAnchor.href = "data:text/plain;charset=utf-8," +
- encodeURIComponent(content);
+ downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
downloadAnchor.click();
},
showScoreMsg: function() {
localStorage.setItem(prefix+"score", score);
}
this.showScoreMsg();
- // Variants may have special PGN structure (so next function isn't defined here)
- this.pgnTxt = this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode);
if (this.mode == "human" && this.oppConnected)
{
// Send our nickname to opponent
},
clickGameSeek: function(e) {
this.getRidOfTooltip(e.currentTarget);
- if (this.mode == "human")
+ if (this.mode == "human" && this.score == "*")
return; //no newgame while playing
if (this.seek)
{
}
this.endGame(this.mycolor=="w"?"0-1":"1-0");
},
- newGame: function(mode, fenInit, color, oppId) {
- const fen = "nrqkbrnb/pppppppp/8/8/8/8/PPPPPPPP/RKQBNRBN w 1111 -";//fenInit || VariantRules.GenRandInitFen();
+ newGame: function(mode, fenInit, color, oppId, gameId) {
+ const fen = fenInit || VariantRules.GenRandInitFen();
console.log(fen); //DEBUG
if (mode=="human" && !oppId)
{
}
// Send game request and wait..
try {
- this.conn.send(JSON.stringify({code:"newgame", fen:fen}));
+ this.conn.send(JSON.stringify({code:"newgame", fen:fen, gameid: getRandString() }));
} catch (INVALID_STATE_ERR) {
return; //nothing achieved
}
this.mode = mode;
this.incheck = [];
this.fenStart = V.ParseFen(fen).position; //this is enough
- if (mode != "problem")
- this.setStorage(); //store game state in case of interruptions
if (mode=="human")
{
// Opponent found!
- this.gameId = getRandString();
+ this.gameId = gameId;
this.oppid = oppId;
this.oppConnected = true;
this.mycolor = color;
else if (mode == "computer")
{
this.compWorker.postMessage(["init",this.vr.getFen()]);
- this.mycolor = "w";//(Math.random() < 0.5 ? 'w' : 'b');
+ this.mycolor = (Math.random() < 0.5 ? 'w' : 'b');
if (this.mycolor != this.vr.turn)
this.playComputerMove();
}
else if (mode == "friend")
this.mycolor = "w"; //convention...
//else: problem solving: nothing more to do
+ if (mode != "problem")
+ this.setStorage(); //store game state in case of interruptions
},
continueGame: function(mode) {
this.mode = mode;
if (["human","computer","friend"].includes(this.mode))
this.updateStorage(); //after our moves and opponent moves
if (this.mode == "computer" && this.vr.turn != this.mycolor && this.score == "*")
- {
- console.log(this.vr.moves.length + " " + this.vr.turn + " " + this.mycolor);
this.playComputerMove();
- }
},
undo: function() {
// Navigate after game is over
},
},
})
+
+// TODO: keep moves list here
+get lastMove()
+ {
+ const L = this.moves.length;
+ return (L>0 ? this.moves[L-1] : null);
+ }