client/src/components/MoveList.vue

   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="moveIdx in evenNumbers")
   9         td {{ firstNum + moveIdx / 2 + 1 }}
  10         td(:class="{'highlight-lm': cursor == moveIdx}"
  11             @click="() => gotoMove(moveIdx)")
  12           | {{ moves[moveIdx].notation }}
  13         td(v-if="moveIdx < moves.length-1"
  14             :class="{'highlight-lm': cursor == moveIdx+1}"
  15             @click="() => gotoMove(moveIdx+1)")
  16           | {{ moves[moveIdx+1].notation }}
  17         // Else: just add an empty cell
  18         td(v-else)
  19 </template>
  20
  21 <script>
  22 // Component for moves list on the right
  23 export default {
  24   name: 'my-move-list',
  25     props: ["moves","cursor","score","message","firstNum"],
  26   watch: {
  27     cursor: function(newValue) {
  28       if (window.innerWidth <= 767)
  29         return; //moves list is below: scrolling would hide chessboard
  30       if (newValue < 0)
  31         newValue = 0; //avoid rows[-1] --> error
  32       // $nextTick to wait for table > tr to be rendered
  33       this.$nextTick( () => {
  34         let rows = document.querySelectorAll('#movesList tr');
  35         if (rows.length > 0)
  36         {
  37           rows[Math.floor(newValue/2)].scrollIntoView({
  38             behavior: "auto",
  39             block: "nearest",
  40           });
  41         }
  42       });
  43     },
  44   },
  45   computed: {
  46     evenNumbers: function() {
  47       return [...Array(this.moves.length).keys()].filter(i => i%2==0);
  48     },
  49   },
  50   methods: {
  51         gotoMove: function(index) {
  52             this.$emit("goto-move", index);
  53         },
  54     },
  55 };
  56 </script>
  57
  58 <style lang="sass" scoped>
  59 .moves-list
  60   min-width: 250px
  61 @media screen and (max-width: 767px)
  62   .moves-list
  63     tr
  64       display: flex
  65       margin: 0
  66       padding: 0
  67       td
  68         text-align: left
  69 td.highlight-lm
  70   background-color: plum
  71 </style>