client/src/components/MoveList.vue

   1 <template lang="pug">
   2 div
   3   input#modalAdjust.modal(type="checkbox")
   4   div#adjuster(
   5     role="dialog"
   6     data-checkbox="modalAdjust"
   7   )
   8     .card.text-center
   9       label.modal-close(for="modalAdjust")
  10       label(for="boardSize") {{ st.tr["Board size"] }}
  11       input#boardSize.slider(
  12         type="range"
  13         min="0"
  14         max="100"
  15         value="50"
  16         @input="adjustBoard()"
  17       )
  18   #aboveMoves
  19     // NOTE: variants pages already have a "Rules" link on top
  20     span#rulesBtn(
  21       v-if="!$route.path.match('/variants/')"
  22       @click="clickRulesBtn()"
  23       :class="btnRulesClass"
  24     )
  25       | {{ st.tr["Rules"] }}
  26     button(
  27       :class="btnTooltipClass()"
  28       onClick="window.doClick('modalAdjust')"
  29       :aria-label="st.tr['Resize board']"
  30     )
  31       img.inline(src="/images/icons/resize.svg")
  32     button#analyzeBtn(
  33       v-if="canAnalyze"
  34       :class="btnTooltipClass()"
  35       @click="$emit('analyze')"
  36       :aria-label="st.tr['Analyse']"
  37     )
  38       img.inline(src="/images/icons/analyse.svg")
  39     #downloadDiv(v-if="canDownload")
  40       a#download(href="#")
  41       button(
  42         :class="btnTooltipClass()"
  43         @click="$emit('download')"
  44         :aria-label="st.tr['Download'] + ' PGN'"
  45       )
  46         img.inline(src="/images/icons/download.svg")
  47   #scoreInfo(v-if="score!='*'")
  48     span.score {{ score }}
  49     span.score-msg {{ st.tr[message] }}
  50   .moves-list
  51     .tr(v-for="moveIdx in evenNumbers")
  52       .td {{ firstNum + moveIdx / 2 }}
  53       .td(
  54         :class="{'highlight-lm': cursor == moveIdx}"
  55         @click="() => gotoMove(moveIdx)"
  56         v-html="notation(moveIdx)")
  57       .td(
  58         v-if="moveIdx < moves.length-1"
  59         :class="{'highlight-lm': cursor == moveIdx+1}"
  60         @click="() => gotoMove(moveIdx+1)"
  61         v-html="notation(moveIdx + 1)")
  62 </template>
  63
  64 <script>
  65 import { store } from "@/store";
  66 import { getFullNotation } from "@/utils/notation";
  67 import { processModalClick } from "@/utils/modalClick";
  68 export default {
  69   name: "my-move-list",
  70   props: [
  71     "moves", "show", "canAnalyze", "canDownload",
  72     "vname", "cursor", "score", "message", "firstNum"],
  73   data: function() {
  74     return {
  75       st: store.state
  76     };
  77   },
  78   mounted: function() {
  79     document.getElementById("adjuster")
  80       .addEventListener("click", processModalClick);
  81     // Take full width on small screens:
  82     const winBound = Math.min(window.innerWidth, window.innerHeight);
  83     let boardSize = (window.innerWidth >= 768 ? 0.7 : 1.0) * winBound;
  84     const movesWidth = window.innerWidth >= 768 ? 280 : 0;
  85     document.getElementById("boardContainer").style.width = boardSize + "px";
  86     let gameContainer = document.getElementById("gameContainer");
  87     gameContainer.style.width = boardSize + movesWidth + "px";
  88     const maxWidth =
  89       Math.min(window.innerHeight, window.innerWidth - movesWidth);
  90     document.getElementById("boardSize").value = (boardSize * 100) / maxWidth;
  91     window.addEventListener("resize", () => this.adjustBoard());
  92   },
  93   beforeDestroy: function() {
  94     window.removeEventListener("resize", this.adjustBoard);
  95   },
  96   watch: {
  97     cursor: function(newCursor) {
  98       if (window.innerWidth <= 767) return; //scrolling would hide chessboard
  99       // $nextTick to wait for table > tr to be rendered
 100       this.$nextTick(() => {
 101         let curMove = document.querySelector(".td.highlight-lm");
 102         if (!curMove && this.moves.length > 0) {
 103           // Cursor is before game beginning, and some moves were made:
 104           curMove =
 105             document.querySelector(".moves-list > .tr:first-child > .td");
 106         }
 107         if (!!curMove) {
 108           curMove.scrollIntoView({
 109             behavior: "auto",
 110             block: "nearest"
 111           });
 112         }
 113       });
 114     }
 115   },
 116   computed: {
 117     evenNumbers: function() {
 118       return [...Array(this.moves.length).keys()].filter(i => i%2==0);
 119     },
 120     btnRulesClass: function() {
 121       // "rr" for "rules read"
 122       return {
 123         highlightRules:
 124           !!this.vname && !localStorage.getItem("rr_" + this.vname)
 125       };
 126     }
 127   },
 128   methods: {
 129     notation: function(moveIdx) {
 130       const move = this.moves[moveIdx];
 131       if (this.score != "*") return getFullNotation(move);
 132       if (
 133         ['none','highlight'].includes(this.show) ||
 134         (
 135           this.show == "byrow" &&
 136           moveIdx == this.moves.length-1 &&
 137           moveIdx % 2 == 0
 138         )
 139       ) {
 140         return "?";
 141       }
 142       return getFullNotation(move);
 143     },
 144     btnTooltipClass: function() {
 145       return { tooltip: !("ontouchstart" in window) };
 146     },
 147     clickRulesBtn: function() {
 148       const key = "rr_" + this.vname;
 149       if (!localStorage.getItem(key)) {
 150         localStorage.setItem(key, '1');
 151         document.getElementById("rulesBtn").classList.remove("highlightRules");
 152       }
 153       this.$emit("showrules");
 154     },
 155     gotoMove: function(index) {
 156       // Goto move except if click on current move:
 157       if (this.cursor != index) this.$emit("goto-move", index);
 158     },
 159     adjustBoard: function(vertical) {
 160       const boardContainer = document.getElementById("boardContainer");
 161       if (!boardContainer) return; //no board on page
 162       const movesWidth = window.innerWidth >= 768 ? 280 : 0;
 163       let gameContainer = document.getElementById("gameContainer");
 164       if (vertical) {
 165         const bRect =
 166           document.getElementById("rootBoardElement").getBoundingClientRect();
 167         if (bRect.bottom > window.innerHeight) {
 168           const maxHeight = window.innerHeight - 20;
 169           gameContainer.style.height = maxHeight + "px";
 170           const boardSize = maxHeight * bRect.width / bRect.height;
 171           boardContainer.style.width = boardSize + "px";
 172           gameContainer.style.width = boardSize + movesWidth + "px";
 173           this.$emit("redraw-board");
 174           setTimeout( () => window.scroll(0, bRect.top), 1000);
 175         }
 176       }
 177       else {
 178         const k = document.getElementById("boardSize").value;
 179         // TODO: these 160 and 280 are arbitrary...
 180         const minBoardWidth =
 181           (window.innerWidth <= 767 || "ontouchstart" in window) ? 160 : 240;
 182         // Value of 0 is board min size; 100 is window.width [- movesWidth]
 183         const maxWidth =
 184           Math.min(window.innerHeight, window.innerWidth - movesWidth);
 185         const boardSize =
 186           minBoardWidth + (k * (maxWidth - minBoardWidth)) / 100;
 187         boardContainer.style.width = boardSize + "px";
 188         gameContainer.style.width = boardSize + movesWidth + "px";
 189         this.$emit("redraw-board");
 190       }
 191     }
 192   }
 193 };
 194 </script>
 195
 196 <style lang="sass" scoped>
 197 .moves-list
 198   user-select: none
 199   cursor: pointer
 200   min-height: 1px
 201   max-height: 500px
 202   overflow: auto
 203   background-color: white
 204   width: 280px
 205   & > .tr
 206     clear: both
 207     border-bottom: 1px solid lightgrey
 208     & > .td
 209       float: left
 210       padding: 2% 0 2% 2%
 211       &:first-child
 212         color: grey
 213         width: 13%
 214       &:not(first-child)
 215         width: 40.5%
 216
 217 @media screen and (max-width: 767px)
 218   .moves-list
 219     width: 100%
 220
 221 .td.highlight-lm
 222   background-color: plum
 223
 224 .highlightRules
 225   padding: 3px 5px
 226   background-color: yellow
 227
 228 #boardSizeBtnContainer
 229   width: 100%
 230   text-align: center
 231
 232 [type="checkbox"]#modalAdjust+div .card
 233   padding: 5px
 234
 235 img.inline
 236   height: 22px
 237   @media screen and (max-width: 767px)
 238     height: 18px
 239
 240 #scoreInfo
 241   margin: 10px 0
 242   @media screen and (max-width: 767px)
 243     margin: 5px 0
 244
 245 span.score
 246   display: inline-block
 247   margin-left: 10px
 248   font-weight: bold
 249
 250 span.score-msg
 251   display: inline-block
 252   margin-left: 10px
 253   font-style: italic
 254
 255 #downloadDiv
 256   display: inline-block
 257   margin: 0
 258
 259 span#rulesBtn
 260   cursor: pointer
 261   display: inline-block
 262   margin: 0 10px
 263   font-weight: bold
 264
 265 button
 266   margin: 0
 267   &.active
 268     background-color: #48C9B0
 269
 270 #aboveMoves button
 271   padding-bottom: 5px
 272 </style>