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 {{ 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"],
  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>
  62
  63 <!-- Old render method:
  64   render(h) {
  65         if (this.moves.length == 0)
  66             return;
  67         let tableContent = [];
  68         let moveCounter = 0;
  69         let tableRow = undefined;
  70         let moveCells = undefined;
  71         let curCellContent = "";
  72         for (let i=0; i<this.moves.length; i++)
  73         {
  74             if (this.moves[i].color == "w")
  75             {
  76                 if (i == 0 || i>0 && this.moves[i-1].color=="b")
  77                 {
  78                     if (!!tableRow)
  79                     {
  80                         tableRow.children = moveCells;
  81                         tableContent.push(tableRow);
  82                     }
  83                     moveCells = [
  84                         h(
  85                             "td",
  86                             { domProps: { innerHTML: (++moveCounter) + "." } }
  87                         )
  88                     ];
  89                     tableRow = h(
  90                         "tr",
  91                         { }
  92                     );
  93                     curCellContent = "";
  94                 }
  95             }
  96             curCellContent += this.moves[i].notation;
  97             if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color)
  98                 curCellContent += ",";
  99             else //color change
 100             {
 101                 moveCells.push(
 102                     h(
 103                         "td",
 104                         {
 105                             domProps: { innerHTML: curCellContent },
 106                             on: { click: () => this.gotoMove(i) },
 107                             "class": { "highlight-lm": this.cursor == i },
 108                         }
 109                     )
 110                 );
 111                 curCellContent = "";
 112             }
 113         }
 114         // Complete last row, which might not be full:
 115         if (moveCells.length-1 == 1)
 116         {
 117       moveCells.push(
 118         h(
 119           "td",
 120           { domProps: { innerHTML: "" } }
 121         )
 122       );
 123         }
 124         tableRow.children = moveCells;
 125         tableContent.push(tableRow);
 126     const scoreDiv = h("div",
 127       {
 128         id: "scoreInfo",
 129         style: {
 130           display: this.score!="*" ? "block" : "none",
 131         },
 132       },
 133       [
 134         h("p", this.score),
 135         h("p", this.message),
 136       ]
 137     );
 138         const movesTable = h(
 139       "div",
 140       { },
 141       [
 142         scoreDiv,
 143         h(
 144           "table",
 145           {
 146             "class": {
 147               "moves-list": true,
 148             },
 149           },
 150           tableContent
 151             )
 152       ]
 153     );
 154         return movesTable;
 155     },
 156 -->