// Game logic on a variant page
Vue.component('my-game', {
+ props: ["problem"],
data: function() {
return {
vr: null, //object to check moves, store them, FEN..
hints: (getCookie("hints") === "1" ? true : false),
color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo
// sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
- sound: getCookie("sound", "2"),
+ sound: parseInt(getCookie("sound", "2")),
};
},
+ watch: {
+ problem: function(p, pp) {
+ // 'problem' prop changed: update board state
+ // TODO: FEN + turn + flags + rappel instructions / solution on click sous l'échiquier
+ // TODO: trouver moyen de passer la situation des reserves pour Crazyhouse,
+ // et l'état des captures pour Grand... bref compléter le descriptif de l'état.
+ this.newGame("problem", p.fen, p.fen.split(" ")[2]);
+ },
+ },
render(h) {
- const [sizeX,sizeY] = VariantRules.size;
- const smallScreen = (screen.width <= 420);
+ const [sizeX,sizeY] = [V.size.x,V.size.y];
+ const smallScreen = (window.innerWidth <= 420);
// Precompute hints squares to facilitate rendering
let hintSquares = doubleArray(sizeX, sizeY, false);
this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
const settingsBtnElt = document.getElementById("settingsBtn");
const indicWidth = !!settingsBtnElt //-2 for border:
? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
- : 37; //TODO: always 37?
+ : (smallScreen ? 31 : 37);
if (this.mode == "human")
{
let connectedIndic = h(
"tooltip": true,
"topindicator": true,
"indic-right": true,
- "settings-btn": true,
+ "settings-btn": !smallScreen,
+ "settings-btn-small": smallScreen,
},
},
[h('i', { 'class': { "material-icons": true } }, "settings")]
})
);
// Create board element (+ reserves if needed by variant or mode)
+ const lm = this.vr.lastMove;
+ const showLight = this.hints &&
+ (this.mode!="idle" || this.cursor==this.vr.moves.length);
let gameDiv = h('div',
{
'class': { 'game': true },
)
);
}
- const lm = this.vr.lastMove;
- const showLight = this.hints &&
- (this.mode!="idle" || this.cursor==this.vr.moves.length);
return h(
'div',
{
}),
h('div',
{
- attrs: { "role": "dialog", "aria-labelledby": "modal-eog" },
+ attrs: { "role": "dialog", "aria-labelledby": "eogMessage" },
},
[
h('div',
),
h('h3',
{
+ attrs: { "id": "eogMessage" },
"class": { "section": true },
domProps: { innerHTML: eogMessage },
}
}),
h('div',
{
- attrs: { "role": "dialog", "aria-labelledby": "modal-newgame" },
+ attrs: { "role": "dialog", "aria-labelledby": "newGameTxt" },
},
[
h('div',
),
h('h3',
{
+ attrs: { "id": "newGameTxt" },
"class": { "section": true },
domProps: { innerHTML: "New game" },
}
}),
h('div',
{
- attrs: { "role": "dialog", "aria-labelledby": "modal-fenedit" },
+ attrs: { "role": "dialog", "aria-labelledby": "titleFenedit" },
},
[
h('div',
),
h('h3',
{
+ attrs: { "id": "titleFenedit" },
"class": { "section": true },
domProps: { innerHTML: "Position + flags (FEN):" },
}
}),
h('div',
{
- attrs: { "role": "dialog", "aria-labelledby": "modal-settings" },
+ attrs: { "role": "dialog", "aria-labelledby": "settingsTitle" },
},
[
h('div',
),
h('h3',
{
+ attrs: { "id": "settingsTitle" },
"class": { "section": true },
domProps: { innerHTML: "Preferences" },
}
h('fieldset',
{ },
[
- //h('legend', { domProps: { innerHTML: "Show " } }),
+ //h('legend', { domProps: { innerHTML: "Legend title" } }),
h('label',
{
- attrs: {
- for: "setHints",
- },
+ attrs: { for: "setHints" },
domProps: { innerHTML: "Show hints?" },
},
),
[
h('label',
{
- attrs: {
- for: "selectColor",
- },
+ attrs: { for: "selectColor" },
domProps: { innerHTML: "Board colors" },
},
),
{
domProps: {
"value": "lichess",
- innerHTML: "lichess"
+ innerHTML: "brown"
},
attrs: { "selected": this.color=="lichess" },
}
{
domProps: {
"value": "chesscom",
- innerHTML: "chess.com"
+ innerHTML: "green"
},
attrs: { "selected": this.color=="chesscom" },
}
{
domProps: {
"value": "chesstempo",
- innerHTML: "chesstempo"
+ innerHTML: "blue"
},
attrs: { "selected": this.color=="chesstempo" },
}
[
h('label',
{
- attrs: {
- for: "selectSound",
- },
- domProps: { innerHTML: "Sound level" },
+ attrs: { for: "selectSound" },
+ domProps: { innerHTML: "Play sounds?" },
},
),
h("select",
{
domProps: {
"value": "0",
- innerHTML: "No sound"
+ innerHTML: "None"
},
+ attrs: { "selected": this.sound==0 },
}
),
h("option",
{
domProps: {
"value": "1",
- innerHTML: "Newgame sound"
+ innerHTML: "Newgame"
},
+ attrs: { "selected": this.sound==1 },
}
),
h("option",
{
domProps: {
"value": "2",
- innerHTML: "All sounds"
+ innerHTML: "All"
},
+ attrs: { "selected": this.sound==2 },
}
),
],
{
elementArray.push(
h('div',
- { attrs: { id: "pgn-div" } },
+ {
+ attrs: { id: "pgn-div" },
+ "class": { "section-content": true },
+ },
[
h('a',
{
h('p',
{
attrs: { id: "pgn-game" },
- on: { click: this.download },
domProps: { innerHTML: this.pgnTxt }
}
- )
+ ),
+ h('button',
+ {
+ attrs: { "id": "downloadBtn" },
+ on: { click: this.download },
+ domProps: { innerHTML: "Download game" },
+ }
+ ),
]
)
);
// Show current FEN
elementArray.push(
h('div',
- { attrs: { id: "fen-div" } },
+ {
+ attrs: { id: "fen-div" },
+ "class": { "section-content": true },
+ },
[
h('p',
{
},
created: function() {
const url = socketUrl;
- const continuation = (localStorage.getItem("variant") === variant);
- this.myid = continuation ? localStorage.getItem("myid") : getRandString();
- if (!continuation)
- {
- // HACK: play a small silent sound to allow "new game" sound later
- // if tab not focused (TODO: does it really work ?!)
- new Audio("/sounds/silent.mp3").play().then(() => {}).catch(err => {});
- }
+ const humanContinuation = (localStorage.getItem("variant") === variant);
+ const computerContinuation = (localStorage.getItem("comp-variant") === variant);
+ this.myid = (humanContinuation ? localStorage.getItem("myid") : getRandString());
this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
const socketOpenListener = () => {
- if (continuation)
+ if (humanContinuation) //game VS human has priority
{
const fen = localStorage.getItem("fen");
const mycolor = localStorage.getItem("mycolor");
// Send ping to server (answer pong if opponent is connected)
this.conn.send(JSON.stringify({code:"ping",oppid:this.oppid}));
}
- else if (localStorage.getItem("newgame") === variant)
+ else if (computerContinuation)
{
- // New game request has been cancelled on disconnect
- this.newGame("human", undefined, undefined, undefined, undefined, "reconnect");
+ const fen = localStorage.getItem("comp-fen");
+ const mycolor = localStorage.getItem("comp-mycolor");
+ const moves = JSON.parse(localStorage.getItem("comp-moves"));
+ this.newGame("computer", fen, mycolor, undefined, moves, true);
}
};
const socketMessageListener = msg => {
const data = JSON.parse(msg.data);
switch (data.code)
{
+ case "duplicate":
+ // We opened another tab on the same game
+ this.mode = "idle";
+ this.vr = null;
+ alert("Already playing a game in this variant on another tab!");
+ break;
case "newgame": //opponent found
// oppid: opponent socket ID
this.newGame("human", data.fen, data.color, data.oppid);
// 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);
setTimeout(() => { modalBox.checked = false; }, 2000);
- if (this.mode == "human")
+ if (["human","computer"].includes(this.mode))
this.clearStorage();
this.mode = "idle";
this.cursor = this.vr.moves.length; //to navigate in finished game
return eogMessage;
},
setStorage: function() {
- localStorage.setItem("myid", this.myid);
- localStorage.setItem("variant", variant);
- localStorage.setItem("mycolor", this.mycolor);
- localStorage.setItem("oppid", this.oppid);
- localStorage.setItem("fenStart", this.fenStart);
- localStorage.setItem("moves", JSON.stringify(this.vr.moves));
- localStorage.setItem("fen", this.vr.getFen());
+ if (this.mode=="human")
+ {
+ localStorage.setItem("myid", this.myid);
+ localStorage.setItem("oppid", this.oppid);
+ }
+ // 'prefix' = "comp-" to resume games vs. computer
+ const prefix = (this.mode=="computer" ? "comp-" : "");
+ localStorage.setItem(prefix+"variant", variant);
+ localStorage.setItem(prefix+"mycolor", this.mycolor);
+ localStorage.setItem(prefix+"fenStart", this.fenStart);
+ localStorage.setItem(prefix+"moves", JSON.stringify(this.vr.moves));
+ localStorage.setItem(prefix+"fen", this.vr.getFen());
},
updateStorage: function() {
- localStorage.setItem("moves", JSON.stringify(this.vr.moves));
- localStorage.setItem("fen", this.vr.getFen());
+ const prefix = (this.mode=="computer" ? "comp-" : "");
+ localStorage.setItem(prefix+"moves", JSON.stringify(this.vr.moves));
+ localStorage.setItem(prefix+"fen", this.vr.getFen());
},
clearStorage: function() {
- delete localStorage["variant"];
- delete localStorage["myid"];
- delete localStorage["mycolor"];
- delete localStorage["oppid"];
- delete localStorage["fenStart"];
- delete localStorage["fen"];
- delete localStorage["moves"];
+ if (this.mode=="human")
+ {
+ delete localStorage["myid"];
+ delete localStorage["oppid"];
+ }
+ const prefix = (this.mode=="computer" ? "comp-" : "");
+ delete localStorage[prefix+"variant"];
+ delete localStorage[prefix+"mycolor"];
+ delete localStorage[prefix+"fenStart"];
+ delete localStorage[prefix+"fen"];
+ delete localStorage[prefix+"moves"];
},
// HACK because mini-css tooltips are persistent after click...
getRidOfTooltip: function(elt) {
this.hints = !this.hints;
setCookie("hints", this.hints ? "1" : "0");
},
- // TODO:
- setColor: function() {
- alert("Change");
+ setColor: function(e) {
+ this.color = e.target.options[e.target.selectedIndex].value;
+ setCookie("color", this.color);
},
- setSound: function() {
- alert("Change");
+ setSound: function(e) {
+ this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
+ setCookie("sound", this.sound);
},
clickGameSeek: function(e) {
this.getRidOfTooltip(e.currentTarget);
if (this.seek)
{
this.conn.send(JSON.stringify({code:"cancelnewgame"}));
- delete localStorage["newgame"]; //cancel game seek
this.seek = false;
}
else
{
const storageVariant = localStorage.getItem("variant");
if (!!storageVariant && storageVariant !== variant)
- {
- alert("Finish your " + storageVariant + " game first!");
- return;
- }
+ return alert("Finish your " + storageVariant + " game first!");
// Send game request and wait..
- localStorage["newgame"] = variant;
this.seek = true;
- this.clearStorage(); //in case of
try {
this.conn.send(JSON.stringify({code:"newgame", fen:fen}));
} catch (INVALID_STATE_ERR) {
return; //nothing achieved
}
- if (continuation !== "reconnect") //TODO: bad HACK...
- {
- let modalBox = document.getElementById("modal-newgame");
- modalBox.checked = true;
- setTimeout(() => { modalBox.checked = false; }, 2000);
- }
+ let modalBox = document.getElementById("modal-newgame");
+ modalBox.checked = true;
+ setTimeout(() => { modalBox.checked = false; }, 2000);
return;
}
+ if (this.mode == "computer" && mode == "human") { }
+ {
+ // Save current computer game to resume it later
+ this.setStorage();
+ }
this.vr = new VariantRules(fen, moves || []);
this.score = "*";
this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
this.mode = mode;
- this.incheck = []; //in case of
+ this.incheck = continuation
+ ? this.vr
+ : [];
this.fenStart = (continuation ? localStorage.getItem("fenStart") : fen);
if (mode=="human")
{
+
+
+
+//TODO: refactor this. (for computer mode too), lastMove getCheckSquares...
+
+
+
+
// Opponent found!
- if (!continuation)
+ if (!continuation) //not playing sound on game continuation
{
- // Not playing sound on game continuation:
- new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {});
+ if (this.sound >= 1)
+ new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {});
document.getElementById("modal-newgame").checked = false;
}
this.oppid = oppId;
- this.oppConnected = true;
+ this.oppConnected = !continuation;
this.mycolor = color;
this.seek = false;
if (!!moves && moves.length > 0) //imply continuation
this.incheck = this.vr.getCheckSquares(lastMove);
this.vr.play(lastMove, "ingame");
}
- delete localStorage["newgame"];
this.setStorage(); //in case of interruptions
}
else if (mode == "computer")
if (this.mycolor == 'b')
setTimeout(this.playComputerMove, 500);
}
- //else: against a (IRL) friend: nothing more to do
+ //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(() => this.play(compMove, "animate"), delay);
+ setTimeout(() => {
+ if (this.mode == "computer") //Warning: mode could have changed!
+ this.play(compMove, "animate")
+ }, delay);
},
// Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
getSquareId: function(o) {
this.selectedPiece.style.top = 0;
this.selectedPiece.style.display = "inline-block";
this.selectedPiece.style.zIndex = 3000;
- let startSquare = this.getSquareFromId(e.target.parentNode.id);
- const iCanPlay = this.mode!="idle"
- && (this.mode=="friend" || this.vr.canIplay(this.mycolor,startSquare));
- this.possibleMoves = iCanPlay ? this.vr.getPossibleMovesFrom(startSquare) : [];
+ const startSquare = this.getSquareFromId(e.target.parentNode.id);
+ this.possibleMoves = [];
+ if (this.mode != "idle")
+ {
+ const color = ["friend","problem"].includes(this.mode)
+ ? this.vr.turn
+ : this.mycolor;
+ if (this.vr.canIplay(color,startSquare))
+ this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
+ }
// Next line add moving piece just after current image
// (required for Crazyhouse reserve)
e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
// 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}));
- new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
+ if (this.sound == 2)
+ new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
if (this.mode != "idle")
{
this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
VariantRules.PlayOnBoard(this.vr.board, move);
this.$forceUpdate(); //TODO: ?!
}
- if (this.mode == "human")
+ if (["human","computer"].includes(this.mode))
this.updateStorage(); //after our moves and opponent moves
if (this.mode != "idle")
{
projects / vchess.git / blobdiff