client/src/components/MoveList.vue

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