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","score","message","firstNum"],
   6   watch: {
   7     cursor: function(newCursor) {
   8       if (window.innerWidth <= 767)
   9         return; //moves list is below: scrolling would hide chessboard
  10       // Count grouped moves until the cursor (if multi-moves):
  11       let groupsCount = -1;
  12       let curCol = undefined;
  13       for (let i=0; i<newCursor; i++)
  14       {
  15         const m = this.moves[i];
  16         if (m.color != curCol)
  17         {
  18           groupsCount++;
  19           curCol = m.color;
  20         }
  21       }
  22       // $nextTick to wait for table > tr to be rendered
  23       this.$nextTick( () => {
  24         let rows = document.querySelectorAll('#movesList tr');
  25         if (rows.length > 0)
  26         {
  27           rows[Math.floor(Math.max(groupsCount,0)/2)].scrollIntoView({
  28             behavior: "auto",
  29             block: "nearest",
  30           });
  31         }
  32       });
  33     },
  34   },
  35   render(h) {
  36     if (this.moves.length == 0)
  37       return;
  38     let tableContent = [];
  39     let moveCounter = 0;
  40     let tableRow = undefined;
  41     let moveCells = undefined;
  42     let curCellContent = "";
  43     let firstIndex = 0;
  44     for (let i=0; i<this.moves.length; i++)
  45     {
  46       if (this.moves[i].color == "w")
  47       {
  48         if (i == 0 || i>0 && this.moves[i-1].color=="b")
  49         {
  50           if (!!tableRow)
  51           {
  52             tableRow.children = moveCells;
  53             tableContent.push(tableRow);
  54           }
  55           moveCells = [
  56             h(
  57               "td",
  58               { domProps: { innerHTML: (++moveCounter) + "." } }
  59             )
  60           ];
  61           tableRow = h(
  62             "tr",
  63             { }
  64           );
  65           curCellContent = "";
  66           firstIndex = i;
  67         }
  68       }
  69       // Next condition is fine because even if the first move is black,
  70       // there will be the "..." which count as white move.
  71       else if (this.moves[i].color == "b" && this.moves[i-1].color == "w")
  72         firstIndex = i;
  73       curCellContent += this.moves[i].notation;
  74       if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color)
  75         curCellContent += ",";
  76       else //color change
  77       {
  78         moveCells.push(
  79           h(
  80             "td",
  81             {
  82               domProps: { innerHTML: curCellContent },
  83               on: { click: () => this.gotoMove(i) },
  84               "class": { "highlight-lm":
  85                 this.cursor >= firstIndex && this.cursor <= i },
  86             }
  87           )
  88         );
  89         curCellContent = "";
  90       }
  91     }
  92     // Complete last row, which might not be full:
  93     if (moveCells.length-1 == 1)
  94     {
  95       moveCells.push(
  96         h(
  97           "td",
  98           { domProps: { innerHTML: "" } }
  99         )
 100       );
 101     }
 102     tableRow.children = moveCells;
 103     tableContent.push(tableRow);
 104     let rootElements = [];
 105     if (this.score != "*")
 106     {
 107       const scoreDiv = h("div",
 108         {
 109           id: "scoreInfo",
 110           style: {
 111             display: this.score!="*" ? "block" : "none",
 112           },
 113         },
 114         [
 115           h("p", this.score),
 116           h("p", this.message),
 117         ]
 118       );
 119       rootElements.push(scoreDiv);
 120     }
 121     rootElements.push(
 122       h(
 123         "table",
 124         {
 125           "class": {
 126             "moves-list": true,
 127           },
 128         },
 129         tableContent
 130       )
 131     );
 132     return h(
 133       "div",
 134       { },
 135       rootElements);
 136   },
 137   methods: {
 138     gotoMove: function(index) {
 139       this.$emit("goto-move", index);
 140     },
 141   },
 142 };
 143 </script>
 144
 145 <style lang="sass" scoped>
 146 .moves-list
 147   min-width: 250px
 148 @media screen and (max-width: 767px)
 149   .moves-list
 150     tr
 151       display: flex
 152       margin: 0
 153       padding: 0
 154       td
 155         text-align: left
 156 td.highlight-lm
 157   background-color: plum
 158 </style>