client/src/components/MoveList.vue

   1 <template lang="pug">
   2 div
   3   #scoreInfo(v-if="score!='*'")
   4     p {{ score }}
   5     p {{ message }}
   6   table#movesList
   7     tbody
   8       tr(v-for="moveIdx in evenNumbers")
   9         td {{ firstNum + moveIdx / 2 + 1 }}
  10         td(:class="{'highlight-lm': cursor == moveIdx}"
  11             data-label="White move" @click="() => gotoMove(moveIdx)")
  12           | {{ moves[moveIdx].notation }}
  13         td(v-if="moveIdx < moves.length-1"
  14             :class="{'highlight-lm': cursor == moveIdx+1}"
  15             data-label="Black move" @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 (newValue < 0)
  29         newValue = 0; //avoid rows[-1] --> error
  30       // $nextTick to wait for table > tr to be rendered
  31       this.$nextTick( () => {
  32         let rows = document.querySelectorAll('#movesList tr');
  33         if (rows.length > 0)
  34         {
  35           rows[Math.floor(newValue/2)].scrollIntoView({
  36             behavior: "auto",
  37             block: "nearest",
  38           });
  39         }
  40       });
  41     },
  42   },
  43   computed: {
  44     evenNumbers: function() {
  45       return [...Array(this.moves.length).keys()].filter(i => i%2==0);
  46     },
  47   },
  48   methods: {
  49         gotoMove: function(index) {
  50             this.$emit("goto-move", index);
  51         },
  52     },
  53 };
  54 </script>
  55
  56 <style lang="sass" scoped>
  57 .moves-list
  58   min-width: 250px
  59 td.highlight-lm
  60   background-color: plum
  61 </style>