Implemented multi-move possibility in a moves list => better support for multi-moves...
[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 .moves-list
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)"
12 )
13 | {{ notation(moves[moveIdx]) }}
14 .td(
15 v-if="moveIdx < moves.length-1"
16 :class="{'highlight-lm': cursor == moveIdx+1}"
17 @click="() => gotoMove(moveIdx+1)"
18 )
19 | {{ notation(moves[moveIdx+1]) }}
20 // Else: just add an empty cell
21 //.td(v-else)
22 </template>
23
24 <script>
25 import { store } from "@/store";
26 import { getFullNotation } from "@/utils/notation";
27 export default {
28 name: "my-move-list",
29 props: ["moves", "show", "cursor", "score", "message", "firstNum"],
30 watch: {
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");
36 if (curMove) {
37 curMove.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 notation: function(move) {
52 return getFullNotation(move);
53 },
54 gotoMove: function(index) {
55 this.$emit("goto-move", index);
56 }
57 }
58 };
59 </script>
60
61 <style lang="sass" scoped>
62 .moves-list
63 cursor: pointer
64 min-height: 1px
65 max-height: 500px
66 overflow: auto
67 background-color: white
68 width: 280px
69 & > .tr
70 clear: both
71 border-bottom: 1px solid lightgrey
72 & > .td
73 float: left
74 padding: 2% 0 2% 1%
75 &:first-child
76 color: grey
77 width: 15%
78 &:not(first-child)
79 width: 41%
80
81 @media screen and (max-width: 767px)
82 .moves-list
83 width: 100%
84
85 .td.highlight-lm
86 background-color: plum
87 </style>