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       // $nextTick to wait for table > tr to be rendered
  29       this.$nextTick( () => {
  30         let rows = document.querySelectorAll('#movesList tr');
  31         if (rows.length > 0)
  32         {
  33           rows[Math.floor(newValue/2)].scrollIntoView({
  34             behavior: "auto",
  35             block: "nearest",
  36           });
  37         }
  38       });
  39     },
  40   },
  41   computed: {
  42     evenNumbers: function() {
  43       return [...Array(this.moves.length).keys()].filter(i => i%2==0);
  44     },
  45   },
  46   methods: {
  47         gotoMove: function(index) {
  48             this.$emit("goto-move", index);
  49         },
  50     },
  51 };
  52 </script>
  53
  54 <style lang="sass" scoped>
  55 .moves-list
  56   min-width: 250px
  57 td.highlight-lm
  58   background-color: plum
  59 </style>
  60
  61 <!-- Old render method:
  62   render(h) {
  63         if (this.moves.length == 0)
  64             return;
  65         let tableContent = [];
  66         let moveCounter = 0;
  67         let tableRow = undefined;
  68         let moveCells = undefined;
  69         let curCellContent = "";
  70         for (let i=0; i<this.moves.length; i++)
  71         {
  72             if (this.moves[i].color == "w")
  73             {
  74                 if (i == 0 || i>0 && this.moves[i-1].color=="b")
  75                 {
  76                     if (!!tableRow)
  77                     {
  78                         tableRow.children = moveCells;
  79                         tableContent.push(tableRow);
  80                     }
  81                     moveCells = [
  82                         h(
  83                             "td",
  84                             { domProps: { innerHTML: (++moveCounter) + "." } }
  85                         )
  86                     ];
  87                     tableRow = h(
  88                         "tr",
  89                         { }
  90                     );
  91                     curCellContent = "";
  92                 }
  93             }
  94             curCellContent += this.moves[i].notation;
  95             if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color)
  96                 curCellContent += ",";
  97             else //color change
  98             {
  99                 moveCells.push(
 100                     h(
 101                         "td",
 102                         {
 103                             domProps: { innerHTML: curCellContent },
 104                             on: { click: () => this.gotoMove(i) },
 105                             "class": { "highlight-lm": this.cursor == i },
 106                         }
 107                     )
 108                 );
 109                 curCellContent = "";
 110             }
 111         }
 112         // Complete last row, which might not be full:
 113         if (moveCells.length-1 == 1)
 114         {
 115       moveCells.push(
 116         h(
 117           "td",
 118           { domProps: { innerHTML: "" } }
 119         )
 120       );
 121         }
 122         tableRow.children = moveCells;
 123         tableContent.push(tableRow);
 124     const scoreDiv = h("div",
 125       {
 126         id: "scoreInfo",
 127         style: {
 128           display: this.score!="*" ? "block" : "none",
 129         },
 130       },
 131       [
 132         h("p", this.score),
 133         h("p", this.message),
 134       ]
 135     );
 136         const movesTable = h(
 137       "div",
 138       { },
 139       [
 140         scoreDiv,
 141         h(
 142           "table",
 143           {
 144             "class": {
 145               "moves-list": true,
 146             },
 147           },
 148           tableContent
 149             )
 150       ]
 151     );
 152         return movesTable;
 153     },
 154 -->