73c10f0fbf771c87084fa030e009effa547aab71
[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="gmove,index in groupedMoves")
9 td(v-if="index%2==0")
10 | {{ firstNum + index / 2 + 1 }}
11 td(:class="{'highlight-lm': cursor == moveIdx}"
12 @click="() => gotoMove(moveIdx)")
13 | {{ moves[moveIdx].notation }}
14 td(v-if="moveIdx < moves.length-1"
15 :class="{'highlight-lm': cursor == moveIdx+1}"
16 @click="() => gotoMove(moveIdx+1)")
17 | {{ moves[moveIdx+1].notation }}
18 // Else: just add an empty cell
19 td(v-else)
20 </template>
21
22 <script>
23 // Component for moves list on the right
24 export default {
25 name: 'my-move-list',
26 props: ["moves","cursor","score","message","firstNum"],
27 watch: {
28 cursor: function(newValue) {
29 if (window.innerWidth <= 767)
30 return; //moves list is below: scrolling would hide chessboard
31 if (newValue < 0)
32 newValue = 0; //avoid rows[-1] --> error
33 // $nextTick to wait for table > tr to be rendered
34 this.$nextTick( () => {
35 let rows = document.querySelectorAll('#movesList tr');
36 if (rows.length > 0)
37 {
38 rows[Math.floor(newValue/2)].scrollIntoView({
39 behavior: "auto",
40 block: "nearest",
41 });
42 }
43 });
44 },
45 },
46 computed: {
47 groupedMoves: function() {
48 let groups = [];
49 let curCol = undefined;
50 for (let idx=0; idx < this.moves.length; idx++)
51 {
52 const m = this.moves[idx];
53 if (m.color == curCol)
54 {
55 const gidx = groups.length - 1;
56 groups[gidx].moves.push(m);
57 }
58 else
59 {
60 curCol = m.color;
61 groups.push({moves: [m], idx: groups.length});
62 }
63 }
64 return groups;
65 },
66 },
67 methods: {
68 gotoMove: function(index) {
69 this.$emit("goto-move", index);
70 },
71 },
72 };
73 </script>
74
75 <style lang="sass" scoped>
76 .moves-list
77 min-width: 250px
78 @media screen and (max-width: 767px)
79 .moves-list
80 tr
81 display: flex
82 margin: 0
83 padding: 0
84 td
85 text-align: left
86 td.highlight-lm
87 background-color: plum
88 </style>