this.newGame("problem", p.fen, V.ParseFen(p.fen).turn);
},
},
+ // TODO: split the rendering in other components ?
+ // At least divide in parts, it's too big now.
render(h) {
const [sizeX,sizeY] = [V.size.x,V.size.y];
// Precompute hints squares to facilitate rendering
"tooltip": true,
"play": true,
"seek": this.seek,
- "playing": this.mode == "human",
+ "playing": this.mode == "human" && this.score == "*",
},
},
[h('i', { 'class': { "material-icons": true } }, "accessibility")])
);
- if (variant != "Dark" &&
- (["idle","computer","friend"].includes(this.mode)
- || ["friend","human"].includes(this.mode) && this.score != "*"))
+ if (["idle","computer","friend"].includes(this.mode)
+ || (this.mode == "human" && this.score != "*"))
{
actionArray.push(
h('button',
'class': {
"tooltip":true,
"play": true,
- "playing": this.mode == "computer",
+ "playing": this.mode == "computer" && this.score == "*",
"spaceleft": true,
},
},
[h('i', { 'class': { "material-icons": true } }, "computer")])
);
}
- if (variant != "Dark" &&
- (["idle","friend"].includes(this.mode)
- || ["computer","human"].includes(this.mode) && this.score != "*"))
+ if (variant != "Dark" && (["idle","friend"].includes(this.mode)
+ || (["computer","human"].includes(this.mode) && this.score != "*")))
{
actionArray.push(
h('button',
}
);
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 } },
{
myReservePiecesArray.push(h('div',
{
- 'class': {'board':true, ['board'+sizeY+'-reserve']:true},
+ 'class': {'board':true, ['board'+sizeY]:true},
attrs: { id: this.getSquareId({x:sizeX+shiftIdx,y:i}) }
},
[
{
oppReservePiecesArray.push(h('div',
{
- 'class': {'board':true, ['board'+sizeY+'-reserve']:true},
+ 'class': {'board':true, ['board'+sizeY]:true},
attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
},
[
)
];
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',
else if (friendContinuation)
this.continueGame("friend");
};
+
+ // TODO: this events listener is central. Refactor ? How ?
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,
}));
break;
}
};
+
const socketCloseListener = () => {
this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
this.conn.addEventListener('open', socketOpenListener);
this.conn.onclose = socketCloseListener;
// Listen to keyboard left/right to navigate in game
document.onkeydown = event => {
- if (["idle","chat"].includes(this.mode) &&
+ if (["human","computer"].includes(this.mode) &&
!!this.vr && this.vr.moves.length > 0 && [37,39].includes(event.keyCode))
{
event.preventDefault();
this.play();
}
};
- // Computer moves web worker logic:
+ // Computer moves web worker logic: (TODO: also for observers in HH games)
this.compWorker.postMessage(["scripts",variant]);
const self = this;
this.compWorker.onmessage = function(e) {
// before they appear on page:
const delay = Math.max(500-(Date.now()-self.timeStart), 0);
setTimeout(() => {
+ const animate = (variant!="Dark" ? "animate" : null);
if (self.mode == "computer") //warning: mode could have changed!
- self.play(compMove[0], "animate");
+ self.play(compMove[0], animate);
if (compMove.length == 2)
setTimeout( () => {
if (self.mode == "computer")
- self.play(compMove[1], "animate");
+ self.play(compMove[1], animate);
}, 750);
}, delay);
}
},
methods: {
+ // TODO: in settings.js
setMyname: function(e) {
this.myname = e.target.value;
localStorage["username"] = this.myname;
},
+ showSettings: function(e) {
+ this.getRidOfTooltip(e.currentTarget);
+ document.getElementById("modal-settings").checked = true;
+ },
+ toggleHints: function() {
+ this.hints = !this.hints;
+ localStorage["hints"] = (this.hints ? "1" : "0");
+ },
+ setBoardColor: function(e) {
+ this.bcolor = e.target.options[e.target.selectedIndex].value;
+ localStorage["bcolor"] = this.bcolor;
+ },
+ setSound: function(e) {
+ this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
+ localStorage["sound"] = this.sound;
+ },
+
+ // TODO: in another component
trySendChat: function(e) {
if (e.keyCode == 13) //'enter' key
this.sendChat();
this.conn.send(JSON.stringify({
code:"newchat", oppid: this.oppid, msg: chatTxt}));
},
+ startChat: function(e) {
+ this.getRidOfTooltip(e.currentTarget);
+ document.getElementById("modal-chat").checked = true;
+ },
+
+ // TODO: in problems component
toggleShowSolution: function() {
let problemSolution = document.getElementById("problem-solution");
problemSolution.style.display =
? "block"
: "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
}
this.cursor = this.vr.moves.length; //to navigate in finished game
},
+
+ // TODO: elsewhere (general methods to access/retrieve from storage, to be generalized)
+ // https://developer.mozilla.org/fr/docs/Web/API/API_IndexedDB
+ // https://dexie.org/
getStoragePrefix: function(mode) {
let prefix = "";
if (mode == "computer")
delete localStorage[prefix+"fen"];
delete localStorage[prefix+"score"];
},
- // HACK because mini-css tooltips are persistent after click...
- // NOTE: seems to work only in chrome/chromium. TODO...
- getRidOfTooltip: function(elt) {
- elt.style.visibility = "hidden";
- setTimeout(() => { elt.style.visibility="visible"; }, 100);
- },
- startChat: function(e) {
- this.getRidOfTooltip(e.currentTarget);
- document.getElementById("modal-chat").checked = true;
- },
clearCurrentGame: function(e) {
this.getRidOfTooltip(e.currentTarget);
this.clearStorage();
location.reload(); //to see clearing effects
},
- showSettings: function(e) {
- this.getRidOfTooltip(e.currentTarget);
- document.getElementById("modal-settings").checked = true;
- },
- toggleHints: function() {
- this.hints = !this.hints;
- localStorage["hints"] = (this.hints ? "1" : "0");
- },
- setBoardColor: function(e) {
- this.bcolor = e.target.options[e.target.selectedIndex].value;
- localStorage["bcolor"] = this.bcolor;
- },
- setSound: function(e) {
- this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
- localStorage["sound"] = this.sound;
+
+ // HACK because mini-css tooltips are persistent after click...
+ // NOTE: seems to work only in chrome/chromium. TODO...
+ getRidOfTooltip: function(elt) {
+ elt.style.visibility = "hidden";
+ setTimeout(() => { elt.style.visibility="visible"; }, 100);
},
+
+ // TODO: elsewhere, probably (new game button)
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)
{
},
clickComputerGame: function(e) {
this.getRidOfTooltip(e.currentTarget);
+ if (this.mode == "computer" && this.score == "*"
+ && this.vr.turn != this.mycolor)
+ {
+ // Wait for computer reply first (avoid potential "ghost move" bug)
+ return;
+ }
this.newGame("computer");
},
clickFriendGame: function(e) {
this.getRidOfTooltip(e.currentTarget);
document.getElementById("modal-fenedit").checked = true;
},
- resign: function(e) {
- this.getRidOfTooltip(e.currentTarget);
- if (this.mode == "human" && this.oppConnected)
- {
- try {
- this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
- } catch (INVALID_STATE_ERR) {
- return; //socket is not ready (and not yet reconnected)
- }
- }
- this.endGame(this.mycolor=="w"?"0-1":"1-0");
- },
- newGame: function(mode, fenInit, color, oppId) {
- const fen = "rnbbqkrn/1ppppp1p/p5p1/8/8/3P4/PPP1PPPP/BNQBRKRN w1 1111 -"; //fenInit || VariantRules.GenRandInitFen();
+ // In main hall :
+ 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
}
return;
}
}
- else if (score == "*")
- return this.continueGame("computer");
}
}
else if (mode == "friend")
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;
else if (mode == "computer")
{
this.compWorker.postMessage(["init",fen]);
- if (this.mycolor != this.vr.turn)
+ if (score == "*" && this.mycolor != this.vr.turn)
this.playComputerMove();
}
//else: nothing special to do in friend mode
setTimeout(() => this.endGame(score), 100);
}
},
+
+ resign: function(e) {
+ this.getRidOfTooltip(e.currentTarget);
+ if (this.mode == "human" && this.oppConnected)
+ {
+ try {
+ this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
+ } catch (INVALID_STATE_ERR) {
+ return; //socket is not ready (and not yet reconnected)
+ }
+ }
+ this.endGame(this.mycolor=="w"?"0-1":"1-0");
+ },
playComputerMove: function() {
this.timeStart = Date.now();
this.compWorker.postMessage(["askmove"]);
},
+
+ // TODO: purely graphical, move in a "chessground-like" component
// Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
getSquareId: function(o) {
// NOTE: a separator is required to allow any size of board
this.play(move);
}, 250);
},
+
+ // OK, these last functions can stay here (?!)
play: function(move, programmatic) {
if (!move)
{
// Navigate after game is over
- if (this.cursor >= this.vr.moves.length)
+ if (this.cursor >= this.moves.length)
return; //already at the end
- move = this.vr.moves[this.cursor++];
+ move = this.moves[this.cursor++];
}
if (!!programmatic) //computer or human opponent
return this.animateMove(move);
// Not programmatic, or animation is over
if (this.mode == "human" && this.vr.turn == this.mycolor)
this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
- if (this.score == "*")
+
+
+ // TODO: play move, and stack it on this.moves (if a move was provided; otherwise just navigate)
+
+ if (this.score == "*") //TODO: I don't like this if()
{
// Emergency check, if human game started "at the same time"
// TODO: robustify this...
// Send the move to web worker (TODO: including his own moves?!)
this.compWorker.postMessage(["newmove",move]);
}
- }
- else
- {
- VariantRules.PlayOnBoard(this.vr.board, move);
- this.$forceUpdate(); //TODO: ?!
- }
- const eog = this.vr.checkGameOver();
- if (eog != "*")
- {
- if (["human","computer"].includes(this.mode))
- this.endGame(eog);
- else
+ const eog = this.vr.getCurrentScore();
+ if (eog != "*")
{
- // Just show score on screen (allow undo)
- this.score = eog;
- this.showScoreMsg();
+ if (["human","computer"].includes(this.mode))
+ this.endGame(eog);
+ else
+ {
+ // Just show score on screen (allow undo)
+ this.score = eog;
+ this.showScoreMsg();
+ }
}
}
+// else
+// {
+// VariantRules.PlayOnBoard(this.vr.board, move);
+// this.$forceUpdate(); //TODO: ?!
+// }
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 == "*")
this.playComputerMove();
},
+ // TODO: merge two next functions
undo: function() {
// Navigate after game is over
if (this.cursor == 0)
},
},
})
+
+// TODO: keep moves list here
+get lastMove()
+ {
+ const L = this.moves.length;
+ return (L>0 ? this.moves[L-1] : null);
+ }
+
+// here too:
+ move.notation = this.getNotation(move);
+ // Hash of current game state *after move*, to detect repetitions
+ move.hash = hex_md5(this.getBaseFen() + this.getTurnFen() + this.getFlagsFen());
+//TODO: confirm dialog with "opponent offers draw", avec possible bouton "prevent future offers" + bouton "proposer nulle"
+//+ bouton "abort" avec score == "?" + demander confirmation pour toutes ces actions,
+//comme sur lichess