Board(
:vr="vr"
:last-move="lastMove"
- :analyze="analyze"
+ :analyze="game.mode=='analyze'"
+ :score="game.score"
:user-color="game.mycolor"
:orientation="orientation"
:vname="game.vname"
:incheck="incheck"
@play-move="play"
)
- #turnIndicator(v-if="game.vname=='Dark' && game.score=='*'")
- | {{ st.tr[vr.turn + " to move"] }}
+ #turnIndicator(v-if="showTurn") {{ turn }}
#controls
button(@click="gotoBegin()") <<
button(@click="undo()") <
button(@click="play()") >
button(@click="gotoEnd()") >>
#belowControls
- #downloadDiv(v-if="game.vname!='Dark' || game.score!='*'")
+ #downloadDiv(v-if="allowDownloadPGN")
a#download(href="#")
button(@click="download()") {{ st.tr["Download"] }} PGN
- button(onClick="doClick('modalAdjust')") ⤢
+ button(onClick="window.doClick('modalAdjust')") ⤢
button(
- v-if="game.vname!='Dark' && game.mode!='analyze'"
+ v-if="canAnalyze"
@click="analyzePosition()"
)
| {{ st.tr["Analyse"] }}
- // NOTE: rather ugly hack to avoid showing twice "rules" link...
+ // NOTE: variants pages already have a "Rules" link on top
button(
v-if="!$route.path.match('/variants/')"
@click="showRules()"
"game.fenStart": function() {
this.re_setVariables();
},
- // Received a new move to play:
- "game.moveToPlay": function(move) {
- if (move) this.play(move, "receive");
- },
- // ...Or to undo (corr game, move not validated)
- "game.moveToUndo": function(move) {
- if (move) this.undo(move);
- }
},
computed: {
showMoves: function() {
- return this.game.vname != "Dark" || this.game.score != "*";
+ return this.game.score != "*" || (window.V && V.ShowMoves == "all");
},
- analyze: function() {
- return (
- this.game.mode == "analyze" ||
- // From Board viewpoint, a finished Dark game == analyze (TODO: unclear)
- (this.game.vname == "Dark" && this.game.score != "*")
- );
+ showTurn: function() {
+ return this.game.score == '*' && window.V && V.ShowMoves != "all";
+ },
+ turn: function() {
+ return this.st.tr[(this.vr.turn == 'w' ? "White" : "Black") + " to move"];
+ },
+ canAnalyze: function() {
+ return this.game.mode != "analyze" && window.V && V.CanAnalyze;
+ },
+ allowDownloadPGN: function() {
+ return this.game.score != "*" || (window.V && V.ShowMoves == "all");
}
},
created: function() {
},
methods: {
focusBg: function() {
- // NOTE: small blue border appears...
document.getElementById("baseGame").focus();
},
adjustBoard: function() {
},
re_setVariables: function() {
this.endgameMessage = "";
- this.orientation = this.game.mycolor || "w"; //default orientation for observed games
+ // "w": default orientation for observed games
+ this.orientation = this.game.mycolor || "w";
this.moves = JSON.parse(JSON.stringify(this.game.moves || []));
- // Post-processing: decorate each move with color + current FEN:
- // (to be able to jump to any position quickly)
- let vr_tmp = new V(this.game.fenStart); //vr is already at end of game
- this.firstMoveNumber = Math.floor(
- V.ParseFen(this.game.fenStart).movesCount / 2
- );
+ // Post-processing: decorate each move with color, notation and FEN
+ let vr_tmp = new V(this.game.fenStart);
+ const parsedFen = V.ParseFen(this.game.fenStart);
+ const firstMoveColor = parsedFen.turn;
+ this.firstMoveNumber = Math.floor(parsedFen.movesCount / 2);
this.moves.forEach(move => {
- // NOTE: this is doing manually what play() function below achieve,
- // but in a lighter "fast-forward" way
move.color = vr_tmp.turn;
move.notation = vr_tmp.getNotation(move);
vr_tmp.play(move);
move.fen = vr_tmp.getFen();
});
- if (
- (this.moves.length > 0 && this.moves[0].color == "b") ||
- (this.moves.length == 0 && vr_tmp.turn == "b")
- ) {
+ if (firstMoveColor == "b") {
// 'end' is required for Board component to check lastMove for e.p.
this.moves.unshift({
color: "w",
this.game.vname +
"/?fen=" +
this.vr.getFen().replace(/ /g, "_");
+ // Open in same tab in live games (against cheating)
if (this.game.type == "live") this.$router.push(newUrl);
- //open in same tab: against cheating...
- else window.open("#" + newUrl); //open in a new tab: more comfortable
+ else window.open("#" + newUrl);
},
download: function() {
const content = this.getPgn();
},
animateMove: function(move, callback) {
let startSquare = document.getElementById(getSquareId(move.start));
- // TODO: error "flush nextTick callbacks" when observer reloads page:
- // this late check is not a fix!
- if (!startSquare) return;
let endSquare = document.getElementById(getSquareId(move.end));
let rectStart = startSquare.getBoundingClientRect();
let rectEnd = endSquare.getBoundingClientRect();
let movingPiece = document.querySelector(
"#" + getSquareId(move.start) + " > img.piece"
);
- if (!movingPiece)
- //TODO: shouldn't happen
- return;
// HACK for animation (with positive translate, image slides "under background")
// Possible improvement: just alter squares on the piece's way...
const squares = document.getElementsByClassName("board");
}
movingPiece.style.transform =
"translate(" + translation.x + "px," + translation.y + "px)";
- movingPiece.style.transitionDuration = "0.2s";
+ movingPiece.style.transitionDuration = "0.25s";
movingPiece.style.zIndex = "3000";
setTimeout(() => {
for (let i = 0; i < squares.length; i++)
return;
}
const doPlayMove = () => {
- if (!!receive && this.cursor < this.moves.length - 1) this.gotoEnd(); //required to play the move
+ // To play a move, cursor must be at the end of the game:
+ if (!!receive && this.cursor < this.moves.length - 1) this.gotoEnd();
if (navigate) {
if (this.cursor == this.moves.length - 1) return; //no more moves
move = this.moves[this.cursor + 1];
if (!navigate && this.game.mode != "analyze")
this.$emit("newmove", move); //post-processing (e.g. computer play)
};
- if (!!receive && this.game.vname != "Dark")
+ if (!!receive && V.ShowMoves == "all")
this.animateMove(move, doPlayMove);
else doPlayMove();
},
this.vr.re_init(this.moves[index].fen);
this.cursor = index;
this.lastMove = this.moves[index];
+ this.incheck = this.vr.getCheckSquares(this.vr.turn);
},
gotoBegin: function() {
if (this.cursor == -1) return;
this.cursor = -1;
this.lastMove = null;
}
+ this.incheck = this.vr.getCheckSquares(this.vr.turn);
},
gotoEnd: function() {
if (this.cursor == this.moves.length - 1) return;
<style lang="sass" scoped>
[type="checkbox"]#modalEog+div .card
min-height: 45px
+
[type="checkbox"]#modalAdjust+div .card
padding: 5px
display: inline-block
width: 20%
margin: 0
+
#turnIndicator
text-align: center
+ font-weight: bold
+
#belowControls
border-top: 1px solid #2f4f4f
text-align: center
& > button
border-left: 1px solid #2f4f4f
margin: 0
+
#boardContainer
float: left
// TODO: later, maybe, allow movesList of variable width
// or e.g. between 250 and 350px (but more complicated)
+
#movesList
width: 280px
float: left
+
@media screen and (max-width: 767px)
#movesList
width: 100%
projects / vchess.git / blobdiff