+ loadGame: function(game, callback) {
+ const afterRetrieval = async (game) => {
+ const vModule = await import("@/variants/" + game.vname + ".js");
+ window.V = vModule.VariantRules;
+ this.vr = new V(game.fen);
+ const gtype = this.getGameType(game);
+ const tc = extractTime(game.cadence);
+ const myIdx = game.players.findIndex(p => {
+ return p.sid == this.st.user.sid || p.uid == this.st.user.id;
+ });
+ const mycolor = [undefined, "w", "b"][myIdx + 1]; //undefined for observers
+ if (!game.chats) game.chats = []; //live games don't have chat history
+ if (gtype == "corr") {
+ if (game.players[0].color == "b") {
+ // Adopt the same convention for live and corr games: [0] = white
+ [game.players[0], game.players[1]] = [
+ game.players[1],
+ game.players[0]
+ ];
+ }
+ // NOTE: clocks in seconds, initime in milliseconds
+ game.moves.sort((m1, m2) => m1.idx - m2.idx); //in case of
+ game.clocks = [tc.mainTime, tc.mainTime];
+ const L = game.moves.length;
+ if (game.score == "*") {
+ // Set clocks + initime
+ game.initime = [0, 0];
+ if (L >= 1) {
+ const gameLastupdate = game.moves[L-1].played;
+ game.initime[L % 2] = gameLastupdate;
+ if (L >= 2) {
+ game.clocks[L % 2] =
+ tc.mainTime - (Date.now() - gameLastupdate) / 1000;
+ }
+ }
+ }
+ // Sort chat messages from newest to oldest
+ game.chats.sort((c1, c2) => {
+ return c2.added - c1.added;
+ });
+ if (myIdx >= 0 && game.score == "*" && game.chats.length > 0) {
+ // Did a chat message arrive after my last move?
+ let dtLastMove = 0;
+ if (L == 1 && myIdx == 0)
+ dtLastMove = game.moves[0].played;
+ else if (L >= 2) {
+ if (L % 2 == 0) {
+ // It's now white turn
+ dtLastMove = game.moves[L-1-(1-myIdx)].played;
+ } else {
+ // Black turn:
+ dtLastMove = game.moves[L-1-myIdx].played;
+ }
+ }
+ if (dtLastMove < game.chats[0].added)
+ document.getElementById("chatBtn").classList.add("somethingnew");
+ }
+ // Now that we used idx and played, re-format moves as for live games
+ game.moves = game.moves.map(m => m.squares);
+ }
+ if (gtype == "live" && game.clocks[0] < 0) {
+ // Game is unstarted
+ game.clocks = [tc.mainTime, tc.mainTime];
+ if (game.score == "*") {
+ game.initime[0] = Date.now();
+ if (myIdx >= 0) {
+ // I play in this live game; corr games don't have clocks+initime
+ GameStorage.update(game.id, {
+ clocks: game.clocks,
+ initime: game.initime
+ });
+ }
+ }
+ }
+ // TODO: merge next 2 "if" conditions
+ if (!!game.drawOffer) {
+ if (game.drawOffer == "t")
+ // Three repetitions
+ this.drawOffer = "threerep";
+ else {
+ // Draw offered by any of the players:
+ if (myIdx < 0) this.drawOffer = "received";
+ else {
+ // I play in this game:
+ if (
+ (game.drawOffer == "w" && myIdx == 0) ||
+ (game.drawOffer == "b" && myIdx == 1)
+ )
+ this.drawOffer = "sent";
+ else this.drawOffer = "received";
+ }
+ }
+ }
+ if (!!game.rematchOffer) {
+ if (myIdx < 0) this.rematchOffer = "received";
+ else {
+ // I play in this game:
+ if (
+ (game.rematchOffer == "w" && myIdx == 0) ||
+ (game.rematchOffer == "b" && myIdx == 1)
+ )
+ this.rematchOffer = "sent";
+ else this.rematchOffer = "received";
+ }
+ }
+ this.repeat = {}; //reset: scan past moves' FEN:
+ let repIdx = 0;
+ let vr_tmp = new V(game.fenStart);
+ let curTurn = "n";
+ game.moves.forEach(m => {
+ playMove(m, vr_tmp);
+ const fenIdx = vr_tmp.getFen().replace(/ /g, "_");
+ this.repeat[fenIdx] = this.repeat[fenIdx]
+ ? this.repeat[fenIdx] + 1
+ : 1;
+ });
+ if (this.repeat[repIdx] >= 3) this.drawOffer = "threerep";
+ this.game = Object.assign(
+ // NOTE: assign mycolor here, since BaseGame could also be VS computer
+ {
+ type: gtype,
+ increment: tc.increment,
+ mycolor: mycolor,
+ // opponent sid not strictly required (or available), but easier
+ // at least oppsid or oppid is available anyway:
+ oppsid: myIdx < 0 ? undefined : game.players[1 - myIdx].sid,
+ oppid: myIdx < 0 ? undefined : game.players[1 - myIdx].uid
+ },
+ game,
+ );
+ if (this.gameIsLoading)
+ // Re-load game because we missed some moves:
+ // artificially reset BaseGame (required if moves arrived in wrong order)
+ this.$refs["basegame"].re_setVariables();
+ else {
+ // Initial loading:
+ this.gotMoveIdx = game.moves.length - 1;
+ // If we arrive here after 'nextGame' action, the board might be hidden
+ let boardDiv = document.querySelector(".game");
+ if (!!boardDiv && boardDiv.style.visibility == "hidden")
+ boardDiv.style.visibility = "visible";
+ }
+ this.re_setClocks();
+ this.$nextTick(() => {
+ this.game.rendered = true;
+ // Did lastate arrive before game was rendered?
+ if (this.lastate) this.processLastate();
+ });
+ if (this.lastateAsked) {
+ this.lastateAsked = false;
+ this.sendLastate(game.oppsid);
+ }
+ if (this.gameIsLoading) {
+ this.gameIsLoading = false;
+ if (this.gotMoveIdx >= game.moves.length)
+ // Some moves arrived meanwhile...
+ this.askGameAgain();
+ }
+ if (!!callback) callback();
+ };
+ if (!!game) {
+ afterRetrieval(game);
+ return;
+ }
+ if (this.gameRef.rid) {
+ // Remote live game: forgetting about callback func... (TODO: design)
+ this.send("askfullgame", { target: this.gameRef.rid });
+ } else {
+ // Local or corr game on server.
+ // NOTE: afterRetrieval() is never called if game not found
+ const gid = this.gameRef.id;
+ if (Number.isInteger(gid) || !isNaN(parseInt(gid))) {
+ // corr games identifiers are integers
+ ajax(
+ "/games",
+ "GET",
+ {
+ data: { gid: gid },
+ success: (res) => {
+ let g = res.game;
+ g.moves.forEach(m => {
+ m.squares = JSON.parse(m.squares);
+ });
+ afterRetrieval(g);
+ }
+ }
+ );
+ }
+ else
+ // Local game
+ GameStorage.get(this.gameRef.id, afterRetrieval);
+ }
+ },
+ re_setClocks: function() {
+ if (this.game.moves.length < 2 || this.game.score != "*") {
+ // 1st move not completed yet, or game over: freeze time
+ this.virtualClocks = this.game.clocks.map(s => ppt(s).split(':'));
+ return;
+ }
+ const currentTurn = this.vr.turn;
+ const currentMovesCount = this.game.moves.length;
+ const colorIdx = ["w", "b"].indexOf(currentTurn);
+ let countdown =
+ this.game.clocks[colorIdx] -
+ (Date.now() - this.game.initime[colorIdx]) / 1000;
+ this.virtualClocks = [0, 1].map(i => {
+ const removeTime =
+ i == colorIdx ? (Date.now() - this.game.initime[colorIdx]) / 1000 : 0;
+ return ppt(this.game.clocks[i] - removeTime).split(':');
+ });
+ this.clockUpdate = setInterval(
+ () => {
+ if (
+ countdown < 0 ||
+ this.game.moves.length > currentMovesCount ||
+ this.game.score != "*"
+ ) {
+ clearInterval(this.clockUpdate);
+ if (countdown < 0)
+ this.gameOver(
+ currentTurn == "w" ? "0-1" : "1-0",
+ "Time"
+ );
+ } else
+ this.$set(
+ this.virtualClocks,
+ colorIdx,
+ ppt(Math.max(0, --countdown)).split(':')
+ );
+ },
+ 1000
+ );
+ },
+ // Update variables and storage after a move:
+ processMove: function(move, data) {
+ if (!data) data = {};
+ const moveCol = this.vr.turn;
+ const doProcessMove = () => {
+ const colorIdx = ["w", "b"].indexOf(moveCol);
+ const nextIdx = 1 - colorIdx;
+ const origMovescount = this.game.moves.length;
+ let addTime = 0; //for live games
+ if (moveCol == this.game.mycolor && !data.receiveMyMove) {
+ if (this.drawOffer == "received")
+ // I refuse draw
+ this.drawOffer = "";
+ if (this.game.type == "live" && origMovescount >= 2) {
+ const elapsed = Date.now() - this.game.initime[colorIdx];
+ // elapsed time is measured in milliseconds
+ addTime = this.game.increment - elapsed / 1000;
+ }
+ }
+ // Update current game object:
+ playMove(move, this.vr);
+ // The move is played: stop clock
+ clearInterval(this.clockUpdate);
+ if (!data.score) {
+ // Received move, score has not been computed in BaseGame (!!noemit)
+ const score = this.vr.getCurrentScore();
+ if (score != "*") this.gameOver(score);
+ }
+ this.game.moves.push(move);
+ this.game.fen = this.vr.getFen();
+ if (this.game.type == "live") {
+ if (!!data.clock) this.game.clocks[colorIdx] = data.clock;
+ else this.game.clocks[colorIdx] += addTime;
+ }
+ // In corr games, just reset clock to mainTime:
+ else {
+ this.game.clocks[colorIdx] = extractTime(this.game.cadence).mainTime;
+ }
+ // NOTE: opponent's initime is reset after "gotmove" is received
+ if (
+ !this.game.mycolor ||
+ moveCol != this.game.mycolor ||
+ !!data.receiveMyMove
+ ) {
+ this.game.initime[nextIdx] = Date.now();
+ }
+ // If repetition detected, consider that a draw offer was received:
+ const fenObj = this.vr.getFenForRepeat();
+ this.repeat[fenObj] =
+ !!this.repeat[fenObj]
+ ? this.repeat[fenObj] + 1
+ : 1;
+ if (this.repeat[fenObj] >= 3) this.drawOffer = "threerep";
+ else if (this.drawOffer == "threerep") this.drawOffer = "";
+ if (!!this.game.mycolor && !data.receiveMyMove) {
+ // NOTE: 'var' to see that variable outside this block
+ var filtered_move = getFilteredMove(move);
+ }
+ if (moveCol == this.game.mycolor && !data.receiveMyMove) {
+ // Notify turn on MyGames page:
+ this.notifyMyGames(
+ "turn",
+ {
+ gid: this.gameRef.id,
+ turn: this.vr.turn
+ }
+ );
+ }
+ // Since corr games are stored at only one location, update should be
+ // done only by one player for each move:
+ if (
+ !!this.game.mycolor &&
+ !data.receiveMyMove &&
+ (this.game.type == "live" || moveCol == this.game.mycolor)
+ ) {
+ let drawCode = "";
+ switch (this.drawOffer) {
+ case "threerep":
+ drawCode = "t";
+ break;
+ case "sent":
+ drawCode = this.game.mycolor;
+ break;
+ case "received":
+ drawCode = V.GetOppCol(this.game.mycolor);
+ break;
+ }
+ if (this.game.type == "corr") {
+ // corr: only move, fen and score
+ this.updateCorrGame({
+ fen: this.game.fen,
+ move: {
+ squares: filtered_move,
+ played: Date.now(),
+ idx: origMovescount
+ },
+ // Code "n" for "None" to force reset (otherwise it's ignored)
+ drawOffer: drawCode || "n"
+ });
+ }
+ else {
+ const updateStorage = () => {
+ GameStorage.update(this.gameRef.id, {
+ fen: this.game.fen,
+ move: filtered_move,
+ moveIdx: origMovescount,
+ clocks: this.game.clocks,
+ initime: this.game.initime,
+ drawOffer: drawCode
+ });
+ };
+ // The active tab can update storage immediately
+ if (!document.hidden) updateStorage();
+ // Small random delay otherwise
+ else setTimeout(updateStorage, 500 + 1000 * Math.random());
+ }
+ }
+ // Send move ("newmove" event) to people in the room (if our turn)
+ if (moveCol == this.game.mycolor && !data.receiveMyMove) {
+ let sendMove = {
+ move: filtered_move,
+ index: origMovescount,
+ // color is required to check if this is my move (if several tabs opened)
+ color: moveCol,
+ cancelDrawOffer: this.drawOffer == ""
+ };
+ if (this.game.type == "live")
+ sendMove["clock"] = this.game.clocks[colorIdx];
+ this.opponentGotMove = false;
+ this.send("newmove", {data: sendMove});
+ // If the opponent doesn't reply gotmove soon enough, re-send move:
+ // Do this at most 2 times, because mpore would mean network issues,
+ // opponent would then be expected to disconnect/reconnect.
+ let counter = 1;
+ const currentUrl = document.location.href;
+ this.retrySendmove = setInterval(
+ () => {
+ if (
+ counter >= 3 ||
+ this.opponentGotMove ||
+ document.location.href != currentUrl //page change
+ ) {
+ clearInterval(this.retrySendmove);
+ return;
+ }
+ const oppsid = this.getOppsid();
+ if (!oppsid)
+ // Opponent is disconnected: he'll ask last state
+ clearInterval(this.retrySendmove);
+ else {
+ this.send("newmove", { data: sendMove, target: oppsid });
+ counter++;
+ }
+ },
+ 1500
+ );
+ }
+ else
+ // Not my move or I'm an observer: just start other player's clock
+ this.re_setClocks();
+ };
+ if (
+ this.game.type == "corr" &&
+ moveCol == this.game.mycolor &&
+ !data.receiveMyMove
+ ) {
+ let boardDiv = document.querySelector(".game");
+ const afterSetScore = () => {
+ doProcessMove();
+ if (this.st.settings.gotonext && this.nextIds.length > 0)
+ this.showNextGame();
+ else {
+ // The board might have been hidden:
+ if (boardDiv.style.visibility == "hidden")
+ boardDiv.style.visibility = "visible";
+ }
+ };
+ let el = document.querySelector("#buttonsConfirm > .acceptBtn");
+ // We may play several moves in a row: in case of, remove listener:
+ let elClone = el.cloneNode(true);
+ el.parentNode.replaceChild(elClone, el);
+ elClone.addEventListener(
+ "click",
+ () => {
+ document.getElementById("modalConfirm").checked = false;
+ if (!!data.score && data.score != "*")
+ // Set score first
+ this.gameOver(data.score, null, afterSetScore);
+ else afterSetScore();
+ }
+ );
+ // PlayOnBoard is enough, and more appropriate for Synchrone Chess
+ V.PlayOnBoard(this.vr.board, move);
+ const position = this.vr.getBaseFen();
+ V.UndoOnBoard(this.vr.board, move);
+ if (["all","byrow"].includes(V.ShowMoves)) {
+ this.curDiag = getDiagram({
+ position: position,
+ orientation: V.CanFlip ? this.game.mycolor : "w"
+ });
+ document.querySelector("#confirmDiv > .card").style.width =
+ boardDiv.offsetWidth + "px";
+ } else {
+ // Incomplete information: just ask confirmation
+ // Hide the board, because otherwise it could reveal infos
+ boardDiv.style.visibility = "hidden";
+ this.moveNotation = getFullNotation(move);
+ }
+ document.getElementById("modalConfirm").checked = true;
+ }
+ else {
+ // Normal situation
+ if (!!data.score && data.score != "*")
+ this.gameOver(data.score, null, doProcessMove);
+ else doProcessMove();
+ }
+ },
+ cancelMove: function() {
+ let boardDiv = document.querySelector(".game");
+ if (boardDiv.style.visibility == "hidden")
+ boardDiv.style.visibility = "visible";
+ document.getElementById("modalConfirm").checked = false;
+ this.$refs["basegame"].cancelLastMove();
+ },
+ // In corr games, callback to change page only after score is set:
+ gameOver: function(score, scoreMsg, callback) {
+ this.game.score = score;
+ if (!scoreMsg) scoreMsg = getScoreMessage(score);
+ this.game.scoreMsg = scoreMsg;
+ this.$set(this.game, "scoreMsg", scoreMsg);
+ const myIdx = this.game.players.findIndex(p => {
+ return p.sid == this.st.user.sid || p.uid == this.st.user.id;
+ });
+ if (myIdx >= 0) {
+ // OK, I play in this game
+ const scoreObj = {
+ score: score,
+ scoreMsg: scoreMsg
+ };
+ if (this.game.type == "live") {
+ GameStorage.update(this.gameRef.id, scoreObj);
+ if (!!callback) callback();
+ }
+ else this.updateCorrGame(scoreObj, callback);
+ // Notify the score to main Hall. TODO: only one player (currently double send)
+ this.send("result", { gid: this.game.id, score: score });
+ // Also to MyGames page (TODO: doubled as well...)
+ this.notifyMyGames(
+ "score",
+ {
+ gid: this.gameRef.id,
+ score: score
+ }
+ );
+ }
+ else if (!!callback) callback();
+ }
+ }
+};
+</script>