public/javascripts/components/moveList.js

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