label.modal-close(for="modalEog")
h3#eogMessage.section {{ endgameMessage }}
.row
- .col-sm-12.col-md-9.col-lg-8
+ #boardContainer.col-sm-12.col-md-9
Board(:vr="vr" :last-move="lastMove" :analyze="analyze"
:user-color="game.mycolor" :orientation="orientation"
:vname="game.vname" @play-move="play")
- .button-group
+ #controls
button(@click="gotoBegin") <<
button(@click="() => undo()") <
button(@click="flip") ⇅
#pgnDiv
a#download(href="#")
button(@click="download") {{ st.tr["Download PGN"] }}
- .col-sm-12.col-md-3.col-lg-4
+ .col-sm-12.col-md-3
MoveList(v-if="showMoves"
:moves="moves" :cursor="cursor" @goto-move="gotoMove")
</template>
document.getElementById("baseGame").focus();
},
handleKeys: function(e) {
+ if ([32,37,38,39,40].includes(e.keyCode))
+ e.preventDefault();
switch (e.keyCode)
{
case 37:
case 39:
this.play();
break;
- case 28:
+ case 38:
this.gotoBegin();
break;
case 40:
this.gotoEnd();
break;
case 32:
- e.preventDefault();
this.flip();
break;
}
},
gotoBegin: function() {
this.vr.re_init(this.game.fenStart);
- this.cursor = -1;
- this.lastMove = null;
+ if (this.moves.length > 0 && this.moves[0].notation == "...")
+ {
+ this.cursor = 0;
+ this.lastMove = this.moves[0];
+ }
+ else
+ {
+ this.cursor = -1;
+ this.lastMove = null;
+ }
},
gotoEnd: function() {
this.gotoMove(this.moves.length-1);
},
};
</script>
+
+<style lang="sass">
+#modal-eog+div .card
+ overflow: hidden
+#pgnDiv, #fenDiv
+ text-align: center
+ margin-left: auto
+ margin-right: auto
+@media screen and (min-width: 768px)
+ #controls
+ width: 400px
+@media screen and (max-width: 767px)
+ .game
+ width: 100%
+#controls
+ margin-top: 10px
+ button
+ display: inline-block
+ width: 20%
+ margin: 0
+#boardContainer
+ margin-top: 5px
+ >div
+ margin-left: auto
+ margin-right: auto
+</style>