3 #scoreInfo(v-if="score!='*'")
7 .tr(v-for="moveIdx in evenNumbers")
8 .td {{ firstNum + moveIdx / 2 + 1 }}
9 .td(v-if="moveIdx < moves.length-1 || show == 'all'"
10 :class="{'highlight-lm': cursor == moveIdx}"
11 @click="() => gotoMove(moveIdx)"
13 | {{ notation(moves[moveIdx]) }}
15 v-if="moveIdx < moves.length-1"
16 :class="{'highlight-lm': cursor == moveIdx+1}"
17 @click="() => gotoMove(moveIdx+1)"
19 | {{ notation(moves[moveIdx+1]) }}
20 // Else: just add an empty cell
25 import { store } from "@/store";
26 import { getFullNotation } from "@/utils/notation";
29 props: ["moves", "show", "cursor", "score", "message", "firstNum"],
36 cursor: function(newCursor) {
37 if (window.innerWidth <= 767) return; //scrolling would hide chessboard
38 // $nextTick to wait for table > tr to be rendered
39 this.$nextTick(() => {
40 let curMove = document.querySelector(".td.highlight-lm");
42 curMove.scrollIntoView({
51 evenNumbers: function() {
52 return [...Array(this.moves.length).keys()].filter(i => i%2==0);
56 notation: function(move) {
57 return getFullNotation(move);
59 gotoMove: function(index) {
60 this.$emit("goto-move", index);
66 <style lang="sass" scoped>
72 background-color: white
76 border-bottom: 1px solid lightgrey
86 @media screen and (max-width: 767px)
91 background-color: plum