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   render(h) {
   7     if (this.moves.length == 0) return h("div");
   8     let tableContent = [];
   9     let moveCounter = 0;
  10     let tableRow = undefined;
  11     let moveCells = undefined;
  12     let curCellContent = "";
  13     let firstIndex = 0;
  14     for (let i = 0; i < this.moves.length; i++) {
  15       if (this.moves[i].color == "w") {
  16         if (i == 0 || (i > 0 && this.moves[i - 1].color == "b")) {
  17           if (tableRow) {
  18             tableRow.children = moveCells;
  19             tableContent.push(tableRow);
  20           }
  21           moveCells = [
  22             h("td", { domProps: { innerHTML: ++moveCounter + "." } })
  23           ];
  24           tableRow = h("tr", {});
  25           curCellContent = "";
  26           firstIndex = i;
  27         }
  28       }
  29       // Next condition is fine because even if the first move is black,
  30       // there will be the "..." which count as white move.
  31       else if (this.moves[i].color == "b" && this.moves[i - 1].color == "w")
  32         firstIndex = i;
  33       curCellContent += this.moves[i].notation;
  34       if (
  35         i < this.moves.length - 1 &&
  36         this.moves[i + 1].color == this.moves[i].color
  37       )
  38         curCellContent += ",";
  39       //color change
  40       else {
  41         moveCells.push(
  42           h("td", {
  43             domProps: { innerHTML: curCellContent },
  44             on: { click: () => this.gotoMove(i) },
  45             class: {
  46               "highlight-lm": this.cursor >= firstIndex && this.cursor <= i
  47             }
  48           })
  49         );
  50         curCellContent = "";
  51       }
  52     }
  53     // Complete last row, which might not be full:
  54     if (moveCells.length - 1 == 1) {
  55       moveCells.push(h("td", { domProps: { innerHTML: "" } }));
  56     }
  57     tableRow.children = moveCells;
  58     tableContent.push(tableRow);
  59     let rootElements = [];
  60     if (!!this.score && this.score != "*") {
  61       const scoreDiv = h(
  62         "div",
  63         {
  64           id: "scoreInfo",
  65           style: {
  66             display: this.score != "*" ? "block" : "none"
  67           }
  68         },
  69         [h("p", this.score), h("p", store.state.tr[this.message])]
  70       );
  71       rootElements.push(scoreDiv);
  72     }
  73     rootElements.push(
  74       h(
  75         "table",
  76         {
  77           class: {
  78             "moves-list": true
  79           }
  80         },
  81         tableContent
  82       )
  83     );
  84     return h("div", {}, rootElements);
  85   },
  86   watch: {
  87     cursor: function(newCursor) {
  88       if (window.innerWidth <= 767) return; //scrolling would hide chessboard
  89       // Count grouped moves until the cursor (if multi-moves):
  90       let groupsCount = 0;
  91       let curCol = undefined;
  92       for (let i = 0; i < newCursor; i++) {
  93         const m = this.moves[i];
  94         if (m.color != curCol) {
  95           groupsCount++;
  96           curCol = m.color;
  97         }
  98       }
  99       // $nextTick to wait for table > tr to be rendered
 100       this.$nextTick(() => {
 101         let rows = document.querySelectorAll("#movesList tr");
 102         if (rows.length > 0) {
 103           rows[Math.floor(groupsCount / 2)].scrollIntoView({
 104             behavior: "auto",
 105             block: "nearest"
 106           });
 107         }
 108       });
 109     }
 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
 123 td.highlight-lm
 124   background-color: plum
 125 </style>
 126
 127 <!-- TODO: use template function + multi-moves: much easier
 128 <template lang="pug">
 129 div
 130   #scoreInfo(v-if="score!='*'")
 131     p {{ score }}
 132     p {{ message }}
 133   table.moves-list
 134     tbody
 135       tr(v-for="moveIdx in evenNumbers")
 136         td {{ firstNum + moveIdx / 2 + 1 }}
 137         td(:class="{'highlight-lm': cursor == moveIdx}"
 138             @click="() => gotoMove(moveIdx)")
 139           | {{ moves[moveIdx].notation }}
 140         td(v-if="moveIdx < moves.length-1"
 141             :class="{'highlight-lm': cursor == moveIdx+1}"
 142             @click="() => gotoMove(moveIdx+1)")
 143           | {{ moves[moveIdx+1].notation }}
 144         // Else: just add an empty cell
 145         td(v-else)
 146 </template>
 147
 148 <script>
 149 // Component for moves list on the right
 150 export default {
 151   name: 'my-move-list',
 152     props: ["moves","cursor","score","message","firstNum"],
 153   watch: {
 154     cursor: function(newValue) {
 155       if (window.innerWidth <= 767)
 156         return; //moves list is below: scrolling would hide chessboard
 157       if (newValue < 0)
 158         newValue = 0; //avoid rows[-1] => error
 159       // $nextTick to wait for table > tr to be rendered
 160       this.$nextTick( () => {
 161         let rows = document.querySelectorAll('#movesList tr');
 162         if (rows.length > 0)
 163         {
 164           rows[Math.floor(newValue/2)].scrollIntoView({
 165             behavior: "auto",
 166             block: "nearest",
 167           });
 168         }
 169       });
 170     },
 171   },
 172   computed: {
 173     evenNumbers: function() {
 174       return [...Array(this.moves.length).keys()].filter(i => i%2==0);
 175     },
 176   },
 177   methods: {
 178         gotoMove: function(index) {
 179             this.$emit("goto-move", index);
 180         },
 181     },
 182 };
 183 </script>
 184 -->