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"],
31 cursor: function(newCursor) {
32 if (window.innerWidth <= 767) return; //scrolling would hide chessboard
33 // $nextTick to wait for table > tr to be rendered
34 this.$nextTick(() => {
35 let curMove = document.querySelector(".td.highlight-lm");
37 curMove.scrollIntoView({
46 evenNumbers: function() {
47 return [...Array(this.moves.length).keys()].filter(i => i%2==0);
51 notation: function(move) {
52 return getFullNotation(move);
54 gotoMove: function(index) {
55 this.$emit("goto-move", index);
61 <style lang="sass" scoped>
67 background-color: white
71 border-bottom: 1px solid lightgrey
81 @media screen and (max-width: 767px)
86 background-color: plum