X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FMoveList.vue;h=1209dd99c6a57a2dad0e6e4da536fe3493634ec7;hb=d36ca1989daec86e5ad4b2e65c8a045af171fafd;hp=70756cc3d4ff0be7b4ca5eabbe363f2cb54f9bfd;hpb=430a203855578f9bbf4c851165c6066a741ff1f8;p=vchess.git diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue index 70756cc3..1209dd99 100644 --- a/client/src/components/MoveList.vue +++ b/client/src/components/MoveList.vue @@ -3,16 +3,16 @@ div #scoreInfo(v-if="score!='*'") p {{ score }} p {{ message }} - table#movesList + table.moves-list tbody tr(v-for="moveIdx in evenNumbers") - td {{ moveIdx / 2 + 1 }} + td {{ firstNum + moveIdx / 2 + 1 }} td(:class="{'highlight-lm': cursor == moveIdx}" - data-label="White move" @click="() => gotoMove(moveIdx)") + @click="() => gotoMove(moveIdx)") | {{ moves[moveIdx].notation }} td(v-if="moveIdx < moves.length-1" :class="{'highlight-lm': cursor == moveIdx+1}" - data-label="Black move" @click="() => gotoMove(moveIdx+1)") + @click="() => gotoMove(moveIdx+1)") | {{ moves[moveIdx+1].notation }} // Else: just add an empty cell td(v-else) @@ -22,17 +22,21 @@ div // Component for moves list on the right export default { name: 'my-move-list', - props: ["moves","cursor","score","message"], + props: ["moves","cursor","score","message","firstNum"], watch: { cursor: function(newValue) { + if (window.innerWidth <= 767) + return; //moves list is below: scrolling would hide chessboard + if (newValue < 0) + newValue = 0; //avoid rows[-1] --> error // $nextTick to wait for table > tr to be rendered this.$nextTick( () => { let rows = document.querySelectorAll('#movesList tr'); if (rows.length > 0) { rows[Math.floor(newValue/2)].scrollIntoView({ - behavior: 'smooth', - block: 'center' + behavior: "auto", + block: "nearest", }); } }); @@ -57,98 +61,3 @@ export default { td.highlight-lm background-color: plum - -