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"], //TODO: other props for e.g. players names + connected indicator
   6     // --> we could also add turn indicator here
   7     data: function() {
   8         return {
   9             something: "", //TODO?
  10         };
  11     },
  12     // TODO: extend rendering for more than 2 colors: would be a parameter
  13     // in that case some moves for some colors could be just skipped (if a player lost)
  14     render(h) {
  15         if (this.moves.length == 0)
  16             return;
  17         const nbColors = 2;
  18         // TODO: name colors "white", "black", "red", "yellow" ?
  19         if (this.moves[0].color == "b")
  20             this.moves.unshift({color: "w", notation: "..."});
  21         let tableContent = [];
  22         let moveCounter = 0;
  23         let tableRow = undefined;
  24         let moveCells = undefined;
  25         let curCellContent = "";
  26         for (let i=0; i<this.moves.length; i++)
  27         {
  28             if (this.moves[i].color == "w")
  29             {
  30                 if (i == 0 || i>0 && this.moves[i-1].color=="b")
  31                 {
  32                     if (!!tableRow)
  33                     {
  34                         tableRow.children = moveCells;
  35                         tableContent.push(tableRow);
  36                     }
  37                     moveCells = [
  38                         h(
  39                             "td",
  40                             { domProps: { innerHTML: (++moveCounter) + "." } }
  41                         )
  42                     ];
  43                     tableRow = h(
  44                         "tr",
  45                         { }
  46                     );
  47                     curCellContent = "";
  48                 }
  49             }
  50             curCellContent += this.moves[i].notation;
  51             if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color)
  52                 curCellContent += ",";
  53             else //color change
  54             {
  55                 moveCells.push(
  56                     h(
  57                         "td",
  58                         {
  59                             domProps: { innerHTML: curCellContent },
  60                             on: { click: () => this.gotoMove(i) },
  61                             "class": { "highlight-lm": this.cursor == i },
  62                         }
  63                     )
  64                 );
  65                 curCellContent = "";
  66             }
  67         }
  68         // Complete last row, which might not be full:
  69         if (moveCells.length-1 < nbColors)
  70         {
  71             const delta = nbColors - (moveCells.length-1);
  72             for (let i=0; i<delta; i++)
  73             {
  74                 moveCells.push(
  75                     h(
  76                         "td",
  77                         { domProps: { innerHTML: "" } }
  78                     )
  79                 );
  80             }
  81         }
  82         tableRow.children = moveCells;
  83         tableContent.push(tableRow);
  84         const movesTable = h(
  85             "table",
  86             { },
  87             tableContent
  88         );
  89         return movesTable;
  90     },
  91     methods: {
  92         gotoMove: function(index) {
  93             this.$emit("goto-move", index);
  94         },
  95     },
  96 };
  97 </script>