ca538924290b548d9c88b3dab55f51e1de252724
[vchess.git] / client / src / components / MoveList.vue
1 <template lang="pug">
2 div
3 #scoreInfo(v-if="score!='*'")
4 p {{ score }}
5 p {{ message }}
6 table#movesList
7 tbody
8 tr(v-for="moveIdx in evenNumbers")
9 td {{ firstNum + moveIdx / 2 + 1 }}
10 td(:class="{'highlight-lm': cursor == moveIdx}"
11 @click="() => gotoMove(moveIdx)")
12 | {{ moves[moveIdx].notation }}
13 td(v-if="moveIdx < moves.length-1"
14 :class="{'highlight-lm': cursor == moveIdx+1}"
15 @click="() => gotoMove(moveIdx+1)")
16 | {{ moves[moveIdx+1].notation }}
17 // Else: just add an empty cell
18 td(v-else)
19 </template>
20
21 <script>
22 // Component for moves list on the right
23 export default {
24 name: 'my-move-list',
25 props: ["moves","cursor","score","message","firstNum"],
26 watch: {
27 cursor: function(newValue) {
28 if (newValue < 0)
29 newValue = 0; //avoid rows[-1] --> error
30 // $nextTick to wait for table > tr to be rendered
31 this.$nextTick( () => {
32 let rows = document.querySelectorAll('#movesList tr');
33 if (rows.length > 0)
34 {
35 rows[Math.floor(newValue/2)].scrollIntoView({
36 behavior: "auto",
37 block: "nearest",
38 });
39 }
40 });
41 },
42 },
43 computed: {
44 evenNumbers: function() {
45 return [...Array(this.moves.length).keys()].filter(i => i%2==0);
46 },
47 },
48 methods: {
49 gotoMove: function(index) {
50 this.$emit("goto-move", index);
51 },
52 },
53 };
54 </script>
55
56 <style lang="sass" scoped>
57 .moves-list
58 min-width: 250px
59 td.highlight-lm
60 background-color: plum
61 </style>