client/src/components/MoveList.vue

   1 <template lang="pug">
   2 div
   3   #scoreInfo(v-if="score!='*'")
   4     p {{ score }}
   5     p {{ st.tr[message] }}
   6   .moves-list
   7     .tr(v-for="moveIdx in evenNumbers")
   8       .td {{ firstNum + moveIdx / 2 + 1 }}
   9       .td(v-if="moveIdx < moves.length-1 || show == 'all'"
  10         :class="{'highlight-lm': cursor == moveIdx}"
  11         @click="() => gotoMove(moveIdx)"
  12       )
  13         | {{ notation(moves[moveIdx]) }}
  14       .td(
  15         v-if="moveIdx < moves.length-1"
  16         :class="{'highlight-lm': cursor == moveIdx+1}"
  17         @click="() => gotoMove(moveIdx+1)"
  18       )
  19         | {{ notation(moves[moveIdx+1]) }}
  20       // Else: just add an empty cell
  21       //.td(v-else)
  22 </template>
  23
  24 <script>
  25 import { store } from "@/store";
  26 import { getFullNotation } from "@/utils/notation";
  27 export default {
  28   name: "my-move-list",
  29   props: ["moves", "show", "cursor", "score", "message", "firstNum"],
  30   data: function() {
  31     return {
  32       st: store.state
  33     };
  34   },
  35   watch: {
  36     cursor: function(newCursor) {
  37       if (window.innerWidth <= 767) return; //scrolling would hide chessboard
  38       // $nextTick to wait for table > tr to be rendered
  39       this.$nextTick(() => {
  40         let curMove = document.querySelector(".td.highlight-lm");
  41         if (curMove) {
  42           curMove.scrollIntoView({
  43             behavior: "auto",
  44             block: "nearest"
  45           });
  46         }
  47       });
  48     }
  49   },
  50   computed: {
  51     evenNumbers: function() {
  52       return [...Array(this.moves.length).keys()].filter(i => i%2==0);
  53     }
  54   },
  55   methods: {
  56     notation: function(move) {
  57       return getFullNotation(move);
  58     },
  59     gotoMove: function(index) {
  60       this.$emit("goto-move", index);
  61     }
  62   }
  63 };
  64 </script>
  65
  66 <style lang="sass" scoped>
  67 .moves-list
  68   cursor: pointer
  69   min-height: 1px
  70   max-height: 500px
  71   overflow: auto
  72   background-color: white
  73   width: 280px
  74   & > .tr
  75     clear: both
  76     border-bottom: 1px solid lightgrey
  77     & > .td
  78       float: left
  79       padding: 2% 0 2% 1%
  80       &:first-child
  81         color: grey
  82         width: 15%
  83       &:not(first-child)
  84         width: 41%
  85
  86 @media screen and (max-width: 767px)
  87   .moves-list
  88     width: 100%
  89
  90 .td.highlight-lm
  91   background-color: plum
  92 </style>