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