| 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> |