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
}
);
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',
else if (friendContinuation)
this.continueGame("friend");
};
+
+ // TODO: this events listener is central. Refactor ? How ?
const socketMessageListener = msg => {
const data = JSON.parse(msg.data);
let L = undefined;
break;
}
};
+
const socketCloseListener = () => {
this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
this.conn.addEventListener('open', socketOpenListener);
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) {
}
},
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() {
// 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);
}
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" && this.score == "*")
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");
- },
+ // In main hall :
newGame: function(mode, fenInit, color, oppId, gameId) {
const fen = fenInit || VariantRules.GenRandInitFen();
console.log(fen); //DEBUG
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]);
}
- const eog = this.vr.checkGameOver();
+ const eog = this.vr.getCurrentScore();
if (eog != "*")
{
if (["human","computer"].includes(this.mode))
}
}
}
- else
- {
- VariantRules.PlayOnBoard(this.vr.board, move);
- this.$forceUpdate(); //TODO: ?!
- }
+// 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);
+//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
projects / vchess.git / blobdiff