Commit | Line | Data |
---|---|---|
430a2038 BA |
1 | <template lang="pug"> |
2 | div | |
3 | #scoreInfo(v-if="score!='*'") | |
4 | p {{ score }} | |
5 | p {{ message }} | |
d36ca198 | 6 | table.moves-list |
430a2038 | 7 | tbody |
144c9003 BA |
8 | tr(v-for="gmove,index in groupedMoves") |
9 | td(v-if="index%2==0") | |
10 | | {{ firstNum + index / 2 + 1 }} | |
430a2038 | 11 | td(:class="{'highlight-lm': cursor == moveIdx}" |
96e9585a | 12 | @click="() => gotoMove(moveIdx)") |
430a2038 BA |
13 | | {{ moves[moveIdx].notation }} |
14 | td(v-if="moveIdx < moves.length-1" | |
15 | :class="{'highlight-lm': cursor == moveIdx+1}" | |
96e9585a | 16 | @click="() => gotoMove(moveIdx+1)") |
430a2038 BA |
17 | | {{ moves[moveIdx+1].notation }} |
18 | // Else: just add an empty cell | |
19 | td(v-else) | |
20 | </template> | |
21 | ||
cf2343ce | 22 | <script> |
a3ab5fdb | 23 | // Component for moves list on the right |
cf2343ce BA |
24 | export default { |
25 | name: 'my-move-list', | |
5157ce0b | 26 | props: ["moves","cursor","score","message","firstNum"], |
430a2038 BA |
27 | watch: { |
28 | cursor: function(newValue) { | |
d36ca198 BA |
29 | if (window.innerWidth <= 767) |
30 | return; //moves list is below: scrolling would hide chessboard | |
3837d4f7 BA |
31 | if (newValue < 0) |
32 | newValue = 0; //avoid rows[-1] --> error | |
430a2038 BA |
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({ | |
63ca2b89 BA |
39 | behavior: "auto", |
40 | block: "nearest", | |
430a2038 BA |
41 | }); |
42 | } | |
43 | }); | |
44 | }, | |
45 | }, | |
46 | computed: { | |
144c9003 BA |
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; | |
430a2038 BA |
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 | |
41c80bb6 BA |
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 | |
430a2038 BA |
86 | td.highlight-lm |
87 | background-color: plum | |
88 | </style> |