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