Commit | Line | Data |
---|---|---|
e71161fb BA |
1 | <template lang="pug"> |
2 | div | |
3 | #scoreInfo(v-if="score!='*'") | |
4 | p {{ score }} | |
311cba76 | 5 | p {{ st.tr[message] }} |
e71161fb BA |
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 | ||
cf2343ce | 24 | <script> |
fcd299a3 | 25 | import { store } from "@/store"; |
e71161fb | 26 | import { getFullNotation } from "@/utils/notation"; |
cf2343ce | 27 | export default { |
6808d7a1 | 28 | name: "my-move-list", |
933fd1f9 | 29 | props: ["moves", "show", "cursor", "score", "message", "firstNum"], |
311cba76 BA |
30 | data: function() { |
31 | return { | |
32 | st: store.state | |
33 | }; | |
34 | }, | |
c6b8d37f BA |
35 | watch: { |
36 | cursor: function(newCursor) { | |
37 | if (window.innerWidth <= 767) return; //scrolling would hide chessboard | |
c6b8d37f BA |
38 | // $nextTick to wait for table > tr to be rendered |
39 | this.$nextTick(() => { | |
8477e53d BA |
40 | let curMove = document.querySelector(".td.highlight-lm"); |
41 | if (curMove) { | |
42 | curMove.scrollIntoView({ | |
c6b8d37f BA |
43 | behavior: "auto", |
44 | block: "nearest" | |
45 | }); | |
46 | } | |
47 | }); | |
48 | } | |
49 | }, | |
e71161fb BA |
50 | computed: { |
51 | evenNumbers: function() { | |
52 | return [...Array(this.moves.length).keys()].filter(i => i%2==0); | |
53 | } | |
54 | }, | |
430a2038 | 55 | methods: { |
e71161fb BA |
56 | notation: function(move) { |
57 | return getFullNotation(move); | |
58 | }, | |
dac39588 BA |
59 | gotoMove: function(index) { |
60 | this.$emit("goto-move", index); | |
6808d7a1 BA |
61 | } |
62 | } | |
430a2038 BA |
63 | }; |
64 | </script> | |
65 | ||
66 | <style lang="sass" scoped> | |
67 | .moves-list | |
8477e53d BA |
68 | cursor: pointer |
69 | min-height: 1px | |
70 | max-height: 500px | |
71 | overflow: auto | |
72 | background-color: white | |
73 | width: 280px | |
74 | & > .tr | |
75 | clear: both | |
76 | border-bottom: 1px solid lightgrey | |
77 | & > .td | |
78 | float: left | |
79 | padding: 2% 0 2% 1% | |
80 | &:first-child | |
81 | color: grey | |
82 | width: 15% | |
83 | &:not(first-child) | |
84 | width: 41% | |
85 | ||
86 | @media screen and (max-width: 767px) | |
87 | .moves-list | |
88 | width: 100% | |
910d631b | 89 | |
8477e53d | 90 | .td.highlight-lm |
430a2038 BA |
91 | background-color: plum |
92 | </style> |