Partial fix for marseilleChess (moveList is bad)
[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.moves-list
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 (window.innerWidth <= 767)
29 return; //moves list is below: scrolling would hide chessboard
30 if (newValue < 0)
31 newValue = 0; //avoid rows[-1] --> error
32 // $nextTick to wait for table > tr to be rendered
33 this.$nextTick( () => {
34 let rows = document.querySelectorAll('#movesList tr');
35 if (rows.length > 0)
36 {
37 rows[Math.floor(newValue/2)].scrollIntoView({
38 behavior: "auto",
39 block: "nearest",
40 });
41 }
42 });
43 },
44 },
45 computed: {
46 evenNumbers: function() {
47 return [...Array(this.moves.length).keys()].filter(i => i%2==0);
48 },
49 },
50 methods: {
51 gotoMove: function(index) {
52 this.$emit("goto-move", index);
53 },
54 },
55 };
56 </script>
57
58 <style lang="sass" scoped>
59 .moves-list
60 min-width: 250px
61 @media screen and (max-width: 767px)
62 .moves-list
63 tr
64 display: flex
65 margin: 0
66 padding: 0
67 td
68 text-align: left
69 td.highlight-lm
70 background-color: plum
71 </style>