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