Commit | Line | Data |
---|---|---|
e71161fb BA |
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 | ||
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"], |
c6b8d37f BA |
30 | watch: { |
31 | cursor: function(newCursor) { | |
32 | if (window.innerWidth <= 767) return; //scrolling would hide chessboard | |
c6b8d37f BA |
33 | // $nextTick to wait for table > tr to be rendered |
34 | this.$nextTick(() => { | |
8477e53d BA |
35 | let curMove = document.querySelector(".td.highlight-lm"); |
36 | if (curMove) { | |
37 | curMove.scrollIntoView({ | |
c6b8d37f BA |
38 | behavior: "auto", |
39 | block: "nearest" | |
40 | }); | |
41 | } | |
42 | }); | |
43 | } | |
44 | }, | |
e71161fb BA |
45 | computed: { |
46 | evenNumbers: function() { | |
47 | return [...Array(this.moves.length).keys()].filter(i => i%2==0); | |
48 | } | |
49 | }, | |
430a2038 | 50 | methods: { |
e71161fb BA |
51 | notation: function(move) { |
52 | return getFullNotation(move); | |
53 | }, | |
dac39588 BA |
54 | gotoMove: function(index) { |
55 | this.$emit("goto-move", index); | |
6808d7a1 BA |
56 | } |
57 | } | |
430a2038 BA |
58 | }; |
59 | </script> | |
60 | ||
61 | <style lang="sass" scoped> | |
62 | .moves-list | |
8477e53d BA |
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% | |
910d631b | 84 | |
8477e53d | 85 | .td.highlight-lm |
430a2038 BA |
86 | background-color: plum |
87 | </style> |