client/src/components/MoveList.vue

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