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; //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
 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 -->