| {{ notation(moves[moveIdx]) }}
.td(
v-if="moveIdx < moves.length-1"
- :class="{'highlight-lm': cursor == moveIdx+1}"
+ :class="{'highlight-lm': highlightBlackmove(moveIdx+1)}"
@click="() => gotoMove(moveIdx+1)"
)
| {{ notation(moves[moveIdx+1]) }}
};
},
mounted: function() {
- document.getElementById("adjuster").addEventListener(
- "click",
- processModalClick);
+ document.getElementById("adjuster")
+ .addEventListener("click", processModalClick);
if ("ontouchstart" in window) {
// Disable tooltips on smartphones:
document.querySelectorAll("#aboveMoves .tooltip").forEach(elt => {
// $nextTick to wait for table > tr to be rendered
this.$nextTick(() => {
let curMove = document.querySelector(".td.highlight-lm");
- if (!curMove && this.moves.length > 0)
+ if (!curMove && this.moves.length > 0) {
// Cursor is before game beginning, and some moves were made:
- curMove = document.querySelector(".moves-list > .tr:first-child > .td");
+ curMove =
+ document.querySelector(".moves-list > .tr:first-child > .td");
+ }
if (!!curMove) {
curMove.scrollIntoView({
behavior: "auto",
notation: function(move) {
return getFullNotation(move);
},
+ highlightBlackmove: function(moveIdx) {
+ return (
+ this.cursor == moveIdx ||
+ (this.show == "byrow" && this.cursor == moveIdx + 1)
+ );
+ },
gotoMove: function(index) {
this.$emit("goto-move", index);
},
padding: 5px
img.inline
- height: 24px
+ height: 22px
@media screen and (max-width: 767px)
height: 18px
button
margin: 0
-button.tooltip
+#aboveMoves button
padding-bottom: 5px
</style>