+ animateMove: function(move) {
+ let startSquare = document.getElementById(getSquareId(move.start));
+ let endSquare = document.getElementById(getSquareId(move.end));
+ let rectStart = startSquare.getBoundingClientRect();
+ let rectEnd = endSquare.getBoundingClientRect();
+ let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y};
+ let movingPiece =
+ document.querySelector("#" + getSquareId(move.start) + " > img.piece");
+ // HACK for animation (with positive translate, image slides "under background")
+ // Possible improvement: just alter squares on the piece's way...
+ squares = document.getElementsByClassName("board");
+ for (let i=0; i<squares.length; i++)
+ {
+ let square = squares.item(i);
+ if (square.id != getSquareId(move.start))
+ square.style.zIndex = "-1";
+ }
+ movingPiece.style.transform = "translate(" + translation.x + "px," +
+ translation.y + "px)";
+ movingPiece.style.transitionDuration = "0.2s";
+ movingPiece.style.zIndex = "3000";
+ setTimeout( () => {
+ for (let i=0; i<squares.length; i++)
+ squares.item(i).style.zIndex = "auto";
+ movingPiece.style = {}; //required e.g. for 0-0 with KR swap
+ this.play(move); //TODO: plutôt envoyer message "please play"
+ }, 250);
+ },
+ play: function(move, programmatic) {
+ let navigate = !move;
+ // Forbid playing outside analyze mode when cursor isn't at moves.length-1
+ // (except if we receive opponent's move, human or computer)
+ if (!navigate && this.mode != "analyze" && !programmatic
+ && this.cursor < this.moves.length-1)
+ {
+ return;
+ }
+ if (navigate)
+ {
+ if (this.cursor == this.moves.length-1)
+ return; //no more moves
+ move = this.moves[this.cursor+1];
+ }
+ if (!!programmatic) //computer or (remote) human opponent
+ {
+ if (this.cursor < this.moves.length-1)
+ this.gotoEnd(); //required to play the move
+ return this.animateMove(move);
+ }
+ // Not programmatic, or animation is over
+ if (!move.notation)
+ move.notation = this.vr.getNotation(move);
+ if (!move.color)
+ move.color = this.vr.turn;
+ this.vr.play(move);
+ this.cursor++;
+ this.lastMove = move;
+ if (!move.fen)
+ move.fen = this.vr.getFen();
+ if (this.settings.sound == 2)
+ new Audio("/sounds/move.mp3").play().catch(err => {});
+ if (this.mode == "human")
+ {
+ updateStorage(move); //after our moves and opponent moves
+ if (this.vr.turn == this.mycolor)
+ this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
+ }
+ else if (this.mode == "computer")
+ {
+ // Send the move to web worker (including his own moves)
+ this.compWorker.postMessage(["newmove",move]);
+ }
+ if (!navigate && (this.score == "*" || this.mode == "analyze"))
+ {
+ // Stack move on movesList at current cursor
+ if (this.cursor == this.moves.length)
+ this.moves.push(move);
+ else
+ this.moves = this.moves.slice(0,this.cursor-1).concat([move]);
+ }
+ // Is opponent in check?
+ this.incheck = this.vr.getCheckSquares(this.vr.turn);
+ const score = this.vr.getCurrentScore();
+ if (score != "*")
+ {
+ if (["human","computer"].includes(this.mode))
+ this.endGame(score);
+ else //just show score on screen (allow undo)
+ this.showScoreMsg(score);
+ // TODO: notify end of game (give score)
+ }
+ // subTurn condition for Marseille (and Avalanche) rules
+ else if ((this.mode == "computer" && (!this.vr.subTurn || this.vr.subTurn <= 1))
+ && (this.subMode == "auto" || this.vr.turn != this.mycolor))
+ {
+ this.playComputerMove();
+ }
+ // https://vuejs.org/v2/guide/list.html#Caveats (also for undo)
+ if (navigate)
+ this.$children[0].$forceUpdate(); //TODO!?
+ },
+ undo: function(move) {
+ let navigate = !move;
+ if (navigate)
+ {
+ if (this.cursor < 0)
+ return; //no more moves
+ move = this.moves[this.cursor];
+ }
+ this.vr.undo(move);
+ this.cursor--;
+ this.lastMove = (this.cursor >= 0 ? this.moves[this.cursor] : undefined);
+ if (navigate)
+ this.$children[0].$forceUpdate(); //TODO!?
+ if (this.settings.sound == 2)
+ new Audio("/sounds/undo.mp3").play().catch(err => {});
+ this.incheck = this.vr.getCheckSquares(this.vr.turn);
+ if (!navigate && this.mode == "analyze")
+ this.moves.pop();
+ if (navigate)
+ this.$forceUpdate(); //TODO!?
+ },
+ gotoMove: function(index) {
+ this.vr = new VariantRules(this.moves[index].fen);
+ this.cursor = index;
+ this.lastMove = this.moves[index];
+ },
+ gotoBegin: function() {
+ this.vr = new VariantRules(this.fenStart);
+ this.cursor = -1;
+ this.lastMove = null;
+ },
+ gotoEnd: function() {
+ this.gotoMove(this.moves.length-1);
+ },
+ flip: function() {
+ this.orientation = V.GetNextCol(this.orientation);
+ },