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()"
},
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() {
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();
},
<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%