client/src/components/MoveList.vue

   1 <script>
   2 // Component for moves list on the right
   3 export default {
   4   name: 'my-move-list',
   5     props: ["moves","cursor"],
   6     render(h) {
   7         if (this.moves.length == 0)
   8             return;
   9         let tableContent = [];
  10         let moveCounter = 0;
  11         let tableRow = undefined;
  12         let moveCells = undefined;
  13         let curCellContent = "";
  14         for (let i=0; i<this.moves.length; i++)
  15         {
  16             if (this.moves[i].color == "w")
  17             {
  18                 if (i == 0 || i>0 && this.moves[i-1].color=="b")
  19                 {
  20                     if (!!tableRow)
  21                     {
  22                         tableRow.children = moveCells;
  23                         tableContent.push(tableRow);
  24                     }
  25                     moveCells = [
  26                         h(
  27                             "td",
  28                             { domProps: { innerHTML: (++moveCounter) + "." } }
  29                         )
  30                     ];
  31                     tableRow = h(
  32                         "tr",
  33                         { }
  34                     );
  35                     curCellContent = "";
  36                 }
  37             }
  38             curCellContent += this.moves[i].notation;
  39             if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color)
  40                 curCellContent += ",";
  41             else //color change
  42             {
  43                 moveCells.push(
  44                     h(
  45                         "td",
  46                         {
  47                             domProps: { innerHTML: curCellContent },
  48                             on: { click: () => this.gotoMove(i) },
  49                             "class": { "highlight-lm": this.cursor == i },
  50                         }
  51                     )
  52                 );
  53                 curCellContent = "";
  54             }
  55         }
  56         // Complete last row, which might not be full:
  57         if (moveCells.length-1 == 1)
  58         {
  59       moveCells.push(
  60         h(
  61           "td",
  62           { domProps: { innerHTML: "" } }
  63         )
  64       );
  65         }
  66         tableRow.children = moveCells;
  67         tableContent.push(tableRow);
  68         const movesTable = h(
  69       "div",
  70       { },
  71       [h(
  72               "table",
  73               { },
  74               tableContent
  75           )]
  76     );
  77         return movesTable;
  78     },
  79     methods: {
  80         gotoMove: function(index) {
  81             this.$emit("goto-move", index);
  82         },
  83     },
  84 };
  85 </script>