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